Je poursuis mes recherches et ma veille technologique sur ces technologies prometteuses que sont HTML5 & co (CSS3, API Javascript, Canvas, …).

Voici donc la suite des outils commencée ici :

Animation

CSS3 apporte la notion d’animation et de transition (une animation est un enchainement de transitions par rapport à une ligne de temps timeline). Ces transitions utilisent des fonctions d’easing qui permettent des animations non linéaire. Il faut configurer la transition via la propriété transition-timing-function (avec les préfixes qui vont bien pour la comptatibilité). Voici les différentes valeurs possible :

• linear: Vitesse constante (valeur par défaut)
• cubic-bezier: La vitesse sera calculée grâce à une courbe de Bézier cubique définie par deux points de contrôles : P0 et P1 (Il faudra donc fournir 4 paramètres : P0x, P0y, P1x et P1y).
• ease: correspondant à cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in: correspondant à : cubic-bezier(0.42, 0, 1, 1)
• ease-inout: correspondant à : cubic-bezier(0.42, 0, 0.58, 1)
• ease-out: correspondant à : cubic-bezier(0, 0, 0.58, 1)

L’outil cubic-bezier permet de configurer via une interface graphique les valeurs des 4 paramètres et de visualiser le rendu de l’animation.

Pour finir sur les transitions/animations, animatable est une page qui regroupe des exemples de transition sur toutes les propriétés animables.

Gestion des préfixes CSS

Les spécifications concernant HTML5 et CSS3 ne sont encore qu’à l’état de draft mais les navigateurs ont déjà commencé à implémenter certaines règles. Concernant CSS3, il faut, pour chaque navigateur, préfixer les propriétés concernées afin de pouvoir les utiliser (-ms pour IE, -moz pour Firefox, -webkit pour les navigateurs basé sur webkit, -o pour Opera …). Il devient alors lourd de rajouter autant de lignes qu’il y a de préfixes afin de faire fonctionner son code dans tous les navigateurs. C’est la qu’interviennent les librairies JavaScript prefixfree et CssFx qui gèrent pour vous l’ajout de ces préfixes.

Démo HTML5

Sites de démos des nouveautés HTML5 :

• html5demos.com
• slides.html5rocks.com (présentation interactive (en html 5) des technologies associées à HTML5).
• html5labs de Microsoft
• Différentes Démo HTML5
• Site de démo du support CSS3 dans IE10

Normalisation CSS

normalize.css est une alternative au fameux RESET CSS mais au lieu de mettre des valeurs à zéro et devoir vous même spécifier vos propres valeurs, normalize.css normalise les valeurs pour que celles-ci soient identique sur tous les navigateurs. Cette technique est notamment utilisée par HTML5 boilerplate, le template HTML/CSS/JS à la mode.

Testeur de code JavaScript en ligne

http://jsfiddle.net/ permet de tester son code Javascript et de le partager. La page est découper en 4 grandes parties : le code HTML, le code CSS, le code JS et le résultat. La partie résultat correspond à l’interprétation du HTML, CSS et JavaScript. Il est possible de rajouter facilement les librairies JS les plus utilisés (JQuery, Prototype, dojo, YUI, ExtJS, …) ou votre propre script. JSFiddle supporte également CoffeeScript (langage permettant de générer du Javascript) et Sass (Surcouche à CSS). Vous pouvez sauvegarder votre code qui vous générera une URL que vous pourrez ensuite partager. Très utile pour expliquer un problème à un ami à distance ou pour poser une question sur un forum ou stackoverflow.com. L’outil inclut même la validation (via JSLint) et la ré-indentation de votre code JS.

Compatibilité des fonctionnalités HTML5 et leur utilisation

html5please.com et caniuse.com (Can I Use) sont 2 sites qui permettent de connaître la compatibilité des fonctionnalités HTML5 ainsi qu’une indication sur leur utilisation (utilisation possible, non recommandé, avec précaution, …).

Formateur et Validateur JSON

jsonformatter est un outil en ligne qui permet de valider et de formater un objet au format JSON.

Minifieur Javascript

JSMin est un outil qui permet de minifier vos fichiers javascript afin que ceux ci aient une taille réduite pour une optimisation du temps de chargement de vos pages web.

YUI Compressor permet aussi la compression JS mais également CSS.

Librairie de dessins

HTML5 apporte 2 façons de dessiner : Canvas (bitmap) et SVG (Vertoriel). Voici des librairies de dessin utilisant ces technologies :

• Raphaël : libraire Javascript permettant de faire facilement du dessin vectoriel avec SVG. (Si vous voulez faire des graphes en SVG, gRaphael est une libraire de chart basé sur Raphaël.)
• Paperjs : Librairie de dessin basé sur Canvas
• Processing.js : Librairie également basé sur Canvas développé notamment par John Resig, le père de JQuery
• PlotKit : Librairie de graphique supportant Canvas et SVG

Couleur

colorhexa : Outil permettant d’obtenir des informations sur une couleurs (description détaillée, conversion dans différents formats (hexadécimal, binaire, RVB, …), génération de schémas de couleurs complémentaires, générateur de gradient, …).
css-color-palette-extractor :permet d’extraire les couleurs utilisées dans une CSS.

Générateur d’images

Lorempixel est un site qui permet d’agrémenter vos maquettes, tests, exemples de photo aléatoire comme loremipsum permet de le faire avec du texte. Il est possible de définir la taille de l’image, un thème (sport, nature, abstrait, …), la couleur (noir et blanc ou couleur).

Tweet