C’est une question récurrente : mais combien coûte un thème WordPress ? A cette question simple, je voudrais apporter quelques éléments de réflexion. J’ai la conviction qu’une réponse toute faite ne peut être juste. Par ailleurs, je trouve qu’il règne une certaine hypocrisie sur la formation des prix dans le Webdesign. Il semble normal — lorsqu’on achète une voiture ou une machine à laver — de donner des indices sur le budget que l’on est prêt à consacrer. Dans le Web Design (et sans doute dans les prestations de services en général), la question du budget semble taboue. J’ai même parfois l’impression que les clients potentiels ne se posent pas la question, comme si l’on vendait du vent ; pourtant, livrer un site Web correspondant aux besoins du client n’est pas une mince affaire et demande beaucoup de travail, y compris en utilisant un CMS comme WordPress (mais c’est valable aussi pour Drupal, Pluxml ou NekoCMS).

5 étapes pour concevoir un thème WordPress

La création d’un thème pour le CMS WordPress se décompose idéalement en cinq étapes :

1. Recueil des besoins — Réception d’un email expliquant le contexte de la demande ou document plus complexe en plusieurs partie (cahier des charges ?).
2. Récapitulatif des besoins — Envoi d’un email précisant ce qui sera effectivement vendu, en tenant compte du périmètre des fonctionnalités retenues (document à faire valider avant d’attaquer le point n°3).
3. Conception de la charte graphique —  Il s’agit de formaliser graphiquement les besoins du client (à cette étape, il a versé 30% de la commande) en présentant une ou plusieurs pistes graphiques selon ce qui aura été défini à l’étape précédente. Notez que le nombre de proposition est souvent lié avec l’importance du budget alloué (document à faire valider avant d’attaquer le point n°4).
4. Intégration Web (HTML, CSS & jQuery) — Lorsque la charte graphique est acceptée et que les BAT sont OK, il est temps de transmuter le design réalisé sous Photoshop dans un format lisible par les navigateurs.
5. Mise en place des fonctions WordPress — Affichage des billets et autres éléments constitutifs du blog ou du site Web (ne soyons pas sectaire).

A cela, il faut ajouter les allers-retours pour les modifications (corrections, changements, etc.) qui sont chronophages… Vous l’aurez compris : la mise en place d’un thème WordPress ne diffère en rien de la mise en place d’un site Web dynamique ! La seule différence, c’est le point n°5 qui permet de faire l’économie de la partie PHP/MySQL : les équipes de WordPress ont déjà fait tout le travail de développement.

L’intérêt d’utiliser WordPress pour son site Web ou son blog, c’est de pouvoir profiter de l’étendue des fonctionnalités proposées par ce CMS, sans compter la qualité du Back Office accessible aux utilisateurs les moins avertis. On peut dire que WordPress est l’ami développeur PHP/MySQL qui travaille gratuitement, ou presque.

Toutefois, et sans vouloir relancer la polémique pour savoir si l’on peut parler de développement WordPress, il faut savoir que l’API de WordPress ne vient pas s’intégrer toute seule dans la maquette. Il faut un minimum de connaissance en développement Web (PHP, MySQL) pour mettre en place un thème WordPress un peu complexe. Et il est normal que le tarif en tienne compte.

Un thème, des Templates ?

J’allais oublier. Maintenant que nous avons en tête toutes les étapes nécessaires, il faut encore prendre en compte le fait qu’un thème WordPress est composé d’un nombre de Templates variable selon les besoins exprimés à l’étape n°1 et retenus à l’étape n°2.

Un thème WordPress peut se composer d’un seul modèle de page (index.php) pour accueillir l’ensemble des contextes d’affichage possibles (catégories, tags, recherche, articles seul, images, etc.). Le thème WordPress par défaut (Twenty Ten) comporte plus de 10 Templates. Le tarif tiendra évidemment compte à la fois du nombre de Templates et des différences qu’ils présentent entre eux.

Et les plugins ?

Qui dit WordPress, dit Plugins. Il est rare d’installer WordPress sans passer par le menu Extensions. Celles-ci peuvent nécessiter des réglages de configuration plus ou moins complexes. Certaines nécessitent de mettre les mains dans les Templates et les fichiers CSS pour adapter le code HTML produit en sortie à votre charte graphique toute neuve.

Combien ça coooûûûte !

cf. point n°1 ;)

Ce petit coin de blog est le cadre idéal pour vous présenter quelques outils en ligne qui vous permettront de réduire le temps passé à réaliser l’intégration de vos sites web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc. Pas vraiment nouveaux, ils méritent quand même le détour ! 

• Construct Your CSS — Editeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya pour mettre à la disposition des intégrateurs Web une boite à outils pour faire des CSS et du HTML sémantique.
• pagecolumn — Générateur de maquettes en plusieurs colonnes avec CSS 2.0 en utilisant les `%`, les `px` ou les `em`. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets.
• drawter — Générateur de code HTML et CSS en ligne. Lire Avec drawter, dessiné, c’est gagné.
• CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !
• JotForm — Création de formulaires en ligne.
• Em Calculator — Convertit vos pixels en `em` pour faciliter la mise en place de designs CSS fluides.
• CSS Compressor — Compressez vos feuilles de style CSS. Nombreuses options disponibles.

J’arrive un peu après la bataille, mais que voulez-vous, il fallait bien que mon pauvre Modem Olitec 56K ⁽¹⁾ prenne le temps de charger les 80+ plus belles polices de caractères pour un design professionnel que nous propose Smashing Magazine. Si je n’ai jamais douté de la qualité des articles publiés par ce qu’on peut considérer comme l’un des 10 meilleurs blogs du monde, je dois avouer que mon passé d’infographiste print amoureux de la belle typo a refait surface pour traquer la faute de goût…

… en vain ;)

Sur les 80 polices sélectionnées, les 30 premières sont incontournables : on en retrouve la moitié sur au moins 80% des identités graphiques et cartes de visite un peu partout dans le monde depuis quelques dizaines d’années…

Les 50+ typos suivantes sont certainement moins connues malgré des qualités qui crèvent l’écran : un look and feel jeune et dynamique (ce sont des typos bien plus récentes que les 30 premières), un joli dessin, et plus que tout autre considérations, du caractère ! En même temps c’est la moindre des choses, non ?

Coup de coeur pour Le monde Courrier, Parisine PTF, Palatino Sans & Informal, Whitman, Insider et Mello Sans.

Lire 80 Beautiful Typefaces For Professional Design.

Voici mes 11 typos préférées

• Akzidenz Grotesk
• Avant Garde Gothic
• Avenir
• Barmeno
• Formata
• Helvetica Neue
• Insignia
• Neuzeit
• OCRB
• Officina Sans
• Rotis Sans Serif

⁽¹⁾ Ce billet est issu d’un brouillon daté du 26 août 2007 à une époque où j’ai eu l’occasion de tester la connexion de secours de Free ;)

Les Systèmes de gestion de contenu (CMS) ont tendance à devenir de plus en plus lourds à mesure que le temps passe. Il est courant de se pencher sur les poids lourds du secteur (WordPress, SPIP, Joomla!, Drupal ou Typo3 pour ne citer que les plus populaires), mais il peut s’avérer utile d’avoir des solutions légères sous le tapis de souris. Sur les trois solutions, deux n’utilisent pas de bases de données. Toutes ont en commun la légèreté et la facilité d’utilisation.

Neko CMS : un CMS/Moteur de blog simple, rapide et libre

Neko CMS — Ce Moteur de blog libre et open source sous licence LGPL – dont les maitre-mots sont simplicité, souplesse, convivialité et économies en ressources — permet de mettre en place un système de blog avec des pages indépendantes. Plusieurs modules sont disponibles pour proposer des sondages ou l’envoi et la gestion de fichiers. Le Neko CMS est fourni avec le logiciel NekoConf qui facilite la création du fichier de configuration pour la base de données MySQL.

99ko : CMS simple et léger sans base de données

99ko — Ce CMS très léger (moins de 100 ko) utilise des fichiers textes pour stocker les données pour créer votre site web en deux temps, trois mouvements. La mise en place d’un thème personnalisé est facilitée par un système de thème pour créer vos templates et vos feuille de styles CSS. 99ko est parfait pour la créer un site «vitrine» : gestion des pages, formulaire de contact, actualités. Extensible par le biais de plugins. Suivez les nouveautés sur le compte Twitter @99ko. Via Twevelopers.

PluXml : Blog ou CMS à l’XML

PluXml — Idéal pour créer un site ou un blog sans connaissance en programmation. Même pas besoin de base de données : PluXml stocke les textes dans des fichiers XML que vous pourrez copiez pour sauvegarder votre blog.

Mais aussi :

• PyroCMS — Un CMS léger et modulaire basé sur le Framework PHP CodeIgniter. Idéal pour ne pas repartir de zéro.
• GuppY — Permet de générer un site web interactif et complet avec une grande facilité. Gratuit et sans base de données.

Voici quelques liens qui vous permettront de choisir les couleurs de vos sites web. J’ai volontairement laissé de côté les outils en ligne spécialisés dans la création de palettes de couleur dont j’ai déjà eu l’occasion de parler dans Choisir sa palette de couleur.

• Liste de couleurs — Ce tableau reprend la plupart des couleurs communes classées dans l’ordre alphabétique. Fournit les valeurs hexadécimales, RVB, CMJN et TSL en plus d’un échantillon visuel. Très pratique quand il s’agit de se comprendre entre gens qui ne proviennent pas forcément du même monde.
• chroma — Ce dictionnaire thématique regroupe les noms de couleur, de teinte ou les nuances, comme : « rouge », « ambre », « olive » ou « mordoré », « zinzolin », « purpurin »… mais également « verdoyant », « métallique », « plombé ». Les couleurs sont classées par ordre alphabétique ou par teinte, mais aussi par champs chromatique, qualificatifs ou par fiche descriptive de la couleur.
• Coloria — Cette liste regroupe plusieurs centaines de couleurs hexadécimales avec pour chacune leurs noms usuels dans plusieurs langues (mais surtout en finnois…). N’hésitez pas à vous rendre sur la racine du site et à explorer le site avec une traduction automatique si le finnois n’est pas votre langue maternelle ;)
• 0 to 255 est un outil en ligne très pratique pour afficher et copier les variations autour d’une couleur de base par palier de 3% ou 4%. Lire 0 to 255 — Trouvez les variations autour d’une couleur de base pour plus d’informations.

Mon dernier article sur le référencement et le positionnement sur les moteurs de recherche commence à dater un peu. Pour raffraichir un peu les tags SEO et référencement internet voici une idée toute simple pour ratisser plus large au niveau des requêtes qui permettront aux internautes de tomber sur votre blog. Loin d’être un guide sur le référencement, cette astuce s’adresse aux blogueurs désirant optimiser leur positionnement sur Google en restant concentrés sur ce qu’ils savent faire le mieux : la rédaction web ! Grâce aux options proposées par Google, il est possible de faire l’impasse sur l’étude de marché pour le choix des mots-clés. Et, cerise sur le gâteau, il s’agit de référencement gratuit ;)

Google Suggest

Il s’agit de la liste déroulante qui apparait lorsqu’on commence à saisir une requête dans le champs de recherche de Google. Pratique pour avoir une idée des expressions à utiliser dans un article, qu’il s’agisse du titre, des sous-titres ou du texte.

Google propose aux internautes d’élargir leurs recherches aux termes fréquemment recherchés.

Exemple de suggestion de recherche sur le terme «référencement». Cliquez pour agrandir l'image.

Recherches associées

Habituellement situées à la fin de la page de résultats, les Recherches associées ont fait leur apparition dans le menu latérale de Google : Plus d’outils ->Recherches associées.

Les recherches associées sont plus complètes que les suggestions et permettent d’élargir l’horizon des termes à utiliser.

Exemples de recherches associées au terme «référencement». Cliquez pour agrandir l'image.

Mise en pratique avec WordPress

Si vous utilisez WordPress, vous avez certainement remarqué que l’URL pour accéder à un article en particulier reprend votre titre débarrassé des accents, avec des tirets pour séparer les mots. Ce permalien (pour lien permanent) modifiable est parfait pour ajouter un terme issu de la Recherche associée.

A l’origine, l’intitulé de ce billet était Astuce pour améliorer le référencement naturel. Google me suggère les termes référencement Google. Il suffit de modifier le permalien (sous le champs Titre) pour changer l’URL affichée par défaut par WordPress et la remplacer pour astuce-ameliorer-referencement-google.

Comme vous pouvez le constater, il m’est venu une autre idée de titre bien plus plaisante susceptible d’attirer l’attention de l’internaute au milieu des 20 millions de résultats retournés par Google sur la requête Référencement de sites Web. Bref, le beurre (les mots-clés pour plaire à Google) et l’argent du beurre (un jeu de mots pour distraire l’être humain qui se cache derrière toute requête). Reste la crémière (le nombre de pages vues) !

Conclusion

Pour référencer votre site web dans les moteurs de recherche, il suffit parfois de peu de chose. Prenez l’habitude de jeter un oeil sur Google Suggest ou les Recherches associées avant de cliquer sur Publier pour modifier votre texte en fonction des termes suggérés pour élargir l’audience de votre site internet.

« Si le client veut qu’on prenne en compte IE6, il faudra qu’il paie pour ça » via @fran6. C’est clair, c’est net, mais un peu court (en même temps en 140 caractères, difficile de développer). Ca fait longtemps que pour les développeurs et les intégrateurs web, IE6 est comme une écharde qui n’arrête pas de s’infecter ou plutôt comme le dit Microsoft lui-même : «Surfer avec Internet Explorer 6, c’est comme boire du lait périmé depuis 9 ans». Mais de quoi parle-t-on exactement ?

Développement front-end ?

Oui, ça veut dire Javascript. Mais ça fait longtemps que les bibliothèques Javascript comme jQuery ont bouché les nids de poule qui se trouvaient sur la voie du développement Cross-Browsers. Rien que ce terme parait désuet aujourd’hui, alors qu’il était le Sésame ouvre-toi pour trouver du Javascript compatible avec plusieurs navigateurs il y a quelques années.

Intégration web ?

Oui, ça veut dire mise en page avec HTML et CSS. Mais ça fait longtemps que les Frameworks CSS ont nivelé la voie, au prix de quelques déclarations spécifiques que l’on peut facilement cacher sous le tapis des commentaires conditionnels !

Graphisme ?

Oui, ça veut dire transparence, coins arrondis, dégradés, ombres portées, etc. Mais ça fait longtemps que… Nan, je plaisante. Pour le coup, c’est assez récent et le tempo correspond pile-poil à l’arrivée en fanfare de CSS3, ce qui a aiguisé les appétits.

Alors oui, c’est assez rageant de constater que tous ces beaux joujoux que l’on voit en rêve ne fonctionneront pas Internet Explorer, y compris jusqu’à la version 8 pour certaines propriétés !

Photoshop ou CSS3 ?

On parle de plus en plus de design dans le navigateur (cf. mon tutoriel paru dans le magazine Web Design), ce qui est une bonne chose. Mais cette tendance ne doit pas être l’arbre qui cache la forêt. En effet, il est très, mais alors très rare que les fantaisies graphiques des .psd que j’ai eu l’occasion de découper jusqu’à présent aient pu se satisfaire des propriétés CSS3. Cela voudrait dire que le graphiste ne s’est pas cassé la tête pour concevoir ses bords arrondis, ses dégradés, ses ombres portées ou ses dégradés dont le rendu reste perfectible, sans compter les différences d’affichage selon les navigateurs.

Faire payer quoi en plus, exactement ?

Ce qui m’étonne souvent, c’est qu’en général ceux qui tiennent ce discours sont des travailleurs indépendants, libres de fixer leur prix. De mon temps, on fixait les tarifs en fonction du temps passé, multiplié par le tarif horaire… Il suffirait peut-être de revenir aux fondamentaux ;) Les problèmes liés à IE6 ne sont pas tant des problèmes de développeurs ou d’intégrateurs, mais le signe que le cahier des charges n’a pas été bien défini et que le devis a passé sous silence les contraintes Cross Browsers.

Le bonheur est dans le cahier des charges

Ce que je trouverais assez smart, c’est d’ajouter une ligne dans le devis pour proposer une remise de xx% pour inciter le client à ne pas prendre en compte IE6 dans tout ou partie du développement de son site. On pourrait par exemple fixer ce pourcentage en fonction du nombre d’utilisateurs surfant avec IE6 dans le secteur d’activité du client, genre 15% de IE6 dans les stats, 15% de remise !

Après la conférence F8 de Facebook, plusieurs dizaines de milliers d’éditeurs de blogs se sont empressés d’ajouter un bouton Like ou Recommend dans l’espoir de créer le buzz sur Facebook. Je n’ai pas fait exception à cette règle. Toutefois — sans remettre en question la pertinence de l’affichage de ce bouton dans certains cas — je n’ai pas constaté de résultat en 15 jours d’utilisation. C’est en supprimant ce gadget, qu’une citation de Jean Cocteau m’est revenu à l’esprit : Il n’y pas d’amour, il n’y a que des preuves d’amour ! J’ai ensuite cherché un moyen de concrétiser ce sentiment autrement que par un J’aime ou J’aime pas.

Ouvrir un compte Paypal

Dans un premier temps, il est nécessaire d’ouvrir un compte sur Paypal. C’est simple, rapide et ça ne coûte rien. J’utilise ce service depuis plusieurs années sans problème pour régler mes achats sur eBay, à l’origine, mais aussi pour la plupart de mes pérégrinations consuméristes et réticulaires quand c’est possible.

Créer votre bouton Faire un don

Une fois connecté à votre compte Paypal, cliquez sur l’onglet Solutions e-commerce puis sur Paiements sur site marchand dans le menu situé sur la gauche. Sous les icônes de cartes bancaires, vous trouverez des exemples de boutons de paiement à installer. Choisissez Acceptez des dons en ligne puis Créer un bouton.

Choisissez un type de bouton et saisissez les détails de votre paiement

A cet étape, le plus important est de Personnaliser le bouton. Par défaut, le bouton Faire un don est sélectionné mais rien ne vous empêche d’utiliser votre propre image pour faire office de bouton, comme je l’ai fait sur ce blog avec l’image située à droite du logo. Pour cela, vous devrez créer votre visuel ou utiliser une image existante. Dans les deux cas, il faudra fournir son URL.

Enregistrez vos boutons (facultatif)

Cocher cette case est toujours utile : qui ne voudrait pas protéger ses boutons des modifications frauduleuses ?

Fonctions de paiement (facultatif)

Choisissez les options permettant à vos gentils donateurs de vous laisser un mot ou Diriger vos clients vers cette URL s’ils annulent leur paiement ou encore Diriger vos clients vers cette URL lorsqu’ils terminent leur paiement. L’ajout des variables avancées permettra de mettre en place un tracking pour affiner vos statistiques dans votre outil de mesure d’audience préféré.

Il ne vous reste plus qu’à Créer le bouton et à copier-coller le code HTML du formulaire dans votre template WordPress ou dans un Widget Text à l’endroit où vous voulez faire apparaitre votre bouton Paypal.

Créer des zones de Widgets dans WordPress

Si votre thème ne dispose pas de zones widgétisables, voici quelques tutoriels qui devraient vous aider dans cette tâche :

• Les widgets dans WordPress avec widgétisator ;)
• Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets
• [Résolu] Problème de duplication et décalage des widgets dans WordPress

Il a bon dos, Cocteau…

Oui, je le reconnais bien volontiers : citer Jean Cocteau pour justifier une tentative de monétisation est un peu décalé, mais j’assume ;)

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.

Une petite note personnelle pour annoncer la parution du hors-série n°5 du magazine Webdesign (webdesignmag.fr) dans lequel j’ai écris un tutoriel sur la création d’une page web réalisée avec HTML5 et CSS3 sans image, avec une dégradation gracieuse dans les navigateurs ne prenant pas en charge les coins arrondis, les ombres portées ou les dégradés.

En prime, les fichiers HTML et CSS sont disponibles sur le CD du magazine et l’ensemble est disponible pour la modique somme de 12,90€ dans les bons kiosques à journaux ! Cerise sur le gâteau, vous y trouverez une belle interview de Raphaël Goetter à propos d’Alsacréations.

Réussir son site avec HTML5, jQuery et CSS3. 18 tutoriels : vidéo et HTML5, coins arrondis, ombres portées, lightbox, légendes animés et des interviews de professionnels du web ainsi que des dizaines de liens.

100% tutoriels exclusifs sur HTML5, CSS3 et jQuery

Design dans le navigateur et amélioration progressive avec HTML5 et CSS3 : un exemple fonctionnel pour mettre en oeuvre les nouvelles balises en commençant par le balisage du contenu, l’ébauche de la page, le choix des couleurs, la structure générale de la page.

Retrouvez-moi à la page 128 du magazine !

Une interview de Raphaël Goetter pour découvrir le site d’Alsacréations qui propose à côté de son activité d’agence Web, un site communautaire très riche.

Une bien belle interview à propos d'Alsacréations.

Lire WebdesignMag hors série spécial HTML5, CSS3 et jQuery