Envie de mettre les nouveautés HTML5 et CSS3 à contribution lors du redesign de votre site, mais un peu inquiet quand même sur la compatibilité de ces nouveaux jouets avec les nombreux navigateurs qui se battent pour occuper toute la RAM de votre poste de travail ? N’hésitez plus, et venez jeter un oeil sur HTML5 Please qui vient d’apparaitre dans ma timeline Twitter ⁽¹⁾ !

Ce site indique, pour chacune des fonctionnalités, si l’on peut l’utiliser passionnément, à la folie ou pas du tout. Elles sont présentées sous forme de liste, résumées et accompagnées d’une indication claire grâce au code couleur suivant :

• Vert : Utilisable ; Utilisable avec Fallbacks ; Utilisable avec Polyfills.
• Orange : Attention ; Attention avec Polyfills ; Attention avec Fallbacks.
• Rouge : A éviter ; A éviter avec Polyfills.

D’un coup d’oeil, on voit immédiatement si la fonctionnalité est prête à l’emploi, et si oui, comment l’utiliser au mieux telle qu’elle, accompagnée d’un Polyfills ou d’un Fallbacks le cas échéant.

Tandis que When Can I Use nous précise le niveau de prise en charge que l’on peut attendre d’un navigateur et d’une version donnés pour telle ou telle fonctionnalité, Modernizr nous donne la possibilité d’en détecter le support.

Le rôle joué par HTML5 Please ressemble à celui d’un coach ou d’un conseiller qui donnerait des recommandations pour savoir quel est le Polyfills le plus adapté.

⁽¹⁾ Merci à Thierry Roget o/

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Intégration HTML & CSS des maquettes Photoshop au pixel près
• 100+ Polyfills et Fallbacks pour HTML5
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés. Ce qui est normal après tout : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C.

Si les spécifications sont très utiles pour comprendre la nature des ingrédients (balises HTML et propriétés CSS), elles ne nous disent pas grand chose sur la manière de les mettre en oeuvre pour réaliser un site web. S’il n’existe pas de recette toute faite, c’est certainement à cause des plats (les contenus) qui sont uniques.

Enfin, en même temps, on ne peut pas ne pas constater que les sites Web sont à 90% composés de :

• En-tête pour : logo, baseline, visuel, un ou plusieurs menus de navigation,
• Zone de contenu principale : texte, image, vidéo,
• Une, deux ou trois barre latérales (Sidebar) à droite, à gauche de la zone de contenu,
• Pied de page (Footer).

Depuis quelques temps, je réfléchis à la mise en place d’un plan de cours pour l’apprentissage du couple HTML & CSS. Dans l’idéal, cette formation devrait être :

1. Assimilable rapidement par les débutants qui n’ont jamais vu une balise HTML ou une règle CSS,
2. Convainquante pour inciter les créatifs à se pencher sur les notions d’intégration web,
3. Intéressante pour ceux qui utilisent ces langages dans leur vie professionnelle ou en amateur (dans le noble sens du terme).

La plupart des plans de cours sur le sujet séparent souvent l’étude du HTML des CSS. J’aimerais mettre en place une méthode globale s’inspirant (très librement) de la Programmation Orientée Objet (POO), en initialisant un super objet — le site web — englobant d’autres objets comme le header, la sidebar, les menus et les différentes zones de contenu que l’on trouve généralement dans un site internet ou sur un blog (titres, sous-titres, paragraphes, liste, etc.). A cet égard, HTML 5 permet d’aller dans ce sens avec les balises header, nav, article, aside, footer.

CSS et HTML sont dans un bateau…

Sans le HTML, les CSS ne servent à rien. Dans la pratique, on rencontre rarement HTML sans CSS. Au lieu d’aborder les deux langages de manière séquentielle, j’envisage de démarrer par la mise en place d’un vocabulaire de base qui fournirait les briques élémentaires nécessaires à la construction d’un site web. Cela pourrait s’effectuer en abordant les deux langages simultanément tout en ajoutant les notions d’ergonomie et d’accessibilité  : les bonnes manières s’apprennent dès le début.

Ces briques seraient composées de bouts de code, de module, de composés HTML & CSS «prêts à l’emploi» à expliquer aux apprenants par le biais d’exercices pratiques qui débuteraient le plus tôt possible dans la formation. L’apprenant serait ensuite invité à assembler ces briques pour construire une page web. Le formateur fournissant à cette occasion les indispensables conseils, trucs et astuces concernant l’apparence sur les différents navigateurs, l’utilisation des commentaires conditionnels, etc., selon le temps disponible.

Parmi les méthodes proposées dans les commentaires du billet d’Aymeric, nombreuses sont celles qui préconisent de partir du contenu pour commencer l’apprentissage de HTML. Je suis généralement le premier à prendre mon Stabilo ® pour baliser le contenu avant même de prendre une tablette graphique ou mon Notepad++. Toutefois, intégrer le balisage du contenu dans la formation peut s’avérer chronophage et ne pas trouver sa place dans le temps généralement impartie dans les centres de formation où un module de base dure rarement plus d’une semaine.

En outre, indépendamment du contenu, l’immense majorité des sites web partage les mêmes caractéristiques. On pourrait passer beaucoup de temps à lister tous les éléments constituant un site et faire des statistiques pour savoir si tel ou tel élément se retrouve le plus souvent dans le header, la sidebar ou le footer, etc. mais force est de constater qu’à ce niveau, un consensus se dégage : le logo, la baseline et le menu principal se retrouvent dans haut de la page tandis que les informations de contact et de copyright se situent plutôt en bas de la page !

On pourrait donc, dans le cadre d’une formation sur cinq jours,  fixer les idées autour des zones que l’on rencontre généralement sur les sites web ou les blogs :

1. un header (pour le logo, la baseline, la navigation principale et les liens d’évitement),
2. une zone de contenu…
3. … associée à une ou plusieurs barres latérales,
4. avec un footer (contact, crédits, copyright) pour finir.

Ce découpage mélange joyeusement l’analyse fonctionnelle et la présentation, mais présente l’avantage de fixer les idées sur des choses auxquelles les apprenants ont été confrontés, ce qui a son importance.

Pour aborder l’apprentissage des balises et la sémantique qui leur est associée, je propose de partir du logo qui peut être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO).  On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une autre.

Partant du principe qu’une zone de menu sera souvent composée avec une liste de liens, il me semble utile de proposer dès le début les méthodes généralement utilisées pour faire flotter les li, transformer les a en bloc, utiliser les images de fonds, etc.

Une zone de contenu secondaire est souvent représentée par une barre latérale placée à droite ou à gauche de la zone de contenu. Pourquoi ne pas introduire directement les notions de positionnement avec float et les positions relative et absolute ? Pour un débutant, ces notions ne sont pas plus difficiles à comprendre que le reste. Je me dis qu’elle seront peut-être même plus rapidement assimilées en les abordant dès le début, même si les notions de contexte de formatage ou de clearing ne sont pas très évidentes au premier abord.

Je reviendrais sur le sujet un peu plus tard selon vos retours. L’objectif est de remplir un programme de formation détaillé sur 5 jours permettant à des personnes ayant des pré-requis réduit au minimum de pouvoir créer une page web «classique».

Pour ne pas conclure

Ce billet est une ébauche que je compléterais au fur et à mesure de mes idées et de vos suggestions. Ce billet traine dans mes brouillons depuis que Aymeric a eu dès 2007 l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage du XHTML et des CSS que je vous invite à lire sans plus attendre.

Linkographie

• http://openweb.eu.org
• http://www.opquast.com
• http://www.w3schools.com
• http://fr.html.net/tutorials/html
• http://slaout.linux62.org/html_css/html.html
• http://www.elitwork.com/xhtml_tutoriel.html
• http://www.martiusweb.net/category/Tutoriaux/XHTML-CSS
• http://www.siteduzero.com
• http://css.mammouthland.net
• http://www.la-grange.net/w3c/html4.01/cover.html
• http://www.w3.org/TR/html5 et http://dev.w3.org/html5/spec-author-view/spec.html
• http://j-willette.developpez.com/tutoriels/html/les-bases-du-html
• http://reference.sitepoint.com
• http://htmldog.com

Articles sur le même sujet

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur la balise h1 avec HTML5
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows, et, last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui en prennent pas les nouvelles API’s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d’origine.

217 ressources commentées

Autant vous prévenir tout de suite : cette liste n’est pas classée par catégorie, et ce, pour trois raisons simples : 1) vous pouvez rechercher les articles sur js4design.com où ils sont classés par catégorie et par tag, 2) vous pouvez utiliser l’équivalent-clavier Ctrl + F pour chercher un thème précis sur cette page, et 3)  je crois très fort en la sérendipité :-)

1. jQuip – Initiative lancée par Demis Bellot pour rendre jQuery modulable : 90% des fonctions les plus utilisées de jQuery pourraient se caser dans 13% de la taille actuelle du framework !
2. Popcorn.js – Framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Utilise les ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux.
3. Blueberry – Plugin jQuery expérimental et open source pour faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design).
4. Elastislide – Carousel jQuery réactif (Responsive Web design) pour que l’utilisateur profite au mieux des caractéristiques de son écran.
5. Decoding jQuery – Immersion (en anglais) dans le code source de jQuery avec des explications sur les fonctions extend(), isWindow(), parseXML(), globalEval() et toArray().
6. Codecademy – Apprendre les bases de la programmation Javascript de manière interactive et pro-active !
7. FlexSlider – Ce Slider permet de faire défiler du contenu avec le marquage HTML de votre choix, le tout utilisable au clavier.
8. jQuery Timelinr – Créer un effet de ligne temporelle verticale ou horizontale avec d’un côté, des dates et de l’autre, des événements.
9. spin.js – Afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3.
10. jQuery reversing –  Quelques astuces jQuery pour inverser l’ordre des éléments d’une liste UL ou OL dont le très concis snippet : ul = $('ul'); ul.children().each(function(i,li){ul.prepend(li)})
11. Require.js – Ce «loader» Javascript léger (5 kb gzipé), avec gestion de cache, accélère le chargement de vos pages lorsque vous utilisez de nombreux scripts.
12. Gmap3 – Plugin jQuery créé par Jean-Baptiste Demonte pour créer des cartes Google avec les fonctions avancées de la version 3 de l’API de Google Maps.
13. nanotabs — Version allégée du plugin jQuery idTabs. Script autonome (sans jQuery ou autre framework Javascript) pour faire des menus à onglets à partir de simples listes.
14. JbhSlider – Diaporama en jQuery gérant les évènements rapprochés (pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du Slider).
15. Agile Carousel – Faites défiler automatiquement ou manuellement du texte et des images. Le format de données JSON permettra à votre Slideshow de dialoguer avec les informations issues de votre CMS préféré.
16. Apprise – Dialoguer avec les utilisateurs autrement qu’à travers les boites modales alert() ou confirm() générées par le navigateur.
17. jQuery Simple Tooltip — Afficher des infobulles au survol d’un lien. Peut afficher le contenu d’une balise référencée par son identifiant.
18. jQuery Tagging Tools – Gérer les tags à la manière de Facebook, avec une petite croix pour supprimer les tags que l’on vient de saisir.
19. jQuery-Placeholder – Utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5.
20. jQuery SuperBox – Lightbox jQuery pour afficher des images, du contenu chargé en Ajax ou un fragment de la page via une ancre interne.
21. yepnope.js – Chargement conditionnel de scripts pour vos « Polyfills » pour charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le navigateur.
22. Full background image slider – Afficher un diaporama sur toute toute la fenêtre du navigateur (ou le container que vous voulez).
23. Minify – Script PHP5 pour combiner et minifier les fichiers CSS ou Javascript.
24. Treesaver – Framework Javascript pour faciliter la création de maquettes de sites web de type magazine qui s’adaptent automatiquement à une large variété de périphérique de sortie.
25. Coda Slider Effect – Tutoriel pour réaliser un système de navigation par onglets accessible avec effet de Slide, en mixant plusieurs plugins tels que scrollTo, localScrolletserialScroll.
26. jQuery File Upload – Uploader des fichiers multiples en affichant une barre de progression pendant le téléchargement ainsi qu’une miniature si votre fichier est une image.
27. jQuery radioSwitch – Transformer des boutons radio HTML en superbes Sliders d’un coup de magie CSS3 et Javascript.
28. jNotify – Afficher une boite de dialogue pour informer l’utilisateur du bon ou du mauvais déroulement des opérations.
29. jQuery Apple Effect – Afficher progressivement le contenu d’une page Web autour d’une zone affichée par défaut, pour la mettre en valeur.
30. jMenu – Système de menu horizontal en jQuery etjQuery UI qui autorise un nombre illimité de sous-menus.
31. Affichage des mots de passe à la demande – Afficher ou masque le mot de passe saisi dans un champs `input` de type password uniquement en cas de besoin, à l’aide d’une case à cocher.
32. qTip – Plugin jQuery pour créer des infobulles en affichant tout types de contenus : attribut title ou attribut personnalisé tooltip, ou une image.
33. markItUp! – Moteur de balisage léger qui transforme un textarea en éditeur HTML, Textile, Wiki, Markdown, BBcode ou votre propre système de balisage.
34. Slides – Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama.
35. Lightbox CSS avec tabindex et pseudo-classe :focus – Lightbox full CSS en remplaçant l’événement click par la pseudo-classe :focus et la propriététabindex pour permettre aux images d’avoir le «focus».
36. Lettering.js – Plugin jQuery pour contrôler précisément le découpage des textes afin d’afficher les caractères ou les mots qui les composent comme bon vous semble.
37. Simple Tabs w/ CSS & jQuery – Tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets.
38. SimpleTabs – Javascript autonome pour mettre facilement en place un système de navigation à base d’onglets (tabs).
39. CSS3-MediaQueries-JS – Bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2.
40. Marquee jQuery – Permet de faire défiler le contenu d’une liste vers le haut, le bas, la droite, la gauche grâce à des options bien pratiques.
41. Hyphenator – Script Javascript pour la gestion des césures sur tout ou partie de votre site Web, à réserver aux articles pour des questions de performances.
42. jQuery Cycle — Ce diaporama / Slideshow propose 6 effets de transition avec pas moins de 50 paramètres.
43. Galerie d’image avec jQuery – Ce tutoriel permet d’obtenir le résultat le plus simple possible visuellement tout en tenant compte l’accessibilité dans une démarche non intrusive.
44. JQuery Slide Effect – Tutoriel concis mais complet pour réaliser un effet d’animation de texte (slide) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.).
45. Easy Slider – Diaporama horizontal ou vertical avec navigation numérique qui propose un défilement doux lorsque l’on saute une ou plusieurs diapos.
46. innerShiv — Le contenu HTML5 généré par innerHTML fonctionne enfin dans IE.
47. CSS Text Wrapper – Habiller vos textes HTML avec n’importe quelle forme non-rectangulaire : courbe, zig-zag ou ce que vous voulez !
48. jCarousel – Contrôler le déplacement horizontal ou vertical d’une liste d’éléments avec ce Plugin jQuery.
49. Content Switcher – Ce Slider avec menu de navigation a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur.
50. EverCookie — API Javascript qui permet de créer un cookie résistant à tous les mauvais traitements grâce à une solution impliquant une dizaine de mécanismes différents : HTTP Cookies, Flash Cookies, Silverlight Isolated Storage , RGB values, Web History, HTTP ETags, Web cache, window.name, Internet Explorer userData Storage, HTML5 Session Storage, HTML5 Local Storage, HTML5 Global Storage, HTML5 Database Storage via SQLite !
51. bxCarousel – Carousel en jQuery qui boucle sur lui-même et qui fonctionne avec tout type d’éléments HTML contenus dans une liste.
52. TinyFader — Slideshow poids-plume avec effet de fading. C’est la version autonome deTinySlideren (TinyFader n’a pas besoin d’un framework Javascript).
53. Jquery Looped Slider – Diaporama jQuery qui boucle sans accroc lorsque le script atteint la dernière «diapo» de votre Slider.
54. Easy List Splitter – Plugin jQuery qui affiche des listes HTML ordonnées (OL) ou non-ordonnées (UL) en colonnes.
55. Nivo Slider – Diaporama qui offre 9 transitions de très bonne facture pour ajouter un peu de peps à nos Sliders images.
56. AviaSlider – Diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images.
57. Stop (Mis)Using Return False – Toutes les subtilités relatives à la gestion des événements dans jQuery.
58. Advanced Columns using the :nth-child(N) – Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery.
59. Jquery selected text sharer – Plugin jQuery astucieux qui affiche une div contenant une liste de liens avec les favicons associées une fois que l’utilisateur a sélectionné une portion de texte.
60. ChangeClass — Fonction Javascript pour changer de classe CSS à la volée.
61. CLEditor – Editeur HTML WYSIWYG de 10 ko à ajouter facilement à votre site Internet, compatible avec tous les navigateurs (IE6 inclus).
62. Sudo Slider – Plugin jQuery de 10 ko pour mettre en place un diaporama manuel (Slider) ou automatique (Slideshow) avec tout type de contenus (images, textes, vidéo en Flash, formulaire avec validation, etc.).
63. Enterprise jQuery — Passez du côté client ! Améliorer vos connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.
64. jQuery.eventManager — Améliorer la gestion d’événements avec jQuery.
65. Video JS — Player vidéo basé sur Javascript qui utilise la balise video de HTML5 lorsque le navigateur est compatible. Un fallback vers Flash est prévu pour les navigateurs ne prenant pas en charge HTML5.
66. 30 bouts de codes jQuery – en prêt-à-porter taillés dans les meilleurs tissus. Dans les rayons, vous trouverez de quoi habiller les longues soirées d’été.
67. Transformer un plugin jQuery en extension WordPress – Tutoriel permettant d’utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress.
68. Étendre la zone cliquable d’un lien à l’élément parent avec jQuery –Quelques lignes de code Jquery pour étendre la zone cliquable d’un lien à un élément parent, généralement un <div>.
69. jQuery Hotkeys Plugin – Ajouter ou supprimer des équivalents-clavier dans votre page Web. Gère la plupart des événements en une ligne de code.
70. Columnizer — Créer des colonnes avec jQuery. Nombreuses options, dont notamment la possibilité de spécifier une largeur de colonne ou un nombre fixe de colonnes.
71. jQuery Fundamentals — Manuel de survie pour jQuery. Synthétise les éléments de syntaxe de jQuery sur une page web. Sommaire précis et structuré avec un index des exemples utilisés.
72. Retina Display — Tutoriel pour refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur la version 4 de l’iPhone.
73. jqDock — Transformez une suite d’images en Dock Menu (set d’images qui s’agrandissent au passage de la souris) à la manière du dock de MacOS X.
74. Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow en autant de parties qu’ils contiennent de fieldset.
75. clueTip — Afficher des bulles d’aide complexes sur n’importe quel élément au survol de la souris (ou sur un clic, en option).
76. Smokescreen — Convertir des animations Flash simples en HTML5 et Javascript.
77. Lightbox_me — Lightbox jQuery d’un poids de 1 Kb pour afficher n’importe quel élément avec un effet Lightbox sobre et efficace.
78. jQuery-JSON — Convertir des données au format JSON via quatre nouvelles fonctions à l’object jQuery $ pour faciliter l’utilisation du format JSON.
79. SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.
80. Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
81. Griddy-Overlay – Afficher une grille par-dessus votre page web avec jQuery.
82. Scriptsrc — 10 Frameworks Javascript à emporter.
83. UI.Layout – Créer des interfaces utilisateurs avec jQuery.
84. WebProjectHelper — Générateur de structure MySQL et de classes PHP.
85. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
86. Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
87. Colorbox — une « lightbox » légère et extensible en jQuery.
88. jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
89. Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
90. Table des matières avec jQuery – Bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés.
91. Bloc de login à la Twitter avec jQuery – Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
92. jQuery.fn.sort — Trier des éléments avec jQuery.
93. Popeye 2.0 – Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
94. FAT-FREE — Framework PHP léger et modulaire.
95. jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
96. Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
97. Créer une arborescence de fichier avec jQuery – Série de 8 tutoriels sur la création d’une arborescence de fichier à l’aide de jQuery.
98. simpleCart (js) – Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
99. Modernizr — Détection des fonctionnalités CSS3 et HTML5.
100. 20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
101. IE7.js – Transformez une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8 : ce n’est pas de la magie, c’est de la technologie !
102. Webform to wizard – Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
103. DLink — Afficher le type de cible des liens avec Javascript.
104. Splash — un diaporama en pur Javascript.
105. Optimiser le chargement des AdSense – Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
106. Custom jQuery Selectors – Créez des sélecteurs personnalisés avec jQuery.
107. TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
108. Clickoutside Event — Détectez les clics en dehors d’un élément.
109. Comment, jQuery va tuer Flash ? – Question surprenante, mais force est de constater que Javascript a fait du chemin depuis window.open() !
110. jQuery Tutorials for Designers – 13 Tutoriels jQuery pour Webdesigners.
111. Starter — Générateur de plugins jQuery.
112. Effets lightbox sans framework — L’ouverture de nouvelles fenêtrespopup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS.
113. Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif.
114. jQuery SimpleTree Drag&Drop – Construisez des arborescences à la mode de Windows.
115. jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
116. Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
117. DataTables — Pagination et tri des données pour vos tableaux HTML.
118. jSocial – Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
119. jQuery Color Animation – Support du RGBa pour « jQuery Color Animations».
120. jQuery vs Mootools – Choisir jQuery ou Mootools en connaissance de cause.
121. 6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
122. Plupload – Gestionnaire de « téléversement » (upload) multiple en jQuery.
123. Parallax – Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
124. Uniform – Ajouter du look and feel aux rugueuses cases à cocher, aux boutons radio anémiques, sans oublier les spartiates. boutons Parcourir… des sobres formulaires HTML.
125. flot — Créez des graphiques avec jQuery.
126. jQuery Source Viewer – Naviguer à l’intérieur du code source de jQuery.
127. jQAPI — Documentation alternative pour jQuery 1.4.1.
128. How to Easily Create a JavaScript Framework – Créez votre framework Javascript en 4 parties.
129. css-template-layout – Implémentation jQuery du module CSS3 Template Layout.
130. jqTransform — Stylez vos formulaires avec jQuery et CSS.
131. Google Fade – Script disponible pour Mootools et jQuery pour reproduire chez vous l’effet introduit récemment par Google sur sa page. d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.
132. Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
133. Disable On Submit – Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
134. Adding Keyboard Navigation – Tutoriel sur la mise en place d’un diaporama avec utilisation du clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente.
135. Comment System with jQuery, Ajax and PHP – L’excellent Srinivas Tamada de9Lessons nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.
136. DOMAssistant – Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
137. Dynamic tabs using jQuery – Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
138. Sexy.js – Améliorer l’interface Ajax de jQuery.
139. jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
140. Page Peel Corner — Effet de page cornée avec jQuery.
141. A.P.E (Ajax Push Engine) — Le web en temps réel avec Ajax Push Engine.
142. Simple Image Viewer — Galerie d’image minimaliste.
143. jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
144. jsfiddle – Propose un environnement pour tester et partager du code Javascript.
145. jQuery 1.4 API Cheat Sheet – Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
146. jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
147. jQuery Quick Guide – Un guide pour avoir les fonctionnalités de jQuery sous la souris.
148. Animation avec quatre images et jQuery – Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
149. jQuery Masonsy – Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
150. 40 bouts de code – facilitez vos développements en Javascript ou jQuery.
151. jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
152. Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
153. CSS3 animations and their jQuery equivalents – 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
154. jTruncate – Plugin pour jQuery qui coupe un texte au bout d’un certain nombre de mots et qui ajoute un texte comme « Lire la suite » pour accéder à… la suite !
155. Hightcharts – Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
156. jQuery Before/After – Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
157. jQSlickWrap – Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
158. TinySlider – Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
159. Mootools Forge – Une forge pour les plugins Mootools.
160. Système de notation par étoiles accessible – Samuel Le Morvan propose un tutoriel complet sur la question.
161. Menu déroulant Suckerfish – Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
162. Smart Columns with CSS & jQuery – Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
163. Get viewport size with javascript – Connaitre la taille du « viewport » en Javascript.
164. Ceebox – Lightbox qui afficher n’importe quel contenu dans une fenêtre modale ou non. Idéale pour les vidéos hébergées sur Google Video, Dailymotion ou Youtube.
165. Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
166. Planet jQuery – Un planet pour jQuery.
167. The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
168. Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
169. maxWidthFixForIE6.js – Emuler la propriété max-width pour IE6.
170. iepngfix — Composant HTC qui gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6.
171. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevrepropose de faciliter l’utilisation d’Ajax.
172. jTextTranslate – Traduction de votre site en 87 langues par Google.
173. cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
174. balance_columns – Équilibrer des colonnes avec Javascript.
175. DOMTab – Menu à onglets simple et efficace.
176. FlashReplace – Insérer du Flash proprement.
177. DOMAssistant – Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
178. Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
179. jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
180. dLite — une librairie Javascript « petit mais costaud ».
181. Pikachoose – Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
182. jQuery Context Menu – Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
183. 22 menus déroulants passés au crible – Tyssen Design passe en revue les principauxdropdown menu.
184. Changement de design «on the fly» avec jQuery – Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
185. Simple jQuery Text Resizer – Laissez vos visiteurs choisiront la taille qui leur convient (uncookie gardera leur préférence en mémoire).
186. Des cookies à la mode de jQuery – Ecrire, lire et effacer vos cookies pour 4,15 kb.
187. Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
188. ul2finder — un explorateur à l’image du Finder de MacOS X.
189. jQuery Image Cropper — recadrer et uploader des images.
190. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
191. Le code CSS et Javascript au milieu du HTML c’est pas bien ! – Traduction de l’articleWhy Inline CSS And JavaScript Code Is Such A Bad Thing de Robert Nyman.
192. PHP.JS — transposer des fonctions PHP en Javascript.
193. jsbin — tester votre code Javascript et partagez vos bugs – Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
194. Un «slider» à la manière du Playback de Google Wave – tutoriel pour afficher un historique progressif à la manière de la fonction Playback de Google Wave.
195. Un diaporama avec AnythingSlider jQuery Plugin – Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
196. Google Closure — les mauvaises pratiques Javascript en action ? – Google Closure a été développé par des spécialiste de Java… ça craint.
197. Sélecteur de date (Date-Picker) non-intrusif – Sélecteur de date avec mini calendrier.
198. FireFinder — interagir avec la page web – Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
199. Choisir sa bibliothèque JS avec Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
200. Jquery Pagination System – Pagination côté client avec jQuery.
201. jQuery Flash Plugin – Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
202. jQuery UI Multiselect – Améliore l’apparence et l’ergonomie de la balise HTMLselect.
203. jQuery Tools – Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
204. Tipsy — des bulles d’aide façon Facebook avec jQuery – Bulles d’aide façon bande dessinée comme celles que l’on trouve sur Facebook ouTwitter.
205. Faire un Carrousel avec jQuery – Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
206. Lazy loader : chargement des images à la volée – Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
207. jQuery Magnifier Loupe – Zoom sur images avec l’attribut longdesc.
208. News déroulantes avec jQuery – Un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery.
209. Cufón : des polices de caractère pour tous – Implémenter font-face dans le plus grand nombre de navigateurs.
210. jQuery — renverser l’ordre d’une liste ordonnée – les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
211. jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
212. Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
213. Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
214. Augmenter la taille du texte avec jQuery – Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
215. Effets jQuery accessibles WAI-RIA – Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
216. eCSStender – Sélecteurs CSS avancés compatibles IE6.
217. jCarousel Lite – Galerie d’images en jQuery.

Pour trouver l’article correspondant sur Javascript & Webdesign, il suffit de saisir l’ancre du lien dans le champs de recherche. Cette liste sera mise à jour régulièrement, n’hésitez pas à revenir !

73 tutoriels : Slideshow, Sliders & Diaporama

Voici une liste condensée de tutoriels ou scripts jQuery commentés pour apprendre à faire défiler vos contenus textes et/ou image sous forme de Slideshow, de Sliders ou de diaporamas :

1. Create an Image Rotator with Description (CSS/jQuery) — Démo
2. Sliding Boxes and Captions with jQuery — Démo
3. Animate Panning Slideshow with jQuery — Démo
4. Create Beautiful jQuery Slider Tutorial — Démo
5. Create a Fancy Image Gallery with JQuery
6. jQuery Infinite Carousel
7. Coda Slider Effect
8. Create Featured Content Slider Using jQuery UI
9. Making a Content Slider with jQuery UI
10. Creating a Slick Auto-Playing Featured Content Slider
11. Start/Stop Slider
12. ImageSwitch
13. Create Content Slider using jFlow, A Minimalist jQuery Plugin
14. jQuery Looped Slider Tutorial
15. Build a Content Slider with jQuery
16. CSS and jQuery-Crating an Image Slider
17. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
18. Making a Mosaic Slideshow With jQuery & CSS
19. Making A Slick Content Slider
20. Galleria
21. Easy Slider
22. Galleriffic
23. AD Gallery
24. Sliding Boxes and Captions
25. jQuery Virtual Tour
26. jQuery MB Gallery
27. AnythingSlider
28. GalleryView
29. jCarousel – jCarousel — un Carousel jQuery très complet
30. Easiest Tooltip and Image Preview
31. ThickBox
32. SpaceGallery
33. s3Slider
34. Simple Controls Gallery
35. Pikachoose – Pikachoose : le bon choix pour afficher vos images
36. jQuery Popeye – jQuery Popeye 2.0 — Une Lightbox inline
37. Supersized
38. imgBox
39. Pirobox
40. jQZoom
41. jQuery Superbox
42. jQuery Infinite Carousel
43. Simple jQuery Image Slide Show with Semi-Transparent Caption
44. Moving Boxes
45. LightBox
46. SliderGallery
47. FeaturedContent
48. InnerFade
49. jQuery Morphing Gallery
50. A Simple jQuery Slideshow
51. Create a Slick and Accessible Slideshow Using jQuery
52. Building a jQuery Image Scroller
53. Sliding Boxes and Captions with jQuery
54. Creating an Image Slider
55. Create Beautiful jQuery slider tutorial
56. Simple JQuery Image Slide Show with Semi-Transparent Caption
57. Create a Simple Image Slide Show using jQuery
58. Slide and hide section with jquery
59. Making a Slideshow with jQuery
60. jQuery – Creating a Slideshow
61. Simple jQuery slideshows
62. Creating a Slick Auto-Playing Featured Content Slider
63. How to add Slideshow to jQuery lightbox plugin
64. jQuery Slideshow Explained
65. Supersized jQuery Plugin
66. The Easiest jQuery Plugin For Sliding Images and Content
67. GalleryView: A jQuery Content Gallery Plugin
68. Image Flow
69. S3Slider jQuery plugin
70. EOGallery
71. Smooth Div Scroll
72. jQuery virtual tour
73. Supersized – Full Screen Background/Slideshow jQuery Plugin

100+ Polyfills et Fallbacks pour HTML5

L’article 100+ Polyfills et Fallbacks pour HTML5 présente une collection de plus de 100 bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Cette liste étant mise à jour régulièrement, elle ne figure pas sur cette page. Elle est accessible directement à l’adresse HTML5-Cross-Browser-Polyfills.

Voilà, c’est fini !

J’espère que cette longue liste n’aura pas été trop indigeste et qu’elle vous sera aussi utile qu’à moi. N’hésitez pas à me signaler si votre script préféré manque à l’appel ou si le lien vers le script de vos rêves mène à une impasse.

Articles sur le même sujet

• 100+ Polyfills et Fallbacks pour HTML5
• WordPress de A à Z — E comme Extensions (les plugins)
• 139 ressources Javascript et jQuery
• Menu à onglets (tabs) — idTabs ou domTab ?
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek

Si vous avez hâte de voir à quoi ressemble WordPress 3.3 pour découvrir les nouveautés concoctées par l’équipe qui développe notre CMS préféré, voici ma petite craduction de l’article WordPress 3.3: The 11 Most Important New Features paru sur Mashable. Parmi les nombreuses améliorations apportées par cette nouvelle version, on peut noter les éléments suivants : redesign de la barre d’administration, nouveau menu A propos, nouvelle section d’aide, Tooltips, Media Uploader en HTML5, menus déroulants pour alléger WordPress.  Je vous invite à consulter l’article original qui présente notamment les captures d’écran sous la forme d’une galerie très pratique.

Pour ceux d’entre nous qui travaillent chaque jour avec WordPress, il est étonnant de constater à quel point ce système de gestion de contenus a évolué en quelques années pour passer du statut de simple outil de blog à un système de publication complet qui n’a rien a envier aux ténors du marché.

Aujourd’hui nous allons jeter un oeil sur les nouvelles fonctionnalités de WordPress 3.3 qui, après des mois de tests en version bêta, devrait sortir sous peu.

Comparées à la sortie de WordPress 3.0 qui avait introduit des fonctionnalités majeures — comme les Custom Post Types ou le mode multi-sites –, les améliorations proposées par cette version 3.3 pourront sembler moins révolutionnaires. Toutefois, dans les faits, cette nouvelle version va impacter les utilisateurs comme aucune autre auparavant.

En effet, la plupart des améliorations sont destinées à l’expérience utilisateur pour tous les utilisateurs, et pas seulement pour celles et ceux d’entre nous qui construisent des sites web. Nos clients verront eux aussi des changements dans leur façon d’utiliser WordPress.

Voici les changements principaux qui arrivent avec WordPress 3.3 :

Barre d’administration

Ce redesign de la barre d’administration apporte des améliorations pratiques et stratégiques grâce à la suppression de nombreux éléments ; ceux qui restent sont judicieusement placés. Le champs de recherche et le menu «Apparence» disparaissent, tandis que le menu utilisateur est déplacé sur le côté droit, à l’image de ce que fait Google.

L’utilisation d’une ombre plus sombre et plus intense rend cette barre d’administration plus présente.

Nouvelle barre d'administration dans WordPress 3.3

Menu «A propos»

L’icône «W» située en haut à gauche cache un nouveau menu composé de liens «A propos» de WordPress, comme : les crédits, la licence, la documentation et le forum. Ces liens étaient auparavant cachés dans le pied de page, et donc peu visible ( NDT : ou placés dans la blogroll par défaut).

Menu A propos dans WordPress 3.3

Section d’aide améliorée

Premièrement, le lien «Aide» n’est plus relégué dans un coin de l’administration. Il est désormais bien visible, au centre de la nouvelle barre d’administration.

Ensuite, ce lien recèle une section retructurée avec une navigation sous forme d’onglets utilisables par les développeurs pour documenter leurs plugins ou leurs thèmes.

Menu d'aide dans WordPress 3.3

Bulle d’information (Tooltips)

Ces nouveaux Tooltips pourront sembler légèrement agaçants pour de nombreux utilisateurs, mais pourront être très utiles à d’autres.

Ces bulles d’informations guiderontles utilisateurs à travers les nouvelles fonctions de WordPress. Vous en verrez quelques-unes pointer vers la barre d’administration immédiatement après la mise à jour de votre installation.

Comme pour la section d’aide, les développeurs pourront utiliser les bulles d’informations pour leurs propres tours d’horizons. Les développeurs de thèmes trouveront là un moyen de présenter rapidement les fonctionnalités de leurs produits, comme l’a fait le développeur Yoast pour son plugin Yoast WordPress SEO récemment mis à jour.

Tooltips dans WordPress 3.3

Media Uploader

Nous étions nombreux à attendre une mise à jour du «Media Uploader». Les nouveautés qui touchent ce module concernent principalement : l’ajout du Drag & Drop pour glisser-déposer des images ou des documents PDF directement de votre bureau dans WordPress ; et le remplacement de Flash par HTML5 et Silverlight, pour offrir une plus large compatibilité au niveau des plateformes.

Media Uploader HTML5 dans WordPress 3.3

Menus déroulants

Les nouveaux menus déroulants vous feront économiser de nombreux clics pour accéder aux sous-menus. Cela peut sembler sans conséquence, mais si vous utilisez WordPress pendant de longues périodes, vous avez certainement déjà remarqué que le tableau de bord peut vite se transformer en usine à clics !

Les menus déroulants permettent aussi d’améliorer l’expérience visuelle, surtout lorsque vous vous connectez au site d’un client qui contient une foule de menus déroulés par défaut. Désormais, seul le menu actif est déroulé avec ses sous-menus.

Menus déroulants dans WordPress 3.3

Autres améliorations notables dans WordPress 3.3

Maintenant que nous avons fait le tour des changements les plus visibles, voyons rapidement ce qu’il y a sous le capot pour les développeurs de sites.

• Maquette adaptable : il s’agit juste de poser les bases pour WordPress 3.4, mais dans cette version 3.3 le menu gauche disparait automatiquement sur les petits écrans.
• Liens permanents : au lieu de saisir `/%postname%/` WordPress 3.3 propose un menu déroulant. Plus important, les problèmes de performances sont résolus. Ce réglage est donc désormais utilisable sans problème de performances, même sur les sites composés d’un très grand nombres d’articles ou de pages.
• jQuery 1.7.1 et jQuery UI 1.8.16 : jQuery est mis à jour et toutes les fonctionnalités de jQuery UI sont disponibles et prêtes à être «enqueued» dans WordPress 3.3.
• API de l’éditeur : les développeurs de plugins peuvent maintenant personnaliser l’éditeur de WordPress, y compris au niveau des boutons de TinyMCE. Il est même possible d’ajouter des éditeurs additionnels.

Soyez à jour !

Comme toujours, il est recommandé de mettre vos  sites web à jour avec la dernière version de WordPress dès qu’elle est disponible. Gardez donc un oeil sur la sortie de WordPress 3.3 pour commencer à découvrir ses nouvelles fonctionnalités.

Traduit d’après l’article de Brian Casel (@CasJam sur Twitter), fondateur de CasJam Media. Article original en anglais paru sur Mashable.com sous le titre WordPress 3.3: The 11 Most Important New Features.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• WordPress de A à Z — F comme Functions.php
• WordPress de A à Z — E comme Extensions (les plugins)
• WordPress de A à Z — C comme CSS & Composé HTML5
• Création de site WordPress de A à Z — B comme Basics

Un Polyfill est un script qui permet d’émuler les fonctionnalités qui manquent à un navigateur. Par exemple, HTML5 est constitué de nombreuses API dont certaines ne sont pas prises en charge par tous les navigateurs, y compris les plus récents. Les Polyfills permettent d’utiliser ces API d’une manière standard sans être obligé d’utiliser des contournements qui seront obsolètes à terme. Pour nous aider dans cette tâche, voici une collection de bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Modernizr  est un bon point de départ pour détecter ces fonctionnalités.

Guide tout-en-un des solutions de repli pour HTML5. Liste garantie entièrement non-alphabétique et sans grumeau ! Voici quelques exemples parmi cette liste de plus de 100 Polyfills et Fallbacks :

SVG

RaphaelJS – Raphaël est une petite bibliothèque Javascript développée par Dmitry Baranovskiy qui devrait vous simplifier la vie lors de l’utilisation des images vectorielles sur le web. Raphaël utilise les recommandations du W3C pour SVG et la technologie VML pour créer des images. Chaque visuel créé fait partie du DOM. Il est donc aisé d’ajouter des gestionnaires d’événements pour modifier ces objets à volonté. Raphaël est compatible avec Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer à partir de la version 6.0.

Canvas

ExplorerCanvas (ExCanvas) — L’élément HTML5 Canvas pour Internet Explorer. Les navigateurs modernes comme Firefox, Safari, Chrome et Opera prennent en charge le tag <canvas> pour dessiner en 2D dans le navigateur sans plugin externe. ExplorerCanvas apporte la même fonctionnalité dans Internet Explorer grâce à l’inclusion d’un simple script dans vos pages existantes (à condition qu’elles utilisent l’élément <canvas> !).

Session Storage

sessionstorage – L’objet sessionStorage pour tous les navigateurs ! (Voir aussi le script Storage polyfill de Remy Sharp).

HTML 5

html5shim & innerShiv – html5shim permet d’injecter dans le DOM d’Internet Explorer les balises HTML5. Quant à innerShiv, il s’arrange pour que les balises injectées par html5shim fonctionnent toujours lorsqu’elles sont créées via la méthode Javascript innerHTML. A noter que innerShiv n’est plus nécessaire avec jQuery 1.7.

Audio & Video

MediaElement.js – Propose des players <video> et <audio> en pur HTML & CSS pour les navigateurs modernes et des versions Flash et Silverlight pour les vieux navigateurs. Cette stratégie permet d’offrir une expérience visuelle identique aux visiteurs quel que soit le navigateur qu’ils utilisent. Cerises sur le gâteau : respect de l’accessibilité et des plugins pour les CMS WordPress, Drupal, Joomla, jQuery, and BlogEngine.NET, Ruby Gem et Plone.

Formulaires HTML5

H5F – HTML 5 Forms autorise l’utilisation des nouveaux types de champs, attributs et contraintes de validation de formulaire apparus avec HTML5, dans les vieux navigateurs.

CSS3

• CSS3 PIE – Utilisez les propriétés border-radius, box-shadow, multiple backgrounds, linear gradients, border-image dans IE de la version 6 à 9
• CSS3 – Multi Column – Utilisez les propriétés column-count, column-width, column-gap, column-rule dans Safari 1.3, Opera 7.54, Opera 8, Firefox 1.0.4, Netscape 7.1 et IE 6.
• Respond – Permet d’utiliser les propriétés min/max-width de CSS3 Media Queries dans IE 6 — 8.

Cette liste est éditée et maintenue par Paul Irish avec les contributions de Jonathan Cook, Mark Boas, Michael Behan, Mathias Bynens, Eli Grey, Øyvind Sean Kinsey, et bien d’autres.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• html5media — Les balises HTML5 audio et video sans contrainte
• Le petit journal du Web — 31 décembre 2010
• HTML5 Please — Fallback et Polyfills (ou pas)
• WordPress de A à Z — F comme Functions.php

Voici le 7^ème article de la série WordPress de A à Z qui a débuté le 18/03/2011 avec «Créer son site web avec WordPress de A à Z… avec le Codex». «F comme Functions» propose un aperçu des fonctions disponibles dans le fichier functions.php situé à la racine de la plupart des thèmes WordPress, comme c’est le cas dans WordPress Basics, dont je vais m’inspirer dans la suite de cet article. Ce fichier se comporte comme un plugin. Il est chargé pendant la phase d’initialisation de WordPress, à la fois pour les pages internes à l’administration du site et pour les pages visibles pour l’ensemble des visiteurs.

Le fichier functions.php est chargé automatiquement par WordPress lorsqu’il est présent à la racine du thème. Il est utilisé dans plusieurs cas, parmi lesquels :

• Activation des fonctionnalités du thème prévues par WordPress (menus de navigation, miniatures, formats de billet, en-tête et fond personnalisés, etc.),
• Définition des fonctions personnalisées pour les intégrer ensuite dans vos modèles de page,
• Mise en place des options dans la partie administration du site (options de style, de couleur, ajout de menus, modification de variables, etc.)

La souplesse de ce fichier functions.php peut vite se transformer en casse-tête si l’on ne prend pas soin de l’organiser. Sans compter qu’il faut aussi penser à la possibilité de créer un thème enfant. La nouvelle version de WordPress Basics est livrée avec le Child Theme Beyond Basics.

Le fichier functions.php de ce dernier est chargé avant celui qui est présent dans Basics, le thème parent. En effet, contrairement à ce qui se passe pour la feuille de style style.css du thème parent qui est complèment ignorée au bénéfice de celle qui est présente dans le thème enfant, le cas échéant, le fichier functions.php du thème parent est chargé, lui.

Pour ajouter une fonction de votre cru à Beyond Basics, il suffit de la créer dans le fichier functions.php et elle sera chargée comme celles qui se trouvent dans le thème parent.

Pour modifier une fonction existante, il suffira de la déclarer avec le même nom dans votre fichier functions.php et voilà ! Dans WordPress Basics, je vérifie que la fonction n’existe pas déjà avant de l’utiliser grâce à la condition if ( ! function_exists( 'ma_fonction' ) ) :

if ( ! function_exists( 'ma_fonction' ) ) :
    function ma_fonction() {
        [...]
    }
endif;

functions.php

Pour des questions de modularité et pour faciliter la maintenance, le fichier functions.php ne comporte que des appels à des fichiers externes situés dans le répertoire inc/ (à partir de la version 0.2.7.1) :

<?php
require( dirname( __FILE__ ) . '/inc/functions-setup.php' );
require( dirname( __FILE__ ) . '/inc/functions-filter-action.php' );
require( dirname( __FILE__ ) . '/inc/functions-display.php' );
require( dirname( __FILE__ ) . '/inc/functions-comment.php' );
?>

functions-setup.php

Ce premier fichier initialise quelques variables (largeur pour la zone de contenu, paramètres pour la traduction du thème) et active les fonctions embarquées dans le coeur de WordPress via la fonction basics_setup(). Voici la liste des fonctionnalités disponibles dans WordPress :

• Post Thumbnails
• Navigation Menus
• Widgets
• Post Formats
• Custom Backgrounds
• Custom Headers *
• Editor Style
• Automatic Feed Links

• La fonction Custom Headers n’est pas incluse dans Basics. Elle sera intégrée plus tard, soit dans Basics, soit dans Beyond Basics, selon la préférence du plus grand nombre.

Rien que de très classique, donc, si ce n’est que j’en ai profité pour renommer le fichier editor-style.css en markup.css via la fonction :

/**
 * Add support to styles the visual editor
 * to match the front theme style
 */
add_editor_style( 'markup' );

functions-filter-action.php

Les filtres et les actions font partie de la boite à outils de l’intégrateur WordPress. Ils permettent de modifier le comportement de WordPress à différentes étapes de son lancement. S’ils sont regroupés dans le même fichier, c’est parce qu’ils appartiennent à la grande famille de la Plugins API. Ce sont des Hooks (crochets) que les développeurs de WordPress ont placé à des endroits stratégiques. Ils fonctionnement globalement de la même manière.

Les filtres

Les filtres sont des accroches (hooks) permettant de modifier les contenus avant de les insérer dans la base de données ou de les afficher dans le navigateur. Il existe de très nombreux hooks disponibles. Parmi les plus utilisés dans un site WordPress, on trouve notamment the_content ou the_excerpt mais aussi body_class qui peut s’avérer très utile.

Grâce à la fonction add_filter() on pourra modifier the_content() comme bon nous semble. L’exemple qui suit modifie la fonction the_content(). Une fois le filtre ajouté, elle affichera une icône au début de chaque article :

add_filter( 'the_content', 'my_the_content_filter', 20 );
function my_the_content_filter( $content ) {
    if ( is_single() )
        $content = sprintf(
        '<img class="post-icon" src="%s/images/post_icon.png" alt="Post icon" title=""/>%s',
        get_bloginfo( 'stylesheet_directory' ),
        $content
    );
    return $content;
}

Les actions

Comme les filtres, les actions sont des hooks disséminés dans le coeur de WordPress qui s’activent à des étapes spécifiques lors de l’affichage d’une page ou d’une action de la part de l’utilisateur connecté à l’administration du site. Ils s’utilisent comme les filtres via la fonction add_action() :

/**
 * Register widgetized area and update sidebar with default widgets
 */
add_action( 'widgets_init', 'basics_widgets_init' );
if ( ! function_exists( 'basics_widgets_init' ) ) :
function basics_widgets_init() {
    register_sidebar( array (
        'name' => __( 'One', 'basics' ),
        'id' => 'war-1',
        'description' => __( 'Widgets Area One', 'basics' ),
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}
endif;

Actions et filtres dans Basics

• remove_filter()  – Supprime la balise <p> dans les catégories ou les tags,
• basics_page_menu_args() — Affiche un lien vers la page d’accueil dans wp_nav_menu() ,
• basics_excerpt_length() — Limite l’extrait (the_excerpt) à 52 characters,
• basics_continue_reading_link() — Affiche un lien « Lire la suite » pour les extraits,
• basics_auto_excerpt_more() — Remplace   »[...] » par trois petits points + basics_continue_reading_link(),
• basics_custom_excerpt_more() — Personnalise le lien « Lire la suite » pour les extraits personnalisés,
• basics_widgets_init() — Enregistre les zones de widgets,
• basics_body_class() — Ajoute une classe personnalisée à la fonction body_class(),
• basics_img_caption_shortcode() — Utilise les balises <figure> et <figcaption> avec le shortcode image,
• basics_change_mce_options() — Ajoute le support pour la balise <iframe> dans l’éditeur Wysiwyg,
• basics_jquery() — Charge jQuery dans le footer,
• basics_scripts() — Charge d’autres scripts dans le footer après jQuery.

functions-display.php

C’est là que j’ai regroupé les fonctions appelées dans les différents fichiers du thème Basics :

• basics_content_nav() – Liens pages suivantes et précédentes,
• basics_title() – Optimisation du contenu de la balises <title>  (SEO),
• basics_description() – Optimisation de la balise <meta description> (SEO),
• basics_section_heading() – Titres de section personnalisés en fonction du contexte d’affichage,
• basics_posted_on() – Informations présentes dans le <header> des articles,
• basics_posted_in() – Informations présentes dans le <footer> des articles,
• basics_favicons() — Affiche les liens des favicons dans les meta tags,
• basics_extra_head() — Affiche des meta tags personnalisés,
• basics_i_love_wordpress() — Affiche l’icône du thème Basics dans le footer,
• basics_search_autofocus() — Affiche l’attribut « autofocus » dans le champs input du formulaire de recherche.

functions-comment.php

Deux fonctions sont chargées de modifier le marquage HTML par défaut pour y ajouter des morceaux entiers de sémantique HTML5 et un peu d’accessiblité avec des petits bouts d’ARIA :

1. basics_comments() — Contient le modèle pour l’affichage des commentaires et des trackbacks . Elle est utilisée en tant que fonction de rappel de la fonction wp_list_comments.
2. basics_respond() — Affiche le formulaire permettant de laissser un commentaire.

L ’idée de base étant d’obtenir un marquage HTML5 pour l’affichage des commentaires avec la balise <article>, mais aussi pour le formulaire permettant aux visiteurs de laisser un commentaire pour profiter des nouveaux champs et attributs de formulaires à la mode de HTML5.

En bref

Ce fichier functions.php s’avère donc très utile. Toutefois, avant de le remplir au maximum, on peut se demander si un ou plusieurs plugins ne serait pas plus adaptés, vu que ce fichier fonctionne grosso modo comme un plugin géant. N’hésitez pas à décortiquer le fichier functions.php de Basics et de Beyond Basics (très léger pour le moment) et à me faire part de vos remarques et suggestions pour améliorer le bouzin :-)

→ Rendez-vous sur WordPress & Webdesign pour télécharger Basics et Beyond Basics.

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• 390 ressources Javascript & jQuery
• WordPress 3.3 — 10 nouvelles fonctionnalités importantes
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• HTML5 Boilerplate + Toolbox + Codex = WordPress Basics

Je viens de terminer le livre HTML5 — De la page web à l’application web écrit par Jean-Pierre Vincent et Jonathan Verrecchia, préfacé par Paul Irish et publié au éditions Dunod. Ce livre est destiné en premier lieu aux personnes qui utilisent déjà HTML comme les intégrateurs web, les développeurs front-end, etc. Bref, toutes celles et ceux qui utilisent le langage de balisage mis au point par Tim Berners-Lee au début des années 1990 dans le cadre de leur travail ou de leur loisir.

Après une introduction concernant le contexte dans lequel s’insère HTML5, l’ouvrage est composé de deux parties principales :

1. Le détail des balises composant HTML 5 en tant que successeur de HTML 4.01 (les balises) dont l’intégrateur HTML & CSS se sert pour construire ses pages web : du doctype à la validation des formulaires en passant par la nouvelle syntaxe retenue par le W3C, les anciennes balises HTML qui ont été conservées, les nouvelles balises ajoutées et celles qui ont changé de nature.
2. Les différentes API indépendantes qui feront le bonheur des développeurs front-end qui économiseront du temps et des lignes de codes en utilisant des modules tels que la géolocalisation, le web déconnecté, les websockets, le glissé-déposé, l’API file, etc. Bref, tout ce qu’il faut pour créer de véritables applications web.

Les lecteurs attentifs remarqueront que les balises <audio> et <video> ont été mises dans le deuxième chapitre alors que je les vois toujours comme de simples balises (même s’il est possible de mettre beaucoup de code Javascript pour gérer finement leur comportement) contrairement à <canvas>, qui est effectivement sans objet s’il elle n’est pas accompagnée de code Javascript.

J’ai beaucoup apprécié les explications détaillées concernant les rôles ARIA et les microdatas qui permettent d’améliorer l’accessiblité des documents web et d’enrichir les contenus avec des morceaux de sémantiques utiles lorsqu’il s’agit de faire comprendre aux moteurs de recherche la nature des éléments qu’ils indexent.

Les fiches pratiques en annexe permettront de rétrouver les différentes notions abordées dans le livre et serviront de pense-bête. A cet égard, il manque peut-être des renvois vers les pages où les différentes techniques sont détaillées dans l’ouvrage.

Si je devais résumer HTML5 — De la page web à l’application web en quelques mots, je dirais qu’il présente, sous une forme agréable à lire et de manière très concise, l’essentiel de ce qu’il faut savoir à propos de ce nouvel ensemble de technologie qu’est HTML5.

Informations pratiques

HTML5 : de la page web à l’application web

• Auteurs : Jean-Pierre Vincent et Jonathan Verrecchia
• Collection: InfoPro, Editeur : Dunod,
• Date de parution : 2011,
• Nombre de page : 256,
• Format : 175 x 250 mm,
• EAN13 : 9782100565283,
• Prix TTC : France 26,50 €

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Quelques notes — Programme de formation HTML & CSS
• WordPress 3.3 — 10 nouvelles fonctionnalités importantes
• WordPress de A à Z — F comme Functions.php
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours

J’ai eu quelques occasions de répondre à des demandes d’interview de la part d’acteurs de la blogosphère sur les sujets liés au graphisme, au webdesign, et sur le métier d’intégrateur web. Cet exercice demande de la sincérité et une certaine rigueur pour éviter de se répéter. J’ai la chance d’avoir eu de nombreuses expériences professionnelles dans lesquelles je peux picorer ça et là ce qu’il faut pour répondre de manière personnalisée en évitant le contenu dupliqué (Duplicate Content)  ;-). Bref, voici 11 interviews qui m’ont permis de prendre du recul sur la pratique de mon métier de Chef de projet web et d’en apprendre sur moi-même. 

Je partage ces textes avec vous sur ce blog car le web est volatile et certaines interviews ne sont déjà plus disponibles. Alors comme on disait chez moi quand j’étais jeune : «faut pas gâcher, petit !».

Cerise sur le gâteau, j’en profite pour fêter les cinq ans de ce blog qui existe sans interruption depuis juillet 2006 \o/

1. Mots And Co — 17 septembre 2007
2. Pixenjoy – 04 octobre 2007
3. Blog Tool Box — 04 septembre 2008
4. All For Design — 14 juillet 2009
5. Le Post — 23 septembre 2009
6. Oziks — 30 décembre 2009
7. WPChannel — 21 septembre 2010
8. Pixelboy — 27 mai 2010
9. CoreyGraphe — 20 avril 2011
10. Pixevent — 24 avril 2011
11. Le blog des nouvelles technologies — juin 2011

17 septembre 2007 sur le blog de MotsAndCo

MotsAndCo.com : Bonjour Bruno. On entend souvent dire que le contenu d’un blog est ce qui fait revenir ses lecteurs. Penses-tu que le graphisme du contenant soit secondaire ?

   L’opposition de principe entre le fond et la forme n’a pas lieu d’être et je préfère parler « d’intérêt de lecture » au sens large car on peut (re)venir vers un blog pour son graphisme et/ou son contenu. Tout dépend de ce que le visiteur est venu chercher. Néanmoins, le développement de la lecture des blogs via les flux RSS ou Atom pousse indéniablement le curseur vers un contenu de qualité si l’on veut transformer l’essai. Il m’arrive de lire certains blogs sans jamais y mettre la souris, au point que parfois j’ai du mal à les reconnaitre quand je tombe dessus par hasard ;)

   Il y a une troisième dimension à prendre en compte entre le contenu et l’habillage graphique : l’expérience utilisateur, sorte de mélange entre l’ergonomie, le contenu et l’apparence. A contenu égal, certains blogs me donnent plus que d’autres l’envie d’aller plus loin. Le respect d’une charte éditoriale est un autre aspect qui commence à être évoqué par beaucoup de blogueurs. Il semble que les blogs à succès sont composés d’articles qui creusent verticalement un sujet, sans pour autant en oublier les aspects horizontaux, voire à être parfois totalement hors-sujet.

MotsAndCo.com : Globalement, peu de blogs corporate mettent l’accent sur le graphisme, s’arrêtant souvent à un logo et une interface terne. Que conseillerais-tu à un entrepreneur souhaitant rendre son blog plus «  créatif  » ?

   Faire appel à un créatif ! C’est vrai que la majorité des blogs corporate ne brillent pas par leur originalité. En même temps, c’est parfois difficile pour un entrepreneur de passer le cap du blog, alors laissons-lui le temps de s’habituer à l’outil : l’appétit vient en mangeant et nul doute qu’un jour ou l’autre il éprouvera le besoin d’avoir un blog à son image.

   Parfois, une interface sobre (même terne) peut être un bon moyen pour entrer en contact avec d’autres entrepreneurs, dans le sens où les codes vestimentaires dans l’entreprise s’appliquent aux blogs, souvent perçus comme un avatar de l’auteur. De là penser que le côté terne des blogs corporate soit l’équivalent du « costard cravate », il n’y a qu’un pas ;)

   Aujourd’hui, un blog corporate terne, ça passe encore, car toutes les entreprises n’ont pas sauté le pas : avoir un blog, même moche, c’est la « vibe » ! Mais demain, pour exister, le blog devra renouveler sa garde-robe.

MotsAndCo.com : Quelles sont les tendances du moment en matiére de graphisme de blogs ? Va t’on vers plus de simplicité ou au contraire, des colonnes sans cesse plus fournies ?

   Les deux mon capitaine ! On voit apparaitre à la fois des blogs qui ressemblent aux journaux de la IIIe République avec plusieurs colonnes, des titres énormes, des entrefilets (Asides), de la réclame en veux-tu en voilà … et des blogs avec un design plus réfléchi, plus calme prenant en compte les besoins de l’utilisateur.

   Il y a quelques années, la quasi-totalité des webdesigners étaient surtout des infographistes travaillant pour l’imprimé et pour lesquels la création de sites web était accessoire. Ce qui a donné ce graphisme typique des sites des années 90-2000 composé de textes en corps 10 pixels (quand ce n’était pas 9 pixels) et d’énormes photos et fioritures graphiques en tout genre y compris pour remplacer les titres !

   Aujourd’hui, beaucoup de choses ont changé. La plupart des webdesigners travaillent uniquement pour le net, et une part grandissante d’entre eux n’a jamais connu l’imprimé. Pour eux, la flasheuse, c’est la voisine du dessus qui fait des animations ;) Si l’on ajoute à celà , la part grandissante des notions d’accessibilité, d’ergonomie et d’expérience utilisateur, on obtient des sites et des blogs avec des textes plus agréables à lire et beaucoup moins de photos. La plus grande partie des illustrations étant surtout composée de pictogrammes pour guider le lecteur.

   Il reste du travail graphique à réaliser autour de l’intégration de la monétisation des blogs (la pub, quoi ;) ) Nul doute que les webdesigners devront faire preuve d’astuce et d’espièglerie pour intégrer un peu mieux la publicité et les sponsors.

   L’avenir du graphisme dans les blogs passera sans doute par l’optimisation de l’expérience utilisateur et la mise en valeur du contenu, un peu comme faire la mise en page d’un livre dont les chapitres seraient les billets et le bandeau de l’en-tête, la couverture. Une partie des webdesigners se transformeront sans doute en blogdesigner pour s’adapter aux spécificités des blogs.

04 octobre 2007 sur Pixenjoy

Quel est votre nom, votre localisation géographique ?

   Bonjour, Je m’appelle Bruno Bichet, et je suis basé à Lyon dans la région Rhône-Alpes.

Quel est votre formation ?

   Littérature et Histoire avec une pincée d’Information et Documentation en direction des PME. J’ai appris le reste « sur le tas » ou en autodidacte.

Sur le plan professionnel, quel est votre parcours, votre situation actuelle, vos projets avenir ?

   Après quelques petits boulots, je me suis intéressé à la PAO en 1992 : j’ai passé pas mal de temps à maquetter des publicités et des magazines (et pas mal de journaux gratuits aussi) sur XPress et Illustrator. J’ai également eu l’occasion de faire beaucoup de retouche photo.

   Je me suis intéressé au web dès 1996 suite à l’achat d’un Macintosh « internet ready » (en gros il possédait un modem 28.8…).

   La lecture de quelques magazines spécialisés m’a permis de faire mes premières pages web truffées de gifs animés pour mon plaisir personnel.

   La transition entre la PAO et le web s’est faite progressivement jusqu’en 2000 date à laquelle j’ai suivi une formation pour me perfectionner dans les techniques du webdesign. Formation après laquelle je suis devenu formateur sur Dreamweaver, Photoshop et Illustrator.

   Je teste actuellement une activité liée aux blogs « corporate » et à l’intégration web. L’avenir, incertain par nature, me dira ce qu’il me réserve.

Vous débutez une activité indépendante autour du service des blogs, comment allez vous effectuer votre prospection ?

   Pour le moment je laisse faire la nature. Quand on propose des prestations autour des blogs et du référencement, la moindre des choses est de laisser les clients vous trouver, non ?

Comment maintenez-vous vos connaissances, combien de temps y consacrez-vous ?

   Principalement en faisant de la veille sur les sujets qui me passionnent comme le xhtml, les css et le framework jQuery pour faire du javascript comme Jourdain faisait de la prose. Je surveille également du coin de l’oeil les évolutions des CMS et des langages « open source » comme PHP.

   Même si le web est plein de ressources, j’achète régulièrement des livres ; j’ai tendance à utiliser le web pour trouver des solutions concrètes à mes problèmes alors que les livres me servent à faire le tour d’un sujet de manière exhaustive car il faut bien admettre que l’information présente sur le web est très fragmentée.

   Difficile de quantifier le temps passé, puisque la recherche d’information s’effectue pratiquement en continue tout au long de la journée.

Quelles technologies utilisez-vous le plus dans vos projets ?

   Principalement XHTML et CSS avec une pincée de jQuery et de PHP pour la partie web, et Photoshop et Illustrator pour la partie graphique.

Quel est d’après vous la technologie emmergeante qui va faire sa place sur le web dans les prochaines années ?

   Du côté du HTML, il semble que ça va bouger un peu avec HTML5 … dans les 15 prochaines années.

   Je mise plutôt sur les microformats qui devraient se faire une bonne place peu à peu. La route semble longue, mais on n’est jamais à l’abri d’une bonne surprise. Reste à trouver la « killer-app » des microformats qui va mobiliser les foules.

Quel est votre position sur la technologie Flash ?

   Ce n’est pas mon truc. J’ai pourtant suivi des formations dessus, mais je n’ai jamais vraiment accroché. Il y a déjà tellement à faire en 2D statique : design, ergonomie, intégration, prise en compte des besoins en accessibilité, adaptation aux différents navigateurs, rédaction du contenu… « J’ai pas quat’ bras… » et quand bien même, je ne pense pas qu’il soit souhaitable ni possible de tout faire.

   Je ne résiste pas à l’envie de citer une phrase lue chez Rémy Prévost : Quand je vois un site en Flash, c’est un peu comme un flyer — je le regarde, je dis « wow, c’est sexy », et ensuite je le jette.

D’après vous quelles compétences, savoir faire, savoir être, un webdesigner doit-il posséder pour réaliser des sites web professionnels ?

   La création de site web requiert des compétences à la fois très larges et très pointues ; il devient difficile de savoir tout faire (je ne parle pas de créer un thème pour un blog avec une bannière animée et un logo en flamme, on est bien d’accord.)

   Très large car le webdesigner doit maitriser les outils de création graphique (en plus d’être graphiste) et les outils pour transmuter tout ça en page web avec Dreamweaver ou le bloc-notes.

   Assez pointues pour faire face aux différences entre les navigateurs qui ont parfois du mal à s’adapter aux exigences graphiques du webdesigner.

   Sans compter le sens commercial, relationnel et pédagogique indispensable pour prendre en compte les besoins du clients et plus encore pour cerner ce dont il n’a pas besoin… et le lui faire comprendre.

Dans l’interview de Mickaël Thomassin vous parlez du blogdesign, pensez-vous que ce service soit un véritable business d’avenir pour les webdesigners sachant qu’il existe un nombre important de templates gratuits ?

   Les entreprises ont et auront besoin de blogs pour ajouter une corde à leur communication de niche. Reste à savoir qui va s’en occuper : les agences de publicité sont souvent les mieux placées pour gérer les gros budgets. Reste à convaincre les autres de se lancer dans l’aventure.

   Concernant les templates gratuits ou payants, il existe pour moi la même différence qu’entre le prêt-à-porter et le sur-mesure, ou encore entre l’utilisation d’un CMS gratuit et la conception d’un site web « from scratch ».

   La majorité des solutions CMS gratuites mise en ligne pour des entreprises sont gérées par des sociétés qui facturent la customisation des fonctionnalités et/ou du thème graphique ; je ne vois pas pourquoi ça serait différent pour les blogs qui sont avant tout des CMS !

Pensez-vous qu’il y ait un marché francophone dans la vente de templates WordPress par exemple ?

   Je ne le pense pas. La raison est assez simple : l’offre de template est supérieure à la demande ! Par ailleurs l’offre existante (gratuite) est souvent de très bonne qualité et autorise la plupart du temps les adaptations.

   Toutefois, si l’on considère WordPress comme un CMS et non plus comme une plate-forme de blog, il reste heureusement possible de vendre du design web. Mais dans ce cas, ils s’agit ni plus ni moins de réaliser la charte graphique d’un site web, fut-ce pour une technologie initialement prévue pour être utilisée sous forme de blog…

   C’est toute la différence qui existe avec la vente de template pour des outils comme osCommerce bien moins fun à mettre en page et dont peu de designers et d’intégrateurs se préoccupent.

Les newsletters existent depuis longtemps dans l’histoire du web, pensez-vous que le design de newsletter soit (toujours) un marché intéressant pour les webdesigner ?

   Je pense qu’un jour viendra où les entreprises respecteront l’utilisateur en lui offrant la possibilité de s’abonner à des flux RSS au lieu de participer à la grande foire du spam mondiale… Bon, ok, il y a des exceptions et j’ai choisi de recevoir une partie des newsletters que je reçois, mais c’est loin d’être le cas pour toutes.

   En attendant, la conception de newsletters a encore un peu d’avenir et comme toutes les spécialités un peu ingrates (cf. templates osCommerce), un webdesigner spécialisé peut y trouver son compte.

Quels sont vos sources d’inspiration, vos webdesigner préférés, avez vous des liens à nous conseiller ?

   J’essaie de trouver l’inspiration dans les à-côtés du webdesign et non dans les travaux d’autres webdesigners…. A tel point que j’aurais du mal à citer deux ou trois graphistes faisant autorité dans le domaine.

   Ma culture graphique provient essentiellement de mon expérience du print et mes références datent peut-être un peu : « Typography » d’Emil Ruder est toujours mon ouvrage de référence sur le graphisme…

   Aujourd’hui, mon graal en matière de design web et d’ergonomie est proche des travaux d’Information Architects avec un attention particulière pour les recherches ergonomiques de Jakob Nielsen.

   Je suis également curieux de tout ce qui m’entoure au quotidien : affiches, magazines, publicités dans les boites aux lettres, fiches d’impôts.

Y a t’il un ou plusieurs ouvrages de webdesign qui ait retenu votre attention ces derniers mois ?

   Pas vraiment, et je compte d’ailleurs sur d’éventuels commentaires pour me guider.

Y a t’il un sujet que je n’ai pas abordé et que vous aimeriez développer ici ?

   En ce qui me concerne, je ne vois rien de plus à ajouter, à part dire « Merci » pour ces questions qui semblent faites sur mesure et auxquelles j’ai pris plaisir à répondre.

4 septembre 2008 sur Blog Tool Box

Tu blogues depuis combien de temps maintenant ?

Ma toute première expérience de blogging remonte à… 2003. Mais c’est en 2005 que j’ai commencé un blog avec wordpress.com, qui s’est ensuite transformé en css4design.

Qu’est ce qui ta amené au blogging ?

La curiosité pour ce mode d’expression, et après je me suis laissé influencer par mon entourage professionnel où les blogs étaient très présents.

Combien de temps consacres-tu au blogging quotidiennement ?

Difficile à quantifier et ça dépend des périodes. En ce moment c’est deux / trois heures par jour (même le dimanche).

Tires-tu des revenus (directs ou indirects) de ton blog ?

Quelques dizaines d’euros par mois avec la publicité, et des contacts qui se traduisent par des commandes de prestations en intégration web.

Quelle est ta plus grosse erreur de blogging ?

Ne pas avoir commencé dès le départ dans l’idée de gagner de l’argent avec mon blog ;)

Quelle est l’importance du design sur un blog (de 0 à 10) ?

10/10. Mais je préfère un design moche à un design qui fait l’unanimité mais qu’on retrouve partout.

Quelle est l’erreur la plus courante dans la conception d’un design pour un blog ?

Sans hésiter : l’interlignage bien trop faible, et la taille des caractères souvent trop petite.

Penses-tu que les blocs d’annonces Google AdSense donne un aspect non professionnel à un blog ?

Tout dépend de la manière dont les annonces s’insèrent dans le design.

Quelle est la meilleure technique de promotion que tu as utilisé ?

Beaucoup de lecture d’autres blogs en laissant beaucoup de commentaires. Ça apporte une audience faible mais de qualité (on crée des liens, etc.). Pour l’audience, je conseille Scoopeo qui peut apporter beaucoup de visiteurs. Dans le lots, certains trouveront votre blog intéressant et reviendront ;)

Si tu devais lire qu’un seul blog, lequel choisirais-tu ?

Rhooo, la question qui tue… Bon, je vais essayer de répondre honnêtement : à part le mien (je m’en sert pour travailler) je garderais Information Architects.

Si tu pouvais donner un conseil à un débutant, quel serait-il ?

De bien se prendre la tête avec les statistiques de fréquentation, de publier plusieurs billets par jour, de ne pas prendre en compte le minimum vital du code typographique et de s’engueuler le plus souvent possible avec les visiteurs qui laissent des commentaires sur le blog ! (nan, j’plaisante, en fait, c’est tout le contraire ;) ) Bref, le conseil : garder le sens de l’humour et relativiser.

Le secret du succès de ton blog en un seul mot ?

SavoirPourQuiOnEcrit.

14 juillet 2009 sur All For Design

Bonjour Bruno, peux-tu te présenter en quelques mots ?

Bonjour, je suis Bruno Bichet, j’ai 42 ans, un mariage en vue et un petit garçon de six ans. J’aime jouer du rock à la guitare électro-acoustique et refaire le web autour d’un jus de carotte. Après avoir passé plus de 8 années passionnantes dans le print comme infographiste PAO, j’ai commencé à travailler dans le web en 2001 comme formateur HTML/Dreamweaver et Javascript. Je suis actuellement Intégrateur Web Senior pour un réseau social de rencontre en ligne.

Comment définirais-tu ton travail actuel ?

Je crée ou j’adapte les chartes graphiques, je réalise l’intégration de nouvelles maquettes et quand j’ai le temps, je conçoit et met en œuvre la stratégie des envois de mail destinés à notre base client qui contient plusieurs millions d’entrées. Je participe également au déboguage des applications web réalisées par différentes équipes au sein du groupe.

A quel âge as-tu commencé à t’intéresser au domaine du web design ? Qu’est ce qui a motivé ce choix de carrière ?

Assez jeune, vers 16 ans, je me suis passionné pour les métiers de l’imprimerie, notamment ceux en rapport avec la conception des maquettes de livres et la typographie. Je suis devenu exé PAO au début des années 1990. Cela m’a amené à travailler dans la presse associative, la presse magazine professionnelle, les journaux gratuits, et les agences de publicité.

Enfin, lassé des différences de rendu du langage de description de page Postscript entre les différentes flasheuses (les imageuses, pas les filles qui font du Flash), j’ai voulu voir ce donnait le métier d’infographiste-maquettiste appliqué au web ;)

Selon toi, quelles sont les principales difficultés du métier de web designer ?

C’est un métier au carrefour de plusieurs compétences. En général on en maitrise une partie et on en connait bien une autre, mais il faut savoir se débrouiller dans les domaines que l’on connait moins : il faut se former constamment. Le bon sens demande quand même de développer ses points forts au lieu de courir après ses points faibles.

A part ça et les dead lines toujours trop courtes, il faut être attentif aux détails tout en restant vigilant sur le périmètre globale des fonctionnalités demandés par le client : un oubli est si vite arrivé (en même temps, contrairement au print, l’oubli peut être rapidement corrigé).

Qu’est-ce qui fait selon toi un bon web designer ?

Je dirais qu’un bon webdesigner est quelqu’un capable d’avoir suffisamment d’empathie avec le client pour fournir le travail demandé au lieu du travail imaginé ! Le reste est très subjectif et c’est surtout la qualité du dialogue avec le client qui compte. Il faut pouvoir lui proposer des pistes auxquelles il n’est pas habitué : le vrai client, c’est le client final, celui auquel est destiné le site web.

Peux-tu nous décrire une journée de travail type ?

Machine à café. Lecture des mails (et des flux RSS, veille technique et stratégique). Le boss qui vient avec une idée en version bêta à réaliser pour hier et/ou avec des bugs à corriger sur le projet lancée la veille : propositions sur l’idée, et/ou correction des bugs. Avancement sur les projet au long cours. Lecture des flux RSS en attendant une réunion. Réunion. Le point avec le studio graphique sur les maquettes commandées. Pause de midi. Machine à café. Lecture des mails. Le boss qui revient avec l’idée en version Release Candidate sur laquelle on commence à produire la version finale après avoir rassemblé quelques informations sur les contraintes techniques avec les collègues. Le boss qui revient dans la soirée pour faire le point sur les projets, etc.

Quels sont tes principaux outils de travail ?

Photoshop pour la découpe d’image en vue de l’intégration html et css. Illustrator et Photoshop pour la réalisation de chartes graphiques. Notepad++, Dreamweaver et Aptana pour l’intégration web : un éditeur ouvert par projet pour éviter d’avoir 3 fichiers index.php ouvert en même temps ou selon les langages utilisés. Par exemple, s’il y a déjà beaucoup de PHP ou de JS dans un projet, j’utilise plutôt Aptana, sinon, je switch entre notepad++ et PSPad, ce qui m’évite de jongler avec différentes colorations syntaxiques dans le même éditeur.

Pour le côté administratif et organisationnel, j’ai opté pour la suite Google Document qui permet d’avoir des présentations et des notes accessibles partout.

Peux-tu nous parler de tes projets actuels et à venir ?

Pas mal de changements sont prévus au cours des mois à venir, mais il est encore un peu tôt pour en parler : stay tuned!

Le web et ses technologies est un domaine en constante évolution, comment t’y prends-tu pour rester aux aguets ?

J’ai écrit le billet 3 trucs de Jedi pour affuter votre veille stratégique justement sur cette question ;) Il ne sert à rien de limiter sa veille techno aux grands sites du secteur parce que tout le monde les suit également : l’info arrivera d’une manière ou d’une autre. Ce qui est important c’est d’être curieux et de chercher des sources d’infos émergentes comme des nouveaux blogs. Pour cela, j’encourage les lecteurs à parcourir la blogosphère, laisser des commentaires et nouer des liens au sens propre comme au figuré.

Tu as sans-doute des sites web que tu affectionnes particulièrement. Peux-tu nous en citer quelques-uns ?

En ce moment j’apprécie particulièrement Pixenjoy, websourcing.fr, bbxdesign.com et Protuts.net qui font un réel effort éditorial pour proposer des articles utiles et de qualité.

Peux-tu me donner 3 noms de web designer et/ou graphistes qui ont attiré ton attention par la qualité de leurs travaux?

Au risque paraitre élitiste, quand j’entends le mot graphiste, je vais d’abord dans ma bibliothèque en bois. J’y trouve Emil Rüder et François Richaudeau. Le premier utilise les fondamentaux du graphisme pour faire du neuf, tandis que le second s’intéresse à la lisibilité. Les deux ont la passion de la typographie.

Sinon, J’aime beaucoup les travaux de Jacob Nielsen (L’art de la page d’accueil, Conception de sites web : l’art de la simplicité) ; Dave Shea (Zen du CSS) ; Jeffrey Zeldman (Design web : utiliser les standards) ; Amélie Boucher (Ergonomie web) ; et comme il ne faut jamais oublier la technique, je citerais Christian Heilmann (Javascript, dévelopment with DOM scripting and Ajax).

Oui, ça fait plus que les trois noms demandés, mais il est toujours bon d’avoir plus de trois sources d’inspiration ;)

Que penses-tu de la rétrocompatibilité des sites web ? Selon-toi, faut-il encore prendre le temps de gérer la compatibilité des sites avec IE6 ou d’autres navigateurs anciens ? Comment gères-tu cela dans tes projets ?

Là où je travaille, plus de 20% des utilisateurs se connectent avec IE6 et il n’est pas question de dégrader l’expérience utilisateur pour ses personnes qui ont leurs raisons de ne pas se mettre à Firefox ou Google Chrome (ou IE7 ou IE8). Bref, autant dans mon poste actuel, passé que futur, je m’assure de la compatibilité des sites web avec le plus grand nombre.

Restons dans le domaine du web design (ou apparenté), quel est le dernier livre que tu as lu et que tu conseillerais ?

Le dernier en date est Javascript, dévelopment with DOM scripting and Ajax de Christian Heilmann cité plus haut. Il est en anglais, mais une des choses qu’il faut savoir, c’est qu’une veille efficace ne se fait pas sans les sites ou les blogs anglo-saxons.

Flash, Javascript, Vidéo… Nous voyons les sites web évoluer très rapidement. Selon toi, quels sont les technologies ou langages qui vont se développer et qui feront partie intégrante du web dans l’avenir ?

La vidéo va sans nul doute se faire une place de choix et on le voit déjà. Pour autant, en dehors de Youtube ou de Dailymotion et des blogs qui les reprennent, la vidéo reste cantonnée à la publicité.

Flash est très utile pour fabriquer des players audio ou vidéo, pour la publicité — où il remplace la vidéo qui demande plus de moyens techniques –, ou alors pour réaliser des infographies animées afin de présenter des informations complexes de façon plus ludiques.

Javascript est le langage auquel tout webdesigner devrait s’intéresser ou au moins en connaitre suffisamment pour installer jQuery et les effets qui vont bien avec. Pour aller plus loin, un livre comme celui de Christian Heilmann est très utile pour comprendre les notions de scripting non intrusif et les bonnes pratiques de développement web en général.

Où te verrais-tu dans 10 ans ?

J’aimerais pouvoir travailler à distance depuis mon Jet privé.

Cette petite interview touche à sa fin, veux-tu faire passer un message aux lecteurs qui liront cet article ?

J’aimerais que les lecteurs intéressés par le graphisme s’intéresse un peu plus à la technique et vice-versa.

Merci d’avoir pris le temps de répondre, bonne continuation à toi.

Je te remercie d’avoir pensé à moi pour inaugurer cette rubrique. A bientôt !

23 septembre 2009 sur Le Post

Votre sujet de prédilection ?

Revoir les fondamentaux du graphisme appliqués au design pour le web.

Votre blog n’est pas très sexy… À quand la refonte graphique ?

La refonte graphique est terminée ! Reste l’intégration HTML et CSS dans le respect des standards du web.

Vous visez un public clairement averti. Pas de place pour les néophytes du web ?

Un public averti en vaut deux, non ? Je trouve qu’il y a suffisamment de ressources à destination des débutants sur d’autres blogs, sites web ou forums. Cela me permet de dormir tranquille avec ce soupçon d’élitisme qui fait le charme de mon blog.

Si votre blog était un objet high-tech, ce serait lequel ?

Un briquet, objet high-tech par excellence, inventé bien avant l’allumette, pour faire jaillir l’étincelle du génie et allumer le feu de la créativité.

Un souhait pour 2010 sur votre blog ?

J’aimerais explorer le format vidéo pour mes tutoriels et travailler plus en profondeur les problématiques liées aux rapports entre le graphisme, l’ergonomie et leur traduction dans le webdesign.

Enfin, complétez la phrase :

Je suis webdesigner, j’ai 42 ans, une femme et un enfant. Mon blog est trop de la balle, mais pas vraiment fait pour jouer au tennis. J’adorerais que Emil Rüder le lise et se dise que je n’ai pas (trop) trahi sa pensée. Si je devais fermer mon blog, ce serait pour de mauvaises raisons.

30 décembre 2009 sur Oziks

Bonjour Bruno Bichet, merci pour le temps que tu consacres à répondre à ces quelques questions pour les lecteurs d’oziks.fr. Tu pourrais peut-être commencer l’interview en nous parlant de toi. Comment es-tu tombé dans le webdesign et l’intégration web ? Es-tu un autodidacte où tu as suivi une formation professionnelle ?

Bonjour, Brunot Morgan. J’ai commencé à travailler pour la presse en tant qu’infographiste PAO en 1993. J’ai fais beaucoup de mise en page avec des logiciels comme XPress, InDesign ou encore Illustrator. J’ai également eu l’occasion de retoucher beaucoup de photos avec Photoshop après les avoir scannées ; beaucoup de détourage aussi. Au tournant des années 2000, je me suis dit que je pourrais mettre ces compétences au service du web : il s’agit aussi de faire de la mise en page même si les outils et les contraintes sont différents.

Qu’est ce qu’il t’a amené à créer ton propre blog et à te lancer dans le blogging ?

J’avais fais une première tentative de blogging en 2003 mais je n’avait pas d’objectif rédactionnel et au final ce que je disais n’était pas vraiment intéressant. En 2005, j’ai rencontré plein de gens cool dans la boite où je travaillais et qui tenaient chacun un blog ou presque. J’ai commencé à les lire et je me suis pris au jeu en ouvrant un blog sur http://br1o.wordpress.com, à mon tour, pour voir.

Ensuite, j’ai commencé à écrire des billets sur le http://www.blogdesbois.fr et voyant que mes articles étaient un peu lus, j’ai décidé de me lancer en solo avec css4design.com sur un Dotclear en juin 2006.

Tu es l’éditeur de plusieurs sites n’est-ce pas ? Depuis combien de temps maintenant ?

J’écris principalement sur http://css4design.com et j’ai deux autres blogs que j’alimente de temps en temps. Un sur le blogging (http://br1o.fr) depuis 2008 et un autre sur Javascript que j’ai lancé en décembre 2009 (http://js4design.com). J’ai également un autre petit blog à tendance littéraire dans lequel je stocke de vieux textes écrits au millénaire dernier pour la plupart (http://zeug.me).

Quand tu réalises un design pour un site, quelles sont les étapes que mènes ton projet et quelles importances y apportes tu ?

Je commence par m’imprégner des différents contenus pour avoir une idée du découpage du site. Je travaille ensuite sur Illustrator pour chercher une ambiance graphique que je paufine petit à petit. Voir Quelques notes sur la conception d’une charte graphique pour des informations plus détaillées.

Y a-t-il des conseils que tu pourrais donner pour éviter les erreurs les plus courantes lors de la réalisation d’un site ? Que ce soit au niveau du design ou de l’intégration ?

L’erreur la plus courante et la plus grave à mon sens c’est de penser le design d’un site en évacuant les contenus pour se concentrer sur les effets visuels. Ces sites se caractérisent par un manque de clarté et de lisibilité. On dirait souvent que le graphiste à fait rentrer les textes dans les trous laissés entre deux effets graphiques. Sans parler des interlignages trop serrés qui nuisent gravement à la lisibilité et sont si simples à gérer correctement. Voir mon Manifeste pour un interlignage syndical minimum ;)

Quelles sont les langages et logiciels que tu utilises le plus pour tes projets ? Es-tu un addict de notepad++ ?

J’essaie de ne pas m’enfermer dans des habitudes, mais j’ai du mal à me passer d’Illustrator et de Photoshop pour la partie créa. Pour l’intégration, je suis plus ouvert et je teste régulièrement des nouveaux IDE. J’utilise régulièrement Notepad++ parallèlement à d’autres éditeurs comme Netbeans (depuis peu) ou Dreamweaver, Aptana, etc.

As-tu des projets en cours ou prévus ? Si ce n’est pas trop indiscret peut-être que tu pourrais nous en faire part.

Comme je viens de lancer js4design et que je continue à alimenter css4design régulièrement, je n’ai pas trop de temps pour lancer de nouveaux projets. Mais les idées ne manquent pas. J’ai notamment le nom de domaine wwwdesign.me dont j’aimerais bien faire quelque chose un jour.

Quels sont les blogs que tu préfères lire ?

Je suis environ 1000 flux RSS depuis Google Reader, c’est donc difficile de faire un choix. Mais bon, je vais jouer le jeu en donnant la liste des derniers blog écris en français (sachant que les 3/4 de mes lectures proviennent de sites et blogs anglo-saxon) que j’apprécie et que j’ai lu dernièrement :

• http://performance.survol.fr
• http://demontiers.com
• http://www.simpleweb.fr
• http://geekarlier.com
• http://www.dator.fr
• http://pioupioum.fr
• http://michelf.com/journal
• http://truffo.fr

Mac ou PC, pourquoi ?

PC est moins cher et correspond à l’équipement de la très grande majorité des utilisateurs dans le monde, donc…

Quand tu n’es pas en train de blogger ou créer derrière ton ordinateur, qu’aimes tu faire ?

Je passe du temps avec ma femme et mon fils. Je joue beaucoup aux Kaplas, aux playmobiles et je me suis mis aux Gormitis depuis peu. Sinon, j’aime me balader et boire un café en ville.

Merci beaucoup pour cet interview. Pour conclure, quelles sont les conseils que tu donnerais à quelqu’un qui vient de commencer dans le blogging et/ou le webdesign ?

Pour le blogging, je conseille vraiment de ne pas se prendre la tête avec les listes du genre « 1001 astuces pour devenir un blogueur célèbre et influent » et faire exactement le contraire !

Pour le webdesign, je pense que chacun a sa façon d’aborder les choses, mais je dirais que l’important est de s’attacher aux détails. Ils font vraiment toute la différence entre un travail de qualité et le reste.

Merci d’avoir pensé à moi pour cette interview. A bientôt !

21 septembre 2010 sur WordPress Channel

Bonjour Bruno ! Merci à toi d’avoir accepté cette interview pour WordPress Channel. Pour commencer, pourrais-tu nous dire qui tu es en quelques mots pour nos lecteurs.

Je suis intégrateur HTML/CSS et Webdesigner depuis 2005 après avoir passé du temps en tant qu’infographiste print et formateur. Je m’occupe de http://css4design.com dans lequel j’aborde les sujets liés au développement web en général avec une pensée particulière pour WordPress qui tient une place assez importante dans ma ligne éditoriale. Je m’intéresse également à Javascript avec http://js4design.com.

Côté WordPress, j’ai http://wp4design.com dans les cartons. Je voulais faire la même chose qu’avec js4design en direction de WordPress, mais il se trouve qu’il existe énormément de blogs sur ce créneau : je vais essayer d’y regrouper quelques thèmes WordPress quand j’en aurais le courage, à moins qu’une autre idée me vienne à l’esprit ;)

Tu es donc intégrateur Web… en quoi cela consiste précisément ?

Le métier d’intégrateur web consiste à traduire les besoins des clients en site web. Dans la phase de lancement d’un projet, il s’agit généralement de découper une maquette Photoshop pour la transformer en fichiers (HTML, CSS, images, script, etc.). A cette étape il faut s’assurer de la conformité du site web avec les standards afin de livrer un code propre, pérenne, évolutif et facilement indexable par les moteurs de recherche.

Lorsqu’on intervient sur un projet déjà lancé, c’est souvent pour faire des mises à jour, corriger des bugs, améliorer le code, optimiser le SEO, améliorer les performances d’affichage des pages, etc.

Quelles en sont les qualités requises ?

Ce métier demande deux qualités souvent contradictoire : faire attention aux détails tout en gardant une vue d’ensemble du projet. En matière de développement web la curiosité n’est pas un vilain défaut, bien au contraire : il faut sans cesse se tenir au courant des nouvelles pratiques et voir comment on peut les intégrer dans les projets en cours ou à venir.

Selon les entreprises, l’intégrateur se situe entre le graphisme et le développement : il doit savoir dialoguer avec les deux, les mettre d’accord et savoir défendre son point de vue (qui est en réalité celui du client final, c’est-à-dire le visiteur). C’est souvent lui qui repère et doit corriger les problèmes liés à l’ergonomie qui ont la fâcheuse habitude d’apparaitre à ce moment.

Parlons à présent de la plateforme WordPress. A quand remonte ta première expérience ?

(comment en as-tu entendu parlé, adopté du premier coup ou délaissé dans un premier temps, etc.)

J’ai lancé css4design en juin 2006 sur la plate-forme Dotclear et j’ai switché environ un an plus tard pour WordPress qui à l’époque évoluait plus rapidement, avec tout ce qui va avec en terme de développement des ressources disponibles (tutoriels, plugins). Ceci dit, j’utilisais déjà WordPress.com depuis fin 2005 et j’avais eu l’occasion de me rendre compte des qualités du back-office.

Tu utilises donc WordPress au quotidien. Quels en sont tes principaux usages ?

J’utilise WordPress à titre personnel pour mes différents blogs et j’ai eu l’occasion d’utiliser ce CMS dans le cadre de prestations de création de sites web pour des clients tels que PME, associations ou particuliers, lorsque je travaillais en freelance.

Curieusement, j’ai rarement utilisé WordPress en entreprise (ni aucun autre CMS, d’ailleurs) : j’ai presque toujours travaillé sur des développements « maison » en relation étroite avec des graphistes et des développeurs.

WordPress 3.0 a apporté son lot de nouveautés dont les custom post types, les menus de navigation et bien plus encore… ton avis sur cette mise à jour ?

Pour tout dire, je n’ai pas encore eu l’occasion de mettre en place les Custom Post Types ou les Menus de navigation, mais je me suis tenu au courant de l’évolution de ces nouvelles fonctionnalités bien avant la sortie officielle de la version 3.0. qui sont une vraie « tuerie » ;) C’est ce qu’il manquait à WordPress pour entrer officiellement dans le monde des CMS, sans avoir à rougir devant les mastodontes du marché que sont Drupal, Joomla et consorts.

Qu’attends-tu de WordPress pour ces prochaines années ?

J’aimerais que l’équipe chargée du développement fasse une pause sur les fonctionnalités (les plugins sont là pour ça) pour s’attaquer au moteur lui-même : uniformiser les fonctions (dénomination, ordre des arguments, etc.), dépoussiérer les parties du code qui datent et pourquoi pas, passer au tout objet pour faire plaisir aux plus exigeants !

Ta principale contribution à la communauté WordPress ?

J’aime penser que mes articles sur WordPress font de moi un contributeur enthousiaste à défaut d’être régulier. Quand j’écris un billet, j’essaie toujours de voir si ce dont je parle peut être utile pour l’utilisateur de WordPress.

Quel message souhaiterais-tu adresser aux utilisateurs qui débutent avec WordPress ?

La première chose que l’on fait quand on débute, c’est de chercher des ressources. Mon message serait que chacun essaie de fournir des conseils à son tour lorsqu’il maitrise un peu le bouzin. Ne pas s’inquiéter de savoir si les sujets ont déjà été traités par quelqu’un d’autre : chaque lecteur est unique et peut être sensible à votre style ou votre manière d’expliquer les choses.

Merci de m’avoir donné la parole sur ce sujet qui me passionne et à bientôt !

27 mai 2010 sur Pixelboy

Qui êtes vous ?

Bonjour, je suis Bruno Bichet, marié, un enfant. J’ai commencé à travailler dans la presse en tant qu’infographiste PAO avant de me lancer dans le Web comme formateur et webdesigner / intégrateur web.

Pourquoi bloguez vous ?

Principalement pour structurer ma veille technologique sur les différentes facettes de mon métier et pour satisfaire mon goût pour l’écriture et le partage d’idées avec des personnes qui ont les mêmes centres d’intérêts.

Pour qui bloguez vous ?

Ca dépend des blogs : sur css4design.com et js4design.com, je m’adresse aux personnes qui travaillent dans la conception et le développement de sites web, tandis que br1o.fr est plutôt destiné aux utilisateurs des réseaux sociaux et du web 2.0 en général. Sujets sur lesquels j’essaie de prendre un peu de recul tout en m’amusant.

L’article dont vous êtes le plus/moins fier ?

Le plus. Sans hésitation, je citerais ma grosse grosse liste de 1 000 ressources sur le développement web et WordPress : http://css4design.com/1000-ressources-pour-wordpress-et-le-developpement-web

Le moins. Un billet d’humeur répondant à un autre billet d’humeur, à cause de son niveau de trollitude élevé : http://css4design.com/dites-wordpress-pas-weirdpress

Vous bloguez a temps plein ? Sinon, que faites vous à coté ?

J’essaie d’écrire un peu tous les jours et je ventile mes articles sur le blog le plus adapté, sans me contraindre à une régularité trop pesante. Par ailleurs, je suis à la recherche d’un poste de Chef de projet Web, de formateur TIC ou encore d’intégrateur HTML & CSS dans une entreprise dynamique, idéalement dans un secteur à fort contenu éditorial, mais je suis ouvert à d’autres propositions.

Qu’est ce qu’on peut vous souhaiter pour l’avenir ?

Du travail et des lecteurs ;)

Des blogs à recommander ?

http://pioupioum.fr — Le bloc-note d’un développeur web

http://geekarlier.com — Parce que le troll, c’est sain !

http://css.mammouthland.net — Cultivons les standards

http://truffo.fr — Conception de sites web, CMS et accessibilité

http://www.simpleweb.fr — Simplifions l’internet

Autre chose à ajouter ?

Merci d’avoir pensé à moi pour cette interview.

20 avril 2011 sur le blog de CoreyGraphe

css4design qu’est-ce que c’est?

Ce blog est né un peu par hasard pour garder des traces des bouts de codes que j’utilisais dans mon travail. J’en ai ensuite profité pour garder des traces des sites que je trouvais sympa, puis une chose en amenant une autre, ce blog a fini par devenir une sorte de magazine sur tous les sujets liés au design web.

Est-ce que css4design intervient dans ton process de travail (autre que le blog)?

Oui, je m’en sers toujours pour retrouver des idées. Le fait d’écrire me permets de mieux mémoriser. Du coup, lorsque je veux comprendre quelque chose, je me documente et je prends des notes qui deviennent souvent des articles.

As-tu fait de réelles rencontres professionnelles grâce à ce blog?

De nombreuses personnes m’ont contacté pour des projets professionnels à partir du formulaire de contact. Le fait d’avoir un blog (ou au moins une présence active sur le web, comme Twitter, par exemple) permet de rencontrer beaucoup de monde lors des apéros web qui s’organisent régulièrement.

La visibilité (en dehors du plaisir d’avoir des « lecteurs ») est-ce important?

Oui. Je pense qu’il ne faut pas négliger la part d’ego qui existe en chacun de nous et qui réclame sa part de « gloire ». Il ne faut pas nier le fait que la visibilité permet de s’améliorer, d’être meilleur dans ce que l’on fait. Rien que pour ça, ça vaut le coup d’avoir de nombreux lecteurs ;-)

Tes autres sources d’inspirations que le visuel dans ton graphisme (livres, musique, …)?

C’est difficile de savoir précisément d’où vient l’inspiration, mais j’ai remarqué que je trouvais de meilleures idées lorsque je sortais de chez moi. Rien de tel que de rencontrer des gens et discuter pour avoir des idées nouvelles. Je m’inspire beaucoup des fanzines que je trouve en sortant de chez moi que je feuillette en buvant un café.

Ton avis sur cette citation: « La pire chose pour un artiste est de s’entendre dire qu’ils peuvent faire tout ce qu’ils veulent, j’ai toujours cru que les artistes étaient beaucoup plus créatifs si on leur disait ce qu’ils ne pouvaient pas faire. Il est plus facile de trouver des failles dans un mur que d’essayer de construire à partir de rien » (Peter Gabriel)

Ca me rappelle ma citation préférée : « L’art naît de contrainte, vit de lutte, meurt de liberté. » André Gide. Quand j’entends des remarques sur le fait que les contraintes techniques du web brident la créativité, je ne peux pas m’empêcher de penser à la rigidité du format A4 et à toutes les merveilles qu’on peut en tirer en terme de créations originales.

Y-a-t-il un petit blog ou un artiste/graphiste peu connu (que tu viens de découvrir par exemple) dont tu souhaiterais nous parler?

J’ai découvert il y a peu le blog serbigraphie.blogspot.com du collectif d’artistes « Serbigraphie », qui comme son nom l’indique plus ou moins, est un collectif franco-yougoslave de sérigraphie et de gravure. Les oeuvres présentées ne sont pas forcément toutes NSFW (No Safe For Work) mais dans le doute, mieux vaut éloigner les petits enfants de l’écran ;-)

24 avril 2011 sur le blog de Pixevent

Quelle est la ligne directrice de votre blog ?

Bonjour Gautier et merci de me donner l’occasion de m’exprimer à propos de mon blog sur les CSS et le Webdesign, La ligne directrice de css4design.com est de proposer des tutoriels, des articles de fond, des traductions ou des avis personnels sur le Webdesign en général et sur les questions liées à l’intégration HTML & CSS en particulier.

Depuis quand bloguez-vous ?

Ma première expérience de blog remonte à 2003 dans le cadre d’un « site personnel » toujours accessible à l’adresse http://infographiste.free.fr/newlabzone/ ^^. Fin 2005, j’ai ouvert un blog sur WordPress.com, puis je me suis lancé en 2006 dans la personnalisation d’un blog Dotclear sur un serveur mutualisé chez PHPNET.org.

Pouvez-vous parler un peu de vous, de votre parcours et comment vous en êtes venu a bloguer ?

Je me suis intéressé au web très tôt. Je m’en suis beaucoup servi pour trouver des ressources lorsque j’étais infographiste PAO et j’ai peu à peu appris à faire des sites web. Comme beaucoup, j’ai commencé à bloguer pour garder une trace des sites web que je visitais en ajoutant un bref commentaire. Puis, je me suis servi du blog pour noter des bouts de code HTML & CSS. De fil en aiguille, j’ai mis en place des tutoriels et des articles plus fouillés.

Si vous avez des influences ou des référents, quels sont-ils ?

Mes influences proviennent principalement de livres, qu’il s’agisse de ceux que je trouve dans ma bibliothèque personnelle ou à la bibliothèque municipale. Je m’inspire également des magazines en langues étrangères (pour me concentrer sur la forme), des affiches et des publicités qui m’entourent. Je me sers du web dans une optique plus utilitaire, plus technique. A certains moment, je passe plus de temps à publier des articles qu’à en lire et à d’autres moment c’est le contraire

Quel conseil donneriez-vous un un blogueur qui commence ?

Essayer de trouver son propre style et de partager ses connaissances au maximum tout en ménageant ses effets. Par exemple, je fais trop souvent l’erreur de vouloir tout mettre dans un seul billet, alors qu’il serait parfois préférable de faire durer le plaisir sur plusieurs articles. Ce qui ne veut pas dire qu’il faut se forcer à publier souvent. Il vaut mieux passer du temps à se relire, à ajouter des informations à un article, plutôt que se précipiter sur le bouton « Publier ».

29 juin 2011 sur le blog des nouvelles technologies

Est-ce le moment d’adopter HTML5 ?

La question est double car il faut distinguer HTML5 (l’ensemble des API, le langage HTML propremement dit et les CSS3) et HTML 5 (avec un espace) qui ne concernerait que la partie du langage de balisage (même si en réalité, la nouvelle version ne possède pas de numéro de version). Je ne suis pas assez « expert » pour me prononcer sur l’ensemble des API’s proposées par HTML5 (file-api, geolocation, sql-database, etc). Je resterai donc concentré sur les balises HTML 5 avec un point rapide sur CSS3.

HTML 5

Il est non seulement possible mais souhaitable d’utiliser HTML 5 dès maintenant, pour une raison simple : le flux de production de la spécification en cours de rédaction a besoin que les utilisateurs testent tout ces beaux joujous que l’on voient en rêve en situation réelle. Rien que cela, justifie que l’on se penche sérieusement sur ces nouvelles balises. La deuxième raison est que HTML 5 fonctionne globalement bien dans les grandes lignes, alors pourquoi s’en priver.

La question de l’activation obligatoire de Javascript pour la reconnaissance des balises header, footer, section etc. est un problème, certes, mais qui peut être aisément contourné. Dans la pratique, on utilise rarement les balises toutes nues : on les enveloppe généralement avec un « container », pour appliquer des fonds distincts, pour pallier des problèmes de largeurs ou encore des impératifs de « floataison ».

Partant de ce constat, j’utilise une technique simple et efficace : la quasi totalité de mes balises issues de la nouvelle sémantique HTML 5 est enveloppée dans des bonnes vieilles balises div des familles auxquelles j’applique les propriétés width, float, etc. ; je réserve les padding, etc. aux asides, sections et autre footers. Javascript, n’est ainsi plus indispensable pour que la mise en page tienne le coup en son absence.

J’ai utilisé une grande partie de ces balises HTML5 dans mon thème WordPress Basics, accessible à l’adresse http://wp4design.com qui — bien que perfectible — montre que HTML5 peut déjà être appliqué en « production ». En tout cas, l’absence de Javascript ne pose pas pas de problème particulier.

CSS3

Là encore, il y a peu de chose que l’on ne peut utiliser, à condition de bien connaitre les limites de la prise en charge par les navigateurs des propriétés que vous voulez utiliser. En fonction des projets et des budgets, il est désormais tout à fait possible de proposer des bords arrondis, des dégradés, des ombres portées sur les boites ou les textes, etc. uniquement en CSS3 sans passer par Photoshop, pour diminuer les allers-retours liés à la validation des maquettes, ce qui allège la facture et fluidifie les relations avec les clients ;-)

En tout état de cause, je vous conseille l’excellent petit ouvrage CSS3 pour les webdesigners qui explique très bien comment utiliser les nouvelles propriétés CSS3 dans le cadre de l’amélioration progressive. Profitez-en pour lire le non moins excellent CSS avancées de Raphaël Goetter pour mieux connaitre les anciennes propriétés CSS que l’on peut désormais utiliser, maintenant que l’image de IE6 commence à s’estomper dans le lointain.

En bref

Le maitre-mot de tout ceci, tient en 4 lettre : TEST.

Quoique vous mettiez en place, prenez le temps de tester vous-même et plus important encore, de faire tester par les autres.

C’est la voie du moindre bug ^__^

Articles sur le même sujet

• Quelques notes — Programme de formation HTML & CSS
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• HTML5 et CSS pour l'intégrateur web
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

WordPress offre un environnement de publication complet, prêt à accueillir vos textes, vos images et les commentaires des lecteurs, dès l’installation. Cet aspect «Prêt à Publier» n’empêche pas d’avoir envie d’ajouter ou d’étendre les fonctionnalités du CMS grâce aux extensions qui s’installent en deux clics depuis l’interface d’administration. Parmi les quelques 15 000 plugins disponibles, voici les 11 que j’installe le plus souvent au lancement d’un site WordPress, et ceux que j’utilise moins souvent. 

La saga «WordPress de A à Z»

1. Logo « WordPress je thème »
2. WordPress de A à Z… avec le Codex
3. A comme Allons-y !
4. B comme Basics — ♥ Basics en bref et lien de téléchargement.
5. C comme CSS & Composé HTML5
6. D comme Discussion
7. Vous lisez : E comme Extensions
8. Prochain article : F comme Function

Découvrez les meilleurs plugins pour améliorer les performances de votre site, ajouter des scripts et des CSS dans la balise head, créer et gérer votre sitemap, gérer les commentaires, adapter votre site pour iPhone et Android, gérer vos statistiques avec Google Analytics, afficher les articles similaires, effectuer des opérations sur votre base de données, étendre les fonctionnalités de l’éditeur WYSIWYG TinyMCE, et bien d’autres choses encore !

1. Système de cache

W3 Total Cache améliore l’expérience utilisateur en augmentant les performance de votre serveur en mettant en cache tous ce qui peut l’être pour réduire les temps de chargement et donc accélerer l’affichage des pages. Les éléments concernés par la mise en cache sont : les pages, les requêtes à la base de données. Cette extension se charge également de minifier les fichiers CSS et Javascript et gère votre CDN (Content Delivery Network) le cas échéant.

Voir aussi WP Super Cache qui rend des services similaires.

2. Ajouter du Javascript ou des CSS dans le head

Header-Footer permet d’ajouter facilement du contenu dans la balise head et/ou dans le footer de votre site, sans toucher aux templates. Il suffit de copier-coller les codes dans les champs dédiés et voilà ! Pratique pour placer les nombreux scripts pour Google Analytics, Twitter et autre Widgets. Voir aussi Add to Header et General Headers & Footers.

3. Générer un sitemap

Better WordPress Google XML Sitemaps crée un plan de site au format XML normalisé par Google pour permettre aux moteurs de recherche d’avoir un instantané des liens présents sur votre site et des mises à jour à chaque article publié. Google prend votre sitemap en compte dans les Google Webmaster Tools à la rubrique Configuration du site → Sitemaps. Cette extension autorise le découpage de votre plan de site en plusieurs parties grâce à un fichier XML liant d’autres fichiers XML pour les pages, les billets, les catégories, les tags.

4. Abonnement aux commentaires

Subscribe To Comments Reloaded — C’est un classique trop souvent oublié qui permet à vos commentateurs de suivre les commentaires laissés sur un article en recevant un mail chaque fois qu’un nouveau commentaire est publié.

5. Thème adapté aux smartphones

WPtouch — Il s’agit ni plus ni moins d’un thème spécialement conçu pour les Smartphones (iPhone, Android, etc.). Très pratique et lisible, c’est le compagnon indispensable pour que votre site fasse bonne figure sur les périphériques mobiles tactiles à petits écrans. L’utilisateur a la possibilité de désactiver WPtouch pour retrouver l’affichage d’origine en activant/désactivant un bouton au bas de la page. Voir aussi WPtap News Press.

6. Statistiques Google Analytics

Google Analytics for WordPress est un outil très utile pour tirer le maximum de Google Analytics : de l’installation du script asynchrone au tracking des liens sortants, en passant par la mise en place de variables personnalisées pour affiner vos statistiques de fréquentation et d’utilisation de votre site internet par les visiteurs. J’utilise aussi régulièrement Header-Footer pour coller le code Google Analytics asynchrone dans le head.

7. Articles similaires mais presque

Yet Another Related Posts Plugin affiche une liste de liens en rapport avec l’article en cours de lecture. L’algorithme de YARPP est assez convaincant à partir du moment où les tags associés aux billets sont pertinents. Nombreuses options disponibles pour affiner la correspondance entre l’article et la liste de liens.

8. TinyMCE Advanced

TinyMCE Advanced transforme votre éditeur WordPress WYSIWYG en bête de course sous stéroïdes en ajoutant des boutons intéressants :

• Ajout de vidéos,
• Découpage d’article en plusieurs parties (Split Page),
• Abréviation,
• Indice et exposant
• Tableaux,
• Options de listes ordonnées ou non-ordonnées,
• Etc.

TinyMCE Advanced autorise l’utilisation de la balise iframe (pratique pour insérer des plans en provenance de Google Maps) et les nouvelles balises HTML 5, sans que l’éditeur ne les supprime sans préavis. L’administration du plugin est assez intuitive : n’hésitez pas à faire glisser les boutons indésirables (couleur de texte, fond de couleur, etc.) vers le bas pour vous en débarrasser ;-)

J’apprécie particulièrement la possibilité d’ajouter des attributs à un élément en le sélectionnant puis en cliquant sur le bouton Insérer/Modifier des attributs pour ajouter un identifiant ou une classe CSS. Associé avec le bouton Ancre, ce bouton permet de faire des liens à l’intérieur d’un billet (note de bas de page, sommaire, etc.).

9. Gestion de la base de données

WP-DBManager est un plugin spécialisé dans la gestion de la base de données de votre installation WordPress : réparation, sauvegardes (récurrentes ou pas), restauration, optimisation. Permet également d’effectuer des requêtes SQL. Voir aussi WP-DB-Backup comme alternative pour les opérations de sauvegarde. Nécessite moins de permissions que WP-DBManager, ce qui peut être utile sur certaines configurations de serveur.

10. Plugin anti-spam

Akismet est pré-installé mais son activation dépend d’une clé que vous pouvez vous procurer plus ou moins gratuitement selon que vous êtes une entreprise avec plusieurs sites, un professionnel avec un seul site, ou bien un particulier. Ceux qui ont un compte WordPress.com peuvent se faire renvoyer leur clé Akismet en indiquant leur mail à l’adresse https://akismet.com/resend

11. Formulaire de contact

Easy Contact propose un formulaire de contact minimaliste, facile à modifier. Idéal quand on a juste besoin d’un formulaire de contact sans prise de tête.

Ces 11 premières extensions sont celles que j’utilise le plus souvent. Les suivantes — que j’utilise de temps à autre –  m’ont été rappelées via Twitter par @tbnv @MoOx @exootia @ID_referenceur @Nawylblog @pperistil @Delphine_D @fetard @Aether_Concept @agence_acs04 @nicofayet @nderambure @MaevaCecchi @laurentbayard @glloq8 @michaeldumontet @jverrecchia et @pixeletcetera que je remercie o/

• WordPress SEO — J’utilise peu (voire jamais) les plugins SEO pour WordPress : je préfère le système semi-automatique que j’ai mis en place dans le thème WordPress ♥ Basics qui est une version simplifiée de celle présentée dans Not At All In One SEO. Voir aussi SEO Ultimate.
• Contact Form 7 — Créez autant de formulaires que vous voulez avec les éléments dont vous avez besoin : champs text, file, boutons radio, menu `select`, etc. Une usine à gaz parfois indispensable ;-)
• No category parents — Supprimez le terme category de vos URL’s. Voir aussi WP No Tag Base. Notez que contrairement ce ce qu’on peut lire à propos de ce terme category, il n’est pas totalement sans intérêt. Dans le cadre d’un site centré sur un seul sujet, on pourra changer le terme category par le mot sujet pour l’avoir dans l’URL une bonne fois pour toute, sans être obligé de «bourrinner» les mots-clés dans les titres :-D
• WP-Paginate — Les liens «Billets précédents» et «Billets suivants» (dont j’apprécie personnellement la sobriété) peuvent cacher la richesse de votre contenu. Il est parfois préférable de montrer aux visiteurs que votre site en a sous { le talon aiguille | la santiag | le pied } grâce à ce plugin qui ajoute une pagination efficace pour naviguer entre les différents articles que vous avez publiés. Voir aussi WP-PageNavi.
• Simple Tags — La gestion des tags dans WordPress est un peu cheap. Ce plugin permet notamment : de renommer les tags par paquet, de lier automatiquement un terme dans un billet à un tag existant (un peu agaçant, mais cette fonction a trouvé son public…), d’avoir l’autocomplétion Ajax, de taguer des pages (et pas seulement les articles).

En bref

Quand je vois que je n’utilise régulièrement que 0,1% des plugins disponibles, je me dis que je dois passer à côté de quelques bijoux. Je vous laisse la zone des commentaires pour compléter cette liste avec les extensions que vous installez régulièrement dans vos sites WordPress.

Merci de votre attention :-)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• WordPress de A à Z — F comme Functions.php

HTML5 Boilerplate et WordPress ♥ Basics par la même occasion contiennent quelques classes CSS utiles pour masquer du contenu de différentes manières en fonction de vos besoins : .hidden, .visuallyhidden, .invisible and .ir. Après un rapide survol des trois premières classes, nous allons nous attarder un peu sur la dernière classe .ir pour régler une bonne fois pour toutes le problème des images de fond non cliquables.

.hidden { display: none; visibility: hidden; }

Fig. 1: Cache le contenu associé pour les lecteurs d’écran et les navigateurs.

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

Fig. 2: Cache le contenu visuellement seulement (est toujours disponible pour les lecteurs d’écran).

.invisible { visibility: hidden; }

Fig. 3: Cache le contenu visuellement pour les lecteurs d’écran et les navigateurs, mais conserve l’espace occupé.

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

Fig. 4: Remplacement d’image

Remplacement d’image avec CSS

La classe .ir propose un mécanisme pour remplacer du texte par une image grâce à la propriété background, en cachant le contenu initial sous le tapis. C’est très pratique, mais cette technique peut poser un problème lorsqu’on veut que l’image remplacée soit cliquable, comme c’est généralement le cas lorsqu’on place une image en fond de balise <h1> pour remplacer le titre du site, par exemple.

HTML 4.01

Le bout de code suivant :

<h1 id="site-title" class="ir fn org">
    <a class="url home bookmark" href="/" rel="home"><?php bloginfo( 'name' ); ?></a>
</h1>

#site-title {
    width: 220px;
    height: 160px;
    background: url(../img/logo.png) no-repeat;
}

HTML 5

Débarrassons-nous de ce problème. Grâce à la magie de HTML 5, il suffit de rendre cliquable l’ensemble de la balise <h1> :

<a class="url home bookmark" href="/" rel="home">
    <h1 id="site-title" class="ir fn org"><?php bloginfo( 'name' ); ?></h1>
</a>

D’après la spécification HTML5…

L’élément a peut envelopper des paragraphes entiers, des listes, des tableaux et ainsi de suite, de même que des sections entières, aussi longtemps qu’il n’y a pas d’élément interactif à l’intérieur des contenus, comme des boutons ou d’autres liens.

… l’affaire est dans le sac =^__^=

Traduit avec l’aimable autorisation de moi-même, d’après l’article HTML5 Boilerplate — Using .ir class and make the replaced image “clickable”.

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• Quelques notes — Programme de formation HTML & CSS
• 390 ressources Javascript & jQuery
• WordPress de A à Z — F comme Functions.php
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2