Intégration web

HTML5 — Repenser le découpage des pages web et des contenus

Derrière les nouvelles balises proposées par HTML5 se cache un nouveau modèle de structuration. Jusqu’à présent, on rencontre souvent la structure suivante : un niveau de titre `h1` pour le nom du site et ça continue avec `h2` pour le titre des articles ; reste `h3` — `h6` pour structurer la prose, ce qui est suffisant ou pas. HTML5 introduit la notion de Sectioning Content (cf. le concept d’outline) de manière explicite avec les balises `section`, `nav`, `article` et `aside` ou de manière implicite a chaque utilisation d’un niveau de titre `h1`. →

Intégration web

html5media — Les balises HTML5 audio et video sans contrainte

Les balises HTML5 `video` et `audio` permettent d’incorporer du son ou de la vidéo dans une page web aussi simplement que s’il s’agissait d’une image. Mais comme le roi et la reine ne le veulent pas tous les navigateurs ne prennent pas en charge ces charmantes nouveautés, html5media a eu la bonne idée de rendre possible l’utilisation des balises `audio` et `video` sans se soucier de la compatibilité : le script se charge de fournir un player Flash (flowplayer) pour les navigateurs à la traine ! →

Intégration web

Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)

Toujours dans ma recherche de solution pour servir des déclarations CSS uniquement à Internet Explorer, je suis tombé sur une technique que j’appellerais «classification» sélective du `body` (ou de la balise `html`) en  fonction du navigateur. Une fois encore, les commentaires conditionnels serviront à détecter Internet Explorer pour ajouter une classe à la balise `html` pour éviter de créer une feuille de style dédiée à IE. →

Frameworks Javascript

Modernizr — Détection des fonctionnalités CSS3 et HTML5

Modernizr est une petite bibliothèque Javascript qui détecte la prise en charge (ou non) des fonctionnalités CSS3 et HTML5 comme @font-face, canvas, video, rgba(), border-radius, les fonds multiples, CSS Columns, etc. Modernizr teste plus de 20 fonctionnalités en quelques millisecondes pour ajouter des classes spécifiques dans la balise html indiquant indiquer la prise en charge (ou non) des propriétés testés par le navigateur. →

Le saviez-vous ?

20 méthodes jQuery à connaitre

20 méthodes jQuery à connaitre — Voici une bien belle liste de 20 fonctions jQuery peu connues qui vous permettront de faire face à de nombreuses situations : insérer du contenu dans le DOM avec before() et after() ; envelopper des balises existantes avec une nouvelle balise avec wrap(), wrapAll() ou wrapInner(), etc. Via RGWeb.

HTML & CSS

HTML5 — Et si on évitait la balise «section» dans une balise «article» ?

Ce billet fait partie d’une série de notes rapides prises lors de ma lecture des spécifications HTML5. Aujourd’hui, c’est le commentaire de Romy qui me donne l’occasion de rebondir sur le découpage d’une page web avec HTML5 et plus particulièrement la balise `section`. Dans ce billet, je m’éloigne un peu du commentaire de Romy et je voudrais souligner qu’elle a parfaitement raison quand elle dit que le rôle des balises `header` et `footer` est clair mais que leur traduction en En-tête et Pied de page prête à confusion ; il faudrait peut-être introduire la notion de meta information. →

HTML & CSS

HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»

Les nouvelles balises introduites par HTML5 ne sont pas très évidentes à utiliser. Plus que jamais, le contenu est roi et tout dépend de lui. Les notions de Sectioning Content implicites ou explicites risquent de se transformer en poil à gratter pour les intégrateurs web. Pour commencer, notre balise `div` préférée devra laisser du terrain à la balise `section` quand on pourra justifier d’un `h1` à l’intérieur. →