Nouveau tutoriel

Les internautes qui souhaitent s’initier à HTML  &  CSS trouveront désormais leur bonheur sur mon site.
Toujours le même principe : le minimum de blabla et le maximum d’exemples.
Ce tutoriel comprend trois parties :

  • premiers pas
  • mise en page
  • premier site

La troisième partie est en cours de rédaction et sera prochainement en ligne.
HTML & CSS – grands débutants

Publié dans HTML&CSS -débutants | Laisser un commentaire

Applications avec HTML5

Dans sa version 5 HTML intègre désormais le format SVG (via le conteneur SVG), HTML5 c’est aussi de nouvelles API JavaScript.

HTML5 au sens large c’est aussi toutes les nouveautés de formatage de CSS3.

En mixant tous ces langages dans une même page (HTML, CSS, SVG, JavaScript) il est désormais possible de réaliser des applications sympathiques.

Je vous invite à utiliser deux applications et un jeu qui sont en fait des fichiers HTML !

une calculette
obtention du code RGB
le jeu de squash

Publié dans HTML 5 | Laisser un commentaire

Dessiner et animer avec Canvas

Si vous voulez créer et remplir une zone de dessin dans une page web vous avez le choix entre deux technologies. Vous pouvez utiliser le langage SVG ou utiliser l’API Canvas.

    Concernant les animations voire les jeux vous avez aussi un choix entre deux solutions :

  • créer des objets SVG et les animer en JavaScript
  • utiliser uniquement l’API Canvas c’est à dire uniquement du JavaScript

Concernant les animations, Qu’est ce qui change au niveau de la fonction JavaScript qui est répétée régulièrement ?
Dans le premier cas le code JS consiste uniquement à modifier certains attributs des formes SVG (qui sont des noeuds du DOM) alors que dans le deuxième cas il faut à chaque fois effacer la zone de dessin puis redessiner les formes avec des emplacements et/ou des tailles différents. Donc dans le deuxième cas le code JS est plus lourd mais cela ne veut pas dire qu’il s’exécute moins vite …
En effet dans le premier cas on fait appel à l’API DOM qui utilise beaucoup de ressources et est lente. Ce qui n’est pas le cas dans la deuxième solution.

Dessiner et animer avec Canvas

Publié dans canvas, JavaScript | Laisser un commentaire

Animation avec SVG & JavaScript

Vous avez réalisé une superbe forme complexe avec SVG (en réalisant un groupe de formes de base  :  voir tutoriel SVG) et vous souhaitez animer cette forme complexe.

    Et bien sachez que vous avez alors deux solutions à votre disposition :

  • utiliser les balises d’animation de SVG
  • utiliser JavaScript et plus précisément l’API DOM

Je vous déconseille la première solution. En effet les navigateurs récents ont implémenté SVG mais parfois partiellement. Donc pour les formes de bases il n’y a aucun problème d’interprétation. Par contre dès que vous utilisez les balises animate ou animateMotion alors le rendu devient aléatoire …

Les objets SVG appartiennent au DOM comme les balises HTML. Donc avec JavaScript et plus précisément l’API DOM vous pouvez modifier les attributs, le formatage des objets SVG. En termes plus simples vous pouvez réaliser des animations voire carrément des jeux. Avec cette deuxième solution vous avez un code universel !

Tutoriel sur les animations en SVG

Publié dans JavaScript, SVG | Laisser un commentaire

Tutoriel SVG

Vous rêvez de réaliser un site avec une superbe bannière mais vous ne savez pas comment vous y prendre.
Vous avez entendu parler de Flash mais vous ne voulez pas investir dans ce logiciel.
Et bien sachez qu’il y une solution alternative et gratuite : SVG
SVG est un langage XML permet de produire des images vectorielles c’est à dire des images qui peuvent être agrandies sans perte de qualité.
Avec HTML5 l’incorporation de code SVG dans une page web est aussi facile que l’intégration de code CSS ou de code JavaScript puisque HTML propose désormais le conteneur SVG pour accueillir le code SVG …
Pour une personne qui connaît le HTML l’apprentissage du SVG est très facile. Car le SVG c’est comme le HTML : des balises avec des attributs. Et on peut mettre en forme les objets SVG avec le CSS !

Pour découvrir ce langage promis à un bel avenir visitez mon site

Tutoriel SVG

Publié dans SVG | Marqué avec | Laisser un commentaire

Tutoriel HTML5

La nouvelle version de HTML c’est :

  • la simplification du codage en particulier du doctype
  • Les balises structurantes qui évitent de recourir aux fameux DIV ID qui rendent le code rapidement illisible
  • Les nouveaux types pour la saisie via un formulaire qui évitent souvent de recourir à JavaScript pour le contrôle saisie côté client
  • Les balises AUDIO et VIDEO qui dispensent de recourir à Flash …
  • De nouveaux attributs de balise et en particulier l’attribut contenteditable qui peut rendre modifiable n’importe quelle boîte …

Mais HTML5 c’est aussi un enrichissement notable de son langage de programmation : le JavaScript. Le JavaScript s’enrichit en effet de nombreuses fonctionnalités (nouvelles API) :

  • canvas : pour dessiner et animer une page web
  • le Web Storage qui est appelé à remplacer avantageusement les fameux cookies et variables de session de PHP
  • la géolocalisation
  • le drag and drop (ou glisser-déposer) qui devait être géré avec la bibliothèque JQUERY
  • Une nouvelle version du DOM avec en particulier de nouvelles méthodes pour manipuler les noeuds mais aussi une gestion des événements améliorée

Si vous avez envie de découvrir toutes ces nouveautés Rendez vous sur mon site !

Tutoriel HTML5

Publié dans HTML 5 | Laisser un commentaire

Tutoriel CSS3

Si vous souhaitez prendre connaissance de toutes les nouveautés apportées par la version 3 de CSS (et elles sont nombreuses) rendez sur vous mon site dédié à HTML-CSS & SVG

Tutoriel CSS3

    Vous découvrirez qu’il est désormais possible :

  • de numéroter automatiquement des titres dans une page web
  • d’ombrer les textes et les boîtes facilement
  • de produire le multicolonnage du texte sans se prendre la tête
  • de mettre à disposition du visiteur une police de caractère exotique
  • de produire de jolis dégradés
  • de réaliser des animations certes basiques mais sans une ligne de code …
  • etc.
Publié dans CSS 3 | Laisser un commentaire