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

Ce tutoriel écrit par Nikola Lazarevic montre comment mettre en forme un texte de type «article» à l’aide de CSS3 et de Lettering.js. L’auteur nous prend par la main et détaille chaque étape : reset.css, styles de base, typographie avec Font-face, mise en forme des paragraphes. Le tout saupoudré d’une pincée de box-shadow et d’une segmentation des mots composant les titres à l’aide de Javascript pour débrider notre créativité en jouant sur les mots.

Les progrès réalisés par les CSS3 et leur prise en charge grandissante par les navigateurs permettent des mises en pages créatives.

Mise en page avec CSS3 et Lettering.js. Cliquez pour voir la démo

→ Petit bémol cependant concernant les problèmes d’accessibilité d’un script comme Lettering.js soulevés dans les commentaires qui ont suivi la publication de Lettering.js — La typographie dit «merci» à jQuery !

→ Bien entendu, personne ne vous demande la lune et vous pouvez également choisir les couleurs qui vous conviennent le mieux ;-)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek
• 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.
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Parmi les nombreux bugs qui affectent Internet Explorer 6, le bug des classes multiples apparait lorsqu’on utilise au moins deux classes CSS simultanément. Par exemple .classe1.classe2 pour adresser des propriétés CSS aux éléments possédant à la fois .classe1 et .classe2, ce qui est très pratique. Malheureusement, IE6 ne tient compte que de la dernière classe, soit .classe2, en l’occurrence. Une pratique répandue consiste simplement à se passer des classes multiples, ce que je fais depuis des années.

Malgré des débuts prometteurs, en 10 ans de bons et loyaux services sévices, Internet Explorer 6 ne s’est pas fait que des amis… [Illustration ci-contre par Mike Rohde]

«Die IE6, DIE!» Par Mike Rohde (rohdesign.com). Sous Licence CC.

Toutefois, il se trouve que dans le cadre d’un projet utilisant WordPress, j’avais besoin de styler différemment les images selon qu’elles possèdent une légende  ou pas, qu’elles soient alignées à droite, à gauche, au centre, pas du tout (à la folie, passionnément, etc.) et selon leur taille. Ce qui donne un nombre de combinaisons suffisamment important pour justifier l’utilisation des classes multiples, y compris dans IE6. En effet, dans mon cas, l’alignement des images fait partie intégrante du design qui doit (Must vs. Should) passer aussi dans IE6. Et non, en l’occurrence, le script kickie6.js n’est pas envisageable :-D

Dans l’idéal, il faudrait une fonction Javascript  pour détecter les classes multiples passées en paramètres afin d’obtenir en retour la concaténation des deux classes séparée par un tiret (ex. .classe1-classe2. N’étant pas développeur Javascript, j’ai fais appel aux bonnes volontés présentes sur Twitter. Quelques heures plus tard, plusieurs propositions surgirent.

Petit mais costaud, c’est jQuery

Quand on joue sur le web, jQuery est souvent de la partie. Il devient assez rare de faire l’économie d’un framework Javascript, quel qu’il soit. Voici deux méthodes pour ajouter une classe CSS afin de pallier les insuffisances d’Internet Explorer 6 en matière de gestion des classes multiples.

1. La solution fournie par Florian (@_Florian_R) a le mérite de la simplicité et de l’efficacité. Il suffit de passer les classes multiples à la fonction `jQuery()` et d’ajouter la classe de son choix avec la méthode `addClass()`. Seul petit bémol, cette méthode oblige à parcourir tout le document à la recherche des deux classes.

   $(document).ready(function() {
       $(".classe1.classe2").addClass("classe1-classe2");
   });

2. Allons plus loin avec Stéphane Rouillé (@stfr) – Web Developper, PHP and jQuery addict. Sa fonction permet,  au choix,  de remplacer les deux classes précédemment utilisées par une nouvelle classe (replace : true;) ou de les garder (replace : false;). Il est possible de spécifier le noeud DOM pour éviter de parcourir l’ensemble du document afin de ne pas gréver inutilement les performances déjà limitées de notre très cher (coûteux) IE6 !

   /*
   *   Merge multiple CSS classes in one.
   *   Just use : $('body').multipleClassCombiner();  in order to apply this filter on all multiple classes elements
   *   Take care : $('h1').multipleClassCombiner() will apply this filter on <h1>'s childrens. But you can easily modify it.
   *   Default delimiter : "-"
   *   Have Fun !
   *   @author Stéphane Rouillé (Twitter: @stfr)
   *   @date 2011-02-08
   *   Free to use, distribute, modify, etc etc...
   */
   (function($) {
       $.fn.multipleClassCombiner=function(params){
           var options={
               delimiter:'-',
               replace : true
           };
           $.extend(options,params);
           var multipleClassElements=$(this).find("*[class*=' ']");    /* Oh god ! */
           multipleClassElements.each(function(){
               var classes=$(this).attr('class').trim().split(' ');
               if(options.replace){
                   $(this).attr('class',classes.join(options.delimiter));
               }else{
                   $(this).attr('class',$(this).attr('class')+' '+classes.join(options.delimiter));
               }
           });
       }
   })(jQuery);

Regarde Maman, sans jQuery !

jQuery est souvent une bonne idée, mais de nombreux projets de sites internet ne nécessitent pas de framework. Mettre en place jQuery juste pour gérer les classes multiples dans IE6 n’est pas très raisonnable :  les utilisateurs de ce navigateur obsolète utilisent déjà des configurations assez modestes… Inutile, donc, de charger la mule ;)

C’est Edouard Cunibil (@DuaelFr) – Développeur web freelance certifié PHP — qui nous offre une fonction en pur Javascript. Pour utiliser patchMultipleClass(), il suffit de passer les classes multiples en paramètres, en ajoutant, le cas échéant, le noeud DOM impliqué dans la recherche. Par défaut, la fonction parcours tout le DOM à partir de body, mais rien ne vous empêche de limiter les dégâts à #content, par exemple.

function patchMultipleClass(classNames, parent)
{
    var children, current, classes, found, subfound, splitClassNames, joinClassNames;
    var i, j, k;
    splitClassNames = classNames.substr(1).split('.');
    joinClassNames  = splitClassNames.join('-');
    if (!parent) { parent = document.getElementsByTagName('body')[0]; }
    children = parent.children;
    for (i = 0 ; i < children.length ; ++i) {
        current = children[i];
        classes = current.className.split(' ');
        found   = true;
        for (j = 0 ; j < splitClassNames.length ; ++j) {
            subfound = false;
            for (k = 0 ; k < classes.length ; ++k) {
                if (classes[k] == splitClassNames[j]) {
                    subfound = true;
                    break;
                }
            }
            if (!subfound) {
                found = false;
                break;
            }
        }
        if (found) {
            if (current.className.indexOf(joinClassNames) == -1) {
                current.className += ' ' + joinClassNames;
            }
        }
        patchMultipleClass(classNames, current);
    }
}
if (window.attachEvent) {
   window.attachEvent("onload", function() {
       var parentElt = document.getElementById('content');
       patchMultipleClass('.wp-caption.alignright', parentElt);
       patchMultipleClass('.wp-caption.alignleft', parentElt);
       patchMultipleClass('.wp-caption.alignnone', parentElt);
       patchMultipleClass('.wp-caption.aligncenter', parentElt);
   });
}

Cibler uniquement IE6

Pour réserver ce traitement Javascript aux seuls navigateurs ne prenant pas en charge les classes multiples (IE5 — IE6), j’utilise les commentaires conditionnels :

<!--[if lte IE 6]>
    <script src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/functions-ie6.js""></script>
<![endif]-->

Voilà, c’est fini !

J’espère que ces quelques précisions sur ces quelques fonctions Javascript permettant de gérer les classes multiples dans Internet Explorer 6 vous permettront de vous amuser. Je tiens une nouvelle fois à remercier Florian (@_Florian_R), Stéphane Rouillé (@stfr) et Edouard Cunibil (@DuaelFr) pour avoir planché nuitamment sur ce problème :-)

N’hésitez pas à partager vos découvertes sur ce sujet, elles seront les bienvenues.

Merci également à tous ceux qui ont répondu d’une manière ou d’une autre à l’appel : @mgeoffray, @Remzz, @Tchesssss, @JeuneVeteran, @phenxdesign, @burninghat, @jcbrebion, @Darklg, @LDZintegratore, @naholyr, @piouPiouM, @cafenoirdesign, @rickdog, @studiohypehope.

Retrouvez-moi sur Twitter avec @br1o !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• 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.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

New Twitter Design with CSS and JQuery –Tout le monde ou presque a pu voir la nouvelle interface utilisateur de Twitter. Elle fait un usage intensif de Javascript et si l’utilisation du nombre d’or dans la maquette initiale ne brille pas par sa présence, le reste de l’interface est très fluide et bien pensée.

Pour nous aider à y voir plus clair sur le développement d’une interface similaire (nul doute que ne nouveau Twitter fera des émules) le prolifique et talentueux Srinivas Tamada de 9lessons nous propose rien de moins qu’un tutoriel pour refaire la même chose à la maison.

Chaque étape du tutoriel est illustrée par un visuel explicite et le code CSS ou jQuery associé.

Cliquez sur l'image pour voir l'animation. © Srinivas Tamada, 9LESSONS.

Voir la démonstration.

Articles sur le même sujet

• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• 100+ comptes Twitter pour webdesigner
• 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.
• 390 ressources Javascript & jQuery

CodeIgniter est un framework PHP robuste comme Zend Framework ou Symfony mais bien plus léger. Il vous aidera à construire votre site web avec le modèle MVC (Modèle, Vue et Contrôleur) en améliorant le temps de développement de vos projets grâce à un ensemble complet de bibliothèques simple d’utilisation.

Tutoriel CodeIgniter

Même si le guide de l’utilisateur disponible sur le site de l’éditeur est très bien fait, voici un tutoriel en plusieurs parties pour développer un CMS (Content Management System) rédigé par Ange Chierchia (@nighcrawl) :

1. Développer un moteur de site Web avec CodeIgniter,
2. Système de login sécurisé,
3. La gestion des pages.

Code Igniter en français

codeigniter.fr est le miroir francophone de codeigniter.com. Vous y trouverez notamment le guide de l’utilisateur avec la plupart des rubriques traduites en français ainsi que des tutoriels. Si cela ne suffit pas, le forum est à votre disposition.

Question : «quel site francophone développé avec CodeIgniter fait bonheur des intégrateurs web ?»

Réponse : Alsacréations — Et oui, depuis sa version 3, le site de la communauté d’apprentissage pour les standards du web est développé avec CodeIgniter !

Articles sur le même sujet

• PHPCrossRef — Bibliothèques de référence pour projets PHP Open source
• Supprimer l’attribut title dans les catégories et les pages WordPress avec jQuery ou PHP
• Le petit journal du web — WordPress, développement web, etc.
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• 23 listes pour Webdesigners

Cette liste de liens pour le développeur web front-end est issue de la veille documentée que j’effectue sur Javascript & Webdesign — Les meilleures ressources Javascript pour développeurs web front-end (avec parfois un soupçon de PHP) – depuis plus de 6 mois. A quelques exceptions près, les resssources pointent directement sur les articles d’origine. La liste est affichée dans l’ordre où j’ai rédigé les billets : les plus anciens en premier par paquet de 10 pour aérer la lecture parce que vous le valez bien.

1. jCarousel Lite — Galerie d’images en jQuery.
2. eCSStender — Sélecteurs CSS avancés compatibles IE6.
3. Effets jQuery accessibles WAI-RIA — Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
4. Augmenter la taille du texte avec jQuery — Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
5. Javascript Framework Matrix — Tableau comparatif des principaux frameworks Javascript.
6. Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
7. jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
8. jQuery — renverser l’ordre d’une liste ordonnée — les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
9. Cufón : des polices de caractère pour tous — Implémenter font-face dans le plus grand nombre de navigateurs.
10. 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.
11. jQuery Magnifier Loupe — Zoom sur images avec l’attribut longdesc.
12. Lazy loader : chargement des images à la volée — Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
13. Faire un Carrousel avec jQuery — Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
14. 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.
15. jQuery Tools — Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
16. jQuery UI Multiselect — Améliore l’apparence et l’ergonomie de la balise HTML select.
17. jQuery Flash Plugin — Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
18. Jquery Pagination System — Pagination côté client avec jQuery.
19. Choisir sa bibliothèque JS avec Javascript Framework Matrix — Tableau comparatif des principaux frameworks Javascript.
20. FireFinder — interagir avec la page web — Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
21. Sélecteur de date (Date-Picker) non-intrusif — Sélecteur de date avec mini calendrier.
22. Google Closure — les mauvaises pratiques Javascript en action ? — Google Closure a été développé par des spécialiste de Java… ça craint.
23. Un diaporama avec AnythingSlider jQuery Plugin — Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
24. 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.
25. jsbin — tester votre code Javascript et partagez vos bugs — Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
26. PHP.JS — transposer des fonctions PHP en Javascript.
27. Le code CSS et Javascript au milieu du HTML c’est pas bien ! — Traduction de l’article Why Inline CSS And JavaScript Code Is Such A Bad Thing de Robert Nyman.
28. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
29. jQuery Image Cropper — recadrer et uploader des images.
30. ul2finder — un explorateur à l’image du Finder de MacOS X.
31. Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
32. Des cookies à la mode de jQuery — Ecrire, lire et effacer vos cookies pour 4,15 kb.
33. Simple jQuery Text Resizer — Laissez vos visiteurs choisiront la taille qui leur convient (un cookie gardera leur préférence en mémoire).
34. Changement de design «on the fly» avec jQuery — Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
35. 22 menus déroulants passés au crible — Tyssen Design passe en revue les principaux dropdown menu.
36. jQuery Context Menu — Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
37. Pikachoose — Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
38. dLite — une librairie Javascript « petit mais costaud ».
39. jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
40. Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
41. DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
42. FlashReplace – Insérer du Flash proprement.
43. DOMTab – Menu à onglets simple et efficace.
44. balance_columns – Équilibrer des colonnes avec Javascript.
45. cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
46. jTextTranslate – Traduction de votre site en 87 langues par Google.
47. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevre propose de faciliter l’utilisation d’Ajax.
48. 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.
49. maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6.
50. Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
51. The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
52. Planet jQuery — Un planet pour jQuery.
53. Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
54. 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.
55. Get viewport size with javascript — Connaitre la taille du « viewport » en Javascript.
56. Smart Columns with CSS & jQuery — Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
57. Menu déroulant Suckerfish — Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
58. Système de notation par étoiles accessible — Samuel Le Morvan propose un tutoriel complet sur la question.
59. Mootools Forge — Une forge pour les plugins Mootools.
60. TinySlider — Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
61. jQSlickWrap — Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
62. jQuery Before/After — Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
63. Hightcharts — Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
64. 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 !
65. CSS3 animations and their jQuery equivalents — 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
66. Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
67. jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
68. 40 bouts de code — facilitez vos développements en Javascript ou jQuery.
69. jQuery Masonsy — Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
70. Animation avec quatre images et jQuery — Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
71. jQuery Quick Guide — Un guide pour avoir les fonctionnalités de jQuery sous la souris.
72. jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
73. jQuery 1.4 API Cheat Sheet — Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
74. jsfiddle — Propose un environnement pour tester et partager du code Javascript.
75. jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
76. Simple Image Viewer — Galerie d’image minimaliste.
77. A.P.E (Ajax Push Engine) – Le web en temps réel avec Ajax Push Engine.
78. Page Peel Corner — Effet de page cornée avec jQuery.
79. jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
80. Sexy.js — Améliorer l’interface Ajax de jQuery.
81. Dynamic tabs using jQuery — Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
82. DOMAssistant — Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
83. Comment System with jQuery, Ajax and PHP – L’excellent Srinivas Tamada de 9Lessons nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.
84. 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.
85. Disable On Submit — Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
86. Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
87. 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.
88. jqTransform — Stylez vos formulaires avec jQuery et CSS.
89. css-template-layout — Implémentation jQuery du module CSS3 Template Layout.
90. How to Easily Create a JavaScript Framework — Créez votre framework Javascript en 4 parties.
91. jQAPI — Documentation alternative pour jQuery 1.4.1.
92. jQuery Source Viewer — Naviguer à l’intérieur du code source de jQuery.
93. flot — Créez des graphiques avec jQuery.
94. 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.
95. 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.
96. Plupload — Gestionnaire de « téléversement » (upload) multiple en jQuery.
97. 6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
98. jQuery vs Mootools — Choisir jQuery ou Mootools en connaissance de cause.
99. jQuery Color Animation — Support du RGBa pour « jQuery Color Animations».
100. jSocial — Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
101. DataTables — Pagination et tri des données pour vos tableaux HTML.
102. Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
103. jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
104. jQuery SimpleTree Drag&Drop — Construisez des arborescences à la mode de Windows.
105. 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.
106. 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.
107. Starter — Générateur de plugins jQuery.
108. jQuery Tutorials for Designers — 13 Tutoriels jQuery pour Webdesigners.
109. Comment, jQuery va tuer Flash ? — Question surprenante, mais force est de constater que Javascript a fait du chemin depuis  window.open() !
110. Clickoutside Event — Détectez les clics en dehors d’un élément.
111. TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
112. Custom jQuery Selectors — Créez des sélecteurs personnalisés avec jQuery.
113. Optimiser le chargement des AdSense — Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
114. Splash — un diaporama en pur Javascript.
115. DLink — Afficher le type de cible des liens avec Javascript.
116. Webform to wizard — Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
117. 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 !
118. 20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
119. Modernizr — Détection des fonctionnalités CSS3 et HTML5.
120. simpleCart (js) — Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
121. 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.
122. Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
123. jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
124. FAT-FREE — Framework PHP léger et modulaire.
125. Popeye 2.0 — Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
126. jQuery.fn.sort — Trier des éléments avec jQuery.
127. Bloc de login à la Twitter avec jQuery — Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
128. 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.
129. Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
130. jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
131. Colorbox — une « lightbox » légère et extensible en jQuery.
132. Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
133. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
134. WebProjectHelper — Générateur de structure MySQL et de classes PHP.
135. UI.Layout – Créer des interfaces utilisateurs avec jQuery.
136. Scriptsrc — 10 Frameworks Javascript à emporter.
137. Griddy-Overlay — Afficher une grille par-dessus votre page web avec jQuery.
138. Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
139. SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.

PS : Pour trouver l’article correspondant sur js4design, il suffit de saisir l’ancre du lien dans le champs de recherche de la colonne latérale.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Quelques liens Javascript et PHP

Après le petit journal HTML5 et CSS, je continue la série de l’intégration web côté client avec Javascript (et plus particulièrement jQuery) et une pincée de PHP histoire de ne pas totalement laisser de côté la partie serveur.

Javascript

• jQuery-Accessible-RIA — Collection de plugins pour jQuery repensés pour être conformes aux normes régissant l’accessibilité sur le web (WAI) : WCAG 2.0 et ARIA. Initialement développé pour améliorer les bonnes pratiques de développement front-end chez Namics, le pack se concentre sur les besoins récurrents en webdesign : lightbox, validation de formulaires et menus à onglets accessibles sont prêts à l’emploi. Via Web CSS Design.

• Zooming with jQuery and CSS — Ce petit script jQuery très simple permettra à vos lecteurs de modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant (select).

• Jquery Pagination System — Les systèmes de navigation sont généralement fait côté serveur et sont relativement gourmands en requêtes MySQL et en preprocessing PHP. Cette pagination est réalisée à l’aide de jQuery, côté client, donc. Un exemple à copier-coller est disponible pour vous faire une idée.

• Javascript Framework Matrix — tableau comparatif des principaux frameworks Javascript : jQuery, Mootools, The Dojo Toolkit, Prototype, Script.aculo.us, Ext JS, Adobe Spry, BBC Glow et Yahoo! UI Library.

  Les exemples concrets de codes permettant de se faire une idée de la syntaxe et de la philosophie adoptées par ces frameworks : General, DOM Ready, DOM Basics, DOM Filtering, DOM Manipulation, Effects, Transitions, Events, Custom Functions, Ajax et Classes. Via LudiBlog.

• jsbin — Cette application en ligne dédiée aux tests collaboratifs de code Javascript (y compris Ajax) créée par Remy Sharp (créateur de html5shiv) fait en sorte qu’Internet Explorer affiche les nouvelles balises structurelles disponibles dans HTML5.

• Closure Library — Toute la puissance de développement de Google au service de cette bibliothèque Javascript qui s’ajoute à jQuery, Prototype, etc. Je serais curieux de savoir ce qu’en pense les experts : Google est-il plus rigoureux avec Javascript qu’avec HTML ?

• Cheat SheetS pour développeurs web — 25 fiches pour avoir sous la souris l’essentiel pour travailler sur le web.

• 88 liens pour l’intégrateur web — Au menu : WordPress, jQuery, typographie, CSS, webdesign… Que du bonheur !

PHP

• Un Chat élémentaire en Php/jQuery — Tout est dans le titre. Ce chat tout simple (outre qu’il permet une transition idéale pour passer de jQuery à PHP) se rendra utile dans moults occasions.

• Roll Your Own PHP Framework — Série de trois tutoriels pour créer votre propre framework PHP. Propose l’ensemble des fichiers en téléchargement : 1. Part I : Réécriture des URL’s et système de fichiers — 2. Part II : Templates — 3. Part III : Interaction avec la base de données.

• Passez à l’UTF-8 sans manquer une étape — Les soucis d’encodage sur un site web sont aussi nombreux que les éléments de la chaine du web qu’il faut prendre en compte : du format d’enregistrement des fichiers composant le document HTML jusqu’aux en-têtes renvoyées par le serveur, en passant par le charset indiqué dans la balise meta http-equiv, la base de données… etc. Ce tutoriel de Josselin Willette fait le point avec précision et concision, ce qui ne gâche rien.

• 50+ Really Useful Tools For PHP Developers — Que l’on soit novice ou expérimenté, les outils utilisés pour développer ont un impact significatif sur la productivité et la qualité du code produit. Voir Les outils utiles pour les développeurs PHP pour la traduction française.

• 25 New & Useful PHP Techniques & Tutorials. plein de code et d’idées pour vos développements : de la rotation d’image à la Facebook au parcours d’un répertoire avec PHP et jQuery en passant par la création de requêtes RESTful vous aurez l’embarras du choix.

• Prepared Statements in PHP and MySQLi — Les requêtes préparées en PHP et MySQLi sont peu utilisées malgré qu’elles offrent une sécurité accrue pour vos applications web. C’est le moment d’en apprendre davantage.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• 139 ressources Javascript et jQuery
• 100+ comptes Twitter pour webdesigner
• 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, what else!
• HTML5, CSS
• jQuery
• Graphisme, images et icônes
• Grammaire, orthographe et synonyme
• Miscellanées

Abandonnées peu à peu depuis mon utilisation intensive de Twitter où je partage l’essentielle de ma veille technologique (en plus de Delicious), les listes de liens commentées refond leur apparition sur ce blog. Si Twitter est le format idéal pour partager des liens au fil de l’eau, il n’est pas toujours évident pour le follower de s’y retrouver parmis les nombreux liens proposés. C’est pourquoi, j’en rajoute une couche dans cette nouvelle rubrique intitulée Le petit journal du web. Par ailleurs, je me dit qu’un tweet est bien peu de chose : rien ne vaut un bon vieux backlink en dur comme récompense du travail accompli et comme motivation pour celui à venir !

WordPress, what else!

Si on ne présente plus WordPress, ce n’est pas une raison pour ne pas rappeler que ce n’est pas qu’un moteur de blog ni même un CMS : c’est un moteur d’envies !

Pour en savoir plus sur nos envies, justement, Xavier Borderie lance un grand sondage pour mieux connaitre la communauté francophone de WordPress. A vos claviers !

En attendant, voici une sélection de liens qui devraient vous intéresser que vous soyez débutant de chez débutant ou un professionnel de la profession :

• WordPress Upgrade — Ce script développé par Martin Panel et Billyboylindien permet de mettre à jour automatiquement plusieurs installations de WordPress en une seule passe. Via Free Tools. Voici le déroulement des opérations : 1) Téléchargement de la dernière version de WordPress ; 2) Backup des fichiers et de la base de données de votre WordPress (pas besoin de renseigner les login et password) ; 3) Mise en place des nouveaux fichiers (conserve votre wp-content intact) ; 4) Mise à jour de votre base de données.

• L’ordre d’affichage des catégories par ordre alphabétique ascendant ou descendant n’est pas forcément le plus adapté. Pour y remédier, je vous propose deux plugins : Category Order qui date peut-être un peu mais qui me donne entière satisfaction et My Category Order qui ne fonctionne pas chez moi (peut-être à cause du thème Hybrid). Si vous le testez, n’hésitez pas à revenir pour nous en toucher deux mots.

• Widgetifyr — Créer un widget pour WordPress n’aura jamais été aussi simple. Il suffit de renseigner quelques champs concernant votre plugin et hop ! Widgetifyr se charge de toute la partie laborieuse. Il ne reste plus qu’à créer une belle fonction PHP… Via SlyDnet.

• Last but not least, voici la partie WordPress de la grosse grosse liste.

HTML5, CSS

Vous en avez sûrement du vous en rendre compte, la pression exercée par HTML5 (et CSS3) ne fait de plus en plus forte. Il y a quelques temps j’avais fait une tentative pour faire le point sur HTML5 et voir s’il ne s’agissait pas de vaporware vu les délais et les contraintes (absence de support des nouvelles balises par IE et guerre interne pour le contrôle des codecs audio et vidéo). Mais il semblerait que l’on puisse commencer à travailler avec HTML5.

• Envie d’utiliser HTML5 mais pas chaud pour mettre les utilisateurs d’IE de côté ? Facile, placez ce bout de code dans votre page web :

<!--[if IE]> <mce:script mce_src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <![endif]-->

Créé par Remy Sharp et inspiré par HTML5 Shiv de John Resig. On en profitera pour connaitre une des manières les plus courtes pour savoir si le navigateur est Internet Explorer avec var isMSIE = /@cc_on!@/false; ou plus court encore var isMSIE = /@cc_on!@/0;

• Galerie de site réalisés avec HTML5 — Comme son nom l’indique, ce site présente des sites web réalisés avec HTML5 et pourrait bien de prendre la place qu’avait CSS Zen Garden en son temps pour vanter les mérites des feuilles de styles. Bref, du «  en veux-tu en voilà !

• HTML et CSS orienté objet ? — Les bonnes pratiques de codage, la séparation de la forme et du fond par l’exemple dans ce tutoriel présentant les avantages de la pensée « objet » avec moult snippets de codes CSS3 et HTML5 pour aboutir à une page web comprenant un header, une section, une barre latérale (aside) et un footer.

• DOM vs namespace pour implémenter HTML5 sur IE6, IE7, Firefox2, Camino, etc.

• Comparez les meilleurs Frameworks — Avec une dizaine de frameworks PHP, 6 frameworks Ruby, de 12 frameworks Javascript et de pas moins de 22 frameworks CSS, ce comparateur de Framework permettra aux indécis d’avoir une vision claire des principaux atouts des uns et de découvrir les autres.

• CSS Sticky Footer Layout — Un pied de page (footer) toujours en bas de la page en CSS (sans Javascript, sans div surnuméraire) tout en restant compatible avec moult navigateurs.

• Last but not least, voici la partie ressources pour webdesigners de la grosse grosse liste.

jQuery

jQuery est toujours une bibliothèque Javascript aussi rapide et concise pour simplifier les longues traversées de DOM, border les manipulations hasardeuses d’événements, faire de jolies animations et dompter Ajax. jQuery est tout désigné pour changer la manière dont vous écrivez Javascript. Ou pas, d’ailleurs, parce qu’une des raisons de la popularité de jQuery provient de la foultitude de plugins prêts à être installés en deux coups de cuillères à pot, et c’est très bien ainsi !

• Lazy loader — Vous souvenez-vous du préchargement d’images en Javascript ? Et bien ce plugin pour jQuery fait exactement le contraire : il ne charge vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur. Le plugin est doté d’options plutôt bien pensées : seuil en pixels à partir duquel l’image sera chargée ; image de substitution en attendant le chargement de l’image ; apparition des images sur un événement click ou mouseover ; affichage des images après le déclenchement d’une fonction personnalisée, etc. Via Anis Berejeb.

• jQuery UI Multiselect — Améliore l’apparence et l’ergonomie de la balise HTML select basé sur jQuery 1.3 et jQuery UI 1.7, ce plugin dispose même d’un champs pour rechercher parmis les options proposées. Via arnaud-k.

• Faire un carrousel avec jQuery — Tutoriel très didactique qui décompose le déroulement des opérations pour réaliser un carrousel de base avec HTML, CSS et jQuery.

• jQuery Tools — Si jQuery UI propose des éléments d’interface de qualité, jQuery Tools va encore plus loin en proposant l’incorporation des animations Flash, une gamme étendue d’overlay, des tooltips à foison, des tabs, etc. Voir jQuery Tools: The missing UI library for the Web pour plus d’information. Et pour achever de vous convaincre, voici la page de démontration.

• News déroulantes à la iTélé — Très bonne solution pour avoir 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 avec explication de texte. Le tutoriel aborde également les aspects graphiques avec le découpage des images. Profitez-en pour jeter un oeil sur la création de plugins jQuery et sur cet effet de page cornée en quelques lignes de jQuery.

• Last but not least, voici la partie jQuery de la grosse grosse liste (plus de 240 plugins classés par thème)

Graphisme, images et icônes

Après le code, le visuel est un élément indispensable. Il peut être minimaliste ou exubérant. Coloré ou gris. Simple ou complexe. C’est à vous de voir.

• Worth1000 — Peu connu en France, Worth1000 est pourtant une référence internationale quand il s’agit de dégainer Photoshop. Voici la page des tutoriels qui vous permettra de vous faire la main pour participer aux nombreux concours thématiques auxquels j’ai participé en 2005. Cf. ma petite note sur Worth1000.
  

• 45 tutoriels pour Photoshop — Une bonne tranche de tutoriels assez variés pour élargir nos connaissances concernant le meilleur logiciel du monde ! J’ai particulièrement apprécié Creating a Vector Composite Effect from a Photo pour son impact visuel, Photo Cutout Photoshop Tutorial, Turn A Photo Into A Collage Of Polaroids, Making Skin Beautiful et Create an Illustrated Look From a Photograph.

• All Silhouettes — contient plus de 5 700 silhouettes vectorielles au format Illustrator (.ai) et Photoshop (brossse) réparties dans plus de 90 packs (via webstorming) : feuilles et palmiers, signalétique de danger ou de sport, flèches diverses, fleurs, chevaux, couples, vaisseaux spaciaux, bateaux, filles sexy ou au travail et autres silhouettes humaines.

• Icon Finder — Recherchez parmi plus de 110 000 icônes et 230 collections avec ce moteur de recherche très bien pensé : recherche par taille (12px, 16px, 16px, 32px, 48px, 64px et 128 pixels) ; par couleur de background ; pour usage commercial seulement ou non, etc.

Une suggestion des recherches liées à la vôtre vous permettra d’élargir votre horizon. Bref, c’est le coup de coeur de cette semaine (que j’ajoute à la grosse grosse liste des 1000 ressources pour webdesigner). Merci @codeur !

• 25 blogs de graphistes — jolie liste dont votre serviteur fait partie.

• Last but not least, voici la partie icônes et goodies pour Photoshop de la grosse grosse liste.

Grammaire, orthographe et synonyme

• Ressources gratuites pour s’améliorer en français — plus de 80 liens pour décrypter les mots et expressions de la langue française. Mais aussi : des dictionnaires en ligne, de synonymes, de rimes, conjugaison, dépannage linguistique, grammaire et orthographe, terminologie, vocabulaires thématiques, thésaurus, dictionnaires de sigles, d’acronymes et d’abréviations, étymologie, littérature classique, dictées, logiciels, forums et portails, argot etc.

• 11 ressources pour mieux bloguer en français — comme son nom l’indique ;)

Miscellanées

• Mac OS X est-il vraiment ergonomique ? — Comparatif entre un environnement Linux (Kubuntu) et Mac OS X Léopard : gestion des fenêtres, explorateur de fichiers et autres applications. Conclusion : Et vous ? Qu’est-​ce qui vous fait rester sous Mac ?

PS : Le petit journal du web est gratuit : faites tourner !

Articles sur le même sujet

• Le petit journal du Web — Décembre 2010
• 23 listes pour Webdesigners
• Le petit journal du web — Non, Twitter n’a pas tué les Backlinks… La preuve !
• HTML5 Boilerplate Thematic — Un «WordPress Theme Framework» complet
• 390 ressources Javascript & jQuery

Cette liste de ressources devrait rendre de grands services à l’intégrateur HTML & CSS ainsi qu’au développeur web. en effet, vous y trouverez : un générateur de miniatures pour la page d’accueil de votre blog WordPress ; des outils pour valider l’ensemble de votre site ; un fichier PHP pour gérer votre base de données et des plugins jQuery tous plus intéressants les uns que les autres, etc. Il s’agit du meilleur des bons plans que je propose sur mon compte Twitter integrateur_css. Stay tuned and mind the gap!

WordPress : redimensionnez et affichez une miniature à partir des images de vos articles

Je vous ai parlé dernièrement (dans les bons liens WordPress) du script get_post_images() associé à la fonction first_thumbnail() pour afficher une miniature en homepage, par exemple, en prenant la première image d’un article. Mehdi Kabab vient d’apporter une amélioration substantielle à la fonction first_thumbnail() pour prendre en compte le script timthumb qui permet de générer une miniature aux dimensions que vous voulez (via la bibliothèque graphique GD) plutôt qu’un redimensionnement HTML lourd de conséquence sur le poids de votre page d’accueil.

Vous pouvez voir cette petite merveille en action sur la page d’accueil de ce blog : les miniatures sont redimensionnées et affichées grâce à cet ensemble de fonctions. Pour les souhaits et surtout les remerciements c’est par ici que ça se passe ;)

Pages web et bases de données

• Validateur — Validez votre site Web en entier grâce à l’outil de validation multipages (via truffo). Ce service est développé et maintenu par le Réseau Proze et s’appuie sur le service de validation du W3C qui détient les droits d’auteur de son service.

• Adminer — est un outil tenant en un seul fichier PHP qui permet de gérer une base de données MySQL à la manière d’un phpMyAdmin light. Existe également sous forme de plugin pour WordPress.

• Firebug Lite — Ce simple fichier Javascript — disponible sous forme de bookmarklet — va superposer l’essentiel des commandes de Firebug à la page en cours.

Javascript et plugins jQuery

• jQuery Magnifier Loupe — propose un zoom pour vos images. Utilise intelligemment la propriété longdesc pour zoomer à partir d’une miniature (thumbnail). Il reste possible de « fabriquer » la miniature avec les propriétés HTML width et height. (via Amicalement Web).

Attention tout de même au caractère peu accessible de cette solution basée sur l’attribut HTML longdesc qui permet de fournir une description de l’image pour les malvoyants comme me le rappelle Sébastien Delorme sur Twitter ici, ici et ici ;)

Cela dit, le script ne nécessite pas obligatoirement l’attribut longdesc pour fonctionner ; il est possible de déclencher la loupe en utilisant la classe jLoupe sur l’élément img concerné !

• qtip jQuery Plugin — Sans doute la solution ultime pour gérer les info-bulles (tooltips) : cross browser, dégradation gracieuse, coins arrondis personnalisables, positionnement facile, effets personnalisables, AJAX, etc. (via arnaud-k)

• Vanadium — Validation et vérification des champs d’un formulaire à l’aide de l’attribut class. Par exemple : <input class=":required" type="text"> pour un champs requis ou <input class=":format;/^(vanadium)+$/i" type="text"> pour un champs qui doit recevoir la chaine de caractère vanadium. Possibilité de valider via AJAX avec <input id="pass" class=":ajax;/username_checker/check.json" type="text"> par exemple.

Quelques trucs pour vos CSS

• 21 polices de caractères à intégrer avec @font-face — Cette propriété CSS2 permet d’incorporer les informations vectorielles relatives à une fonte dans votre page web sous la forme @font-face { font-family: GraublauWeb; src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype"); } à utiliser ensuite comme suit : h1 { font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif; }

• Ultimate IE6 Cheatsheet 25+ hacks et contournements pour faire sa fête à IE6 — Avec des parts de marché estimées à 18% ou 25% selon les sources, l’intégrateur web doit encore se coltiner avec le dernier de la classes des navigateurs.

Miscellanées

• A l’occasion du Last Call pour l’écriture des spécifications pour HTML5, Florent V. répond à nos questions sur les différents DOCTYPE et autres types MIME qui peuplent la jungle du développement web. Des réponses synthétiques seront publiées dans le courant de la semaine prochaine.

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 100+ comptes Twitter pour webdesigner
• Le petit journal du web — WordPress, développement web, etc.
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Sur webdevfr, les discussions vont bon train sur HTML5 : Yves Van Goethem soumet à notre attention deux méthodes disponibles aujourd’hui pour pallier les insuffisances des anciens navigateurs (Firefox 2) ou des mauvais élèves du W3C (IE6, IE7) :

DOM vs Namespace html:

1. Le DOM pour créer from scratch ex nihilo les balises manquantes. Cette méthode préconisée notamment par John Resig consiste à créer les éléments dont nous avons besoin via Javascript :

   
       <!--[if IE]>
           <script type="text/javascript">
               document.createElement("header");
               document.createElement("footer");
               document.createElement("nav");
               document.createElement("article");
               document.createElement("section");
           </script>
       <![endif]-->
   

   Pour automatiser la création des éléments présents dans HTML5, Remy Sharp nous propose HTML5 enabling script :

   
      <!--[if IE]>
          <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
   

2. Le préfixe html: pour déclarer l’élément dans son namespace :

   
   <html:header>Ceci est un header</html:header>
   

Pour faire le point sur les avantages et inconvénients de ces deux techniques, voici l’excellent article How to get HTML5 working in IE and Firefox 2 suggéré par Adrien Leygues dans le fil de discussion en question.

Un script PHP à écrire…

Pour réunir le meilleur des deux mondes, Yves Van Goethem propose de servir les éléments HTML avec ce préfixe uniquement pour IE, le code serait réécrit par un moteur en back-end pour obtenir un script côté serveur (et non plus dépendant de Javascript) pour automatiser la prise en compte des balises HTML5 par IE, ce qui permettrait d’utiliser les nouvelles balises HTML5 dès avant-hier ! N’hésitez pas à vous manifester si vous avez déjà développé un script ou simplement si vous avez des idées sur la question.

En attendant Godot 2022 ^_^v

Voici un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js :

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8 />
            <title>HTML 5 complete</title>
            <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            <style>
                article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
            </style>
        </head>
        <body>
            <p>Hello World</p>
        </body>
    </html>

Notez le display: block pour déclencher la prise en compte des éléments HTML and the cat’s in the bag!.

Links for Free

• http://html5doctor.com/html-5-boilerplates
• http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
• http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web
• http://groups.google.fr/group/webdevfr
• http://ejohn.org/html5-shiv
• http://remysharp.com/2009/01/07/html5-enabling-script
• http://viralpatel.net/blogs/2009/05/html-5-the-new-html-kid-on-the-block.html
• http://www.alistapart.com/articles/previewofhtml5
• http://bbxdesign.com/2009/06/08/introduction-au-html-5
• http://www.iheni.com/html5-tips-structure-doctype-aria

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• HTML5 et CSS pour l'intégrateur web
• 390 ressources Javascript & jQuery
• 100+ Polyfills et Fallbacks pour HTML5