DonchoBlog | Web designer - Web integrator http://www.donchofolio.be/blog Venez vous informez ! Wed, 21 Apr 2010 20:45:48 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 HTML5 – Quoi de neuf ?! http://www.donchofolio.be/blog/html/html5-quoi-de-neuf/ http://www.donchofolio.be/blog/html/html5-quoi-de-neuf/#comments Thu, 01 Apr 2010 15:59:14 +0000 Grégory http://www.donchofolio.be/blog/?p=11 Code html

]]> Pour commencer cette catégorie html intégrée à mon blog, je vais introduire le HTML5 en décortiquant toutes les nouveautés. Attendez-vous à de nouvelles balises et attributs. Encore mal supporté par la totalité des navigateurs, mais connaissant l’éternel problème de IE cela risque de prendre du temps…

Aussi à l’affiche, et non des moindres, l’intégration vidéo et sonore.

Trêve de bavardages, passons aux choses sérieuses.

Code html

Qu’es ce que le HTML 5 ?

Le HTML5 c’est la prochaine révision du html développé par le W3C successeur du HTML 4.01. Elle est à ce stade toujours en DRAFT (Brouillon) et à été mise sur pied par le WHATWG depuis 2004.

La nouvelle structure des éléments

Il semblerait que c’est la fin des éléments « inline » et « block » au profit d’un tout nouveau schéma. Ainsi les différents éléments HTML sont divisés en plusieurs familles qui peuvent néanmoins appartenir à plusieurs d’entre elles.

Modèle HTML5

Voici un petit schéma agrémenté d’une légende pour que vous compreniez plus facilement :

  • Flow : correspond à tout les éléments qui contiennent du texte.
  • Phrasing : les éléments qui apparaissent dans le contenu textuel (a, li, em).
  • Interactive : regroupe l’ensemble des éléments interactifs avec l’utilisateur.
  • Embedded : ce sont les ressources externes liées au document.
  • Metadata : tout ce qui n’apparaît pas sur l’écran (style, script, ….).
  • Heading : définit les en-têtes d’une section.
  • Sectioning : définit le scope des en-têtes et pieds de page.

Ces sections permettent une plus grande souplesse en terme de contenu autorisé pour chaque élément. Ainsi nous pourrons inclure dans un a une liste, un paragraphe,…
Cela permet aussi au navigateur de mieux comprendre le contenu des pages qu’il affiche et ainsi d’en améliorer l’accessibilité.

Les balises et doctype

Le doctype

Enfin un doctype que l’on peut apprendre par coeur, car celui-ci a été modifié :

<!DOCTYPE html>

Mise en page des balises

Emplacement de nouvelles balises dans le navigateur

Les balises

Section :

L’élément <section> permet de définir les différentes sections d’un document comme par exemple les chapitres, les en-têtes et pieds-de-pages, ou toute autre section dans un document. Il peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la structure du document.

1
2
3
4

<section>
     <h3>Le titre de ma section</h3>
     Votre contenu principal
</section>
Article :

L’élément <article> représente un texte qui peut être par exemple tiré d’un blog, journal ou encore d’un forum.

1
2
3
4
5

<article>          
     <a href="Lien d'un article de blog">
     Titre de l'article</a>
     Contenu de l'article
</article>
Aside :

L’élément <aside> peut contenir des sections qui ne sont pas directement en rapport avec l’article.
Nous y retrouverons des catégories ainsi que des archives, etc…

1
2
3
4
5
6
7
8

<aside>
     <h1>Catégories</h1>
     <ul>
          <li><a href="/categorie/html/">Html</a></li>
	  <li><a href="/categorie/css/">Css</a></li>
	  <li><a href="/categorie/php/">Php</a></li>
     </ul>
</aside>
Header :

L’élément <header> prend place comme en-tête d’une page ou d’une section.

1
2
3
4

<header>
     Bienvenue sur ...
     <h1>Le logo ou un titre significatif</h1>
</header>
Footer :

L’élément <footer> s’intègre dans la page comme le pied de page ou de section. Il permet d’identifier l’auteur, d’y mettre les mentions légales, ainsi qu’une navigation.

1
2
3
4
5
6

<footer>         
     <a href="/accueil.html">Page d'accueil</a>
     <a href="/contact.html">Page contact</a>
     <a href="/faq.html">Page FAQ</a>
     Copyright © 2010 Clarenne Grégory
</footer>
Nav :

L’élément <nav> représente un niveau de différents liens de navigations.

1
2
3
4
5

<nav>        
     <a href="/accueil.html">Page d'accueil</a>
     <a href="/contact.html">Page contact</a>
     <a href="/faq.html">Page FAQ</a>
</nav>
Figure :

L’élément <figure> permet d’assembler des médias (images, vidéos) avec leurs légendes <legend>.

1
2
3
4

<figure>   
     <img src="/images/ma_voiture.jpg" alt="Une ferrari" />
     Ma super ferrari cabrio
</figure>
Audio et vidéo :

Les éléments <audio> et <video> sont utilisés pour intégrer les contenus multimédias.

1
2
3
4
5
6
7
8
9

<video poster="apercu.jpg">
     <source src="video.3gp" type="video/3gp"></source>
     <source src="video.ogv" type="video/ogg;"></source>
     <source src="video.mp4" type="video/mp4"></source>
</video>
<audio>
     <source src="audio.oga" type="audio/ogg"></source>
     <source src="audio.mp3" type="audio/mpeg"></source>
</audio>
Canvas :

L’élément <canvas> permet de créer des éléments purement graphique par le biais de Javascript. La balise permet de définir un espace réservé aux dessins ou aux applications graphiques. Mozilla propose dès à présent un éditeur qui fonctionne entièrement sur canvas. (Mozilla Bespin)

Les attributs

Glisser-déposer :

L’attribut draggable rend un élément déplaçable par le biais du « drag and drop » de la souris.

Contenteditable :

Cet attribut met en place une zone d’expression libre. L’utilisateur peut, s’il le décide, modifier le contenu ainsi que les balises.

Les API

Les sites web hors-ligne :

Cet API permettra d’utiliser des applications web en offline.

La Géolocalisation :

Un API de Géolocalisation donnera la possibilité de donner la position de l’utilisateur.

Les éléments et attributs devenus obsolètes

  • Les balises
    • <frame>, <frameset>, <noframes> (En cause : l’inaccessibilité et l’inutilisabilité)
    • <acronym> (Cède sa place à abbr)
    • <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>…
  • Les attributs
    • accesskey (dans a, area, button, input, label, legend et textarea)
    • longdesc (dans img et iframe)
    • name (dans img, form et a)
    • name (dans img, form et a)
    • summary (dans table)

Les éléments redéfinis

  • <a> (pour les ancres)
  • <b>, <i>, <small>, <strong> (section de texte lue ou interprétée différemment du texte « normal »)

Conclusion

Beaucoup de nouvelles choses très prometteuses. La possibilité d’intégrer des contenus tels que de la vidéo et du son indépendamment de flash sera beaucoup plus pratique. L’accessibilité sera beaucoup plus présente grâce à la nouvelle sémantique de composition des pages.

Il ne reste plus qu’à attendre que le HTML5 soit totalement reconnu par les navigateurs, et peut-être déjà l’expérimenter !

]]> http://www.donchofolio.be/blog/html/html5-quoi-de-neuf/feed/ 2