Archives par mot-clé : HTML5

HTML5 : Les nouveautés méconnues

HTML 5, CSS3 et les APIs JavaScript apportent beaucoup de nouveautés qui vont permettre de faire des applications de plus en plus complexes et connectées. Certaines nouveautés sont assez mise en avant et connues comme :

  • la géolocalisation
  • le support des fichiers vidéos et audios
  • la gestion du mode déconnecté
  • le stockage sur le navigateur
  • Canvas et SVG
  • les transformations, animations CSS3
  • les médias queries CSS3
  • le drag’n drop natif
  • File API
  • les polices webs

Voici un petit aperçu de quelques nouveautés méconnues mais très intéressantes apportées par HTML5 (Attention, certaines sont encore à l’état de brouillon).

Web workers : Multi threading Javascript

Une des problématiques de JavaScript est qu’il n’était pas possible d’effectuer des traitements sur plusieurs threads, qui plus est avec les processeurs multicœurs disponibles maintenant. Ainsi, lors d’un traitement JavaScript long, l’interface utilisateur peut se figer quelque secondes et il est même possible d’avoir un pop-up indiquant qu’un script met trop de temps à s’exécuter.
HTML5 introduit les Web Workers. Ce sont des scripts qui peuvent s’exécuter en taches de fond, sur des threads séparés ne bloquant pas votre site. Le principe consiste à des échanges de messages entre votre script principal et un (ou des) workers.
Cependant ces workers ont quelques limitations comme l’accès au DOM. Il ne vous sera donc pas possible de modifier le contenu de vos pages dans un worker.

Ressources :

Fullscreen

L’API Fullscreen permet la gestion du plein écran. Il est ainsi possible de mettre en plein écran n’importe quel élément d’une page (une div par exemple) et non plus l’ensemble de la page comme on peut le faire via la touche F11.

Attention il pourrait être utilisé à des fins de phising !!!

Ressources :

Web sockets

Les web sockets sont des sockets (tunnels de communication) entre un serveur et un client web. Cette API permet d’ouvrir un canal de communication entre le navigateur et le serveur web et d’échanger des messages bidirectionnel (dans les 2 sens : client vers serveur mais également serveur vers client). Cela permet de mettre en place du Push. Il n’est donc plus nécessaire de faire du polling (technique d’appel régulier du serveur coté client) afin de récupérer des éventuelles mise à jour. Cela permet de facilement implémenter un chat par exemple.

Ressources :

Server-sent events

Les Server-sent events ressemblent aux web sockets sauf que ceux-ci sont unidirectionnel, du serveur vers le client. On s’abonne à une source de mise à jour générées par un serveur. Lors d »une mise à jour, une notification est envoyée au client.

Ressources :

WebRTC

WebRTC est un protocole de communication audio, vidéo en temps réel sans plugin proposé par Google. Il sera ainsi possible d’effectuer des appels téléphoniques, du partage de vidéo ou du P2P par exemple.

Ressources :

Edition en ligne

Inline editing permet de définir du contenu éditable par l’utilisateur. Il suffit d’ajouter l’attribut contenteditable=true afin de rendre l’édition possible.

Page Visibilty

L’API Page Visibility permet de savoir si votre page est en cours de visualisation et effectuer des traitements en fonction de cet état. On pourra ainsi mettre en pause une vidéo, un jeu ou un diaporama, arrêter les appels serveurs qui impactent votre serveur, … Cette API est encore jeune et les navigateurs l’implémentent avec des préfixes (-moz, -o, -webkit, -ms).

Ressources :

Outils CSS3 – HTML5 – JavaScript : Episode 3

Cet article fait suite aux 2 précendents articles su le même sujet :

J’ai un temps pensé appeler cet article Outils CSS3 – HTML5 – JavaScript : la suite de la suite mais je me suis dis qu’au fur et à mesure des articles ça commencerai à être long …

Chargeur de fichier JS/CSS/…

Le chargement de fichier JavaScript par le tag script est bloquant. Quand un fichier de script est chargé, votre page est mise en attente du chargement et de l’exécution de votre fichier. Cela est vrai pour chaque script de votre page. Afin de contourner ce problème, des librairies de chargement de scripts asynchrones ont vu le jour comme :

  • RequireJS : un gestionnaire de fichier qui permet de définir les fichiers à charger via un système de dépendance
  • YepNope.js : Librairie très utilisée pour le chargement de polyfills (mis en avant par Modernizr). Cette librairie permet de charger des fichiers suivant un test booléen (ex : Modernizr.geolocation). Un petit lien vers mon article sur cette librairie
  • HeadJS : loader de script mais pas que (détection de fonctionnalités, détection de navigateur, détection de taille d’écran, …)

Sammy.js

Sammy.js est une librairie JavaScript implémentant REST.
Il permet de créer des applications web avec une gestion de l’historique, des événements personnalisé, des plugins, etc.

Tester son code JS

TypedJS est un outil de tests automatique de vos fonctions JavaScript. Il suffit d’annoter vos fonctions avec les types attendus, TypedJS se charge de tester vos fonctions pour vous afin de vérifier que le type retourné est correct. Attention, il ne s’agit pas d’une librairie permettant de faire des tests unitaires automatisés comme QUnit par exemple.

Framework MVC

J’ai évoqué dans mon article de présentation de knockout des framework MVC comme BackoneJS ou EmberJS. AngularJS, un framework MVC développé par Google, fait pas mal parler de lui en ce moment.

JQuery

Jquery ++ : collection de nouvelles fonctionnalités DOM et d’événements bien pratiques pour jQuery

BootStraps / Initializr

Il s’agit ici de boite à outils/template/Framework pour HTML/CSS/Javascript permettant de démarrer un projet rapidement. De nombreux outils sont inclus par défaut pour vous faciliter la vie (classes CSS, jQuery, page html de base, …).

SpritePad

Une des pratiques permettant un gain de vitesse de chargement d’une page web est la mise en place de sprite. Un Sprite est un fichier composé de plusieurs icônes/images. Le CSS se chargera d’afficher qu’une zone de l’image correspondant à la partie à afficher. Ainsi un seul fichier est chargé. SpritePad permet la génération de Sprite CSS en drag’n drop et génère pour vous le CSS.

Mobilité

Les technologies HTML5/CSS3/JavaScript ont beaucoup de succès notamment du fait de leur compatibilité sur terminaux mobiles (smartphone, tablette). Le debuggage sur ce type de terminaux n’est pas évident. Voici quelques outils pour le faire :

CSS3 Generator

CSS3 Generator : Un générateur de règles CSS très complet (Border-Radius, Gradient, Box-Shadow, Transform, Text-Shadow, …).

Partage de code

Je vous avez parlé de JSFiddle dans un précédent article, un outil de partage de code HTML/CSS/JavaScript. JSBin permet également la même chose.

Guide des bonnes pratiques HTML/CSS par Google

Google a misà disposition un ensemble de bonnes pratiques concernant HTML / CSS et JavaScript. A lire !!

Librairies graphiques

datavisualization.ch est un site qui recense les librairies graphiques pour le web et qui aidera à trouver la librairie qui correspond le mieux à vos attentes.
Highcharts : LA librairie pour faire des graphes en SVG avec un fallback en VML pour IE8 et inférieurs.

Animations CSS

Animate.css : Jeu d’animation en CSS déjà coté à réutiliser et à adapter pour vos projets. Possibilité de créer un fichier ne comportant que les animations dont vous avez besoins.

Javscript : Divers

BankersBox

BankersBox est une librairie facilitant la sauvegarde de donnée coté client.

Hammer

Hammer.js est une librairie pour gérer les « gestures ».

Gestion de raccourcis clavier

MouseTrap : une librairie pour gérer des raccourcis clavier et les binder sur des fonctions

Mise en place de polyfills avec Modernizr et YepNope.js

Dans un article précédent, j’ai fait la présentation de Modernizr, une librairie JavaScript qui permet la détection de fonctionnalités du navigateur. Dans cet article, nous allons voir comment mettre en place un polyfill grâce à Modernizr et YepNope.js.

Polyfill

Un polyfill est une librairie JavaScript qui émule la fonctionnalité non supportée d’un navigateur (qui a dit IE 😉 )

Présentation Yepnope

YepNope.js est un « chargeur » (loader) de fichier JavaScript/CSS qui se base sur un test booléen afin de déterminer quels fichiers charger. YepNope.js est inclus dans Modernizr sous la forme d’un alias via la fonction load (Attention, la fonction load n’est pas comprise dans le Modernizr par défaut. Il faut la rajouter dans le build personnalisé. La personnalisation de ce build permet notament de spécifier quels fonctionnalité Modernizr sera capable de tester afin d’avoir un fichier le plus léger possible en fonction de vos besoins) mais il est possible de l’utiliser sans Modernizr, sous forme d’une librairie externe.

Ainsi seulement les fichiers nécessaires seront chargés. Les fichiers sont chargés de manière asynchrone, ce qui ne bloque pas votre page et ainsi donne une « fluidité » à votre site.

Voici un exemple typique d’utilisation de la fonction load (ou yepnope)

Modernizr.load({
  //test de la fonctionnalité de géolocalisation
  test: Modernizr.geolocation,
  //Si oui, on charge geo.js
  yep : 'geo.js',
  //Sinon on charge le polyfill
  nope: 'geo-polyfill.js'
});

La fonction load prend donc un objet JSON comme paramètre avec les propriétés suivantes :

  • test : Ce paramètre correspond au test qui va déterminer les fichiers à charger
  • yep : liste des fichiers (CSS, JavaScript) à charger dans le cas où le test est vrai
  • nope : liste des fichiers (CSS, JavaScript) à charger dans le cas où le test est faux
  • load (ou both) : : liste des fichiers (CSS, JavaScript) à charger dans tous les cas (que le resultat du test soit vrai ou faux)
  • callback : fonction appelée après le chargement de chaque fichier (pratique pour donner une information de % d’avancement lors du chargement multiple de fichiers)
  • complete : fonction appelée après le chargement de tous les fichiers

Dans le cas où vous utiliser yepnope indépendant de Modernizr (ou sans alias), seulement le nom de la méthode change :

yepnope({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Voici la liste des fonctionnalités testables en natif via Modernizr. Il est possible de rajouter d’autres propriétés via des extensions.

Exemple de mise place pour l’ombrage sur du texte

CSS3 a apporté grand nombre de nouvelle possibilité notamment le fait de pouvoir ajouter des ombres sur du texte via la propriété text-shadow.

Cette propriété est bien supportée par les navigateurs modernes mais on peut voir sur le site www.caniuse.com que cette propriété n’est supportée par IE qu’à partir de la version 10.

Dans le cas ou l’ombrage n’est pas disponible en natif sur le navigateur, nous allons utiliser le plugin JQuery textshadow.

Ce plugin dépend de JQuery (que l’on chargera depuis le CDN de Google) et nécessite le chargement de 2 fichiers (1 JS et 1 CSS). Nous incluons également notre fichier js qui va appliquer l’effet d’ombrage sur les éléments concernés.

Voici le code html de notre exemple ou nous allons juste appliquer un ombrage sur le titre (h1) de notre page.

<!-- Notre style css -->
<style type="text/css" rel="stylesheet">
h1 {
    text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.25);
}
</style>

<!-- .... -->
<h1>Nouveautés CSS3</h1>

Voici le code JavaScript effectuant le test via Modernizr et chargeant le polyfill seulement dans le cas où la fonctionnalité n’est pas supportée.

Modernizr.load({
    //On teste le support de l'ombrage
    test : Modernizr.textshadow,
    //on charge les fichiers si non supporté
    nope : ['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js', 'include/jquery.textshadow.js', 'include/jquery.textshadow.css', 'include/applyShadow.js']
});

Enfin voici le code du fichier applyShadow.js qui utilise notre polyfill :

//On applique l'ombrage sur notre titre
$('h1').textshadow();

Voici le lien vers la page d’exemple.

Liens

Quelques liens utiles concernant les polyfills :

Conclusion

Modernizr et Yepnope.js permettent facilement la mise en place des polyfills. N’hésitez donc pas à utiliser les nouvelles API JavaScript/Fonctionnalités HTML5 et CSS3 qui permettent d’augmenter la richesse et l’ergonomie des applications webs dans les navigateurs modernes sans laisser de coté les anciens navigateurs.

Outils CSS3 – HTML5 – JavaScript : la suite

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 :

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).

Techdays 2012 : Les vidéos sont en lignes

Les TechDays 2012 organisés par Microsoft se sont tenus à Paris les 7, 8 et 9 Février 2012. Plus de 300 sessions ont été animées. Ces sessions sont disponibles en vidéos. Voici les sessions qui traitent de HTML5, CSS3 et JavaScript.

Bon visionnage !!!

Effet animé de zoom au survol d’une image en CSS

CSS3 et HTML5 apporte beaucoup de nouveautés. Voyons comment mettre en place un effet de zoom animé en pur CSS 3. Nous utiliserons pour ça les transitions. A noter que cette technique ne fonctionne que sur des navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+)

Dans un premier temps nous insérons notre image :

<img class="zoomEffect" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5" />

Nous avons mis une classe zoomEffect afin de ne cibler que les images ayant cette attribut.

Il faut ensuite styler notre image et l’animer via CSS :

img.zoomEffect {
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
img.zoomEffect:hover {
    -moz-transform: rotate(5deg) scale(1.10);
    -webkit-transform: rotate(5deg) scale(1.10);
    -o-transform: rotate(5deg) scale(1.10);
    -ms-transform: rotate(5deg) scale(1.10);
    transform: rotate(5deg) scale(1.10);
    opacity: 1;
}

On définit sur notre image une transition (-*-transition) qui s’appliquera à toutes les propriétés en utilisant la valeur all (on peut définir une liste de propriété qui seront animées). Celle-ci durera une demi-seconde (0.5s) et utilisera l’effet ease-in-out. Le dernier paramètre est le délai avant l’animation. 0s indique qu’on lance l’animation immédiatement. J’ai utilisé ici la notation raccourcis mais on peut définir chaque propriété individuellement. Je vous laisse vous reporter à la documentation ou à cet article d’alsacreations sur les transitions.

Au survol de l’image (:hover), on définit une rotation de 5° rotate(5deg) et d’agrandissement de 10% scale(1.10). On met également l’opacité à 100% (opacity: 1) pour un meilleur effet.

Et voila le résultat :

HTML5

Ceci n’est qu’un exemple simple des possibilités du module de transition de CSS3 qui permet de mettre en place des effets d’animation simple afin d’améliorer l’ergonomie de votre site. Pour avoir plus de contrôle sur les effets, il est possible d’utiliser le module d’animation de CSS3 qui permet de créer des keyframes afin de définit précisément les étapes de votre animation.

Edit (21 Avril 2015) : Il est possible de déterminer l’origine de la transformation en utilisant la propriété transform-origin.

img.zoomOriginEffect {
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
img.zoomOriginEffect:hover {
    transform: rotate(25deg);
    opacity: 1;
    transform-origin: top left;
}

NB : j’ai volontairement omis les règles CSS liés aux préfixes propriétaires et supprimer le scale.

Présentation de Modernizr

Avec l’arrivée de HTML5 et de toutes les nouveautés gravitant autour (CSS3, API JavaScript, …), il devient maintenant possible de faire de belles et puissantes applications. Un des problèmes qui se pose alors est la compatibilité des navigateurs avec ces fonctionnalités et le support des anciens navigateurs (qui a dit IE6 😉 ).

C’est la qu’intervient la librairie Modernizr. Cette librairie JavaScript permet de connaître les fonctionnalités supportés par le navigateur de votre visiteur afin de pouvoir adapter votre site et l’expérience utilisateur aux possibilités de son navigateur.

Mise en place

La mise en place sur votre site est très aisée. Il suffit de télécharger le script sur le site et d’inclure le fichier js dans votre page (dans le head de préférence) de cette façon :

Il est possible de créer son propre fichier en sélectionnant les fonctionnalités qui vous intéresse afin d’avoir un fichier le plus petit possible.

Modernizr est également utilisable via les CDN de Microsoft ou CDNJS.

Utilisation

Au chargement de votre page, Modernizr va être initialiser et va réaliser plusieurs choses.

Pour IE, il va créer les nouveaux élément introduit par HTML5 (header, footer, section, article, …). Il vous sera alors possible de styler ces éléments via CSS. N’oubliez de leur appliquer la règle CSS suivante si vous souhaitez que ces nouvelles balises soient interprétées en tant que bloc :

header, footer, aside, nav, article {
display: block;
}

Modernizr va également tester les fonctionnalités HTML5 / CSS3 du navigateur et vous permettre de connaître leur statut. Pour cela, l’attribut class de la balise html de votre page sera mis à jour avec la liste des fonctionnalités supportés ou pas. Dans le cas de Firefox 10, nous obtenons :


Les fonctionnalités non supportés sont préfixés par no-. Vous pourrez ainsi styler votre page en fonction du support de certaines fonctionnalités. Par exemple, dans le cas ou la propriété text-shadow (ombrage sur du texte) est supportée, vous rajouterez de l’ombre sur vos textes via CSS et vous pourrez utiliser une image dans le cas où celle-ci n’est pas supportée.

La librairie met à disposition également un objet JavaScript Modernizr qui permet de tester les fonctionnalités via JavaScript et mettre en place un polyfill au besoin. Un polyfill est une librairie JavaScript qui émule la fonctionnalité non supportée. Bonne nouvelle, il y a pratiquement un polyfill pour chaque fonctionnalité (une liste disponible ici).

Voici un exemple qui permet de tester si l’objet canvas est supporté :

Modernizr.canvas //renvoi true ou false

Voici la liste des fonctionnalités testables en natif via Modernizr. Il est possible de rajouter d’autres propriétés via des extensions.

La librairie met également à disposition une méthode load(). Il s’agit d’une fonction de chargement de ressources (CSS et JS). Cette fonctionnalité est issue de la librairie yepnopejs. C’est via cette fonctionnalité que vous allez pouvoir charger vos polyfills.

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Dans le cas où la fonctionnalité de géolocalisation est supportée, le fichier geo.js sera chargé sinon geo-polyfill.js le sera. Il est possible de ne charger que dans le cas où la fonctionnalité est supportée (ou inversement) et de charger plusieurs fichiers. Enfin sachez que le chargement se fait de manière asynchrone et en parallèle.

Conclusion

Modernizr est une librairie très utile si vous souhaitez commencer à tirer parti des avancées d’HTML5 tout en adaptant votre page aux anciens navigateurs. Celle-ci est très populaire et utilisée par de grand nom comme Twitter, Google, Microsoft, The Economist, …

Outils CSS3 – HTML5

Je m’intéresse en ce moment à ce qui touche à HTML5 et CSS3 qui représente l’avenir du web. Voici une liste d’outils trouvés au gré de mes recherches / lecture …

Font

CSS3 apporte le support des polices personnalisées via @font-face qui permet de télécharger et d’utiliser une police disponible sur internet.

  • http://www.typetester.org/ : Permet de comparer le rendu de différentes polices et de ses configurations.
  • http://www.google.com/webfonts –> « Dépôts » (repository) de font utilisable simplement. Plus besoin d’uploader sur votre serveur votre police. Actuellement plus de 200 fonts sont disponible.
  • http://somadesign.ca/projects/fontfriend/ : il s’agit d’un marque page sous la forme d’un code JavaScript qui une fois lancé sur la page que vous souhaitez affiche une fenêtre permettant la modification de tout ce qui touche au texte (taille de la police, police, …). Les Google web fonts sont supportés ainsi que vos polices via un drag n’ drop. Un Must !!

Générateur

Boite à outils

Générateur de dégradé CSS3/ Background

Voici quelques éditeurs qui vous permettront de tirer parti de la fonctionnalité de gradient des backgrounds en CSS3

Transformation

CSS3 permet d’effectuer des transformations (rotations, agrandissement / réduction, translation et déformation) ainsi que des animations. Voici une liste d’outils permettant de générer le code CSS de ceux avec des outils graphiques :

Compatibilité

  • modernizr : librairie JavaScript permettant d’ajouter à la balise html la liste des fonctionnalités supportées par le navigateur.
  • http://code.google.com/p/html5shim/ : script permettant de rendre compatible les nouvelles balise de HTML5 sous IE (version antérieure à IE9)
  • http://html5test.com/ : indique la compatibilité des nouveautés HTML5 avec votre navigateur

Divers

Cheat Sheet

Des petites antisèches pour :

Je mettrais à jour cette liste d’outils avec mes nouvelles trouvailles. N’hésitez à l’en faire découvrir 😉

Styler un header en HTML5

Il y a peu, j’ai voulu découvrir les nouveautés qu’apporte HTML5. Au niveau des nouveautés, de nouvelles balises sont ainsi apparues permettant d’avoir un contenu plus sémantique.

J’ai alors remplacé ma balise <div id= »header »> par la nouvelle balise <header> dans mon code html et remplacer #header par header dans mon code CSS. Malheureusement, le styles définis ne fonctionne pas. Après quelques recherches, il s’avère qu’il faut définir au navigateur comment interpréter cette balise. Il en est de même pour les nouvelles balises footer, aside, nav et article.

Si vous souhaitez que ces nouvelles balises soient interprétées en tant que bloc il faut définir le style suivant :

header, footer, aside, nav, article {
display: block;
}