css 4 design » Images

390 ressources Javascript & jQuery

Bruno Bichet — Mon, 28 Nov 2011 18:42:41 +0000

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é :-)

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 !
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.
Blueberry – Plugin jQuery expérimental et open source pour faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design).
Elastislide – Carousel jQuery réactif (Responsive Web design) pour que l’utilisateur profite au mieux des caractéristiques de son écran.
Decoding jQuery – Immersion (en anglais) dans le code source de jQuery avec des explications sur les fonctions extend(), isWindow(), parseXML(), globalEval() et toArray().
Codecademy – Apprendre les bases de la programmation Javascript de manière interactive et pro-active !
FlexSlider – Ce Slider permet de faire défiler du contenu avec le marquage HTML de votre choix, le tout utilisable au clavier.
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.
spin.js – Afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3.
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)})
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.
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.
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.
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).
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é.
Apprise – Dialoguer avec les utilisateurs autrement qu’à travers les boites modales alert() ou confirm() générées par le navigateur.
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.
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.
jQuery-Placeholder – Utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5.
jQuery SuperBox – Lightbox jQuery pour afficher des images, du contenu chargé en Ajax ou un fragment de la page via une ancre interne.
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.
Full background image slider – Afficher un diaporama sur toute toute la fenêtre du navigateur (ou le container que vous voulez).
Minify – Script PHP5 pour combiner et minifier les fichiers CSS ou Javascript.
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.
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.
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.
jQuery radioSwitch – Transformer des boutons radio HTML en superbes Sliders d’un coup de magie CSS3 et Javascript.
jNotify – Afficher une boite de dialogue pour informer l’utilisateur du bon ou du mauvais déroulement des opérations.
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.
jMenu – Système de menu horizontal en jQuery etjQuery UI qui autorise un nombre illimité de sous-menus.
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.
qTip – Plugin jQuery pour créer des infobulles en affichant tout types de contenus : attribut title ou attribut personnalisé tooltip, ou une image.
markItUp! – Moteur de balisage léger qui transforme un textarea en éditeur HTML, Textile, Wiki, Markdown, BBcode ou votre propre système de balisage.
Slides – Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama.
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».
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.
Simple Tabs w/ CSS & jQuery – Tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets.
SimpleTabs – Javascript autonome pour mettre facilement en place un système de navigation à base d’onglets (tabs).
CSS3-MediaQueries-JS – Bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2.
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.
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.
jQuery Cycle — Ce diaporama / Slideshow propose 6 effets de transition avec pas moins de 50 paramètres.
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.
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.).
Easy Slider – Diaporama horizontal ou vertical avec navigation numérique qui propose un défilement doux lorsque l’on saute une ou plusieurs diapos.
innerShiv — Le contenu HTML5 généré par innerHTML fonctionne enfin dans IE.
CSS Text Wrapper – Habiller vos textes HTML avec n’importe quelle forme non-rectangulaire : courbe, zig-zag ou ce que vous voulez !
jCarousel – Contrôler le déplacement horizontal ou vertical d’une liste d’éléments avec ce Plugin jQuery.
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.
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 !
bxCarousel – Carousel en jQuery qui boucle sur lui-même et qui fonctionne avec tout type d’éléments HTML contenus dans une liste.
TinyFader — Slideshow poids-plume avec effet de fading. C’est la version autonome deTinySlideren (TinyFader n’a pas besoin d’un framework Javascript).
Jquery Looped Slider – Diaporama jQuery qui boucle sans accroc lorsque le script atteint la dernière «diapo» de votre Slider.
Easy List Splitter – Plugin jQuery qui affiche des listes HTML ordonnées (OL) ou non-ordonnées (UL) en colonnes.
Nivo Slider – Diaporama qui offre 9 transitions de très bonne facture pour ajouter un peu de peps à nos Sliders images.
AviaSlider – Diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images.
Stop (Mis)Using Return False – Toutes les subtilités relatives à la gestion des événements dans jQuery.
Advanced Columns using the :nth-child(N) – Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery.
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.
ChangeClass — Fonction Javascript pour changer de classe CSS à la volée.
CLEditor – Editeur HTML WYSIWYG de 10 ko à ajouter facilement à votre site Internet, compatible avec tous les navigateurs (IE6 inclus).
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.).
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.
jQuery.eventManager — Améliorer la gestion d’événements avec jQuery.
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.
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é.
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.
É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
.
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.
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.
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.
Retina Display — Tutoriel pour refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur la version 4 de l’iPhone.
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.
Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow en autant de parties qu’ils contiennent de fieldset.
clueTip — Afficher des bulles d’aide complexes sur n’importe quel élément au survol de la souris (ou sur un clic, en option).
Smokescreen — Convertir des animations Flash simples en HTML5 et Javascript.
Lightbox_me — Lightbox jQuery d’un poids de 1 Kb pour afficher n’importe quel élément avec un effet Lightbox sobre et efficace.
jQuery-JSON — Convertir des données au format JSON via quatre nouvelles fonctions à l’object jQuery $ pour faciliter l’utilisation du format JSON.
SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.
Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
Griddy-Overlay – Afficher une grille par-dessus votre page web avec jQuery.
Scriptsrc — 10 Frameworks Javascript à emporter.
UI.Layout – Créer des interfaces utilisateurs avec jQuery.
WebProjectHelper — Générateur de structure MySQL et de classes PHP.
jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
Colorbox — une « lightbox » légère et extensible en jQuery.
jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
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.
Bloc de login à la Twitter avec jQuery – Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
jQuery.fn.sort — Trier des éléments avec jQuery.
Popeye 2.0 – Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
FAT-FREE — Framework PHP léger et modulaire.
jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
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.
simpleCart (js) – Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
Modernizr — Détection des fonctionnalités CSS3 et HTML5.
20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
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 !
Webform to wizard – Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
DLink — Afficher le type de cible des liens avec Javascript.
Splash — un diaporama en pur Javascript.
Optimiser le chargement des AdSense – Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
Custom jQuery Selectors – Créez des sélecteurs personnalisés avec jQuery.
TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
Clickoutside Event — Détectez les clics en dehors d’un élément.
Comment, jQuery va tuer Flash ? – Question surprenante, mais force est de constater que Javascript a fait du chemin depuis window.open() !
jQuery Tutorials for Designers – 13 Tutoriels jQuery pour Webdesigners.
Starter — Générateur de plugins jQuery.
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.
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.
jQuery SimpleTree Drag&Drop – Construisez des arborescences à la mode de Windows.
jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
DataTables — Pagination et tri des données pour vos tableaux HTML.
jSocial – Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
jQuery Color Animation – Support du RGBa pour « jQuery Color Animations».
jQuery vs Mootools – Choisir jQuery ou Mootools en connaissance de cause.
6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
Plupload – Gestionnaire de « téléversement » (upload) multiple en jQuery.
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.
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.
flot — Créez des graphiques avec jQuery.
jQuery Source Viewer – Naviguer à l’intérieur du code source de jQuery.
jQAPI — Documentation alternative pour jQuery 1.4.1.
How to Easily Create a JavaScript Framework – Créez votre framework Javascript en 4 parties.
css-template-layout – Implémentation jQuery du module CSS3 Template Layout.
jqTransform — Stylez vos formulaires avec jQuery et CSS.
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.
Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
Disable On Submit – Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
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.
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.
DOMAssistant – Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
Dynamic tabs using jQuery – Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
Sexy.js – Améliorer l’interface Ajax de jQuery.
jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
Page Peel Corner — Effet de page cornée avec jQuery.
A.P.E (Ajax Push Engine) — Le web en temps réel avec Ajax Push Engine.
Simple Image Viewer — Galerie d’image minimaliste.
jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
jsfiddle – Propose un environnement pour tester et partager du code Javascript.
jQuery 1.4 API Cheat Sheet – Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
jQuery Quick Guide – Un guide pour avoir les fonctionnalités de jQuery sous la souris.
Animation avec quatre images et jQuery – Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
jQuery Masonsy – Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
40 bouts de code – facilitez vos développements en Javascript ou jQuery.
jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
CSS3 animations and their jQuery equivalents – 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
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 !
Hightcharts – Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
jQuery Before/After – Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
jQSlickWrap – Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
TinySlider – Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
Mootools Forge – Une forge pour les plugins Mootools.
Système de notation par étoiles accessible – Samuel Le Morvan propose un tutoriel complet sur la question.
Menu déroulant Suckerfish – Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
Smart Columns with CSS & jQuery – Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
Get viewport size with javascript – Connaitre la taille du « viewport » en Javascript.
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.
Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
Planet jQuery – Un planet pour jQuery.
The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
maxWidthFixForIE6.js – Emuler la propriété max-width pour IE6.
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.
SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevrepropose de faciliter l’utilisation d’Ajax.
jTextTranslate – Traduction de votre site en 87 langues par Google.
cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
balance_columns – Équilibrer des colonnes avec Javascript.
DOMTab – Menu à onglets simple et efficace.
FlashReplace – Insérer du Flash proprement.
DOMAssistant – Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
dLite — une librairie Javascript « petit mais costaud ».
Pikachoose – Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
jQuery Context Menu – Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
22 menus déroulants passés au crible – Tyssen Design passe en revue les principauxdropdown menu.
Changement de design «on the fly» avec jQuery – Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
Simple jQuery Text Resizer – Laissez vos visiteurs choisiront la taille qui leur convient (uncookie gardera leur préférence en mémoire).
Des cookies à la mode de jQuery – Ecrire, lire et effacer vos cookies pour 4,15 kb.
Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
ul2finder — un explorateur à l’image du Finder de MacOS X.
jQuery Image Cropper — recadrer et uploader des images.
jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
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.
PHP.JS — transposer des fonctions PHP en Javascript.
jsbin — tester votre code Javascript et partagez vos bugs – Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
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.
Un diaporama avec AnythingSlider jQuery Plugin – Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
Google Closure — les mauvaises pratiques Javascript en action ? – Google Closure a été développé par des spécialiste de Java… ça craint.
Sélecteur de date (Date-Picker) non-intrusif – Sélecteur de date avec mini calendrier.
FireFinder — interagir avec la page web – Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
Choisir sa bibliothèque JS avec Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
Jquery Pagination System – Pagination côté client avec jQuery.
jQuery Flash Plugin – Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
jQuery UI Multiselect – Améliore l’apparence et l’ergonomie de la balise HTMLselect.
jQuery Tools – Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
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.
Faire un Carrousel avec jQuery – Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
Lazy loader : chargement des images à la volée – Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
jQuery Magnifier Loupe – Zoom sur images avec l’attribut longdesc.
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.
Cufón : des polices de caractère pour tous – Implémenter font-face dans le plus grand nombre de navigateurs.
jQuery — renverser l’ordre d’une liste ordonnée – les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
Augmenter la taille du texte avec jQuery – Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
Effets jQuery accessibles WAI-RIA – Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
eCSStender – Sélecteurs CSS avancés compatibles IE6.
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 :

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

HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir

Bruno Bichet — Sat, 11 Jun 2011 16:24:53 +0000

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

.hidden { display: none; visibility: hidden; }: Fig. 1: Cache le contenu associé pour les lecteurs d’écran et les navigateurs.
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }: Fig. 2: Cache le contenu visuellement seulement (est toujours disponible pour les lecteurs d’écran).
.invisible { visibility: hidden; }: Fig. 3: Cache le contenu visuellement pour les lecteurs d’écran et les navigateurs, mais conserve l’espace occupé.
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }: Fig. 4: Remplacement d’image

Remplacement d’image avec CSS

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

pour remplacer le titre du site, par exemple.

HTML 4.01

Le bout de code suivant :

… accompagné du style CSS :

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

… affiche bien l’image de fond logo.png à la place du titre du site, mais le contenu de la balise

n’étant pas affiché, notre logo-image n’est pas cliquable. C’est bien embêtant.

HTML 5

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

D’après la spécification HTML5…

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

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

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

Articles sur le même sujet

Quelques notes sur les éléments graphiques du webdesign

Bruno Bichet — Tue, 24 May 2011 16:59:12 +0000

Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire.

La question du «pourquoi tel élément plutôt qu’un autre ?», rejoint un peu la question posée par Leibniz : «pourquoi y a-t-il quelque chose plutôt que rien dans l’univers ?». A laquelle je ne peux m’empêcher d’ajouter mon grain de sel sous forme de question subsidiaire : «pourquoi tel élément de «design» plutôt qu’un autre ?»

Direction artistique & Web design

Le Directeur artistique détermine le fond du message ; le graphiste s’occupe de la (mise en) forme. Le DA met sa connaissance des codes artistiques des temps passés, présents et futurs pour proposer un univers graphique sans se soucier des contraintes techniques. Quant au graphiste, il rend en quelque sorte «utilisable» le travail du DA en fonction du support et des techniques dont il dispose.

Chacun d’eux porte son attention sur une partie différente des bonnes pratiques liées à son métier. Le DA s’assure que les codes graphiques qu’il a retenus sont adaptés à la marque et à son public. Le graphiste veille à ce que la mise en oeuvre des choix graphiques respecte à son tour les attentes de la marque et du public.

En pratique, le DA évitera généralement de proposer des couleurs vives pour un site web vendant des articles funéraires et que le graphiste s’abstiendra de placer le logo et le champs de recherche en bas de la page. Si ces cas extrêmes sont généralement évités, il n’en reste pas moins qu’il n’est pas toujours évident de choisir entre des coins arrondis ou des angles droits, des dégradés ou des aplats de couleurs, du Stars and Stripes ou du Sex and Sun !

Finalement, la question que je me pose est la suivante : «quand et pourquoi se décide-t-on pour un coin arrondi ou pour un coin carré ?». Cette question est valable pour tout élément ayant un impact sur l’apparence d’une page web. Pour éviter de faire ces choix parfois cornéliens sur un coup de poker, voici quelques éléments de réflexion que j’ai rassemblé ici parce que vous le valez bien :-)

En-tête, bannière et pied de page

Header

Les en-têtes de blogs plus ou moins délirants ont eu leur heure de gloire, mais ont fini par lasser. Ils sont souvent composés d’une image bariolée occupant la largeur du site ou d’une image centrée dans le background débordant largement de la largeur du contenu. On peut voir la première technique dans le thème par défaut de WordPress 3. La deuxième a été popularisée par des sites comme celui de Matt Mullenweg ou Web Designer Wall.

Un bon gros header

Footer

Les pieds de page sont souvent les laissés pour compte du webdesign. Toutefois, la mode des Big Footer leur a redonné une certaine importance, même si au départ, il s’agit surtout d’améliorer le maillage interne en mettant un paquet de liens. Pour faire passer la pilule, les plus créatifs ont utilisé cette zone, peu sexy en général, pour en faire quasiment la vitrine de leur site web. Voici quelques conseils pour optimiser votre Fat Footer (explications en français).

Exemple de big footer simple et graphique à la fois

Big Footer de Soh Tanaka

Colonnes et barres latérales

Il est assez rare de rencontrer un blog ou un site web composé d’une seule colonne. Tout au plus trouve-t-on des thèmes WordPress affichant l’article seul sans les barres latérales. Jusqu’en 2003 environ, les sites web étaient souvent composés d’une zone de contenu entourée de deux barres latérales. Dans celle de droite, on trouvait généralement le champs de recherche et les liens annexes, tandis que la colonne de gauche accueillait la publicités, des listes de liens extérieurs (blogroll), etc.

Les frameworks CSS permettent de créer une système de colonne pour votre site web

The Grid Simpler : une grille simple et souple

Aujourd’hui, la tendance est clairement à une composition en deux colonnes : le contenu à gauche et la barre latérale à droite. Lorsqu’on a besoin d’une deuxième sidebar, elle est souvent située à côté de la première, avec la même largeur, mais pas forcément. L’idée maitresse est de créer une asymétrie graphique. Par ailleurs, la friction monétaire étant ce qu’elle est, cette organisation permet de mettre en avant le contenu pour les moteurs de recherche qui digèrent le code HTML de haut en bas et de gauche à droite (c’est peut-être différent pour les langues qui se lisent de droite à gauche).

Contours et angles

Arrondir les angles ou pas ?

Le modèle de boite du W3C reposant sur des angles droits, l’utilisation des coins arrondis a permis à une époque de sortir du lot. De fait, ils sont utilisés depuis longtemps malgré de nombreux obstacles techniques. L’arrivée de CSS3 et de border-radius, qui rendent accessibles les coins arrondis au plus grand nombre, remettront peut-être les angles droits ou irréguliers à l’honneur.

Cela dit, l’origine de l’engouement pour les bords arrondis est à chercher du côté symbolique. L’arrondi est une forme organique qui donne une impression de proximité affective. Il a un pouvoir immersif qui s’adresse au cerveau droit et joue sur l’émotionnel. A l’opposé, le coin carré s’adresse plutôt à la raison, à l’intellect.

L’arrivé de border-image avec CSS3 devrait élargir les possibilités créatives, en se rapprochant de ce que l’on trouve dans Illustrator, par exemple.

Rubans (ribbons)

Ils ont pratiquement toujours existés et le web ne cesse d’inventer de nouvelles formes dont le but est d’ancrer le ruban dans la page tout en le faisant ressortir. Force est de constater que les derniers rubans à la mode en provenance du monde anglo-saxon (oui, le jour où les graphistes francophones cesseront de se croire le nombril du monde…) réussissent ce tour de force.

Ombres portées

Elles ont toujours fait partie du paysage graphique autant en PAO et sont apparues sur le web dès que cela a été possible. D’abord en utilisant des cellules de tableau, puis avec des balises div imbriquées et enfin, depuis peu, avec les propriétés CSS3 box-shadows et text-shadows.

Bords déchirés

On voit relativement peu de contours déchirés ou de bords irréguliers, malgré leur fort potentiel graphique.

backgrounds

Fond blanc

Associé à du texte (presque) noir, le fond blanc présente le meilleur rapport de contraste que l’oeil puisse trouver. Il s’agit généralement de la couleur de fond de page par défaut des agents utilisateurs depuis plusieurs années. C’est une valeur sûre qui ne devrait être modifiée qu’après mûre réflexion ;-)

Aplat de couleur

L’utilisation des aplats de couleur permet de faire ressortir une partie du texte tout en lui conférant une certaine puissance. Si en peinture, l’obtention d’un à-plat digne de ce nom n’est pas une sinécure, il n’en va pas de même pour la PAO ou le web où il suffit de saisir une valeur pour obtenir en beau «noir au blanc». Les sites web des années 2000 faisaient un large usage des aplats, tandis qu’aujourd’hui leur emploi est réservé à des petites portions de texte, comme des titres ou des encarts. Il peuvent être utilisés pour signaler les hors-textes en lieu et place des guillemets géants qui commencent à lasser un peu (mais c’est joli quand même).

Dégradés

Si les aplats de couleur sont roboratifs, les dégradés se digèrent plus facilement. Toutefois, ils restent peu utilisés sur le web à part dans les backgrounds en haut de page pour ancrer l’en-tête du site dans la fenêtre du navigateur. Ils devraient trouver une seconde jeunesse grâce à la nouvelle propriété gradient apparut avec CSS3. Attention à l’overdose : ces effets sont à utiliser avec parcimonie.

Zébrures (Stripes)

Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude).

Tartan

Le tartan est une autre manière de remplir un fond sans agresser l’oeil. Peu employé, il pourrait reprendre du poil de la bête. Voici un générateur de tartan au cas où vous voudriez prendre de l’avance.

Images

les visuels «Full Background» sont généralement à éviter, mais si votre produit ou votre thématique nécessite une immersion du visiteur dans votre univers, foncez ! L’essentiel est de garder un oeil sur la lisibilité d’ensemble. C’est certainement très subjectif, mais je trouve que les sites utilisant des images généreuses sur un fond noir avec du texte clair s’en sortent mieux que ceux qui utilisent des grandes images sur un fond blanc avec du texte noir ^^

Background « bruité »

Ces backgrounds utilisant généralement la fonction Filtre > ajout de bruit de Photoshop remplacent avantageusement les dégradés lorsqu’il s’agit de donner un peut de matière et de profondeur à la page. Avec l’option bruit gaussien, les raccords entre plusieurs fond bruités sont un jeu d’enfant.

Fonds artistiques

Parmi les fonds plus ou moins artistiques — qui sont de plus en plus utilisés –, j’aime beaucoup celui de All For Design qui parvient à conserver un bon niveau de lisibilité malgré le faible contraste entre la couleur du fond et le texte.

C’est tout pour le moment

Cet article devrait trouver une suite avec quelques notes sur l’utilisation des textes, des illustrations, des palettes de couleurs, etc. N’hésitez pas à partager vos impressions ou à fournir toute information complémentaire susceptible de faire avancer le «schmilblick» :-)

Articles sur le même sujet

Lorem Pixum — Images de placement gratuites en Creative Commons

Bruno Bichet — Fri, 08 Apr 2011 05:50:49 +0000

Lors de la mise en place d’un site web, il est parfois utile d’utiliser du faux-texte en attendant les contenus définitifs. Pour signaler l’emplacement des images, j’utilise souvent des aplats gris. Plus rarement, je vais chercher des images proches de la thématique des contenus que je mets en page, lorsque la part des visuel est importante. Grâce à Lorem Pixum, la tâche parfois fastidieuse du recadrage des visuels trouvés est déjà un lointain souvenir.

Lorem Pixum : des images gratuites pour donner vie à vos pré-maquettes.

Des images de placement en Creative Common à volonté. Cliquez pour agrandir l'image.

Ce site permet d’afficher des images aléatoires via une simple URL du type http://lorempixum.com/400/200/ (pour un format de 400 x 200) ou des images selon les thématiques suivantes :

Il est possible d’avoir des images en couleurs ou en niveaux de gris en utilisant une URL du type http://lorempixum.com/g/400/200. Pour obtenir plusieurs images dans la même thématique, ajoutez-donc un chiffre de 1 à 10.

Via les Actualité de l’Internet et les outils du Web (merci Thierry !)

A emporter !

Articles sur le même sujet

IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Bruno Bichet — Tue, 08 Feb 2011 13:49:14 +0000

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.

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");
});
```

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 '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 :

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

15 « Photoshop-like » en ligne testés et commentés

Bruno Bichet — Thu, 18 Mar 2010 19:31:48 +0000

Photoshop est encore un logiciel incontournable pour l’édition d’image. Mais il est parfois agaçant de sacrifier sa mémoire vive pour effectuer des modifications triviales sur des images (redimensionnement, recadrage, corrections chromatiques, ajouter du texte) ou faire des opérations plus complexes (détourage, remplacement de fond, etc). A côté des économies de RAM, il peut être utile de proposer à ses clients une application en ligne pour modifier les images avant publication ; si WordPress propose des outils pour recadrer, pivoter ou redimensionner les visuels depuis la version 2.9, on est encore loin de faire ce qu’on veut avec ses cheveux ! C’est pourquoi, je vous ai concocté une liste composée d’une bonne dizaine d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix.

Picnik
Cet éditeur d’image intégré à Flickr (et racheté par Google depuis peu) est très simple d’utilisation. Une fois sur le site, il suffit de sélectionner une photo sur votre poste de travail pour commencer à travailler. Les outils sont orientés «retouche de photo» pour l’impression papier : correction automatique des couleurs et du contraste, pivotement, rognage, redimensionnement, réglage de l’exposition, des les couleurs, de la netteté, etc.
Les plus
- L’interface est composée de gros curseurs que l’on fait glisser pour voir le résultat des manipulations en direct live,
- Des boutons Annuler et Rétablir mettent l’utilisateur novice en confiance,
- L’interface est en français, ce qui ne gâche rien, surtout que des aides sont disponibles pour indiquer la marche à suivre à chaque réglage,
- Pour finir, un zoom permet d’afficher l’image jusqu’à 800% de la taille d’origine.
Les moins
- Pas de gestion des calques,
- Pas de sélection : les opérations sont globales,
- Nombreuses options payantes,
- Chargement un peu long.
Verdict
Idéal pour permettre aux clients novices d’effectuer les corrections basiques mais souvent nécessaires lorsqu’on met des photos en ligne. Simplicité et efficacité.
Sumo Paint
Après un chargement très rapide, l’interface de Sumo Paint n’a pas à rougir devant celle de Photoshop : elle est même plus réactive ! On y retrouve la plupart des outils de retouche et de création avec la même gestion des options dans une barre sous le menu principal. La palette des calques est très complète et comprend un menu pour les effets de calques qui reprend la majeure partie des effets proposés par Photoshop comme les ombres portées ou les effets de lueur internes ou externes.
Les plus
- Prise en main rapide,
- Orienté retouche et manipulation de photo,
- Nombreux équivalents-clavier,
- Gestion des dégradés,
- Annulations multiples,
- Zoom à 1000%,
- Baguette magique,
- La barre d’espace permet de se déplacer dans l’image avec l’outil Main.
Les moins
- Il manque l’outil Plume pour les détourages,
- La gestion des sélections n’est pas simple,
- Pas de version française.
- Aspect du contour de la sélection,
Verdict
Un très bon outil généraliste qui devrait plaire à ceux qui sont déjà habitués à utiliser des outils complexes de retouche d’image. Le zoom à 1000% permettra d’affiner les sélections réalisées avec le lasso. On retrouve les habitudes prises avec Photoshop pour ajouter ou retrancher à la sélection.
PicMagick

L’interface n’a pas grand chose à voir avec celle de Photoshop : elle est partagée en deux parties avec à gauche deux menus (Basics et Effects) et la zone principale pour afficher l’image. C’est clair et sobre. Ça devrait plaire. Un gros bouton Load Image permet de charger un image depuis le poste de travail.
Le bouton Save, permet d’enregistrer l’image. Le menu Basics permet d’effectuer des opérations simples : recadrage, rotation, anti yeux rouges, adoucisseur de peau, ajustement et amélioration des couleurs. Le menu Effects propose un outil Netteté, Flou, Couleurs sépias, Niveaux de gris, et Glow (effet de luminescence ou de halo).
Les plus
- Le résultat des opérations sur l’image ou les couleurs est affiché en temps réel dans la fenêtre principale,
- Les options vont à l’essentiel,
- Outil Smooth Skin (Adoucisseur de peau) utile et intuitif,
- Outil Main avec la barre Espace,
- Les outils Ajustement et Amélioration des couleurs, particulièrement efficaces.
Les moins
- Pas d’outils de sélection pour isoler une portion de l’image,
- En anglais (mais la frugalité de l’interface rend la traduction moins indispensable),
Verdict
Les options vont à l’essentiel, sans fioriture et c’est ce qui est plaisant avec PicMagick. L’outil Smooth Skin est particulièrement sympa pour adoucir les visages. J’aime bien l’outil Ajustement des couleurs qui propose un pipette pour sélectionner une couleur neutre sur l’image afin de redéfinir la balance des couleurs, ajustable ensuite en terme de température ou de teinte. Bref, un outil à mettre en toutes les mains, y compris pour les non-anglophones.
Pixlr
L’interface démarre par le choix entre la création d’une nouvelle image à partir de rien, l’ouverture d’une image présente sur le poste de travail ou depuis le web en précisant son URL. Cette application propose une interface qui semblera familière aux utilisateurs de Photoshop grâce notamment aux équivalents-claviers.
Les plus
- Interface en plusieurs langues dont le français.
- L’outil de recadrage propose une grille pour recadrer les photos selon la règle des tiers.
- Outil anti yeux rouge.
- Rapidité.
Les moins
- L’aide n’est pas contextuelle.
Verdict
Une application honnête et rapide, une sorte de tout-terrain de la retouche photo en ligne.
Splashup
Splashup propose d’aller chercher des images sur différents réseaux de stockage et de partage comme Facebook, Flickr, Picasa, SmugMug, PhotoBucket ou Splashup à condition d’ouvrir un compte. Il reste bien évidemment possible d’aller chercher une image sur le disque dur ou depuis son URL. L’interface est douce et ressemble à celle de Sumo Paint tout en étant un peu plus sombre.
Les plus
- Joli contour de sélection.
Les moins
- Pas d’équivalents-claviers,
- En anglais,
- Peu d’options.
Verdict
Les possibilités de sélection se réduisent au Lasso et aux sélections circulaires ou carrées. Si le lasso est assez précis, il ne semble pas possible d’ajouter plusieurs sélections successives pour effectuer un détourage, par exemple. Par ailleurs, les possibilités de retouches d’image sont assez limitées.
Photoshop Express
L’outil d’édition et de gestion d’image de Photoshop est finalement celui qui ressemble le moins à la version logicielle. Il est nécessaire de s’enregistrer pour pouvoir sélectionner une image depuis son disque dur, mais il est possible de tester l’outil en cliquant sur Test Drive. La partie Edition d’image n’est qu’une option parmi d’autres, mais elle permet d’effectuer des opérations complexes en cliquant sur des prévisualisations des différents états possibles. Le passage de la souris affichant immédiatement l’image telle qu’elle apparaitra une fois les modifications validées. C’est très bien réalisé. D’autant plus qu’un curseur sous les vignettes permet de choisir les valeurs intermédiaires. Photoshop Express propose également un mode Décoration en version bêta qui propose d’ajouter du texte, des bulles de dialogue, des post-it ou des illustrations vectorielles.
Les plus
- Présélection des effets avec prévisualisation automatique,
- Outil anti yeux rouge particulièrement efficace,
- Zoom et navigation dans l’image à l’aide d’une miniature interactive,
- Une case cochée apparait devant les effets qui ont été appliqués. On peut les activer ou les désactiver à volonté.
Les moins
- Obligation d’ouvrir un compte pour éditer des images en provenance de son poste de travail,
- Pas d’outil de sélection,
- Pas de version française (mais il existe une version allemande et japonaise).
Verdict
Assez déroutant au premier abord tant l’interface s’éloigne de ce auquel on aurait pu s’attendre, Photoshop Express s’avère être un outil intuitif et très simple d’utilisation.
Pixer.us
Assez sobre voire austère, Pixer.us propose des opérations comme le recadrage, redimensionnement, la rotation des images mais aussi quelques manipulations sur la luminosité, le contraste, la saturation, l’ajout de flou ou de netteté. Quelques effets gadgets sont à éviter, à part peut-être l’effet «1850» qui donne à votre visuel l’aspect caractéristique des premières photographies.
Les plus
- Le curseur pour modifier la taille de l’image met l’image à jour en temps réelle en affichant les valeurs en direct live,
- Effet «1850».
Les moins
- Les valeurs en pixels qui s’affichent lors du recadrage de l’image ne sont pas sélectionnables et ne se mettent pas à jour en temps réel : il faut tâtonner pour trouver la bonne valeur,
- Pas de version française,
- Les effets mettent du temps pour s’afficher,
- Fonction Annulation un peu laborieuse.
Verdict
Un peu trop austère, un peu trop lente, cette application ne brille pas particulièrement. Pour le côté sobre, je préfère largement PicMagick.
Phoenix

Image Editor (Phoenix) fait partie de la suite Aviary qui comprend de nombreux outils en ligne : Image MarkUP (Falcon), Color Editor (Toucan), Effects Editor (Peacock), Vector Editor (Raven) et Audio Editor (Myna). Après un chargement assez long (enfin tout est relatif), Phoenix offre un environnement complet de création et de retouche d’image dans une interface très «application de bureau».
Cet outil se rapproche bien de l’esprit de Photoshop. L’outil Lasso permet d’ajouter ou de retrancher à la sélection courante avec les mêmes équivalents-claviers que Photoshop, et c’est pareil pour la Baguette magique dont on peut régler la tolérance et la sélection des pixels contigus ou non. En commençant par la Baguette magique puis en affinant avec le Lasso, on parvient — en jouant sur le zoom à 400% – à isoler assez facilement un personnage du fond.
Les plus
- Gestion intuitive des dégradés,
- Ajout/retranchement des sélections au clavier,
- Effets de calques,
- Calques de dégradés (biseau et lueur),
- Historique des actions effectuées en mode «texte» ou «vignette» avec retour à un état antérieur,
- Nombreux tutoriels disponibles.
Les moins
- Pas d’outil Plume.
Verdict
Phoenix est un outil très complet relativement simple à prendre en main si l’on a déjà l’habitude d’un logiciel comme Photoshop. Ses fonctions, ses options et sa rapidité en font l’un des meilleurs de cette sélection.
Flauntr
Il s’agit d’un service proposé par le groupe FotoDesk spécialisé dans l’impression photo, ce qui explique l’orientation plutôt ludique des applications disponibles une fois que l’on a ouvert un compte gratuit. Malheurement, je n’ai pas pu me connecter une fois enregistré, la gestion calamiteuse des caractères du clavier par Flauntr doit y être pour quelque chose. Bref, j’ai demandé le renvoi de mon mot de passe. J’ai bien réessayer plusieurs inscriptions avec des mots de passes très simples, mais rien n’y fait pour l’instant. Je laisse les chose en l’état et je reviendrais vers Flauntr quand il sera calmé ;)
Les plus
- ?
Les moins
- Connexion impossible après enregistrement.
Verdict
Inscription un peu lourde : obligation d’avoir au moins 6 caractères dans l’identifiant (du coup br1o ne passe pas) et dans le mot de passe (là encore ça peut se comprendre). Impossibilité d’accéder aux outils malgré plusieurs tentatives de connexion

Autres outils bien pratiques

http://www.roundmypic.com — Arrondis les angles de vos images avec un effet de relief. En option : désactivation de l’effet relief, valeur de l’arrondi en pixels et redimensionnement de l’image. La couleur de fond de l’image devient transparente sur les côtés pour la placer sur un fond de couleur. Via Roget.biz.
SnipShot — La plupart des effets sont réservés à la version payante. Pour 9$ par mois, je pense qu’il vaut mieux se tourner vers Picasa en version desktop ou se tourner vers Photoshop Elements qui coûte moins de 80€ jusqu’au 11 avril 2010.
drPic — A part le redimensionnement, le recadrage, la rotation et le réglage des contrastes, cet outil propose des effets de cadres assez basiques. Enfin, je dis ça, mais tout les goûts sont dans la nature, et de ce point de vue, ne disons pas au client ce qu’il doit aimer, mais demandons-nous plutôt comment lui donner les moyens de créer lui-même de beaux cadres autour des images. De ce point de vue, le docteur Pic tombe… à pic, bien sûr ! On a du mal à distinguer les fonctionnalités de la publicité.
Pixenate — Dans le même esprit que le précédent.

Pour la route

Conclusion

Ces applications en ligne en remplaceront pas votre logiciel d’édition d’impage, qu’il s’agisse de Photoshop ou de Gimp, mais vous pourrez sans problème les conseiller aux clients qui ont besoin d’effectuer des retouches simples avant d’illustrer leurs contenus dans leur CMS préféré. Pour eux, Picnik sera parfait.

Par ailleurs, je trouve ces services en ligne très pratiques en situation de mobilité avec les Netbooks où Photoshop n’est clairement pas à son aise. Pour ceux qui ont l’habitude de Photoshop ou de Gimp : Sumo Paint ou Phoenix rendront de grands services.

Mention spécial pour Phoenix et l’ensemble de la suite de logiciels en ligne Aviary qui propose de surcroit des outils pour réaliser des captures d’écran : extentions Firefox et Chrome ; bookmarklet multi navigateur.

Articles sur le même sujet

Guide stylistique — Exemple de charte graphique et éditoriale

Bruno Bichet — Tue, 23 Feb 2010 03:05:48 +0000

Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise.

Visite guidée dans le guide stylistique de Mark Boulton pour le redesign du site web Drupal.org

Je vous propose une visite guidée dans le guide stylistique réalisé par Mark Boulton chargé du redesign du site Drupal.org. Ce guide est un petit bijou de concision tout en étant très complet. On y trouve trois parties principales : Langage visuel, Editorial et Prototype.

Langage visuel

La partie visuelle est la plus importante. Elle regroupe les informations liées à la marque, au logo, aux couleurs, aux choix typographiques, à la grille de mise en page, à la navigation sur le site, au traitement des images, aux formats publicitaires et à leurs emplacements, aux icônes ainsi qu’aux styles de mise en forme spécifiques pour les tableaux ou les formulaires.

Marque

Il est toujours utile de rappeler ce qui fait la spécificité de l’entreprise qui fait appel à vos services. Les éléments mis en avant par l’entreprise sur elle-même sont un bon point de départ, mais il ne faut pas oublier de décrire précisément les produit ou les services qu’elle propose. Par ailleurs, un résumé des motivations qui pousse l’entreprise à (re)faire un site web est très utile. Cette partie se rédige idéalement en tout début de projet pour servir de garde-fou à votre imagination fertile.

Logo

Affichez le logo avec les éléments indispensables à son bon fonctionnement : marges mini et maxi, tailles, couleurs, version noir et blanc ou en niveau de gris, etc. Sans oublier les conseils comme : ne pas encadrer ou ne pas souligner le logo, par exemple. Il est utile de rappeler qu’il faut partir de la version originale du logo plutôt que de modifier la taille d’une version déjà en ligne. A cet égard, rappelez également le format png, gif ou jpg choisi avec le taux de compression ou d’échantillonnage approprié.

Couleur

Donnez un échantillon des couleurs utilisées dans le site en indiquant les valeurs RVB et Hexadécimales. Si les couleurs font partie des couleurs nommées en HTML, précisez-le. Dans le cas contraire, donnez un nom à chaque couleur pour faciliter la communication entre les différentes personnes susceptibles d’intervenir sur le site. Vous pouvez également enregistrer votre palette de couleur et fournir des palettes au format Photoshop ou Illustrator.

Typographie

Affichez un échantillon des polices de caractère que vous avez choisies selon les éléments HTML : niveaux de titre h1, h2, etc., paragraphes p, les liens a (survolés a:hover, visités a:visited, etc.), les listes (ordonnées ol, non-ordonnées ul, de définition dl). Ainsi que tout autre élément susceptible d’être utilisé. Affichez la typographie sous forme d’images au cas où la fonte en question ne serait pas disponible sur le poste de l’utilisateur.

Grille

Tout le monde ne travaille pas avec une grille de mise en page, mais si c’est le cas, affichez la grille en indiquant les valeurs retenues pour les colonnes, les gouttières et la largeur totale du design. Indiquez également les regroupements de colonnes prévus et donnez quelques exemples d’utilisation en surimpression avec la grille en arrière-plan.

Navigation

Indiquez les différentes solutions visuelles retenues pour la naviguation à l’intérieur du site : navigation principale (ex. les catégories), navigation secondaires (ex. les tags), les liens dans le pied de page avec des exemples de mise en forme pour chaque élément.

Images

Donnez des exemples d’utilisation des images en fonction du nombre de colonnes et des différentes manières de les habiller selon le texte et le contexte lorsque : l’image occupe toute la largeur d’une colonne ou d’un regroupement de colonnes ; des marges la séparent des bords ; l’image est habillée à droite ou à gauche ; un titre se trouve au-dessus, etc. Pensez à tous les cas de figure.

Publicités

Les formats publicitaires sont un peu le tue-l’amour du design web. Et pourtant, pour nombre de sites web, c’est le nerf de la guerre. Sans aller jusqu’à définir le pas de votre grille en fonction des formats les plus courants, il est important de préciser où et comment la publicité peut s’intégrer dans la mise en page.

Fournitures diverses

Regroupez ici les éléments visuels utilisés dans le site : icônes, boutons, mais aussi les styles spécifiques pour la mise en forme des tableaux, l’affichage de commentaires, les formulaires, etc. Si les icônes et les boutons sont très nombreux, n’hésitez pas à créer une rubrique spécifique pour les styles particuliers pour ne pas surcharger cette section.

Editorial

Après la charte graphique au complet, la charte éditoriale est un éléments primordiale : c’est elle qui servira de guide pour que les différents intervenants puissent faire vivre le site web en employant des conventions communes pour que le discours ne s’éparpille pas lorsque les rédacteurs sont nombreux.

Notez que même si vous êtes l’unique rédacteur de votre site, mettre votre charte éditoriale noir sur blanc n’est pas une perte de temps, bien au contraire !

Qu’est-ce qu’une charte rédactionnelle ?

La charte rédactionnelle (ou charte éditoriale) est un document qui définit un style particulier de rédaction, en relation avec l’image de l’entreprise ou d’un produit. Plus précisément, la charte rédactionnelle peut formaliser et fixer des principes d’écriture :

Rédaction des titres (long, court, informatif, accrocheur, laconique, comique),
Style d’écriture (impliquer le lecteur, écrire à la 1re personne du singulier, à la 2ème personne du pluriel)
Nombre de mots optimum par billet et par paragraphe,
Illustration des billets (photos, dessin, graphique),
Comment citer l’entreprise et ses produits dans les liens hypertextes, ainsi que les collaborateurs, les marques déposées, les concurrents, etc.,
Déterminer la liste des mots interdits (dans le milieu médical, par exemple).

Les plus courageux d’entre vous se plongeront dans le Guide stylistique de la CFP dont la version PDF pèse pas moins de 165 ko !

Prototype

La partie Prototype liste toutes les pages du site et donne pour chacune d’elle un exemple de mise en place de la charte graphique en terme de fonctionnalités. Cet exemple est réalisé en HTML / CSS pour donner une idée aussi proche que possible de la version finale si les prototypes en question étaient retenus par le client.

En guise de conclusion

La mise en place d’une charte graphique et éditoriale est assez chronophage, c’est pourquoi elle est souvent réservée aux projets importants. Mais sa rédaction tout au long de la phase de conception peut s’avérer une aide précieuse pour éviter la dispersion et formaliser les choix créatifs au fur et à mesure de leur cristallisation.

Articles sur le même sujet

Dummy Image — des images de placement pour votre site web

Bruno Bichet — Thu, 11 Feb 2010 08:02:04 +0000

Dynamic Dummy Image Generator est un outil en ligne qui génère une image en fonction de la taille que vous indiquez : saisissez le format dont vous avez besoin à la fin de l’URL du site, comme http://dummyimage.com/434×200 par exemple. Très utile en complément de HTML-IPSUM pour commencer à travailler sans contenu. L’auteur précise que l’on peut « hotlinker » autant d’images que son serveur pourra le supporter ;)

Last but not least, le script PHP qui se trouve derrière Dynamic Dummy Image Generator est disponible au téléchargement. N’oubliez pas de suivre les instructions. Il existe également une version Ruby (FakeImage) et une version .NET (rndimg) !

DummyImage est très pratique pour générer des images de placement pour vos maquettes de sites web

Merci à Nathanaël (http://twitter.com/simplementNat) pour le lien.

Articles sur le même sujet

Installer Drupal (ou les tribulations d’un WordPressien en Drupalie)

Bruno Bichet — Wed, 20 Jan 2010 17:54:03 +0000

Drupal est un outil hors pair qui permet à ses utilisateurs de créer rapidement des sites internet complexes et sur-mesure et répondre ainsi aux cahiers des charges des clients les plus exigeants. Dans le monde des CMS Drupal fait partie des poids lourds. Sa réputation d’usine à gaz peut freiner les plus motivés, d’autant plus que son installation réserve parfois des surprises. Si vous avez l’habitude d’utiliser WordPress, vous risquez de ne plus retrouver votre confort habituel. Chez Drupal tout est affaire de modules et il faut en installer quelques-uns pour se sentir comme à la maison.

Ma connaissance de Drupal est proche de zéro : j’ai abordé cet article sous l’angle de celui qui a l’habitude d’utiliser WordPress au quotidien. Il ne s’agit pas d’un comparatif entre Drupal et WordPress : les deux CMS présentent des différences dans leur mode de fonctionnement dont vous aurez un bon aperçu en lisant l’excellent billet Drupal et WordPress : deux logiques proches, mais différentes de Marie-Aude.

Amadouer Drupal

La première chose à faire est de télécharger la dernière version stable de Drupal et de décompresser l’archive pour la copier sur votre serveur. Pour information, j’utilise un hébergement mutualisé chez PHPNET qui semble posséder les pré-requis nécessaires, ce qui peut ne pas être le cas partout.

Saisissez l’adresse de votre site web et suivez les étapes de l’installateur automatique. En ce qui me concerne, l’assistant s’est arrêté à l’étape de la saisie des informations permettant la connexion à la base de données MySQL. A ce niveau, deux problèmes au moins sont susceptibles de survenir (et sont comme par hasard survenus) :

Un caractère spécial dans le mot de passe peut empêcher la connexion à la base de données. Méfiez-vous donc des caractères : / @ + ( ) ? = & car vous risquez de ne pas aller très loin. Des caractères d’échappement sont prévus, mais sait-on jamais.
Il semble que l’installation automatique soit comme les antiobiotiques et qu’il soit nécessaire d’écrire en dur les éléments pour la connexion avec la base de données : nom de la base, nom d’utilisateur, mot de passe et nom du serveur dans le fichier /sites/default/default.settings.php qu’il faudra renommer en settings.php. Saisissez à nouveau ces informations dans l’assistant pour passer à l’étape suivante.

Notes : Il ne faut pas simplement renommer le fichier. Il faut créer un fichier settings.php à côté du dossier default.settings.php soit en dupliquant et renommant ce dernier, soit en créant un fichier vide nommé settings.php

Lire Installation de Drupal.

Drupal, au pied !

Une fois que vous aurez posé la souris dans le menu Administer, la palanquée d’options et de paramètres disponibles vous fera prendre conscience du potentiel de Drupal. N’ayez pas peur et suivez le guide pour avoir un Drupal fonctionnel à votre service plutôt que l’inverse !

Vous aurez besoin d’installer de nombreux modules parfois dépendants d’autres modules. C’est le prix à payer pour… la modularité. Et oui, la force de Drupal est d’être entièrement composé de modules ; les éléments de base du moteur ne sont finalement que des modules obligatoires.

L’installation de ces modules s’effectue en suivant généralement les étapes suivantes :

Téléchargez et décompressez le module,
Faites glisser le dossier du module vers le dossier modules de votre installation,
Activez le modules et ses sous-modules éventuels dans le dossier Administrer › Construction du site › Modules,
Personnalisez les paramètres dans Administrer › Configuration du site › Votre_Module.

Notes : Les pages permettant d’installer les modules sont assez peu friendly. Toutefois, les explications sont concises et claires ; les dépendances entre les modules sont bien indiquées et sont d’ailleurs rappelées dans la page permettant d’activer les modules. Les dépendances peuvent même s’activer automatiquement lorsqu’elles se trouvent toutes dans le dossier modules. C’est assez bien fait.

Des URLs propres

Tout se passe bien ? Ok, passons à la suite. Une des premières choses que je fais lorsque j’installe un CMS, c’est de jeter un oeil sur les paramètres permettant d’avoir des URL’s propres (sans le point d’interrogation). Dans Drupal, ça se passe dans Administer › Site configuration › Clean URLs.

La case Disabled est cochée et si tout va bien vous pourrez cliquer sur Enabled. Si ce n’est pas le cas, ouvrez le fichier .htaccess à la racine de votre installation et supprimez le commentaire # devant la ligne # RewriteBase / (ligne 107 vers la fin du document). L’adresse http://votresite.fr/?q=admin/settings/clean-urls se transforme alors en http://votresite.fr/admin/settings/clean-urls.

Drupal en français

Pour avoir Drupal en français, rendez-vous sur la page de téléchargement et choisissez votre traduction. Contrairement à WordPress où un seul fichier est nécessaire pour la traduction de l’interface d’administration, vous verrez qu’il faut ajouter pas moins de 44 fichiers de traduction répartis dans 77 dossiers.

Heureusement, il suffit de faire glisser les dossiers décompressés aux emplacements adéquats sur votre serveur pour qu’ils fusionnent avec ceux qui sont déjà là (si vous travaillez sur Windows, prenez garde de ne pas remplacer les dossiers).

Assurez-vous ensuite que les modules Locales et Content Translation sont activés dans Administer › Modules. Allez ensuite dans Administer › Site Configuration › Languages et cliquez sur l’onglet Add Language et choisissez French dans le menu déroulant. Validez et sélectionnez French par défaut. Enregistrez la configuration et voilà ! Drupal est en français.

Lire Drupal 6 : comment installer la langue française.

Un éditeur WYSIWYG

Une fois Drupal en français, il est temps de passer à la rédaction des contenus. Dans Drupal, l’éditeur pour rédiger les pages ou les billets est livré en deux parfums :

Filtered HTML : les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les tags HTML autorisés sont limités à , , , , , , , , , , . Les lignes et les paragraphes vont à la ligne automatiquement. Full HTML : les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les lignes et les paragraphes vont à la ligne automatiquement. Tous les tags HTML sont autorisés. Notes : vous verrez plus tard qu’il est possible d’associer un éditeur selon les droits accordés aux utilisateurs de Drupal. Vous pourrez ainsi réserver la version Full HTML de l’éditeur aux administrateurs du site et la version Filtered HTML aux autres contributeurs. Point positif, le champs d’édition peut se scinder en deux pour créer un résumé ou un chapô. Installer un nouvel éditeur visuel Malgré tout, cet éditeur est un peu rustique comparé à ce que l’on a l’habitude de voir sur WordPress. Pour avoir un éditeur digne de ce nom, il faut installer WYSIWYG API qui gère l’installation d’autres éditeurs comme TinyMCE ou FCKEditor, bien plus conviviaux. Et si vous en profitiez pour utiliser BBComposer ? Notes : arrivés là, vous avez certainement eu l’occasion de voir la richesse des options disponibles dans Drupal. L’édition des articles ne fait pas exception et on commence déjà à voir des différences significatives avec WordPress. Notamment en ce qui concerne les paramètres du menu qui permettent de donner un titre plus court pour faire apparaitre l’article dans un menu. Il est même possible de choisir le poids de l’entrée du menu pour préciser son emplacement. Dès que le module wysiwyg est décompressé, faites-le glisser dans le répertoire modules de votre installation Drupal et activez-le dans Administrer › Construction du site › Modules › User Interface › Wysiwyg. Cliquez ensuite dans Administrer et sur Par module (à côté de Par tâche) pour installer ou choisir un éditeur visuel à votre convenance. Vous avez le choix entre 9 éditeurs côté client : jWYSIWYG FCKeditor markItUp NicEdit openWYSIWYG TinyMCE Whizzywig WYMeditor YUI editor Notes : si vous installez FCKeditor, faites attention à ne pas télécharger la nouvelle version CKEditor 3.1, qui ne semble pas encore compatible avec le module wysiwyg. Descendez plus bas dans la page et choisissez FCKeditor 2.6.5. Ou dirigez-vous vers TinyMCE. Notez toutefois que si l’éditeur CKeditor n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible comme module indépendant. J’ai voulu installer openWYSIWYG, mais la version de démonstration m’indique que mon navigateur (Google Chrome) n’est pas pris en charge. C’est balot qu’un projet open source ne prenne pas en charge un produit basé lui aussi sur de l’open source :/ Une fois l’archive décompressée, créez le répertoire /sites/all/libraries et copiez le dossier tinymce. Lorsque vous cliquerez sur Administrer › Configuration du site › Wysiwyg, vous aurez la possibilité d’associer TinyMCE au format d’entrée Filtered HTML ou Full HTML (ou les deux). Comme vous le devinez sans doute, il est bien entendu possible d’associer un éditeur visuel différent par format d’entrée. Il suffit de répéter les étapes précédentes pour comparer TinyMCE avec FCKeditor, par exemple, qui dispose d’une interface en français, ce qui n’est pas négligeableNotez que si l’éditeur CKeditor (nouvelle version de FCKeditor) n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible en tant que module indépendant.. Modifier les préférences de tinyMCE ou FCKeditor Le point fort de Drupal dans sa gestion des éditeurs wysiwyg, c’est sa capacité de pouvoir associer un éditeur différent selon les contributeurs en fonction de leurs besoins ou des restrictions que vous voudrez leur imposer, ou de modifier les préférences d’un même éditeur visuel selon les contributeurs pour affiner encore plus la gestion des droits. Pour cela, retournez dans le module wysiwyg et modifiez le format d’entrée pour accéder aux options Paramètrage de base, Boutons et plugins, Apparence de l’éditeur, Nettoyage et sortie et CSS. Notez que seuls les boutons cochés seront activés au final ; ils ne s’ajoutent pas à ceux qui sont définis par défaut, mais constituent en quelque sorte un nouveau package. En gros, il manque une case Tout sélectionner ;) Voir Install FCKeditor Using WYSIWYG API. Insérer des images dans Drupal, mission impossible ? Quand on a l’habitude de WordPress, il semble tout naturel de télécharger une image depuis le web ou à partir de son poste de travail pour l’afficher où bon nous semble dans un article. C’est encore plus vrai depuis WordPress 2.9 qui autorise quelques traitements sympathiques sur les images. Dans Drupal, c’est comment dire… Bref, c’est pas évident. La documentation précise bien qu’il est possible d’insérer une image dans un contenu via FTP puis d’utiliser la balise HTML img, mais quelque chose me dit que ça ne va pas plaire à tout le monde. Heureusement, il existe plusieurs solutions pour y remédier (ou pas). Module Image (Bof) Le pitch : le module Image permet aux utilisateurs ayant les permissions adéquates d’uploader des images dans Drupal, de les afficher individuellement en page d’accueil, de les insérer dans un article ou encore de les grouper dans une galerie et de créer automatiquement des miniatures de différentes tailles. Faites glisser Image dans le dossier modules de votre installation et activez-le dans Administrer › Construction du site › Modules puis Image. Vous remarquerez à cette occasion que Drupal installe automatiquement les fichiers de langue pour les modules qui en possèdent. Frambi-framboise sur le gâteau, le module Image crée pour nous les répertoires /sites/default/files/images et /sites/default/files/images/temp. Malheureusement, tout ne fonctionne pas comme sur des roulettes : le tableau de bord indique que Image Import et ImageMagick advanced options ne sont pas configurés correctement. Pour le premier, le message précise que le répertoire d’import n’a pas été configuré et pour le second, qu’il n’a pas été installé correctement. Pour spécifier le répertoire d’import, je vais donc dans Administrer › Configuration du site › Images et dans le doute j’indique/home/temporaire/upload. Pour ImageMagick je me contente de le désactiver dans Administrer › Configuration du site › Boite à outils image. En attendant de voir si tout est OK au niveau de mon hébergement je me contenterai de la librairie GD. Bref, après toutes ces péripéties j’ai toujours bien envie d’afficher une image. Or, il semble que ce module ne fait qu’ajouter un type de contenu Image à côté des Pages et des Story. Ce qui ne correspond pas vraiment à mes besoins (Je n’exclus pas, bien évidemment, le fait d’être passé à côté de quelque chose d’essentiel). Mais au moins avons-nous déjà la possibilité d’uploader des images dans Drupal, ce qui n’est pas rien ;) ImageField (Bof) Dépendant des modules CCK et FileField, ImageField fournit un uploader dans la lignée du module Image vu plus haut. Des modules complémentaires permettent de générer des miniatures, de saisir des méta-données en plus des traditionnels alt et title, de recadrer les images ou encore de télécharger des images par lot. Une fois que vous aurez copié ces modules, vous vous apercevrez que CCK est un gros morceau : il bénéficie d’un menu pour ses dépendances dans la liste des modules. Ne sachant pas encore de quoi j’aurais exactement besoin, j’ai tout coché. Mais impossible d’activer le module FileField à cause de l’absence du module getID3 (gestions des informations contenus dans les fichiers audios). Dans le doute, je l’installe. Un message d’erreur m’avertit que je n’ai pas installé la bibliothèque getID3 dans le dossier sites/all/libraries/getid3/. Mais nous ne somme pas au bout de nos peines car à la lecture de la documentation de ImageField, il semble nécessaire d’installer les modules ImageCache et ImageAPI qui n’était nécessaire que pour la version 5.x de Drupal… Une fois ImageCache installé, mis à jour et assimilé dans les grandes lignes (les plus pressés regarderont directement la vidéo Maintainable Image Gallery), vous pourrez vous rendre sur Administrer › Construction du site › ImageCache pour voir les possibilités du module. J’ai également installé le module Views qui de toutes façons fait partie des incontournables de Drupal (pendant que vous y êtes, installez également le module d’aide avancé pour Views). Une fois que vous aurez terminé le tutoriel Imagefield – how to set up and make a basic view vous aurez plus ou moins la même chose qu’avec le module Image présenté plus haut… Lire Préparer Drupal pour la manipulation d’images. IMCE (Yeah!) Le module IMCE permet d’uploader des fichiers et des images avec la gestion des répertoires distants en prime. Le tout compatible avec FCKeditor, TinyMCE et WYMEditor. Pour éviter certaines incompatibilités entre les éditeurs et/ou certains modules, il est préférable de passer par le module IMCE Wysiwyg bridge qui facilite l’intégration du module IMCE dans les éditeurs visuels TinyMCE et FCKeditor pour le moment. Pour éviter de tout mélanger, je vous conseille de désactiver le module Image installé précédemment et d’installer IMCE et IMCE Wysiwyg bridge puis de jeter un oeil sur les options de IMCE dans Administrer › Configuration du site › IMCE. Pour accéder à ce qui nous intéresse, une dernière étape est nécessaire : cocher la case IMCE dans la liste des boutons et plugins de l’éditeur visuel TinyMCE dans Administrer › Configuration du site › Wysiwyg ! Faites la même chose pour FCKeditor pendant que vous y êtes, histoire de passer rapidement d’un éditeur visuel à l’autre. L’idéal étant de créer deux nouveaux formats d’entrée en plus de Filtered HTML et de Full HTML pour leur associer nos deux éditeurs visuels nouvellement installés. Le résultat de nos manipulations prend la forme d’une icône Browse ou d’un bouton Parcourir le Serveur juste à droite du champs URL de l’image (quand on a cliqué sur l’icône Insérer/modifier l’image). Un clic sur ce bouton affiche enfin la boite de dialogue qui permet d’uploader, de générer les miniatures et d’envoyer le tout à l’éditeur qui se chargera d’afficher l’image dans l’article, enfin ! Notez que le module IMCE est également disponible pour le module CKeditor. Ca ne marche toujours pas ? Que l’image s’affiche correctement dans l’éditeur ne signifie pas qu’elle s’affichera dans votre article une fois publié… La raison est que même si vous spécifiez un éditeur visuel comme FCKeditor, le comportement par défaut est de filtrer les balises HTML à la manière de Filtered HTML. Pour y remédier, rendez-vous dans Administrer › Configuration du site › Formats d’entrée et décochez la case filtre HTML. Drupal 7 (Yeah?) La prochaine version de Drupal devrait gérer nativement les images avec des champs Image pouvant être ajoutés aux contenus et auxquels peuvent être attachés des effets tels que le redimensionnement, le recadrage, etc. Cette version est actuellement en Alpha1. Notes : cette prochaine mouture de Drupal marquera un tournant dans l’ergonomie du CMS qui devrait avoir été amélioré de manière significative par rapport à la version 6.15 que je teste actuellement. En attendant la suite des tribulations d’un WordPressien en Drupalie… Malgré la longueur de ce billet, l’installation de Drupal est moins compliquée qu’il n’y parait. Les problèmes que j’ai rencontrés vous seront sans doute épargnés. L’installation des différents modules prend du temps et de nombreux aller-retours sont nécessaires pour installer, activer ou modifier les paramètres. Les critiques concernant l’ergonomie perfectible de Drupal (qui va être radicalement modifiée avec l’arrivée de la version 7) sont sans doute un moindre mal au regard des possibilités. Et puis, entre nous, si vous trouvez que Drupal est trop riche, c’est peut-être que WordPress ou votre CMS préféré suffit à votre bonheur ^_^ Toutefois, la saisie et la mise en forme de textes et d’images sont le coeur et la raison d’être de tout CMS et l’absence d’un éditeur visuel intégrant images, son, vidéos, etc. se fait cruellement sentir. D’autant plus que les solutions proposées par la communauté Drupal n’offrent pas le même confort d’utilisation que ce qu’on trouve dans WordPress 2.9 où le module d’upload et d’édition d’image est une petite merveille. Mais la version 7 pointe son nez et tout ces inconvénients ne seront sans doute qu’un mauvais souvenir ;) Quelques liens Drupalfr Kolossaldrupal Biboo Drupalistic Learn By The Drop Articles sur le même sujet BBComposer — l’éditeur HTML à consommer sur place ou à emporter Le petit journal du web — WordPress, développement web, etc. PHPCrossRef — Bibliothèques de référence pour projets PHP Open source IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples Markdown on Save — L’ami HTML de Markdown pour WordPress

PNGHack — La fin de 7 ans de malheur avec IE 6 Bruno Bichet — Sun, 07 Sep 2008 08:40:24 +0000 En 2001 Internet Explorer 6 n’avait toujours pas intégré la transparence du format PNG pourtant sorti en 1995. Cette gestion de la transparence est une des fonctionnalités qui manquent le plus aux web designers… Parmi les nombreux scripts permettant à IE6 de gérer cette transparence, je vous propose de jeter un oeil sur PNGHack de Yves Van Goethem. Voir la présentation sur Slideshare. Articles sur le même sujet 390 ressources Javascript & jQuery IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards 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.

css 4 design » Images

390 ressources Javascript & jQuery

217 ressources commentées

73 tutoriels : Slideshow, Sliders & Diaporama

100+ Polyfills et Fallbacks pour HTML5

Voilà, c’est fini !

Articles sur le même sujet

HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir

Remplacement d’image avec CSS

pour remplacer le titre du site, par exemple.

HTML 4.01

n’étant pas affiché, notre logo-image n’est pas cliquable. C’est bien embêtant.

HTML 5

:

D’après la spécification HTML5…

Articles sur le même sujet

Quelques notes sur les éléments graphiques du webdesign

Direction artistique & Web design

En-tête, bannière et pied de page

Header

Footer

Exemple de big footer simple et graphique à la fois

Colonnes et barres latérales

Les frameworks CSS permettent de créer une système de colonne pour votre site web

Contours et angles

Arrondir les angles ou pas ?

Rubans (ribbons)

Ombres portées

Bords déchirés

backgrounds

Fond blanc

Aplat de couleur

Dégradés

Zébrures (Stripes)

Tartan

Images

Background « bruité »

Fonds artistiques

C’est tout pour le moment

Articles sur le même sujet

Lorem Pixum — Images de placement gratuites en Creative Commons

Lorem Pixum : des images gratuites pour donner vie à vos pré-maquettes.

A emporter !

Articles sur le même sujet

IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

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]

Petit mais costaud, c’est jQuery

Regarde Maman, sans jQuery !

Cibler uniquement IE6

Voilà, c’est fini !

Articles sur le même sujet

15 « Photoshop-like » en ligne testés et commentés

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Les plus

Les moins

Verdict

Autres outils bien pratiques