Affinity-web`Blog

L'actu AW au quotidien

 

08

Déc 07

HTML5 un petit air de Paradis...

Posté à 15:07 par eMeRiKa - Catégorie Catégorie : Programmation

 

Après vous avoir parlé récemment de la prochaine version de PHP (la sixième), voici maintenant des informations sur la prochaine évolution de l'HTML en bonne partie tiré d'un article anglophone de A List Apart.

Si vous avez suivi le lien vers A List Apart, vous avez pu découvrir que l'article se nomme "preview of HTML 5", surprenant étant donné qu'actuellement nous travaillons avec xHTML et non plus HTML4. Il faut savoir que la prochaine version de l'HTML a provoqué de nombreux débats. Le W3C, organisme émettant les recommandations des standards du web, supervisé par Tim Berners-Lee le principal inventeur du web, a proposé le xHTML2 comme évolution du xHTML. Mais devant les profonds bouleversements proposés (pas de rétrocompatibilité avec HTML4/XHTML1 en autres), un autre groupe de travail c'est formé, le WHATWG composé de Mozilla, Opera et Apple travaillant sur le HTML5.

Finalement, le W3C a realisé qu'imposer un changement brutal avec le xHTML2 ne marchera pas, et a rejoins le WHATWG sur le travail du HTML5. Néanmoins, le xHTML2 reste en développement pour d'autres domaines et le HTML5 proposera une déclinaison xml pour en faire une évolution à la fois du HTML4 et du xHTML.

La seule chose à retenir est que l'HTML5 est la prochaine version du langage, voyons maintenant ce qui nous attend.

La structure

L'HTML5 va introduire de nouvelles balises pour structurer les pages, voici un exemple d'une page actuelle en xHTML :

<div id="header">...</div> <div id="nav">...</div> <div class="article"> <div class="section"> ... </div> </div> <div id="sidebar">...</div> <div id="footer">...</div>

Des balises header, nav, article, section, aside, footer apparaîssent en HTML5 pour mieux structurer le document, elles se comportent comme des divs. Notre structure devient :

<header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer>

Il est alors très facile de structurer une page avec l'ajout de ces nouveaux éléments, on peut très bien utiliser plusieurs balises de chaque type et leur associer des id et class. Pour les navigateurs non visuels, c'est un excellent moyen de leur indiquer d'aller directement aux balises article ou nav.

Audio et vidéo

Mais le véritable air de paradis vient de l'ajout des balises video et audio, c'est la fin des players flash, windows media player ou quicktime. Les navigateurs seront en mesure de jouer vos musiques et vidéos nativement, c'est une véritable révolution qui se prépare.

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> </video> <audio src="music.oga" controls> </audio>

L'attribut controls est un booléen permettant de spécifier le démarrage automatique ou pas de la vidéo et musique, l'attribut poster permet d'attribuer une image à la vidéo pour les navigateurs ne supportant pas la vidéo ou le HTML5.

Les balises audio et vidéo permettent de spécifier différentes sources et d'ajouter d'autres balises à l'intérieur, par exemple un lien pour télécharger la musique.

<audio> <source src="music.oga" type="audio/ogg"> <a href="music.oga">Download song</a> <source src="music.mp3" type="audio/mpeg"> </audio>

Il existe bien entendu des balises button permettant avec du javascript de contrôler la lecture, l'arrêt des médias, de revenir au début, et bien d'autres choses encore.

<video src="video.ogg" id="video"></video> <script> var video = document.getElementById("video"); </script> <p><button type="button" onclick="video.play();">Play</button> <button type="button" onclick="video.pause();">Pause</button> <button type="button" onclick="video.currentTime = 0;"> << Rewind</button></button><p>

Associer à du CSS, ces players sont totalement skinnables et permettront de simplifier l'ajout de vidéos et musiques sur Internet.

Enfin, comme je vous l'annonçais l'HTML5 se veut l'évolution à la fois du HTML4 et du xHTML, il existera donc deux types de syntaxes. Celle du HTML :

<!DOCTYPE html> <html> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document. </body> </html>

Et celle du xHTML :

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p> </body> </html>

Il s'agit du même type de différence entre HTML4 et xHTML, la première permettra une meilleure compatibilité avec les navigateurs anciens et des tags et attributs pourront être omis. A l'inverse la deuxième syntaxe reprendra celle du XML, la rendant plus facile à maintenir mais plus sctricte.

Ces quelques fonctionnalités mises en avant sont très intéressantes. Hélas, nous aurons largement le temps d'en reparler, d'ici qu'un certain navigateur intègre ces fonctionnalités et que les utilisateurs comprennent qu'il faut mettre à jour son navigateur...

Les derniers articles de la catégorie : Programmation

Lu 3525 fois

Article Précédent

 

Commentaires de cet article

 

 

Wahoo ! la vidéo et le son en natif + des balises qui nous machent le travail ! ca envoie de la chechette ca comme dirait Deuns ^^ !

question con par contre : ca va pas poser un probleme de compatibilité avec les anciens navigateurs (de compréhension des nouvelles balises quoi) ? pas sur que tout le monde fasse les mises à jours (s'il y en a pour tous les navigateurs...)

#1 Posté par Vincent le 08/12/07 à 21:27, son 3ème commentaire

dans l'art de répéter ce qui est écrit dans l'article, je fais très fort :) la prochaine fois je lirais l'article jusqu'à la fin, promis ! histoire que ma question ne reprenne pas ta conclusion :(

#2 Posté par Vincent le 09/12/07 à 13:54, son 3ème commentaire

Non mais tu as raison, les balises header, nav, article, section vont poser problème, je sais pas comment les anciens navigateurs vont les interpréter.

L'histoire de la syntaxe HTML ou xHTML choisie n'y changera rien!!

#3 Posté par eMeRiKa le 09/12/07 à 15:01, son 191ème commentaire

Ah quelle bonne nouvelle !

#4 Posté par Furious le 11/12/07 à 08:41, son 3ème commentaire

 

* Pseudo :

* Email : (Non affiché)

Site web :

* Message :

133 articles dans la base de données

Archives ...

 

Bonjour, Je pense que la constante de tous ces sites est bien le design ép ...

Posté par France Montagne été le 08/03/10 à 12:59 sur l'article Comparaison de 13 sites webs marchands

Je rejoins Neostng, les communqiués qu'on m'envoie sont BOF ! et quand ils s ...

Posté par weetabix le 02/03/10 à 01:32 sur l'article Les communiqués de presse 2.0

Je suis totalement d'accord avec toi NeoSting, un communiqué comme tu le d&e ...

Posté par eMeRiKa le 20/02/10 à 15:04 sur l'article Les communiqués de presse 2.0

Enfin ! Faut avouer que les CM que je reçois, si je ne les relaye pas, c'est ...

Posté par NeoSting le 19/02/10 à 20:51 sur l'article Les communiqués de presse 2.0

Un site hyper pratique qui regroupe toutes les personnes influentes sur twitter en ...

Posté par Sophie le 13/01/10 à 12:07 sur l'article Twitter, pourquoi s'y mettre ?

Je pense aussi que google pense (et je pense pareil) que plus tard, tout sera sur l ...

Posté par Akah le 10/01/10 à 23:32 sur l'article Google Chrome

Pour moi c'est tout simple : Microsoft a été obligé de ne plus ...

Posté par thomas landru le 10/01/10 à 21:15 sur l'article Google Chrome

Google veut tout simplement économiser de l'argent (ou mieux dépenser ...

Posté par Guillaume Payre le 07/01/10 à 22:09 sur l'article Google Chrome

654 commentaires dans la base de données

S'abonner au flux Rss

 

Singstar : une love story qui sonne faux

Il faut faut Flash pour voir l'animation

Clip the parachute ending - Birdy Nam Nam


BIRDY NAM NAM - THE PARACHUTE ENDING Clip Officiel
par Has_Been

Google Street View Slow motion

Il faut faut Flash pour voir l'animation

Cat Shower 2

Il faut faut Flash pour voir l'animation

Wii Kebab

Il faut faut Flash pour voir l'animation

Le Jour du Permis - Facebook

Il faut faut Flash pour voir l'animation
 
LinkedIn
deviantart
Twitter
 
  • aura mérité son wk, Microsoft m'a pourri ma semaine avec son non respect des standards...
  • ha tiens je découvre que Microsoft a viré énormément de propriété CSS entre outlook 200 et 2007 comme background-image, float !
  • @ThierryDebarnot clair leur ancienne version était super lisible, celle là c'est la cata... c'est plus le même graphiste !
  • @nephthys tout à fait une boite et des locaux, plus d'infos www.oxent.net
  • Ouverture la semaine pro de Digipresse : service en ligne de diffusion de communiqués de presse, spécialisé dans les nouvelles technologies
 

 

 

Chargement en cours!