html5

Comme vous le savez, je m’intéresse beaucoup à HTML5 et à CSS. Jusqu’à maintenant, j’avais quelque peu délaissé la future version de CSS pour me consacrer à HTML5 (et mes 10 000 projets personnels, mais bon…).

Aujourd’hui, je vous offre une nouveauté de CSS3 que j’attends depuis un bon moment et qui risque de me faire sauver de l’argent sur les tylenols. Depuis que je fais du design web, il m’est arrivé de me casser la tête en CSS pour faire certains trucs. Non pas que je ne connais pas CSS, mais plutôt parce que la version actuelle a été négligé.

En effet, il n’est pas possible avec la version 2 de CSS d’appliquer plusieurs images en background à un même élément. Pourquoi? Aucune idée. Il est pourtant évident que tous aurait bénéficié de pouvoir le faire. Heureusement que CSS3 va être terminé un jour…

Voici donc comment appliquer plusieurs backgrounds à un même élément en CSS3 :

#twitterWidget {
	/* L'ORDRE POUR PLACER LES BACKGROUNDS EST IMPORTANTE */
	background-image:    url(../images/box-bg-top.jpg),
                             url(../images/box-bg-middle.jpg),
                             url(../images/box-bg-bottom.jpg);
	background-position: top left, center center, bottom left;
	background-repeat:   no-repeat, repeat, no-repeat;
}

Dans notre exemple, nous avons 3 images différentes. Une pour le haut, une autre pour le milieu et finalement une pour le bas. Il suffit de séparer nos déclarations par des virgules pour appliquer plus d’un background à un élément. Aussi simple que cela.

Remarque : L’ordre dans lequel nous plaçons nos backgrounds est important. Il est préférable de suivre cet ordre logique : top, middle, bottom.

À noter que les backgrounds multiples ne sont pas pris en compte par Firefox 3.5. Je vous conseille donc de faire les tests sous Chrome 3.0 et Safari 4.

Télécharger l’exemple des backgrounds multiples en CSS3.

Voici le lien pour voir l’exemple en ligne : http://ins.pire.me/open-source/css3/exemple01-background/demo.html

L’icône Twitter utilisée à été créé par la designer Mirjami Manninen.

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