Un tour d'horizon du code HTML5 et de sa feuille de styles, comme promis dans le précédent billet.
Pendant votre ballade dans les méandres du code, gardez en mémoire que le blog n'est pas complètement testé, tant pour le balisage HTML5 que pour celui de sa CSS. L'objectif visé était d'obtenir un code HTML proche de l'épure, simple et concis, s'appuyant sur l'ensemble des sélecteurs offerts par CSS 2.1. En évitant l'usage des sélecteurs d'ID et de CLASS, j'ai pu supprimer ainsi toutes les DIV et SPAN qui rendent le code obèse (ce qui est le cas pour le blog ici-même).
Un code plus léger donc, ne s'appuyant que sur les balises sémantiques d'HTML5, avec des gains très conséquents pour le rendu (YSlow donne un score de 100, et les GWT aujourd'hui disent qu'il est plus rapide que 87% des sites). Un code « cross-browsers » semble t-il aussi : testé sous Windows Seven dans Opera (10.60), Firefox (3.6.7), Safari (5.0), Chrome (5.0), Internet Explorer (8.0), l'impression à l'écran est identique.
Pour vous permettre de bien le lire j'ai indenté le code HTML et j'ai documenté aussi la CSS. J'ai aussi nettoyé le script PHP de toutes ses anciennes scories XHTML. J'ai réduit conséquemment le nombre de balises et, pour la feuille de styles, j'ai peu consommé des nouvelles propriétés CSS3 comme vous pourrez en juger.
Si vous voulez bien, c'est le code de cette page que l'on va scruter.
Ce sera celui de Normandie Web, mon agence à moi, pour la création de sites Web en HTML5...
J'ai reçu en juin dernier 2 demandes de formation à HTML5 en provenance de webmestres de PME qui vont passer leurs sites d'HTML4 et XHTML1.1 à HTML5. Au-delà de la formation, pour l'un, je vais produire la charte éditoriale et certains contenus institutionnels. Très bien. Mais assez frustrant car, dans les 2 cas, je n'ai pas la main sur la partie graphique et l'ergonomie, ni sur l'architecture et son code.
Je ne suis pas référenceur mais le référencement naturel où le code et le contenu s'allient pour optimiser le positionnement des pages que je travaille a toujours été, dans mes missions, l'objectif imposé.
J'ai donc pris une décision : celle de relancer l'agence que j'avais créée en 2000.
Allez hop ! Je boucle mes derniers dossiers et après, mes valises.
Avec 3 jours de retard et une grosse culpabilité, celle d'avoir tant procrastiné ces 2 derniers mois que j'ai dû me stresser le citron. Avant j'aimais bien bosser dans l'urgence pour en sortir ce jus de crâne que mes clients réclament, mais là je suis à la ramasse.
Demain c'est la transhumance pour l'Auvergne. 12 jours sans téléphones et sans écrans, mais avec mon fouet, encore.
Cet hiver, je m'en suis pris à Arthur et Hector, les 2 coqs de mon voisin, que j'ai intronisé fournisseurs officiels de plumes pour mes mouches.
Des mouches ?
Comme vous, je suppose, je m'énerve quand je lis des idioties sur HTML5 :
HTML5 c'est la balise video, HTML5 c'est les CSS3, HTML5 c'est Canvas etc.
Pfiou... un peu pénible. J'ai pourtant trouvé pour les francophones des pages très pertinentes mais qui se trouvent enfouies sous les buzz autour d'Apple, de Flash, que sais-je encore...
Pour guider les internautes en quête d'informations et d'explications techniques j'ai eu une idée.