La nouvelle balise <hgroup> en HTML5

Voilà une balise intéressante à utiliser dès maintenant pour ceux qui utilise déjà HTML5.

Si je reprends la définition du W3C :

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

Donc en gros, la balise <hgroup> permet de regrouper plusieurs éléments décrivant un en-tête de section. (ex : titre avec un sous-titre ou titre avec un slogan, etc)

Imaginons par exemple un site web corporatif qui à son logo et un slogan en dessous.

Blog HTML5 - hgroup tag

Le code approprié serait :

<header>
<hgroup>
<h1 id="logo">Budget en ligne</h1>
<h2>Planifier son budget intelligemment</h2>
</hgroup>
</header>

C’est simple, efficace et on comprend plus facilement l’intention en analysant le code source.

This was posted 2 years ago. It has 4 notes.

Hack Internet Explorer 8 pour s’amuser avec HTML5

Comme mentionné dans un billet antérieur, HTML5 n’est pas encore supporté par Internet Explorer 8. Pour au moins avoir un quelconque rendu dans ce navigateur, vous devrez rajouter les lignes de code suivantes à vos pages HTML :

<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

En ajoutant cela, Internet Explorer 8 prendra au moins en compte les nouvelles balises header, footer, nav, article et section. On est loin de pouvoir pratiquement tout faire comme dans Firefox ou Safari, mais c’est un début…

This was posted 2 years ago. It has 2 notes.

Utilisation de la vidéo avec HTML5

Une des grandes nouveautés avec HTML5 est la possibilité d’intégrer de la vidéo sans passer par la technologie Flash. En effet, encore aujourd’hui sous HTML4 ou XHTML, nous devons “embedder” (oui oui le verbe embedder) nos vidéos en Flash. Cela implique donc beaucoup de code inutile et souvent pas conforme au W3C. De plus, il faut également s’assurer que l’utilisateur possède Flash Player pour être en mesure de jouer la vidéo en question. Vous me direz : “Oui, mais qui n’a pas Flash Player de nos jours?”… Admettons que mon grand-père ne l’a pas et que je veux lui faire plaisir, je vais utiliser HTML5 et la balise <video>.

Voici un exemple de l’utilisation de la vidéo avec HTML5 :

<video width=”450” height=”400” poster=”images/bla.jpeg” controls=”controls”>

<source src=”http://tinyvid.tv/vfe/big_buck_bunny.ogv” type=”video/ogg” />

</video>

Simple n’est-ce pas? En ayant moindrement des connaissances en HTML, vous devriez être en mesure de comprendre le fonctionnement général de cette ligne de code. Je vais par contre vous expliquez l’essentiel plus en profondeur ci-dessous.

La balise peut comprendre 8 attributs (voir mon billet “Bien démarrer avec HTML5” pour y consulter la HTML5 Cheat Sheet).

Vous connaissez sans aucun doute les attributs width, height et src qui sont également utilisés pour les images. Ce qui nous intéresse est plutôt l’attribut poster, control, autoplay(qui n’est pas dans l’exemple) ainsi que la balise <video>.

L’attribut poster permet de choisir une image qui apparaîtra si la vidéo prend du temps avant de charger ou si la vidéo n’existe plus. Dans mon exemple, mon image par défaut est placée sous le répertoire images.

L’attribut controls indique au navigateur que vous voulez les contrôles par défaut. Il est également possible de créer ses propres contrôles, mais j’y reviendrai dans un autre billet.

L’attribut autoplay s’assure de jouer automatiquement la vidéo (ce que je ne suggère en aucun cas sur un site Web à moins que ce soit vraiment pertinent..).

La balise <source> me sert à déterminer l’emplacement de la vidéo ainsi que son format.

Vous pouvez donc maintenant facilement intégrer vos vidéos dans vos pages en utilisant HTML5. Bien entendu, HTML5 n’est pas encore totalement au point et la balise <video> n’est pas encore supportée par tous les navigateurs . Firefox 3.5, Chrome 3 Beta, Safari 4 et iPhone OS3 supportent assez bien la balise <video>. Est-ce que cette nouvelle méthode va remplacer l’utilisation de Flash pour insérer de la vidéo dans nos pages? Seul le temps nous le dira. Une chose est sûre, il est intéressant d’avoir une alternative à Flash.

Voici également un exemple intéressant de l’utilisation de la vidéo en HTML5. Si votre navigateur ne supporte pas HTML5, la vidéo sera lue par Flash.
http://camendesign.com/code/video_for_everybody/test.html

This was posted 2 years ago. It has 4 notes.

Comment bien organiser ses feuilles CSS? (Partie 1)

Ceci est la première partie de comment bien organiser ses feuilles CSS. Vous trouverez la partie 2 la semaine prochaine.

Plusieurs personnes utilisent leur propre méthode pour organiser ses feuilles de styles. Certains préfèrent utiliser qu’une seule ligne pour toutes leurs déclarations tandis que d’autres préfèrent indenter le plus possible leur code. Existe-t-il une méthode à privilégier pour s’assurer de créer des gabarits de qualité? Il en existe plusieurs, mais je vais vous décrire celle que moi j’utilise dans pratiquement tous mes projets. Je ne dis pas quelle est la meilleure, mais je crois qu’elle offre beaucoup d’avantages.

Tout d’abord, je déclare toujours 2 feuilles de styles dans toutes mes pages HTML. J’ai toujours mon « master.css » (qui est mon fichier maître) et mon fameux « reset.css ».

« master.css » comprend plusieurs autres fichiers comme par exemple base.css, typography.css, layout.css, etc…

Chacun de mes fichiers CSS contient un en-tête séparé en 4 sections : les informations de base, ma « table of content », les couleurs et finalement les « flags ».

Les informations de base sont les suivantes : le nom du fichier, sa description, l’auteur, la date de création et la date de la dernière modification.

Ma « table of content » est en faite toutes les grosses sections qui sont présentes dans mon fichier. Ex : header, navigation, content, footer, etc.

Mes couleurs sont une liste des couleurs que j’utilise plusieurs fois dans le même fichier.

Mes « flags » sont là pour faciliter la recherche dans mes fichiers CSS. (Je ferai un autre post prochainement sur l’utilisation et l’efficacité des flags.)

En ayant un en-tête dans tous vos fichiers, il devient plus simple de bien comprendre le fichier en question. De plus, si dans le futur une autre personne se doit de faire des modifications dans l’un de vos fichiers, cette personne ne pourra qu’en bénéficier puisque qu’elle pourra trouver ce qu’elle cherche rapidement. Le temps c’est de l’argent comme on dit…

Et vous, comment organisez-vous vos en-têtes de fichier?

Exemple d’en-tête de fichier CSS :

/**********************************************
MAIN INFO

@filename  : layout.css
@description  : Voici la description de mon fichier CSS
@authors  : Simon Guérin
@date  : September 22 2009
@modification  : September 23 2009

TABLE OF CONTENTS

#header
#content
#nav
#footer

COLORS

#8h1h2h ——— light blue
#333333 ——— dark gray

FLAGS

=header
=content
=nav
=footer

**********************************************/

This was posted 2 years ago. It has 4 notes.

Bien démarrer avec HTML5

Je ne sais pas pour vous, mais lorsque je fais un projet en XHTML/CSS, je réutilise toujours les mêmes choses. Je crois que tous les codeurs se doivent d’avoir leurs gabarits qu’ils peuvent réutiliser pour leur faire gagner beaucoup de temps. Une des choses donc je ne peux pas me passer, c’est ma feuille de style « reset.css »  que j’ai légèrement modifiée et qui a été créé par Éric Meyer (http://meyerweb.com/eric/tools/css/reset/). Plusieurs d’entres vous doivent déjà l’utiliser, mais pour les autres, je vous conseille fortement d’y jeter un coup d’œil. Ce « reset.css » permet un meilleur rendu pour tous les navigateurs puisqu’il « reset » certaines propriétés qui ne sont pas interprétées de la même façon par exemple sous Firefox, IE, Safari, etc…

Où est le rapport avec HTML5? Et bien c’est simple, il existe également un petit fichier CSS inspiré de celui d’Eric Meyer pour améliorer le rendu d’HTML5 sur tous les navigateurs. Ce HTML5 Reset Stylesheet a été créé par Richard Clark.

Il y a entre autre l’ajout suivant :

article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block;
}

qui initialise les nouvelles balises pour qu’elles soient vues comme des éléments en block.

Voici le lien pour le HTML5 Reset Stylesheet :

http://html5.pire.me/css/html5-reset-1.4.css

Et si vous pensiez vous en sortir, voici un autre lien fort intéressant qui vous permettra de valider votre code HTML5 :

http://html5.validator.nu/

En bonus, un PDF contenant HTML5 Cheat Sheet qui contient toutes les balises avec leur description. Il est de plus indiqué dans quelle version la balise peut être utilisée.

http://html5.pire.me/doc/html5-cheat-sheet.pdf

This was posted 2 years ago. It has 5 notes.