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 3914 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 192è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 :

135 articles dans la base de données

Archives ...

 

bonjour moi je connais une adresse mail contact francophone oiu on peut commander s ...

Posté par seb le 11/08/10 à 22:24 sur l'article Acheter ses cigarettes sur internet

bonjour ou on peut acheté des clop en ligne

Posté par nana le 08/08/10 à 16:40 sur l'article Acheter ses cigarettes sur internet

Pour la livraison je compte 2 semaines J'y suis depuis quelques temps je oeux vous ...

Posté par jean le 07/06/10 à 08:39 sur l'article Acheter ses cigarettes sur internet

Seite ist im Aufbau

Posté par extrem le 28/05/10 à 13:11 sur l'article Digipresse en ligne

Cigarettes bon marché en ligne Cigarettes bon marché - Les cigaret ...

Posté par 561zeevwi le 03/05/10 à 12:37 sur l'article Acheter ses cigarettes sur internet

Bonjour tout le monde, Merci eMeRiKa pour ce tuto très clair, mais j'aimerai ...

Posté par spykoN le 30/04/10 à 10:45 sur l'article Tutorial : Ajax avec Prototype

Je ne trouve pas de référence à FF comme le principal concurre ...

Posté par eMeRiKa le 18/04/10 à 18:27 sur l'article Google Chrome

Je ne suis pas d'accord sur le fait que Firefox soit le principal concurrent de Chr ...

Posté par Tof le 17/04/10 à 00:51 sur l'article Google Chrome

664 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
 
  • RT @blozie: Facebook adopte le modèle d?influence de Twitter tinyurl.com/27qf47p...
  • @bJonathan merci pour le rt:)
  • @startupz ça c'est du FF, merci
  • sympa la campagne du SELL sur les jeux violents http://bit.ly/aW4HS4
  • #FF @clmntlxndr @XavierRapido @VincentGarreau @startupz
 

 

 

Chargement en cours!