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 ?
• 11 éditeurs HTML WYSIWYG et WYSIWYM

Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :

1. Poids du script — généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.

   • idTabs -> 10 ko + jQuery -> 31 ko = 41 ko. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.

   • domtab -> 10 ko. C’est déjà beaucoup mieux, et par rapport à idTabs, vous pourrez encore installer plusieurs scripts intéressants avant d’arriver à 41 ko.

   Ceci dit, l’appétit vient en mangeant et le nombre de scripts à tendance à s’allonger, de sorte que l’investissement en jQuery est très vite rentabilisé.

2. Comportement quand javascript n’est pas activé — Ces deux scripts se dégradent élégamment en l’absence de Javascript. Comme l’affichage des onglets est géré par la feuille de style CSS ils restent en place ; les éléments masqués au départ s’affichent simplement les uns sous les autres.

3. Balisage HTML, classes CSS et identifiants nécessaires — Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des ancres internes vers lesquelles les liens des onglets pointeront.

Commençons par idTabs »

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Menu à onglets avec javascript et css
• Trucs et astuces Javascript
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Nanotabs peut faire tout ce que faisait idTabs avec même quelques options supplémentaires, le tout sans utiliser le framework jQuery !

Articles sur le même sujet

• Menu à onglets avec javascript et css
• 390 ressources Javascript & jQuery
• Navigation web — donne-moi ce que je veux ! est en ligne gratuitement
• Menu à onglets (tabs) — idTabs ou domTab ?
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)

Un nouveau menu à onglets sur ce blog !

Ce bookmarklet m’a tellement emballé que j’ai mis en place un deuxième menu à onglets sous les catégories du blog pour accueillir les fruits de mes petites découvertes au gré du surf quotidien. J’ai inauguré cette zone avec un onglet « News » pour des brèves plutôt généralistes. Mais à l’avenir, ce menu devrait accueillir des onglets plus spécialisés comme « Insolite », « ludique », histoire de rendre le développement web un poil plus fun ;)

Je n’ai pas encore tout testé mais il semble possible de publier directement les images présentes sur une page Flickr ou les vidéos sur Youtube (peut-être même que des plugins verront le jour pour élargir l’offre). Pratique pour ajouter un onglet « Vidéo » et/ou un onglet « Image » à mon nouveau menu à onglets.

Les billets affichés sont donc sélectionnés selon le tag, ce qui est moins lourd que la création d’une catégorie qu’il faudrait éventuellement masquer dans d’autres boucles WordPress présentes sur le blog (ce qui me fait une partie de la réponse au commentaire de Kynerion par la même occasion !)

A noter que j’ai quand même créé une sous-rubrique News pour garder une certaine cohérence avec la catégorie Revue de web, mais ce n’est pas une obligation. Cette souplesse de WordPress est assez magique car elle permet toutes les fantaisies : on pourra facilement créer un billet dans une catégorie et ajouter le tag « News » pour afficher le billet à un autre emplacement du template.

De plus, dans la boucle qui suit, rien n’empêche d’afficher des billets contenant d’autres tags pour avoir encore plus de souplesse dans l’étiquettage des billets. Il suffira de remplacer 'tag=news&showposts=3' par 'tag=news+insolite+comique&showposts=3'.

N’ayons plus peur du loop !

Pour les billets taggués « News », par exemple, il suffit de faire la boucle suivante :

<div id="tab6">
    <ul>
        <?php /* Affichage des toutes les news */
        query_posts('tag=news&showposts=3'); ?>
        <?php while (have_posts()) : the_post(); ?>
        <li>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
            </h2>
            <div>
                <?php the_content('Lire la suite &raquo;'); ?>
            </div>
        </li><!-- end .post -->
        <?php endwhile; ?>
    </ul>
    <p><a href="/tag/news" title="Tous les articles tagué news">Voir toutes les news</a></p>
</div>

Bref, je n’ai pas encore fait le tour de cette nouvelle version de WordPress, mais il semble que l’équipe de développement se dirige vers la création d’une véritable plate-forme de CMS aussi complète qu’efficace.

Mais que manque-t-il donc à WordPress ?

Tiens, ça me rappelle que j’ai un brouillon en cours sur ce qui manque à WordPress par rapport à d’autres outils de gestion de contenu. Comme je suis loin de tous les connaitre, et si le coeur vous en dit, vous pouvez m’aider en me donnant des pistes du genre : « sur Joomla! on peut faire ça facilement », ou « avec SPIP, je fais ce que je veux avec mes cheveux »… Enfin, vous voyez l’idée générale ;) Merci par avance !

La chaine ! la chaine ! la chaine !

Si j’osais, je lancerai bien une chaine de blog sur ce qui manque à WordPress pour permettre à chacun d’y réfléchir à tête reposée dans le cadre d’un billet, ce qui me permettra ensuite de compiler les contributions de chacun(e).

Allez, j’ose : tous les lecteurs et lectrices sont invitées à participer à cette chaine de blog d’intérêt public !!!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• 390 ressources Javascript & jQuery
• S'il ne devait rester qu'un tutoriel pour faire un menu CSS avec onglets…

Une ligne éditoriale moins linéaire

Je ne m’étendrai pas trop sur les interrogations existentielles qui m’ont poussé à changer le design et la structure de ce blog. La première chose, c’est que la succession simple des billets dans l’ordre chronologique inverse ne correspond plus vraiment à mes aspirations et aux différentes rubriques qui composent ce blog.

En effet, si le coeur de la ligne éditoriale est consacré à la création de site web en général en mettant l’accent sur les problématiques liées à l’intégration HTML et CSS et à la structuration des contenus, j’aborde d’autres sujets comme le Web 2.0, le e-commerce et il m’arrive de publier des billets d’humeur sur l’actualité du web.

Si ces sujets peuvent très bien s’accommoder d’une structure de blog classique, j’avais envie de mieux distinguer les articles de fond des billets plutôt brefs, tout en mettant en avant mes billets d’humeur. Le problème du blog « classique », c’est que les billets disparaissent vite de la page d’accueil et perdent rapidement en visibilité, même si l’ami américain Google est là pour les faire remonter à la surface.

Il me fallait donc un système pour conserver une certaine unité dans la liste des articles en rapport avec les thèmes principaux abordés sur le blog tout en autorisant la publication de billets brefs et d’humeur. Un blogzine, en fait ;)

Voici pour les explications éditoriales. Jetons maintenant un oeil sous le capot !

Hiérarchie des Templates

Grâce à WordPress, il est possible de construire un thème en utilisant uniquement le fichier index.php. Chaque requête — le fait de cliquer sur une catégorie, une page d’archive, le titre d’un billet, un tag, etc. — crée un contexte de variables qui pointera vers ce fichier.

Si l’on veut afficher les contenus différemment sur le billet seul, par exemple, deux solutions s’offrent à nous : les marqueurs conditionnels (Conditional Tags) comme is_single() ou la création d’un fichier single.php.

S’il s’agit de modifier une largeur de colonne au passage du billet seul, le marqueur conditionnel suffit. En revanche, si les modifications sont plus profondes, le fichier single.php sera sans doute plus adapté sachant que dans la plupart des cas, la solution passe par un mélange des deux techniques.

La première chose à prendre en compte est le nombre de maquettes dont on dispose pour afficher tous les contextes possibles, même si dans la plupart des cas, il n’est pas nécessaire de mettre en place tous les Templates possibles.

Pour y voir un peu plus clair, voici une table des correspondances entre les marqueurs, les templates et la hiérarchie qui leur est associée (Template Hierarchy) :

Pour SquaryBluevie par exemple, je voulais tout faire en utilisant uniquement le fichier index.php, mais bien que cela soit possible, le risque est grand de se mélanger les pinceaux entre la multitude des conditions…

J’ai donc ajouté à index.php, les fichiers home.php, page.php et single.php. Le reste étant composé de fichiers inclus de manière conditionnelle ou en fonction du Template. C’est le cas pour header.php, footer.php, tutoriels.php, sidebar0.php, sidebar1.php, sidebar2.php, etc.

Un découpage en 7 grandes zones

1 L’en-tête

Le fichier header.php est composé de deux grandes parties. La première contient les éléments qui apparaissent sur l’ensemble du blog. C’est la partie header :

• Sommaire en haut à gauche,
• Classement Wikio en haut à droite,
• Texte de présentation de l’auteur,
• Logo,
• Texte de présentation du blog,
• Liste des pages statiques en dessous.

La deuxième partie header2 est située juste en dessous :

• Photo de l’auteur,
• Icône du flux RSS,
• Texte situé entre les deux.

C’est ce texte qui affichera un contenu différent selon le contexte :

• Dans une catégorie (<?php if ( is_category() ) : ?>), j’affiche la description de la catégorie
• Dans la page affichant l’article seul (<?php if ( is_single() ) : ?>), j’affiche une introduction générale pour les articles,
• Ni dans une page d’article ni dans une page statique ni dans une catégorie (<?php if ( !is_single() && !is_page() && !is_category() ) : ?>), j’affiche le dernier billet dans la rubrique « Editorial ».

La description du blog est celle que l’on renseigne habituellement dans Réglages -> Options générales -> Slogan du panneau d’administration. L’appel du texte se faisant avec la fonction <?php bloginfo('description'); ?>. Comme il s’agit — avec la présentation de l’auteur — d’une zone de widgets, il est possible de remplacer aisément la description du blog par un texte libre (notamment si la description est trop courte) en utilisant un widget texte.

Ceci est possible grâce à la fonction suivante (voir ce billet consacré à la création de zones widget dans WordPress) :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header2') ) : ?>
<div>
    <h2>Description du blog</h2>
    <div><?php bloginfo('description'); ?></div>
</div>
<?php endif; ?>

<?php $my_query = new WP_Query('category_name=editorial&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();?>
    Votre boucle ici
<?php endwhile; ?>

A l’affichage d’une catégorie, cet édito est remplacé par la description de la catégorie idoine. Cette description est accessible dans l’administration via Gérer -> Catégories -> Description. Le code à utiliser dans le Template est <?php echo category_description(); ?>. Enfin, lorsqu’on affiche l’article seul, cette description est remplacée par un texte libre (widget texte).

2 Billet « C’est vite dit ! » (En bref)

Sous le header, la deuxième zone se compose d’un billet « En bref » (cet intitulé — comme d’autres sur le blog — est modifiable dans le fichier functions.php) surmonté d’un visuel optionnel géré par les champs personnalisés (Customs fields).

Cette rubrique n’est ni plus ni moins que la catégorie 1 (uncategorized à l’origine) dont j’ai modifié l’intitulé. L’avantage est de pouvoir compter sur l’identifiant présent dès l’installation du blog, ce qui évite d’avoir à mettre les mains dans le code pour masquer cette catégorie dans les autres boucles. Par ailleurs, cette catégorie « originelle » est cochée par défaut, ce qui permet de gagner du temps lorsqu’on veut rédiger un billet court ;)

Note : pour afficher une seule rubrique, il est possible de se servir de son nom, mais pour l’exclure, il semble nécessaire de passer par l’identifiant numérique (à moins qu’une option m’ait échappée).

Voici le code pour cette boucle :

<?php if(!is_paged()) : ?>
    <?php $my_query = new WP_Query('cat=1&showposts=1');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
        Contenu de la boucle
    <?php endwhile; ?>
<?php endif; ?><!-- end !is_paged -->

Pour cela, en plus d’initialiser la variable $do_not_duplicate dans la première boucle, il faut exclure le billet en question de la deuxième boucle :

<?php $my_query = new WP_Query('cat=1&showposts=6'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
        Contenu de la boucle
<?php endwhile; ?>

La fonction update_post_caches() est là pour pallier le fait que certains plugins ne fonctionnent pas correctement lorsque plusieurs boucles sont présentes sur la même page. Cette fonction réinitialise le cache des billets pour éviter d’éventuels problèmes.

3 Les articles du blogzine proprement dit

Cette zone est suivie de la liste des billets publiés au fil de l’eau sur le blog à l’exception de l’édito et des billets « En bref ». Toutefois, je voulais que ces deux rubriques puissent apparaitre lorsque les visiteurs cliquent sur les Articles plus anciens car si la redondance est gênante sur la première page, elle l’est moins sur les autres :

<?php if(!is_paged()) : ?>
    <?php query_posts("$query_string&cat=-1,-16&showposts=10");
    /* Affichage des articles sauf featured et édito */?>
<?php else : ?>
    <?php query_posts("$query_string&showposts=15"); ?>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
        Contenu de la boucle
<?php endwhile; ?>

Il ne faut pas oublier le paramètre $query_string qui permet de recréer le contexte de la requête (ici is_paged() ) car la fonction query_posts() est un peu l’auberge espagnole : seules les variables précisées en paramètres sont disponibles sur votre page.

4 Le menu à onglets sur la droite

Ce pavé inaugure la barre latérale et est en quelque sorte le pivot du blog, la boussole qui sert de point de repère dans ce qui pourrait apparaitre comme une cacophonie de textes :

• Catégories — le moins mauvais des systèmes pour se repérer dans un blog ;
• Derniers articles publiés afin que le lecteur ait une vision « applatie » des parutions sur le blog. En effet, l’édito ou le billet « En bref » peuvent rester un certain temps avant d’être remplacés, même si le contenu du blog proprement dit (la quatrième zone) peut évoluer plus rapidement ; à moins que l’inverse se produise car il est tout à fait possible de publier plusieurs billets courts dans « En bref » ou de prendre un coup de sang quotidien avec l’édito !
• Articles les plus commentés. Si les derniers commentaires (voir plus bas) permettent aux visiteurs de se faire une idée sur les dernières discussions en cours, la liste des articles les plus commentés permet de faire remonter certains articles anciens qui ont, en leur temps, fais parler d’eux ;)
• Derniers commentaires avec le gravatar, l’URL du commentateur et l’adresse du billet commenté. Pratique, pour donner au visiteur un aperçu des sujets qui suscitent actuellement le plus d’intérêt.
• Nuage de tags pour donner un aperçu des thèmes abordés sur le blog au visiteur de passage (qui représente quand même plus de la moitié des visites).

A noter que lorsqu’on se trouve sur les pages single.php (affichage des billets seuls) et page.php (affichage des pages « statiques »), ce menu ne propose que les 3 premiers onglets afin de laisser plus de place pour l’article. Voici le code :

<?php if ( !is_single() && !is_page()) : ?>
    <div id="menu-wide">
<?php else : ?>
    <div id="menu-narrow">
<?php endif; ?>

5 Tutoriels aléatoires

Sous le menu à onglets, j’affiche un article aléatoire parmi ceux qui sont tagués « tutoriel ». Ca tombe bien car c’est un des rares tags que j’ai employé à bon escient depuis de début ! Ca permet de faire « remonter » des billets rédigés il y a plus de deux ans et sur lesquels j’ai le plus transpiré ;) La boucle est relativement similaire aux autres :

<?php /* Affichage des tous les billets tagué "tutoriels" */
query_posts('tag=tutoriel&showposts=1&orderby=rand');
while (have_posts()) : the_post(); ?>
    Contenu de votre boucle
<?php endwhile; ?>

Cette zone peut être précédée ou suivie d’une zone widgétisable pour placer une éventuelle publicité (actuellement des vidéos virales de unrulymedia) ou tout autre élément à la mode. Une zone est même prévue au-dessus du menu à onglets pour la même chose. Bon, rassurez-vous, une publicité placée au-dessus du menu principal vaut son pesant de cacaouettes : le jour où ça arrive, je vous invite à boire un café sur Lyon :D

6 Deux barres latérales pour le prix d’une !

C’est le moment de diviser la barre latérale en deux afin d’accueillir d’autres types de contenus. Pour le moment la première sidebar accueille la suite des billets « En bref » suivie d’une petite publicité virale (oui, j’essaie de trouver des alternative à Google Adsense… pas si facile non plus ;) )

La deuxième barre latérale est destinée à accueillir des liens externes comme les liens sponsorisés (saymal, mais saybon quand même :D ), les flux RSS externes, etc.

A noter que sous cette double sidebar, il est possible d’afficher du contenu à l’aide d’une zone widgétisée sur la largeur des deux colonnes.

7 Le footer

Ce footer est lui-même divisé en deux : un big footer (inactif pour l’instant) et le footer proprement dit qui affiche quelques informations classiques comme les droits réservés, l’adresse des différents flux RSS, le lien vers le formulaire de contact, etc.

Les widgets

Ce thème est truffé de zones widgets ready pour permettre une certaine souplesse dans l’administration du blog en minimisant les allers-retours dans le code. Pour information, SquaryBluevie ne compte pas moins de de 19 zones de widgets, certaines actives et d’autres pouvant être activées sur un claquement de souris.

Voici la liste des différentes zones de widget et leur utilisation actuelle ou prochaine :

1. header1 – présentation de l’auteur (widget Texte),
2. header2 – présentation du blog (inactive pour l’instant),
3. article – texte de remplacement de l’édito et de la description de la catégorie quand on est sur l’article seul,
4. tab1 — contenu du premier onglet dans le pavé de droite. Actuellement les catégories,
5. tab2 — derniers billets publiés,
6. tab3 — articles les plus commentés par les visiteurs,
7. tab4 — derniers commentaires des visiteurs
8. tab5 — listes des tags les plus utilisés
9. sidebar-top — zone située au-dessus du menu à onglets (inactive pour l’instant),
10. sidebar-middle — zone située sous le menu à onglets (Actuellement une vidéo publicitaire),
11. sidebar-middle2 — zone située sous le tutoriel aléatoire (inactive pour l’instant),
12. sidebars-bottom –zone située sous les deux colonnes latérales,
13. sidebar1-top — zone placée au-dessus de la première barre latérale étroite,
14. sidebar1-bottom — zone placée en dessous,
15. sidebar2 — l’ensemble de la deuxième barre latérale étroite est gérée par cette zone. Principalement pour des liens externes et/ou publicitaires (flux RSS, liens sponsorisés, blogroll, etc.),
16. bigfooter – si le besoin s’en fait sentir, une zone big footer est diponible sur toute la largeur de la page en 2, 3, 4 ou 5 colonnes en fonction des besoins. (inactive pour l’instant),
17. footer – zone disponible au début du footer (inactive pour l’instant),
18. adz — affichage des publicités AdSense à la fin du billet seul et sous le billet « En bref » présent sur la Home.
19. sidebar-single – permet d’afficher des élément sous le menu à onglets lorsqu’on lit un billet seul.

Grille de mise en page, feuilles de styles CSS et Javascript

Je ne m’étendrai pas trop sur ces questions qui feront l’objet d’un autre article : ce design est provisoire (ce qui n’est pas le cas de cet article) et je ne suis pas sûr de vouloir garder la même approche. Mais pour ceux qui sont curieux et qui n’ont pas envie de regarder le code source, voici quelques informations.

Pour ce thème, j’ai utilisé le framework CSS Blueprint en redéfinissant totalement la grille horizontale proposée par défaut en utilisant l’excellent Blueprint Generator pour générer automatiquement le fichier grids.css : il suffit de préciser quelques informations. J’ai opté pour une grille en 14 colonnes de 52 pixels chacune, séparées par une gouttière de 18 pixels, pour une largeur totale de 962 pixels.

L’avantage du framework Blueprint est de pouvoir tester rapidement plusieurs mises en page à partir de la même grille. La prise en main est relativement facile si l’on possède des bonnes notions de CSS et si l’on si sait à quel moment il faut rétablir le flux après les flottants : lorsqu’on détermine une largeur à l’aide de Blueprint, on utilise un float: left en même temps !

J’ai utilisé également le script ie7.js de Dean Edwards pour faire en sorte que Internet Explorer 6 se comporte comme IE7. Je vous invite à lire l’article Quelques notes sur la bibliothèque Javascript IE7 qui vous permettra d’en savoir plus sur les comportements ajoutés à Internet Explorer pour le rendre plus friendly ;)

Conclusion

Dans ce billet, je n’ai pas abordé les aspects graphiques : comme je l’ai déjà évoqué, ce thème est pour moi un saut dans l’inconnu car je n’ai pas l’habitude de travailler le bleu, les blocs carrés ou encore les designs symétriques ! Tout celà donne un aspect institutionnel qui n’était pas recherché au départ mais qui peut faire son petit effet ;)

Rassurez-vous toutefois, mon objectif n’était pas d’obtenir des backlinks d’un site se terminant par .gouv, mais simplement de mieux structurer le blog et d’utiliser une palette de couleur tendant vers la monochromie (deux couleurs froides) afin que le regard du lecteur ne se disperse pas trop : plus les contenus sont nombreux et variés et plus la sobriété est importante.

Par ailleurs, le graphisme de ce blog est destiné à évoluer régulièrement pendant quelques temps, le temps de trouver un rythme de croisière entre l’édito, les brèves, les articles de fond, les tutoriels, etc…

Stay tuned and mind the gap!

Articles sur le même sujet

• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• Les widgets dans WordPress 2.5 avec widgétisator ;)
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• Quelques notes sur un thème magazine de A à Z — E comme épure

Ce qui est surprenant, c’est que le glissé-déposé d’onglets fonctionne également depuis Firefox (ou Flock) vers Internet Explorer 7.

En revanche, si IE7 accepte les câlins, ce n’est pas le cas de FF qui refuse toute tentative de rapprochement de la part de son rival.

Bref, si Firefox et Internet Explorer parlent « onglets » c’est à sens unique pour l’instant. Peut-être que Firefox 3 sera un peu plus sociable… ^_^v

Edit du 14/01/2007 à 10:32

A la lumière des commentaires Eclairés de mes pairs, Mon jugement je révise Et déclare qu’IE7 Ne vaut pas tripette Qu’on se le dise

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• HTML5 et CSS pour l'intégrateur web
• 390 ressources Javascript & jQuery
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Navigateurs «modernes» vs «actuels»

Créer un menu à onglets avec CSS. Surpris de n’être jamais tombé sur cet article auparavant, je regarde ce que Google a à dire sur la requête menu onglets css. L’article apparait bien, mais en 3ème page… alors qu’un tutoriel de cette qualité mérite la première. Non mais franchement, y font quoi les gars de chez Google ? Ils pourraient faire un effort, quand même ;)

Ce tutoriel vous guidera pas à pas sur la voie de la création d’un menu à onglets accessible et multi-navigateurs. Que vous en soyez à votre premier menu ou pas, vous apprendrez forcément quelque chose. Si ce n’est pas le cas, vous pourrez toujours venir vous plaindre ici ;) Bref, vous m’avez compris, faites du bruit pour que tout le monde puisse profiter du sens de la pédagogie de Normand Lamoureux.

L’article est plein de bons conseils que je vous laisse découvrir. Bon, si vous insistez, je vais avoir du mal à résister à l’envie de dévoiler une astuce particulièrement simple et efficace pour améliorer la productivité dans l’écriture des CSS :

Arrive le moment d’écrire ma feuille de style. Dans ce dessein, je vais à l’élément « Éditer les CSS » du menu CSS de la barre d’outils pour développeur Web. Cette fonctionnalité permet d’écrire une règle CSS dans le volet de gauche du navigateur et de voir immédiatement le résultat dans le volet de droite, où le fichier HTML s’affiche.

J’utilise régulièrement ce volet gauche pour jouer avec les CSS des sites que je visite, mais je n’avais jamais pensé m’en servir comme ça.

Comme quoi, avec Google, une requête peut en cacher une autre ;)

Faites en sorte que la redondance de l’information profite aux contenus qui le mérite, et ne sortez pas sans cette boite à outils pleine de cours et autres tutoriels ;)

Articles sur le même sujet

• Menu HTML et CSS, sliding doors et item current en PHP
• Menu à onglets avec javascript et css
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• Trucs et astuces CSS
• Tutoriels pour apprendre HTML & CSS

Le code HTML

Le menu est constitué d’une liste non-ordonnée ul où chaque lien a contenu dans l’élément li est transformé en bloc display: block afin de recevoir une image de fond qui contient les deux états du bouton. Cette image possède une largeur de 100px pour une hauteur de 50px. Les vingt-cinq premiers pixels de hauteur sont réservés à l’état « inactif », tandis que les vingt-cinq pixels restants feront le bonheur de la pseudo-classe :hover.

Si vous ne connaissez pas cette technique, n’ayez pas PêUR ! Vous trouverez des exemples d’images en portes coulissantes sur cet excellent blog consacré au HTML et aux CSS ;)

Qu’y a-t-il au menu ?

Il s’agit d’une simple liste qui contient les liens auxquels j’ai associé un id (ici en gras) nécessaire pour l’application des styles CSS abordés plus bas.

<div id="menu">
  <ul>
    <li><a id="accueil" href="index.php">Accueil</a></li>
    <li><a id="page1" href="page1.php">page1</a></li>
    <li><a id="page2" href="page2.php">page2</a></li>
  </ul>
</div>

La feuille de style CSS pour le menu

En ce qui concerne la feuille de style pour le menu, la seule chose à retenir, c’est le décalage de -25px pour l’état :hover qui affiche la partie de l’image réservée pour le survol. C’est ce même décalage qui permettra par la suite de signaler la rubrique en cours lorsque le bouton en question sera cliqué.

/* Style général du menu */
#menu {
     margin: 0;
     padding: 0;
}
#menu ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
#menu ul li {
     float: left;
 }


/* Style global des liens */
a#index,
a#page1,
a#page2 {
     display: block;
     width: 100px;
     height: 25px;
}

/* Style particulier pour le background des liens
avec pour chacun : l'état inactif et actif */
a#index {
     background: url(images/bt_index.png) 0 0 no-repeat;
}
a#index:hover {
     background: url(images/bt_index.png) 0 -25px no-repeat;
}
a#page1 {
     background: url(images/bt_page1.png) 0 0 no-repeat;
}
a#page1:hover {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
a#page2 {
     background: url(images/bt_page2.png) 0 0 no-repeat;
}
a#page2:hover {
     background: url(images/bt_page2 .png) 0 -25px no-repeat;
}

La petite fonction php qui va bien

<?php
function currentPage($strPage) {
  if (strstr($_SERVER['PHP_SELF'], $strPage)) {
     echo 'class="current_' . $strPage. '" ';
  } else {
     echo '';
  }
}
?>

Ensuite la fonction echo() affiche une classe CSS composée de la concaténation du terme current_ et de la chaîne $strPage. Si le terme $strPage n’existe pas dans l’URL, la fonction renvoit une chaine vide…

Le menu HTML avec l’appel de la fonction

<div id="menu">
     <ul>
         <li><a <?php currentPage('index') ?>id="accueil" href="index.php" >Accueil</a></li>
         <li><a <?php currentPage('page1') ?>id="page1" href="page1.php" >page1</a></li>
         <li><a <?php currentPage('page2') ?>id="page2" href="page2.php" >page2</a></li>
     </ul>
</div>

Le menu HTML après un clic sur le deuxième lien

<div id="menu">
     <ul>
         <li><a id="accueil" href="index.php">Accueil</a></li>
         <li><a class="current_page1" id="page1" href="page1.php" >page1</a></li>
         <li><a id="page2" href="page2.php">page2</a></li>
     </ul>
</div>

La touche finale avec les liens current

/* Styles particuliers issus de la fonction PHP pour les liens en cours */
#menu a.current_index {
     background: url(images/bt_accueil.png) 0 -25px no-repeat;
}
#menu a.current_page1 {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
#menu a.current_page2 {
     background: url(images/bt_page2.png) 0 -25px no-repeat;
}

Conclusion

Pas de quoi faire le kakou, c’est certain ;) mais cette petite fonction PHP remplit bien son office. J’avoue que cette petite merveille de strstr() y est pour beaucoup. Après quelques recherches sur PHP, je me rends compte que ce langage possède un nombre extraordinaire de fonctions pour traiter les chaines de caractères qu’on dirait du perl !

Si de votre côté vous avez des petites fonctions PHP ou Javascript liées aux CSS qui prennent la poussière au fond d’un dossier, n’hésitez pas à leur donner une seconde vie en en faisant profiter les autres :)

Stay tuned and mind the gap!

Note du 10/11/2007 : Afin d’éviter d’éventuels soucis de cascade CSS dues à la priorité des ID sur les classes, j’ai modifié les styles comme suit : #menu ul li a#index {…} est remplacé par a#index {…} (ce qui est largement suffisant) et je laisse #menu a.current_index {…} de manière à ce que le poids de la classe .current_index {…} soit plus important que a#index {…}.

Voici un exemple très moche mais fonctionnel pour illustrer ce tutoriel. Téléchargez le fichier zip de l’exemple.

Articles sur le même sujet

• Trucs et astuces CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Menu à onglets avec javascript et css
• CSS et portes coulissantes pour un effet de zoom :hover
• Améliorations cosmétiques et ergonomiques sur ce blog

Je vous propose un exemple utilisant un petit script astucieux développé à trois mains (les deux de Benoît et ma main gauche ;) qui permet de permuter deux classes en même temps sur un événement onclick par exemple, en passant en paramètre l’ID du lien sur lequel on clique.

function multiClass(eltId) {
    arrLinkId = new Array('_0','_1','_2','_3');
    intNbLinkElt = new Number(arrLinkId.length);
    arrClassLink = new Array('current','ghost');
    strContent = new String()
        for (i=0; i<intNbLinkElt; i++) {
            strContent = "menu"+arrLinkId[i];
            if ( arrLinkId[i] == eltId ) {
                document.getElementById(arrLinkId[i]).className = arrClassLink[0];
                document.getElementById(strContent).className = 'on content';
            }
            else {
            document.getElementById(arrLinkId[i]).className = arrClassLink[1];
            document.getElementById(strContent).className = 'off content';
            }
        }
}

Explication de texte

• Pour commencer, nous créons le tableau arrLinkId contenant les ID des liens sur lesquels doit s’effectuer le changement. Nous comptons ensuite le nombre d’éléments de cet Array grâce à la méthode length.
• Un deuxième tableau contient les classes pour l’onglet current (celui sur lequel nous venons de cliquer) qui mettra les autres onglets dans un état fantômatique (.ghost).
• Nous déclarons ensuite la variable strContent qui contiendra, pour chaque itération de la boucle for, l’ID du lien précédé de la chaîne « menu » pour obtenir « menu_1″ que l’on retrouve comme ID de la div à afficher ou masquer.
• La suite du script fait en sorte que si nous cliquons sur le lien dont l’ID est « _1″, la div identifiée par « menu_1″ passe de la classe .on à la classe .off, tandis que le lien passe de la classe .ghost à la classe .current ; les autres div faisant le chemin inverse.

Il ne vous reste plus qu’à définir les classes par défaut au chargement de la page, soit .current soit ghost et faire de mêmem pour les div (.on ou .off) and the cat is in the bag!

Voilà, l’explication de texte est terminée pour aujourd’hui. Je vous laisse avec la démo du menu onglet avec CSS et Javascript.

PS : Ce script est assez souple pour avoir d’autres applications. Partagez donc le fruit de votre imagination ;)

Télécharger le fichier .html ou .php et les images

MAJ : Lorsque Javascript est désactivé, ce menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je ne saurais trop vous conseiller d’utiliser une méthode plus accessible :

• Pour ma part j’utilise jQuery accompagné du plugin idTabs que vous pouvez voir à l’œuvre dans les menu à onglets en haut de ce blog.

• Je vous propose de lire mon introduction à jQuery et de jeter un œil sur les 240 plugins pour jQuery.

• Voir aussi cet article qui fait le tour sur les scripts idTabs et domtab pour les tabs menus.

• Et s’il ne devait rester qu’un seul tutoriel pour faire des menus à onglets…

Articles sur le même sujet

• Menu HTML et CSS, sliding doors et item current en PHP
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Utilisez le DOM et Javascript comme un chef
• Pied de page toujours en bas avec Javascript et CSS
• Trucs et astuces CSS

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

• La feuille blanche
• Raccourci pratique pour les bordures CSS
• Transparence
• Commentaires conditionnels d’IE vs hacks CSS
• Barre de défilement et décalage d’une page centrée
• Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
• Centrer un bloc horizontalement dans la fenêtre du navigateur
• Modifier les caractéristiques des liens avec LoVe HAte

La feuille blanche

Document XHTML pour partir de bonnes bases :

            <title>Un titre explicite contenant les mots-clés de la page</title>



            <!--[if lt IE 7]&gt;-->


            <!--[if IE]&gt;-->

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

• Remise des marges à zéro avec le sélecteur universel
• Reset CSS Reloaded
• INITIAL
• YUI Reset CSS
• undohtml.css

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

<!--[if IE]>
    <style type="text/css">
        @import "/style/pour_ie.css";
    </style>
<![endif]-->

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Exercice de style CSS et HTML : table vs div
• Menu HTML et CSS, sliding doors et item current en PHP
• Opacité CSS et effet de trame avec GIF/PNG transparent
• IE6 — Gérer la transparence du format PNG 24 bits