Avec 85 pages, c’est l’un des plus petits livres de ma bibliothèque, certainement celui que j’ai lu le plus rapidement, mais aussi l’un de ceux qui m’a le plus enthousiasmé, par son contenu bien sûr, mais surtout par sa forme. Il traite de l’essentiel, mais c’est un livre romancé, pas l’un de ces bouquins techniques dont on ne peut pas lire plus de 10 pages à la suite, mais plutôt une histoire que l’on nous raconte. Je vais vous la résumer en reprenant le chapitrage original.

Photo de Yaniv Golan depuis Flickr

La petite histoire du balisage

On commence donc par un résumé des épisodes précédents.L’histoire d’HTML, puis d’XHTML, l’ambiance de travail du W3C, la scission au sein du groupe de travail, puis la réunification. Quelques pages suffisent pour se remémorer ce que l’on à suivi de loin, on est pr êt pour la suite.

Les principes de l’html5

Alors finalement, ils ont décidé quoi ? C’est le sujet de ce second chapitre ou l’on apprends qu’HTML5 est compatible avec l’existant et que donc finalement, il suffit de changer de doctype, pour faire de l’HTML5 ! En plus le nouveau est super simple, on va pouvoir l’apprendre par coeur ! On y apprends aussi que HTML5 restera compatible et que certaines balises sont donc déconseillées, mais font tout de m ême partie de la norme, ainsi les navigateurs peuvent les interpréter comme il faut. Les vieux contenus sont donc toujours lisibles.

Les médias riches

Un chapitre consacré à canvas, audio et video, ponctué d’exemples, on rentre dans le vif du sujet pour voir un peu l’étendue des possibilités multimédia. Et ca donne envie ! Je n’utilise que rarement ces médias, certainement pour leur manque de compatibilité, et leur implémentation bancale, mais avec HTML5 ca va changer, j’en suis convaincu !

Web Forms 2.0

Certainement l’un des sujets les plus attendus. C’est la base de tout contenu web « dynamique », un dépoussiérage pour s’adapter un peu plus aux usages et aux besoins était nécessaire. Alors au menu des nouveauté, on aborde en vrac, les placeholders, les datalists, les nouveaux types de champs (recherche, sliders, boutons flechés, date, heure, couleur…). Le tout ponctué d’exemple simples. On n’utilisera bientà´t plus les formulaires de la m ême manière, et m ême l’usage de javascript va évoluer, puisque les formulaires font désormais nativement beaucoup de choses que l’on était obligé d’ajouter soi-même auparavant.

La sémantique

Après une introduction sur l’extensibilité du langage et les microformats, l’auteur nous invite à une visite guidée de nouvelles balises pour améliorer la sémantique : mark, time, meter, progress, section, header, footer, aside, nav, article… Vous avez certainement déjà du en entendre parler, et les noms sont assez clairs, vous devez donc déjà y entrevoir des possibilité pour améliorer le balisage, le rendu, le référencement… Est-ce que quelqu’un sait si les moteurs de recherche sont déjà sensibles à ces nouvelles balises ?

Utiliser HTML5 aujourd’hui

Alors voilà, on est emballé par ce que l’on vient de lire, mais bon l’essentiel maintenant c’est de s’y mettre ! Quand est-ce que l’on pourra utiliser tout ca ? Quand est-ce que les navigateurs implémenteront la norme ? 2015 ? 2022 ? En fait cela va se faire progressivement, on peut commencer par change ses doctypes, puis utiliser quelques champs de formulaires, une partie se dégrade en type text et peut donc être utilisée sans aucun problème. Les balises de zonage ou de navigation sont aussi utilisables avec quelques astuces… On finit avec les liens indispensables pour aller plus loin, entre des sites de référence, un validateur HTML5, un livre, la spécification, la liste de diffusion ou le canal IRC du whatwg vous avez largement de quoi vous documenter et creuser ce passionnant sujet !

J’en veux un !

• HTML5 pour les webdesigners
• Broché : 85 pages
• Éditeur : Eyrolles
• Édition : 1ère (30 septembre 2010)
• Collection : A book appart
• Langue : Français
• ISBN-13: 978-2212128611

N’oubliez pas que les normes W3C, il faut les utiliser pour les valider. Certes des groupes de travail proposent des normalisation d’implémentation pour standardiser le web, et les navigateurs les mettent en place, mais c’est l’usage qui en est fait qui fait avancer les choses, quand HTML5 sera finalisé, cela fera déjà longtemps qu’on l’utilisera et qu’on attendra HTML6 !

Le numéro 1 sur la couverture et la préface m’incitent à penser que c’est le premier d’une nouvelle et très belle collection (A book Apart) dont j’attends la suite avec impatience ! Note pour les anglophones, La traduction est bonne, mais il paraît que cet ouvrage est encore meilleur en version originale.

Sur le même thème

• Livre : CSS3 pour les webdesigners
• Bien écrire HTML & XHTML
• Bien utiliser Javascript
• Livre : Réussir son blog professionnel
  3 exemplaires à gagner !
• Livre : Pro Git

Je vous propose de découvrir Notepad++. Il ne fonctionne que sous Windows, mais apporte un véritable plus pour cette plateforme dont l’éditeur par défaut est vraiment trop simpliste.

C’est un logiciel gratuit sous licence GPL. Je le trouve idéal car très fonctionnel, simple à installer, rapide à lancer et extensible. Il est donc idéal quand on change souvent de poste et que l’on veut rapidement retrouver ses repères.

Photo de PSD depuis Flickr

Fonctionnalités

Notepad++ est un outil très complet, ces principales fonctionnalités sont :

• Coloration syntaxique (PHP, Java, SQL, CSS, HTML, Javascript, YAML…)
• Éditeur WYSIWYG
• Auto-complétion
• Affichage de fichier et édition multiple simultanée
• Fonction de recherche avec expressions régulières
• Auto détection de modifications de fichiers
• Gestion de macros
• Zoom
• Multilingue

Vous trouverez toute la liste des fonctionnalités de Notepad++ sur le site de l’éditeur.

Plugins

Cette liste n’est pas exhaustive car en plus Notepad++ est extensible avec une très belle liste de plugins dont voici les plus intéressants à mon goût :

• Éditeur hexadécimal
• Édition de fichier via un explorateur FTP
• Gestionnaire de tags HTML
• Correcteur orthographique
• Réducteur dans la barre de tâches
• Édition XML (multiples outils)
• Gestionnaire de plugins

Astuces

Cet outil s’intègre parfaitement à Windows, vous pourrez ainsi le mettre dans le menu contextuel de Windows et y accéder via le clic droit de votre souris ou tout simplement l’utiliser par défaut à la place du bloc-notes de Windows.

Ces astuces sont à voir sur la page de téléchargement de l’application.

Site de l’éditeur & téléchargement

Vous pouvez télécharger Notepad++ sur le site de l’éditeur :

• Site officiel de Notepad++

Aide, forum et wiki

Si vous avez besoin d’aide pour débuter avec Notepad++, des forums multilingues et un wiki en anglais répondront probablement à toutes vos questions.

• Forums
• Wiki

Mon avis

Personnellement, je l’utilise depuis des années sans aucun soucis. Son ergonomie est très bonne, et ses plugins très nombreux permettent de répondre à toutes les attentes. Il est simple mais fonctionnel, vous le trouverez bientôt indispensable.

Et n’oublier pas, Notepad++ est un outil gratuit, pensez à aider le projet en traduisant ou en apportant une contribution financière.

Sur le même thème

• Outils XML : Cooktop
• Les plugins Firefox : XRefresh
• Comparaison et fusion de fichiers et de dossiers
• Les plugins Firefox : Colorzilla
• MySQL GUI Tools

Photo de ooti depuis Flickr

Je vais donc vous présenter les différentes ressources de qualité sur le sujet que l’on trouve sur Internet. Le but de cet article est de vous donner toutes les pistes. Vous n’avez plus qu’a les suivre !

Définitions

• Définition de HTML
• Définition de XHTML

Historique

La première version de la norme date de 1991, son auteur Tim Berners-Lee préside aujourd’hui le W3C, le consortium chargé de promouvoir la compatibilité des technologies web.

La version actuelle de HTML est la 4.01, c’est une correction de la version 4.0 qui date de 1997. Depuis peu d’évolutions, la version 5 est en préparation. Le seul point marquant de ces dernières années est l’arrivée de XHTML, qui est le portage de HTML en XML. Cette évolution permet notamment de gagner en qualité du code, l’apport de XML oblige à plus de rigueur. Certaines facilité du langage HTML ne sont plus permises, le code est donc plus homogène et les navigateurs interprètent donc plus facilement un code qu’ils lisent mieux.

Les navigateurs récents tels que IE8 ou Firefox 3.x respectent de plus en plus en plus les standard et affichent d’ailleurs de mieux en mieux les pages qui respectent les normes.

A quoi ca sert ?

Le langage HTML ne permet pas de faire le rendu visuel d’un texte. En fait il ne permet que le balisage de celui ci. Ainsi un titre aura une balise de titre. En lisant la source du code, on comprendra qu’il s’agit d’un titre, mais le rendu lui sera fait par les CSS. Vous comprenez bien que sur un Iphone ou sur un écran 20 pouces, le rendu ne sera pas le même, mais notre titre sera toujours un titre.

Vous pouvez ainsi définir les éléments de votre page tels qu’un texte, une image, une vidéo, un formulaire, des liens bien sûr, mais aussi des tableaux des listes…

HTML vous permet ainsi d’afficher votre contenu, mais aussi de questionner l’internaute au travers de champs de formulaire, par des questions ouvertes avec des champs texte, par des questions fermées à réponse simple ou multiple, et même de l’enregistrement de fichier.

Comment apprendre ?

Vous trouverez de multiples cours sur HTML, mais méfiez vous, la plupart présentent un code non standard qui risque d’être mal compris par les navigateurs, et qui risque d’être obsolète dans les navigateurs futurs. Référez vous donc le plus souvent à la norme HTML ou au mémento de Raphaël Goetter par exemple.

L’utilisation du validateur vous montrera également vos erreurs en vous donnant des pistes pour les corriger.

Les normes

Les normes ne sont pas toujours faciles à lire, mais heureusement la traduction française apporte un peu plus de clarté sur certains points techniques.

• La norme HTML 4.01 officielle en anglais
• La norme HTML 4.01 traduite en français
• La norme XHTML 1.0 officielle en anglais
• La norme XHTML 1.0 traduite en français
• La norme XHTML 1.1 officielle en anglais
• La norme XHTML 1.1 traduite en français

Les bonnes pratiques

• Utiliser le doctype approprié
• Respecter la norme associée au doctype
• Évitez l’utilisation d’éditeurs WYSIWYG, leur interprétation laisse parfois à désirer
• Ne pas utiliser de balises HTML « propriétaires »
• Indenter correctement son code source pour le rendre plus lisible

Outils

Il n’est pas toujours facile d’avoir en tête toutes les propriétés de chaque élément HTML, aussi n’hésitez pas à vérifier la validité de vos pages.

• Validateur de code HTML et XTML du W3C
• Validateur de code Validome

Bibliographie

La gamme « mémento » chez Eyrolles présente sous forme de livret plastifié et indéchirable l’essentiel d’un point technique pour seulement 5€. Un indispensable !

• Mémento XHTML de Raphaël Goetter chez Eyrolles

Quiz

Vous avez bien compris tous les éléments présentés ? Testez vos connaissances ! Attention, le premier test n’est pas aussi facile que l’on pourrais le croire.

• Combien de balises HTML pouvez vous citer en 5 minutes ?
• Testez vos connaissances HTML en 20 questions

Vous voilà je l’espère un peu plus à l’aise avec la notion de langage de balisage. N’hésitez pas à posez vos questions en commentaires.

Un des buts de ce site étant l’échange et l’apprentissage, proposez aussi vos références bibliographiques, liens ou bonnes pratiques sur le sujet.

Sur le même thème

• Bien utiliser les feuilles de style (CSS)
• Livre : HTML5 pour les webdesigners
• Aide mémoire & antisèche : Les cheat sheets
• Bien développer en PHP (partie 1)
• Bien utiliser Javascript