»HTML5+CSS3+WordPress 3.0, tout pour plaire 19 juin 2010

article-fonctionnement

La version 3.0 de WordPress est sortie il y a 2 jours, et c’était l’occasion pour moi de retoucher un peu le design du site pour utiliser les nouvelles fonctionnalités introduite dans cette mise à jour. Entre ces nouveaux outils disponibles du côté de WordPress et l’HTML5+CSS3, les deux « nouvelles technologies » du web, qui sont maintenant supportées correctement par les nouveaux navigateurs, il y a de quoi faire…

HTML5 et CSS3, un rêve ?

Et non, plus maintenant… Que ce soit Firefox 3.5+, Google Chrome 4/5, Safari 4/5 ou même Opera 10.5+, ils gèrent tous plus ou moins convenablement ces langages, avec les préfixes -moz et -webkit ou non.
Cependant, Internet Explorer (toute versions confondues 6/7/8 & 9) ne joue toujours pas dans la même cours, et ne reconnait pas nativement les balises HTML5 (un « hack » est donc utilisé), ni les balises CSS3 (sauf quelques unes pour la version 9 actuellement en Beta), ce qui rend le site un peu plus moche pour les utilisateurs de ce navigateur.
Il faut faire des choix, et j’ai fais celui de ne pas aider les utilisateurs d’IE6-7 à naviguer sur le site, faute de temps et de moyens…

L’HTML5 et ses nouvelles balises

Grâce aux nouvelles balises introduites (header, footer, nav, section, article, aside…), la séparation du contenu est améliorée, voire facilitée. Les balises comme header et footer permettent par exemple de délimiter l’entête et le bas de page d’un site ou d’une section d’un site, tandis que la balise article permet sur un blog d’indiquer qu’une partie du contenu est un… article.
Pour l’instant on se limite à ça ici, mais il y en a bien plus, et un petit tour par ici peut-être instructif.

Le CSS3 et ses propriétés qui facilitent la vie

Et ça, pour faciliter, elles le font très bien… Fini les coins arrondis avec des images ou encore les ombres, tout cela le css3 le fait avec une (ou 3) lignes de code ! Petit exemple avec le design du site…

Bas du menu avant la retouche. L’image de fond du menu est une image complète englobant le retour sur la droite, une image de fond se duplique ensuite jusqu’à l’image de bas de page qui reforme l’angle du bas.

Pour la nouvelle version, l’image de fond du menu est remplacée par un dégradé en css3, l’angle à gauche est réalisé grâce à la propriété border-radius, l’image de fond du contenu est ramplacé par un fond (background) blanc avec une bordure verte à gauche et une ombre (box-shadow) blanche toujours à gauche pour réaliser la seconde bordure. L’angle de retour du menu est quand à lui réalisé avec une image, à cause du dégradé sur le menu, et celui du bas de page avec la propriété css border-radius, comme toujours.

Une chose est sûre, les possibilités offertes par le CSS3 sont immenses et étaient très attendues… Il ne lui manque peut-être plus qu’un dégradé sur des textes ?…

WordPress 3.0, le nouveau moteur diesel

A part peut-être toujours plus de plugins et de thèmes de plus en plus personnalisables, il ne manque plus grand chose à WordPress pour devenir le « must » en terme de cms pour la création d’un site internet.
Avec cette nouvelle version, qui reste néanmoins dans la continuité des précédentes, des fonctions permettant de changer l’image d’en-tête ou encore le fond des thèmes sont apparues. En outre la simplicité qu’elles offrent par rapport à l’édition du code css et/ou html pour modifier une image, elles permettent à tous les débutants d’avoir un blog joli et modulable à leurs souhaits.
L’ensemble des modifications/rajouts sont disponibles sur le codex de WordPress.org, et il y en a tellement qu’on a pas fini de tout tester…!

Et justement, en parlant de tout tester, peut-être qu’un thème personnel gratuit pour WordPress va sortir…

    2 Commentaires

  1. […] HTML5+CSS3+WordPress 3.0, tout pour plaire « Voxran.fr Voir aussi : Les nouveautés de WordPress 3.0 en vidéoCommuniqué de presse | WordPress 3.0 […]

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *