Ressources HTML 5 et CSS 3

Cette page collecte un ensemble d'articles sur les langages HTML 5 et CSS 3. Elle est régulièrement mise à jour en fonction des éléments trouvés ou rapportés par d'autres via des réseaux sociaux. Alors encore merci à tous ces contributeurs...

• Dernière mise à jour : jeudi 11 février 2010

Ressources HTML 5

Les indispensables

• W3Cschool : HTML 5 - Langue anglaise : tout savoir sur toutes les balises de ce langage, leur utilisation, les attributs,...
• HTML 5 Vs HTML 4 - Langue anglaise : un comparatif des balises autorisées ou dépréciées entre les langages HTML 5 et HTML 4.
• Les meilleures présentations de HTML 5 - Langue anglaise : un ensemble de présentation en diaporama ou vidéo pour comprendre les principes et les avantages de ce langage.

Articles d'actualités

• HTML 5 et SEO - un article par Olivier Duffez (posté sur Webrankinfo) sur l'impact du sur le référencement naturel et la visibilité sur les moteurs de recherche.
• HTML 5 se dévoile - Un article par julixyde (posté sur Alsacréation) qui présente cette nouvelle version sous toutes ses coutures.
• HTML 5 n'a pas encore sonné la mort de Flash - Un article sur les éventuelles proximités entre les 2 technologies à l'approche très différente.
• HTML 5 les grands comptes s'y mettent - Un article sur le blog de Philippe Le Mesles sur un début d'utilisation de templates en HTML 5 par les grands comptes.
• Le plus beau site HTML 5 of the world - Un article sur le blog de Philippe Le Mesles sur une belle réalisation en HTML 5 par les grands comptes et les ressources commentées par l'auteur auxquels on peut avoir accès.

Tutoriaux

• Osez HTML 5 et CSS 3 - Un article par Raphael (posté sur Alsacréation) sans lequel ce site n'aurait sans doute pas été créé !
• Tutorial HTML 5 - Langue anglaise : plein de tutoriaux uniquement sur ce langage.

Support pédagogique en vidéo ou en diaporama

• Le futur avec HTML 5 : vidéo en langue anglaise par Bruch Lawson qui travaille pour Opera.
  

• HTML 5 et CSS 3: diaporama en langue anglaise par Jason Garber and Jackson Wilkinson.
  

 

---

Ressources CSS 3

Les indispensables

• css3.info - Langue anglaise : tout savoir sur les CSS 3.
• css3.com - Langue anglaise : tout savoir sur les CSS 3.
• CSS 3 roadmap - Langue anglaise : l'avancement des CSS 3.

Articles d'actualités

• Coins arrondis en CSS 3 - Langue anglaise : gérer les coins arrondis en CSS par htmlremix.com.
• Une library javascript pour émuler les CSS 3 sous Internet Explorer - passage obligé par le JS mais cela peut servir...

Tutoriaux

• Démos CSS 3 - Langue anglaise : des exemples pour comprendre les possibilités offertes par le CSS 3 (et parfois JS).
• Implémentation jQuery du module CSS 3 - utiliser jQuery pour mettre à niveau les navigateurs.

---

Ambitions du site "développeur Front-end"

Ce site Internet a été créé avec 3 finalités principales :

• La mise en valeur des compétences que doit réunir le développeur Front-end et la promotion de cette profession,
• La présentation de nos dernières références en intégration de Front-end,
• La présentation de ressources sur les nouveaux langages d'avenir que sont HTML 5 et CSS 3.

Un exercice de style

Ce site a également été réalisé comme un exercice de style permettant de valoriser quelques-unes des nouvelles possibilités offertes par HTML 5 et CSS 3.

• Toutes les pages ont un code HTML valides.
• Les feuilles de style ne sont pas valides du fait de l'utilisation de codes spécifiquement interprétés par certaines sortes de navigateurs ; mais cette invalidité n'empêche pas la bonne exécution des pages sur une majorité de navigateurs récents.

Il est donc préconisé de le consulter avec des navigateurs récents aptes à exploiter ces nouvelles possibilités comme : Firefox 3, Chrome, Safari,...

Les balises HTML 5 utilisées sur ce site

Ce sont essentiellement des balises de structuration répondant à l'organisation de la page :

<header></header> <!-- pour identifier l'en-tête de la page -->
<footer></footer> <!-- pour identifier le pied de page -->
<nav></nav> <!-- pour identifier une zone de navigation -->
<section></section> <!-- pour identifier la section variable de la page -->
<figure></figure> <!-- pour identifier une zone d'illustration et sa légende -->

Il est nécessaire dans les feuilles de styles de leur associer à chacun d'eux le style display:block car par défaut certains navigateurs risqueraient de les interpréter comme des élements en ligne.
Par ailleurs, aucune des versions d'Internet Explorer (même la dernière) ne prenant en compte ces nouvelles balises, il est nécessaire d'avoir recours à un Javascript qui crée ces éléments pour ce navigateur afin qu'il puisse les interpréter.

document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("nav");
document.createElement("figure");

Les principaux effets CSS 3 utilisés sur le site

Parmi les effets possibles, ceux qui m'ont le plus servis concernent les effets d'arrondis, les ombres portées sur des blocs ou des textes, et quelques effets de rotation.

Il en reste qu'avec ces quelques effets le nombre d'images nécessaires à l'affichage d'une page diminue considérablement (4 images sont utilisées pour construire la page en cours) !