HTML5 se dévoile Le brouillon officiel (working draft) de HTML5 a été publié officiellement le 23 avril 2009 et depuis de nombreuses avancées ont été accomplies, les navigateurs supportant toujours plus de fonctionnalités et de nouveautés. La nouvelle génération du langage de balisage HTML remplacera à long terme HTML 4, XHTML 1.x et XHTML 2 qui a été abandonné. Profitons de cette occasion pour faire un tour d'horizon de cette nouvelle version de HTML. Consultez également toutes nos autres ressources HTML5 Qu'est-ce que c'est HTML5 ? Comme son nom l'indique, HTML 5 est le successeur de HTML 4. Le W3C c'est quoi déjà ? Le World Wide Web Consortium, abrégé W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Quelles sont les nouveautés ? <aside> Welcome! Les balises principales Doctype Le doctype est simplifié : Section Article Aside Nav
HTML5 Introduction Map/Area Exemple de balise <area> HTML5 Résultat, le navigateur affichera : Rouge = Accueil, Vert = Google Définition et usage La balise <area> définit une zone cliquable dans une image. La balise <area> est toujours imbriquée dans la balise <map> Les balises <map> et <area> permettent de créer un champ de navigation basé sur une image. Remarque : L’attribut usemap de la balise <img> est associé et identique à l’attibut de la balise <map>.Il crée une relation entre l’élément <map> et l’élément <img> Attribut de la balise <area> Évolution par rapport au HTML 4.01 De nouveaux attributs sont apparus en HTML5 tandis que d’autres ont été bannis (voir la liste ci-dessus). Attribut standard : La balise <area> prend en charge tous les attributs standard en HTML5. > Liste complète des attributs Attribut d’évènement : La balise <area> prend également en charge tous les attributs d’événement HTML5. > Liste complète des événements Les balises d’image en HTML5
Formulaires HTML5 : placeholder, required, pattern et validation HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur. Plusieurs attributs simples à mettre en place améliorent la prise en charge des formulaires, tout en se passant de JavaScript. placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire. C'est une valeur qui s'efface dès que l'utilisateur active le champ de formulaire (ou commence à écrire dedans si vous êtes sous Webkit). Mise en place Ce comportement a très longtemps été mis en place grâce à JavaScript et des techniques dans ce genre : Avec l'arrivée de HTML5, la syntaxe se simplifie pour donner : La présence d'un placeholder ne vous dispense pas de renseigner un label pertinent. Démonstration Éléments compatibles L'attribut placeholder peut être placé sur les éléments : <input> : de type text, search, password, url, tel, email <textarea> Compatibilité de l'attribut placeholder Styler le placeholder
Illustrator Tutorials & Tips | Vector Diary Liste des évènements HTML5 Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum. Évènement de fenêtre – Balise <body> Événements déclenchés pour l’objet window – fenêtre. Ils s’appliquent généralement à la balise <body> Évènement de curseur / souris Événements déclenchés par ula souris, son curseur, ses boutons ou sa molette – ou action similaire. Évènement de formulaire Événements déclenchés par des actions dans un formulaire. Évènement multimédia Événements déclenchés par les médias tels que les vidéos, les images ou les fichiers audio. Évènement du clavier Événements déclenchés par une touche du clavier ou une action similaire de l’utilisateur. Introduction à l’HTML5 Cet article est destiné aux débutants en HTML5, et à tous ceux qui souhaitent en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile. Si vous vous intéressez aux technologies du web, vous avez probablement déjà entendu parler de l’HTML5 aux cours des dernières années. Cette introduction va vous donner un premier aperçu de ce qui se cache derrière le terme HTML5, vous présentera le contexte dans lequel évolue cette technologie, et nous verrons un bon nombre de nouvelles fonctionnalités qu’il apporte. Sommaire : L’HTML5 c’est quoi ? L’HTML5 n’est pas… Tout d’abord, je suis convaincu que parmi vous certains se disent : L’HTML5, c’est un nouveau langage ? Ou encore : Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant. Voire : Pfff, moi qui venait d’apprendre l’HTML, je vais devoir tout réapprendre… Il est grand temps de clarifier les choses : L’HTML5 n’est pas un nouveau langage. L’HTML5 est… Le W3C et le WHATWG On y arrive !
Meter Autre nouveauté dans le monde HTML 5, c'est la balise METER. Fini le temps où des mesures traînaient un peu partout dans les pages sans qu'on puisse deviner par le markup la signification de chacun. La nouvelle balise Meter a été introduite pour corriger la sémantique de l'information de la page lorsqu'on veut indiquer une mesure dans une plage connue. De plus, ça s'affiche joliment.Essentiellement, vous pourrez indiquer que l'espace disque est utilisé à 35% ou que vous avez obtenu un pointage de 7/10 dans votre code HTML (exemple minimaliste) : <meter>35%</meter> <meter>7/10</meter> <meter>35%</meter><meter>7/10</meter> Visuellement, ça ne sert pas à grand chose si on n'établit pas les bornes dans laquelle se fait la mesure. <meter min="0" max="10" value="2">2/10</meter> <meter min="0" max="10" value="5">5/10</meter> <meter min="0" max="10" value="8">8/10</meter> Comment ça fonctionne ? <meter value="0.5">50%</meter> <meter value="0.5">50%</meter> Tags: HTML
La sculpture hyperréaliste | PomGraphik 22/11 2009 20h04 Auteur : iNaphrayoo Capables de reproduire à la ride près un humain pour mettre en exergue la déchéance d'un corps vieillissant ou obèse. Leur traits sont accentués par leurs tailles hors normes ou leurs positions pensives ou impossibles. Outre ses origines, l'homme a toujours voulu se recréer, se refaire à la perfection ou se repenser. Nous allons découvrir quelques sculpteurs devenus maîtres en matière de créations humaines. Jamie Salmon Britannique résidant à Vancouver, Jamie Salmon est spécialisé dans la sculpture hypperréaliste en utilisant les matériaux comme le caoutchouc, le silicone, la fibre de verre, l'acrylique et les cheveux humains. Duane Hanson Contrairement à Jemie Salomon, Duane Hanson est réfractaire à l'interprétation subjective que l'on peut donner à ses oeuvres. Evan Penny Dans une approche de questionnement de la réalité, Evan Penny force la prise de conscience de la perception du faux ou du réel.
HTML5 Microformats, microdata, nouvelle sémantique, nouveaux éléments HTML… Tant de nouveautés qui perturbent les intégrateurs web soucieux de se mettre à jour dans leurs compétences ou curieux de savoir ce dont ils peuvent déjà faire usage dans leurs intégrations. Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arrivée de HTML5 que la profession et les outils sont suffisamment mûres pour commencer à les exploiter réellement. Nous allons essayer de nous concentrer sur les microformats et, surtout, les microdata apportées par HTML5. Continue reading Bonjour à tous chers lecteurs, Ces 3 derniers mois ont été particulièrement intensifs, puisque j’ai co-écrit un livre nommé “HTML5 : De la page web à l’application web” avec mon confrère blogueur de l’HTML5 Jean-Pierre Vincent, créateur et animateur de braincracking.org. Continue reading Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Continue reading Continue reading
The HTML5 test - How well does your browser support HTML5? Input HTML 4 était bien limité concernant les types de champs. HTML5 apporte énormément en terme de nouveautés. Ces innovations sont réunies sous un nom : les Web Forms (ou HTML5 Forms). Souvenez vous des éléments de saisie et de soumission de formulaire en HTML4 assez peu nombreux : <textarea> <select> (<option> et <optgroup>) <button> <input> (text, password, file, radio, checkbox, submit, image, hidden, reset,button) Grâce à l'apport de HTML5 et des Web Forms, de nouveaux éléments et types d'éléments arrivent dans nos formulaires. Les nouveaux types d'<input> Comme listés précédemment, les types de champs n'étaient pas nombreux. Au moment de mes tests, j'ai constaté que Chrome - qui prenait en charge certains types d'input de type datation dans ses versions précédentes - a revu ses compétences à la baisse dans la version 16. La plupart des nouveaux types non pris en charge par un navigateur sont traduits par un champ de type text. Les nouveaux éléments de formulaire