Affinity-web`Blog

L'actu AW au quotidien

 

08

Déce 07

HTML5 un petit air de Paradis...

Posté à 15:07 par Fr 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 2017 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 136è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 :

95 articles dans la base de données

Archives ...

 

Oué il y a eu de ci de là des annonces de "fin du capitalisme&qu ...

Posté par eMeRiKa le 11/11/08 à 14:32 sur l'article Musique : une (fausse) crise

Après avoir suivi l'évolution de la crise actuelle et lu un certain n ...

Posté par dod le 10/11/08 à 20:39 sur l'article Musique : une (fausse) crise

Tu as tout à fait raison mais là c'est des histoires de mentalit&eacu ...

Posté par eMeRiKa le 10/11/08 à 19:15 sur l'article Musique : une (fausse) crise

Mais le but d'une entreprise est de ramasser le maximum d'argent et peu importe si ...

Posté par dod le 10/11/08 à 15:13 sur l'article Musique : une (fausse) crise

Le débat n'est pas de dire si les biens culturels sont au bon prix mais bien ...

Posté par eMeRiKa le 10/11/08 à 11:11 sur l'article Musique : une (fausse) crise

En réalité lorsque l'on s'interroge réellement sur le travail ...

Posté par dod le 09/11/08 à 22:17 sur l'article Musique : une (fausse) crise

Je ne sais pas comment les hologrammes fonctionnent mais cela a été u ...

Posté par dod le 09/11/08 à 22:07 sur l'article Fashionology LA : vêtement custom

C'était pas le but non plus ! la culture est pas gratuite, faut donc pas h&e ...

Posté par eMeRiKa le 03/11/08 à 11:27 sur l'article Musique : une (fausse) crise

422 commentaires dans la base de données

S'abonner au flux Rss

 

Springbreak mistake

Il faut faut Flash pour voir l'animation

jeux de skate sur iphone

Il faut faut Flash pour voir l'animation

Max Boublil nous parle de la Wii

Il faut faut Flash pour voir l'animation

Objet en lévitation

Il faut faut Flash pour voir l'animation

Comment énerver un flic en 30s

Il faut faut Flash pour voir l'animation

Google Streetview

Il faut faut Flash pour voir l'animation
 
LinkedIn
deviantart
Twitter
 
 
Cookee : idées recettes à partager

Voir toutes mes créations

 
  • @OSteEL non truc de dingue ! Ca marche avec flash ???
  • Wahou j'adore recevoir ce genre d'email ! Mon projet que relou que je dév depuis maintenant un bon moment se finit
  • @mrsize haha! Bah Counter-strike est tjs le jeu le plus joué sur le net (mis à part wow petre) et tourne sous le moteur de HL
  • Half Life à 98c pour fêter ses dix ans www.nofrag.com/2008/...
  • @JulienCoquet au fait dans tes clients tu as massivegamer.com ? :)
 

 

 

Chargement en cours!