HTML 5 : structurer un document
Comment structurer un document avec les nouveaux éléments HTML 5 ?
Tags: html
notes (29)
Debug d'éléments vide
Un petit truc CSS pour visualiser rapidement dans une pages web des éléments vides (et qui ne devraient pas l'être).
Récupérer le code source d'une page html en javascript
Un collègue m'a posé une question ce matin au boulot : comment récupérer le code source d'une page HTML en javascript ? Cerise sur le gâteau : cela doit fonctionner sous IE 6...
Des graphiques dans du HTML : svg ou canvas ?
Alors que j'ai besoin de développer un petit outil simple en javascript pour dessiner des graphiques, j'hésite encore entre les deux technologies actuellement disponibles : SVG et canvas...
Taxonomie, classes HTML, attributs personnalisés, microdata et RDFa
Ayant une heure à perdre, je me suis demandé de quelle manière nous pourrions structurer le nom d'un taxon biologique en HTML, voir sa hiérarchie, et surtout à l'aide de quels éléments et/ou attributs.
Un élément HTML 5 dialog
Un nouvel élément HTML 5, dialog, est en cours de définition ; il correspond exactement à un objet de ma librairie javascript (FloatPane) et à ce qui se fait par ailleurs couramment dans les interfaces graphiques : une fenêtre de dialogue.
Comment décrire un ouvrage dans un document web
Avec la mise en place de la bibliothèque, j'ai cherché la meilleure manière de présenter les données descriptives d'un ouvrage dans un document web. Sans avoir trouver de solution idéale, voici quelques ressources intéressantes.
Langages de programmation, de structure et de présentation
Quel est l'avantage/inconvénient d'un langage de structuration comme le HTML ou un langage de présentation comme le CSS, par rapport à des langages de programmation comme le php ou le java ?
Geoscale, le retour de la vengeance II
J'avais repris le développement de mon objet javascript de constuction d'échelle géologique il y a quelques mois. Il me restait encore à définir le code HTML de rendu ainsi que la mise en forme. Une petite heure de brainstorming et code plus tard, j'arrive enfin au bout du chemin...
Effet de vague sur une liste d'items
Le bling-bling sévit partout, y-compris dans le développement web. Exemple : les items de liste du pied-de-page du blog {Sciences²} (dont la lecture est par ailleurs fortement recommandée). Autant j'aime l'effet rendu, autant la manière de l'obtenir me laisse, comment dire, perplexe...
Préciser le format des vidéos en HTML 5
Mon premier test de vidéo sur ce site était imparfait : si les films étaient correctement affichés localement, ils n'étaient pas visibles sur le site en ligne. La faute au type MIME...
Afficher l'en-tête d'un document web
L'élément head d'une page web n'est généralement pas affiché par les navigateurs web. Rien ne nous empêche cependant de modifier ce comportement par défaut.
logo HTML 5
News web
Quelques liens qui trainent encore dans mes notes, du leadership de Firefox en Europe à une rétrospective 2010 orienté web.
Traversée aléatoire des éléments
Les nouvelle spécifications web (HTML 5 , DOM 3, CSS 3) sont de plus en plus implémentées dans les navigateurs web, à des degrés divers certes mais de manière suffisante pour pouvoir déjà être utilisées dans nos documents. Sauf qu'il faut encore et toujours faire attention : Le « browser implementation sniffing » n'est pas mort.
Sélecteurs, identifiants et classes
Il existe plusieurs manières d'appliquer des styles aux éléments d'un document web à travers la notion de « sélecteurs ». On use (et abuse) souvent de deux d'entre eux, les sélecteurs de classes et les sélecteurs d'ID, mais pourrions-nous nous en passer ?
HTML5 pour les développeurs
A quoi voit-on que le HTML 5, malgré tous ces défauts, est tout de même un language qui facilite la vie des développeurs ? Quand on s'apperçoit que des techniques que l'on utilise depuis des années sont dorénavant intégrées aux spécifications. Petit exemple avec la manipulation de l'attribut class.
News web
Du neuf avec HTML 5, Firefox 3.5, la vidéo sur le web et les moteurs de rendu javascript ; du vieux avec - toujours et hélas - Internet Explorer 6.
Bug sur les champs texte dans Firefox
Ce n'est pas la première fois que je rencontre ce bug mais je m'étais jusqu'alors arrangé pour le contourner : le contenu par défaut d'un champ texte peut parfois disparaître sous Firefox 1.5.* et 2.*. Comme il m'a fallu cette fois-ci absolument le corriger au boulot, voici les solutions auxquelles je suis parvenu.
Nouvelles du web en vrac
Pas grand chose sur ce site ces dernières semaines ; j'y reviendrai plus tard. En attendant, voici quelques lectures très instructives.
Nouvelle maquette de Framasoft en ligne
Cela a pris plus de temps que prévu, mais on voit finalement le bout du tunnel : après la page d'accueil, c'est finalement l'ensemble du site Framasoft qui a fait peau neuve cette nuit, non sans difficultés d'ailleurs.
Réinventer le HTML
The plan is to charter a completely new HTML group. Unlike the previous one, this one will be chartered to do incremental improvements to HTML, as also in parallel xHTML. It will have a different chair and staff contact. It will work on HTML and xHTML together. We have strong support for this group, from many people we have talked to, including browser makers.
NoteCase
NoteCase est un nouvel éditeur de texte hiérarchique, développé depuis près de deux ans maintenant et qui vaut le détour. Petit survol de ses fonctionnalités.
Evolution du code
La dernière phase de mise à jour du site touche à sa fin avec le remaniement de la maquette. De petites modifications dans la forme mais aussi dans la structure des pages.
Navigateurs web et support des standards
L'un des arguments souvent avancé pour convaincre les internautes d'adopter un navigateur web comme Firefox/Mozilla ou Opera en lieu et place d'Internet Explorer, c'est leur meilleur gestion des standards web du W3C. Mais qu'en est-il vraiment ?
Menus de navigation : sémantique, structure, implémentation ?
Parmi les thèmes en vogue, la structure à donner à un menu de navigation fait régulièrement couler beaucoup d'encre, et donne lieu à des solutions aussi diverses qu'inventives : listes ordonnées, listes de définition, paragraphes… Tout ou presque est mis à contribution dans la recherche d'une structure que l'on voudrait à la fois valide, sémantique, accessible, belle et ergonomique.
Des identifiants en moins
Poursuite du nettoyage du code des pages du site, avec la suppression d'identifiants inutiles. Si le gain en taille est anecdotique, cela simplifie tout de même la lecture des sources.
Des corrections nécessaires
Commençons donc par le commencement: le petit lifting subie par le site. En dehors de l'envie de changer, une nouvelle maquette s'avérait nécessaire pour plusieurs raisons.
Petites corrections techniques
Quelques petites corrections techniques.
articles (17)
Numérotation des listes ordonnées
Quelques petites techniques css et/ou javascript pour modifier le comportement par défaut des listes à puces ordonnées.
HTML 5 : l'élément details
J'ai développé en 2007, au boulot, un composant javascript appelé « InfoBox » qui fait ce qui est aujourd'hui proposé par l'élément details dans les spécifications HTML 5 (et même un peu plus). Cet élément n'est encore implémenté que par très peu de navigateurs web. Voici quelques pistes pour l'utiliser / le simuler.
Click sur des labels
La délégation d'écoute d'événements est très préciseuse en javascript mais, dans certains cas, elle peut engendrer des comportements particuliers. C'est le cas si l'élément sur lequel on écoute les événements « click » possède un label.
HTML 5 : l'élément meter
Petite introduction à l'utilisation du nouvel élément HTML 5 meter et à la manière de lui assurer un rendu sur les navigateurs qui ne le supporte pas.
HTML 5 : l'élément progress
Petite introduction à l'utilisation de l'élément progress, apparu dans les recommendations HTML 5.
Caractères unicodes
Petit memento sur l'utilisation des caractères unicodes dans différents langages de programmation / structuration / présentation. Un travail en construction...
Citations et références en HTML
Une série d'articles ces derniers jours m'a amené à aborder la question des citations dans un document web, et à expliquer les techniques que j'utilise depuis plusieurs années.
Position absolue et centrages d'un élement HTML
Petite introduction à la manière dont on peut obtenir le centrage, à la fois vertical et horizontal, d'un élément HTML positionné en absolue.
Position absolue et taille des éléments HTML
Travaillant principalement sur un produit permettant de construire des applications web, j'ai souvent dû expliquer à mes collègues issus du monde java le pourquoi du comment du positionnement et de la taille des éléments HTML en CSS. Ceci est un texte rédigé pour expliquer la chose...
Validateur HTML5 sous Ubuntu
Ayant de plus en plus de mal à faire fonctionner l'extension Firefox HTML Validator sous Linux, et parce qu'il faut bien tester un minimum la tenue de son code HTML 5, et qu'il n'est pas toujours possible d'utiliser un service en ligne, j'ai décidé d'installer en local un validateur HTML5. Voici comment faire.
Omacronides 5
Après des mois passés à tripatouliier le code (et donc, comme d'habitude,sans écrire grand chose), voilà enfin une nouvelle évolution du site. Outre les habituelles corrections de bugs et évolutions mineures, deux changements majeurs : le pasage au HTML 5 et la gestion de données au format JSON.
Dimensions des tableaux HTML
La présentation des tableaux en HTML peut parfois être irritante, surtout lorsque vous souhaitez leur donner une taille précise. Voici quelques petites astuces qui permettent de récupérer une largeur et une hauteur définie.
Nouvelle page d'accueil du site Framasoft
Et bien voilà : cela à pris plus de temps que prévu, tout n'est pas terminé, loin de là, mais nous lançons aujourd'hui une nouvelle page d'accueil de Framasoft, certains diraient en version « beta ».
Mettre en forme une balise select
Les feuilles de styles servent à mettre en forme n'importe quel élément d'une page web. Pourtant, une balise HTML pose problème : le champ de sélection select utilisable dans les formulaires. Voici quelques pistes pour contourner certaines limites dans le rendu des navigateurs web.
Notes dans un document web
Internet, en tant que nouveau vecteur de contenu rédactionnel, nécessite de repenser des modèles d'édition créés pour d'autres supports. C'est le cas par exemple des « notes de bas de page » : ont-elles encore un sens dans une publication sur la toile mondiale ? Et comment les présenter ?
Ressources sur les standards web
Sur le modèle des pages « Ressources Mozilla » et « Charles Vess, ressources et références », voici une liste de liens qui vous aidera à découvrir les standards de publication sur internet.
Utiliser Keynote comme éditeur HTML
Keynote est un puissant éditeur de texte, facilitant la hiérarchisation de documents dans des notes arborescentes. La richesse de ses fonctionnalités permet même de l'utiliser de manière détournée pour éditer des pages HTML.
projets (2)
TaskList
Document de travail prélude à la création d'un ensemble de codes, html, css, javascript et wiki permettant de gérer une liste de tâches.
Simple Slides
SimpleSlides est un projet tout simple, un POC pour illuster la manière dont on peut réaliser rapidement une visionneuses d'images avec du HTML, un peu de CSS et de javascript. Sa seule ambition est d'éventuellement servir de base à des projets plus aboutits et complets.
links (27)
Hgroup retiré des specs HTML 5.1
FAULKNER, Steve. revisiting <hgroup> in HTML. W3C HTML Working Group mailing list,
Bon, j'ai supprimé les éléments hgroup utilisés sur le site, notamment dans l'en-tête des pages. Tous les titres faisant office de sous-titres ont été remplacés par des paragraphes portant la classe subtitle.
HTML et DRM
ECKERSLEY, Peter ; SCHOEN, Seth. Defend the Open Web: Keep DRM Out of W3C Standards. EFF,
Tim Berners-Lee et les DRM
DOCTOROW, Cory. What I wish Tim Berners-Lee understood about DRM. The Guardian, . Traduction française.
Tim Berners-Lee ne serait pas opposé aux DRMs dans HTML 5 ?! Oula...
Templates
WEINSTEIN, Rafael. Chrome 26 Beta: Template Element & Unprefixed CSS Transitions. The Chromium Blog,
DRM dans HTML 5
SPORNY, Manu. DRM in HTML5. The Beautiful, Tormented Machine,
Email et HTML
L'intégration d'e-mails responsive. HTeuMeuLeu, . Que ca me rappelle de très mauvais souvenirs lors de la création de newsletters dans ma boîte actuelle...
Animation CSS
DE MOURA, Felipe Nascimento. A tale of a CSS3 Animation Demo. hacks.mozilla.org,
Lien du 07 décembre 2012 à 20:00
MUNROE, Randall. Tags. xkcd,
Lien du 08 novembre 2012 à 20:00
HEILMANN, Chris. HTML5 mythbusting. hacks.mozilla.org,
Lien du 22 octobre 2012 à 18:00
FAULKNER, Steve. maincontent element. W3C,
Proposition de nouvel élément HTML maincontent qui correspond en tout point à ce que je fais sur ce site et de manière générale dans tout document web : la définition d'une zone correpondant au contenu stricto sensu de la page, par opposition au contenu récurrent comme la navigation du site et autres infos diverses.
<header role="banner"></banner>
<div id="main" role="main"></div>
<footer role="contentinfo"></footer>#main pourrait être remplacée par un élément maincontent.Web plateform Docs
Lancement de Web plateform Docs, un site communautaire chargé de réunir et de publier de la documentation autour des technologies web, soutenu par le W3C, Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla et Opera (vous trouvez pas qu'il manque quelqu'un là...).
Lien du 12 septembre 2012 à 20:00
VALIN, Jean-Marc ; TERRIBERRY, Timothy. It’s Opus, it rocks and now it’s an audio codec standard!. https://hacks.mozilla.org/2012/09/its-opus-it-rocks-and-now-its-an-audio-codec-standard/,
Lien du 26 juillet 2012 à 20:00
HICKSON, Ian. [whatwg] Administrivia: Update on the relationship between the WHATWG HTML living standard and the W3C HTML5 specification. public-whatwg-archive@w3.org Mail Archives,
Lien du 27 mars 2012 à 20:00
ROUGET, Paul. BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment. hacks.mozilla.org,
Lien du 09 mars 2012 à 20:00
ŽáRA, Ondřej. Developing a simple HTML5 space shooter. hacks.mozilla.org,
Lien du 16 janvier 2012 à 20:00
FOLIOT, John. Accessible HTML5 Forms – Required Inputs. Unrepentant,
Lien du 02 novembre 2011 à 20:00
KEITH, Jeremy. Timeless. Adactio,
STUDHOLME, Oli. Goodbye time, datetime, and pubdate. Hello data and value.. HTML5 Doctor,
Lien du 26 juillet 2011 à 20:00
CLARK, Richard. Avoiding common HTML5 mistakes. Html5 Doctor,
Parmi toutes les erreurs listées, je n'en commets qu'une : utilisation d'un élément nav pour tout type de navigation : menu de navigation du site, table des matières d'une page,
Lien du 12 juillet 2011 à 18:00
LAZARIS, Louis. Aside vs. Blockquote in HTML5. Impressive Web,
En gros, utiliser les blockquote quand on cite une source extérieure ; utiliser aside quand il s'agit de (re)prendre un extrait du contenu pour le mettre en exergue. Ce qui semble logique.
Lien du 06 juillet 2011 à 14:00
LAMOURI, Mounir. The HTML progress element in Firefox. Mounir Lamouri's Blog,
Lien du 28 juin 2011 à 20:00
MILLS, Chris. Introducing the HTML5 History API. Dev.Opera,
Lien du 28 juin 2011 à 18:00
STUDHOLME, Oli. Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute. Html5 Doctor,
Intéressante synthèse sur la manière de citer dans un document web. Concernant le fait de noter les sources d'un blockquote, j'ai résolu le problème en les incluant dans une figure : <figure><blockquote>[CITATION]</blockquote><figcaption>[SOURCE]</figcaption></figure>. Pour ce qui est du cite, je l'utilise depuis des années uniquement pour marquer les titres d'ouvrages, de films, de sites web,...
Lien du 25 juin 2011 à 16:00
GLAZMAN, Daniel. Why html5 elements INS and DEL suck. Glazblog,
j'utilisais ins et del dans le projet css-checklist (devenu les tasklist) ; ils possèdent une syntaxe wiki dédiée où je les considère toujours comme des éléments inline, si bien qu'une ligne marquée comme supprimée est rendue sous forme <p><del>...</del></p>. Ce n'est évidemment pas l'idéal. L'idée d'attributs indiquant l'état de l'élément est plutôt séduisante.
La naissance du web
CALORE, Michael. 20 Years Ago, The Web's Founders Ask for Funding. WebMonkey, . Il y a 20 ans, 2 gus dans un garage au CERN demandaient des financements pour développer un petit projet de rien du tout : l'« Hypertext project ».
Le filtrage d'Internet viole l'État de droit. La quadrature du Net, . 20 ans plus tard, voilà où on en est.
HTML 5 et néologismes
CROFT, Jeff. On the term “HTML5”. jeffcroft.com, . Sur l'utilisation du terme « HTML 5 », qui commence à désigner le HTML 5 à proprement parler mais aussi toutes les autres nouvelles spécifications web (CSS 3, DOM 3, Geolocation, etc.). Bruce Lawson propose NEWT (« New Exciting Web Technologies ») ; Jeffrey Zeldman pencherait plutôt pour HART, « HTML5 And Related Technologies », et ça sonne plutôt bien. Pourquoi ne pas simplement parler d'Open Web, ou d'Open Web technologies ?
Lien du 29 octobre 2010 à 20:00
LAWSON, Bruce. Five things carrots can do that HTML5 can’t. brucelawson.co.uk, . Le HTML5 c'est tout pourri : on peut faire beaucoup plus de trucs avec… une carotte !
Lien du 19 octobre 2010 à 18:00
- Nouveau format d'image par Google : webP.
- Slideshow en html5/css3 par Paul Rouget.
- Les débuts du HTML.
- Les préfixes css des constructeurs de navigateurs web.
- PromoteJS, pour améliorer la visibilité de la bonne documentation javascript dans les moteurs de recherche.