HTML5 : structure globale du document
Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. <! Le doctype La première ligne d'en-tête a été considérablement simplifiée. Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs - de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. L'élément racine <html> L'attribut lang (sur <html>) Initializr
HTML5 : L'élément <datalist>
Avec l'annonce d'HTML5, de grandes nouveautés accompagnent les formulaires. Ils peuvent enfin s'enrichir afin de s'adapter au plus près des nouveaux besoins. Ainsi l'élément <datalist> fait son entrée. Des suggestions de choix Inauguré avec la vague HTML5, <datalist> est un élément de formulaire permettant de lier une liste de choix à un élément input. Par défaut, <datalist> demeure invisible. Compatibilité navigateur de l'élément <datalist> Un navigateur ne supportant pas l'élément n'affichera aucune suggestion. Utilisation classique Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte <input type="text"> à une liste de suggestions. <label for="choix_bieres">Indiquez votre bière préférée :</label><input list="bieres" type="text" id="choix_bieres"><datalist id="bieres"><option value="Meteor"><option value="Pils"><option value="Kronenbourg"><option value="Grimbergen"></datalist> Démonstration Aperçu sous Internet Explorer 10 Utilisation multiple Démonstration
HTML5 Please - Use the new and shiny responsibly
20 canvas HTML5 pour vous inspirer
Ah les canvas en HTML5 c'est vraiment sympa et le débat est toujours aussi animé entre l'utilisation de Flash et des canvas HTML5. Mais depuis qu'Adobe a annoncé se concentrer sur HTML5 au détriment de Flash, je pense qu'il est temps de voir quelques réalisations croustillantes de canvas HTML5 pour vous inspirer. L'utilisation des canvas a besoin de décoller car en ce moment il en est encore à son stade "trial" en raison de la limitation au niveau des navigateurs et le manque de ressources au niveau du code et des tutoriaux. Mais il ne demande qu'à grandir! HTML5 offre de grandes possibilités et de fonctionnalités avancées par rapport à ce que l'HTML est capable de faire. L'aspect le plus puissant d'HTML5 est sans doute les canvas. Dans la suite de cet article vous trouverez 20 canvas HTML5 avec des animations, des jeux et des outils
HTML5 Reference Poster | XHTML-Lab
HTML5 is the hot cake today. Everybody in the community is making efforts to promote the language, and to make it easier to use and learn. W3C has even announced a new logo for HTML5 to give it a new face. We have made a modest effort to create a HTML5 Reference Poster; we hope that this poster makes it easier to use HTML, for professionals with varied experience levels. Design The poster is designed keeping in mind that it looks beautiful and professional in your office, your lab, the conference room, and why not in your living room if you are living HTML day in and day out! Features This poster covers all HTML5 tags (almost, because HTML5 is still in development). Tags are grouped in 8 categorized tables to make it easier to find and manage them. Metadata and scriptingDocument sectionsGrouping contentText-level semanticsFormsTabular dataInteractive elementsEmbedding content Update:
HTML5 <vidéo>
L'élément <video>, cousin de <audio> offre en HTML5 une solution simple, native pour les navigateurs pour l'intégration d'une vidéo dans une page web. Elle permet également de proposer une alternative à l'utilisation de Flash pour les plate-formes ne le supportant pas (iOS par exemple avec iPhone, iPod, iPad…) Balise Syntaxe générale La syntaxe de base de la balise video est extrêmement simple : <video controls src="video.ogv">Ici la description alternative</video> L'attribut src définit bien entendu l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Sources multiples On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type : <video width="400" height="222" controls="controls"><source src="video.mp4" type="video/mp4" /><source src="video.webm" type="video/webm" /><source src="video.ogv" type="video/ogg" /> Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
video + canvas = magic
You’ve already learned about the <video> and <canvas> elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser except Internet Explorer.) First, the basics If you’re just starting with HTML5, you may not be familiar with the <video> element and how to use it. The <video> element contains two attributes: @controls and @loop. Then, inside the <video> element, we have three child <source> elements, each pointing to a different encoding of the same video. See this code in action, playing the intro to one of the greatest cartoon series of all time. (A note about fallback: all of these demos assume that your browser has <video> support, which isn’t true in IE8 or earlier. Now, a simple example Done? <! },false);
Formation en soirée Objet Direct : HTML5 ! Le 25 juin à Toulouse | Objet Direct
Write once, run every … Smartphone Ou comment développer 1 application en HTML5 compatible avec la majorité des Smartphones. L’engouement actuel pour les Smartphones a conduit de nombreuses entreprises à développer des applications spécifiques pour l’iPhone, Android, BlackBerry, Windows Phone, Symbian, … Avec l’adoption massive par les navigateurs Web de HTML5 et de CSS3 d’une part, mais aussi du moteur WebKit d’autre part, il est possible aujourd’hui de n’investir que dans un seul développement. Alternative aux APIs propriétaires, HTML5 et CSS3 permettent néanmoins de construire des applications dont l’apparence est proche d’une application native. Nous commencerons cette formation par la découverte des principales APIs de HTML5. HTML5 versus un développement natif, L’avenir de HTML5. Vous allez : Informations et inscription* : afouquet[@]objetdirect.com (attention : le nombre de places est limité !) *Participation gratuite après confirmation par Objet Direct
L’infographie ultime sur le HTML 5
Le HTML 5 s’annonce depuis pas mal de temps comme l’une des technologies qui va permettre de multiplier encore plus les usages du Web. Si vous avez toujours voulu savoir en quoi consistait cette évolution sans jamais avoir osé le demander (bande de petits canaillous ! :-p), voici une très bonne infographie qui fait le point sur cette technologie en passe de changer nos habitudes en ligne : Si vous travaillez dans le Web, il va vraiment falloir s’y mettre ! Source et Image
