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

Tweet This Post

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

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

Tweet This Post

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

Tweet This Post

Ne traitant pas de l’histoire et de la courte durée de vie d’XHTML2 ici, je me dois de faire une légère parenthèse.

Voir XHTML2 is DEAD — http://www.webdirections.org/blog/xhtml2-is-dead-long-live-html5/

Comme vous le savez sans doute, certains développeurs décident de bâtir leurs pages en XHTML et d’autre en HTML. Pour ma part, je programme toujours en XHTML (strict) pour m’assurer d’être le plus conforme aux standards du W3C et m’obliger à écrire du code qui a de l’allure.

Nous pouvons déjà utiliser HTML5 et dans quelques temps, il sera de plus en plus utilisé par les développeurs web. Cette nouvelle version promet un bel avenir au futur du web, mais qu’arrivera t-il à ceux qui programmait en XHTML?

Sachant que la nouvelle version d’XHTML est « abandonnée » et sachant que nous devrons bientôt passer à HTML5, je vois alors encore une fois une occasion de mal programmer. Je m’explique…

Oui HTML5 va changer beaucoup de trucs, mais un des désavantages est qu’il est encore beaucoup trop permissif tout comme l’est HTML4 en ce moment. Pourquoi ne pas obliger les gens à certaines règles toutes simples pour s’assurer d’avoir des pages contenant du code plus clair?

Avec HTML5, il sera encore possible de :

• - ne pas fermer certaines balises
• - mettre les balises et/ou propriétés en MAJUSCULES
• - etc…

Je suis peut-être un peu perfectionniste, mais il me semble que ça fait plus de 10 ans qu’on a beaucoup de sites web mal programmés. Il reste par contre une option…

XHTML5. Ce n’est pas un nouveau langage. Ce n’est pas « officiel » non plus, mais je crois que les gens qui passent d’XHTML à HTML5 vont plutôt faire du XHTML5. La recette est simple, tu prends les bonnes pratiques d’XHTML et tu les mélanges avec HTML5. Le résultat va s’avérer succulent et vos clients ne vont qu’en bénéficier.

Tweet This Post

Quel développeur web n’a pas grandement entendu parlé d’HTML5 au cours des derniers mois ou dernières semaines? Ayant moi-même été inondé de contenu dans mon Twitter, j’ai également suivi la vague et j’ai commencé à m’y intéresser de plus en plus.

Pourquoi une nouvelle version d’HTML?

Parce qu’HTML4 n’avait pas été conçu pour la tournure que le web a pris au cours des dernières années. Il fallait donc retravailler le langage existant pour qu’il soit mieux adapté aux nouvelles technologies. Les blogs et les réseaux sociaux pour ne pas les nommer vont grandement bénéficier d’un changement vers HTML5. Étant plus sémantique, le langage aidera à construire des pages plus solides ayant un code plus compréhensible et représentatif du contenu de la page.

Quelques nouveautés

Plusieurs nouvelles balises peuvent être utilisées :

• - <header>
• - <nav>
• - <section>
• - <article>
• - <footer>
• - <sidebar>
• - <video>
• - <audio>
• - …

Le nouveau doctype : <!DOCTYPE html> (maintenant facile à retenir…)

Des formulaires 2.0. Il sera désormais possible de spécifier à certains champs si c’est un champ courriel, url, etc. La validation des formulaires sera beaucoup plus facile. Plusieurs nouveaux API seront également disponibles. La géolocalisation sera possible ainsi que le drag & drop. Possiblité de garder de l’information « Offline ».

La balise <video> risque de beaucoup être utilisée. Plus besoin de la balise <embed>. Il est maintenant possible de faire jouer une vidéo sur votre site en utilisant uniquement la balise <video> (je montrerai un exemple dans un article plus tard).

La sortie officielle de la spécification d’HTML5 est prévue pour 2022. Vous avez bien lu, 2022 soit encore pratiquement 12 ans. Ayant moi-même avalé de travers ma gorgée de café en apprenant cette nouvelle, je vous assure que vous pouvez dès aujourd’hui commencer à expérimenter HTML5. La plupart des nouveaux navigateurs le supporte sauf un, Internet Explorer 8. Surprenant? Comme toujours, nous devrons attendre  à cause d’Internet Explorer, mais Microsoft a récemment annoncé qu’il allait supporter HTML5 très bientôt… à suivre.

Plusieurs questions restent en suspend pour le moment à propos d’HTML5 étant donné que les spécifications ne sont pas terminées.

Voici quelques ressources qui peuvent vous aider à en apprendre davantage sur HTML5 :

http://www.alistapart.com/articles/previewofhtml5/

http://media1.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Tweet This Post

Et oui… me voilà qui me lance dans un blog (comme s’il n’y en avait pas assez!) traîtant principalement de ce qui tourne autour du web. Plus particulièrement le design web, HTML5, CSS3, les standards et  ce qui m’inspire dans la vie de tous les jours.

Il y a déjà un bon moment que je me disais qu’il serait temps que je crée mon propre blog. En faisant la refonte de mon portfolio, l’idée ma semblé plus claire que je devais finalement me lancer. Je dois spécifier que je le fais tout d’abord par plaisir de parler d’un sujet qui me pasionne au plus au point. Si ce blog peut moindrement apporter quelque chose à quelqu’un, ce sera déjà ça de fait.

Pour ceux qui ne me connaissent pas, je suis Simon G.  J’ose prétendre être un Designer Web ainsi qu’un Développeur CSS en me fiant aux compétences que j’ai. Je suis également un passioné des standards du web. J’aimerais finir par me recycler dans l’utilisabilité un jour ou encore devenir prof dans le domaine, mais ça, c’est quand je vais décider que j’aurai assez d’argent pour être sous-payé.

Assez pour la présentation…

Voici des liens pour en apprendre plus à mon sujet :

Mon portfolio
Mon Facebook
Mon Twitter
Mon LinkedIn

Tweet This Post