CSS & Webdesign » Images

Optimiser les images PNG, JPG, GIF

Bruno Bichet — Sun, 29 Apr 2012 18:01:32 +0000

Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site :

Outils en ligne

PunyPNG — Réduit le poids des fichiers PNG, JPEG et GIF
Smush.it — Compresse les images au format PNG

Logiciels à installer

ScriptPNG et ScriptJPG sont des logiciels pour Windows 32 bits permettant d’optimiser les fichiers images en utilisant différents niveaux de compression pour réduire la taille des fichiers :

ScriptPNG convertit les formats GIF, BMP, JPG, PCX, ou TGA vers le formats PNG.
ScriptJPG optimise les fichiers JPG grâce à un algorithme avec ou sans perte en fonction de la qualité d’image que vous voulez.

Autres outils

→ Comparatif entre les différentes solutions. Merci @nhoizey pour le lien o/

Articles sur le même sujet

11 vidéos pour comprendre l'accessibilité du point de vue… des mal-voyants

Bruno Bichet — Sun, 12 Feb 2012 18:54:03 +0000

L’accessiblité des sites web est une choses dont on parle souvent, sans forcément avoir une idée très précise de la manière dont les mal-voyants utilisent les sites que nous concevons, généralement, pour le plus grand nombre. Les enjeux sont importants car le web permet aux mal-voyants de communiquer, de s’informer et de gérer une partie de leur vie quotidienne. Cette série de vidéo proposée par Access-Key de l’Université Nice Sophia-Antipolis devrait fixer les idées sur des cas concrets, pour nous permettre d’améliorer la lisibilité et le décodage de nos sites web.

Ces 11 vidéos en libre-accès illustrent de manière pédagogique les recommandations du WAI :

Utilisation des terminaux mobiles (iPhone, iPad, et plage braille mobile) — Christian, non-voyant, accède en toute liberté à l’information et à l’échange de données, sur un ordinateur portable, un smartphone, une tablette tactile grâce à une synthèse vocale ou une plage braille.
La synthèse vocale — Jean nous présente l’utilisation d’un ordinateur au moyen d’un synthèse vocale.
La plage Braille — Jean accède à son ordinateur au moyen d’une plage tactile braille.
Les tableaux — Ce tutoriel explique comment rendre les tableaux plus accessibles.
Des liens hypertextes compréhensibles — Isabelle utilise un logiciel de revue d’écran qui offre des possibilités de navigation grâce aux liens présents sur la page.
Les alternatives textuelles aux images –Isabelle détaille ici les difficultés qu’elle rencontre lorsqu’il n’existe aucune alternative aux images.
Déclarer la langue dans une page Web — Jean explique les désagréments causés lorsque les changements de langues ne sont pas indiqués.
Des formulaires accessibles — Isabelle explique les difficultés rencontrés avec un formulaire non accessible.
Des images liens accessibles — Jean fait une démonstration des problèmes liés aux images-liens pour une personne utilisant une aide technique pour naviguer.
Le mobile web — Les standards du web ouvrent les portes d’un web accessible pour tous.
L’accessibilité du flash et des composants externes — Quels sont les points qui peuvent poser problème lors de l’accès à une page qui proposent la rubrique actualités uniquement à travers une animation flash ?

Merci à la liste de diffusion Pompeurs !

Pompage et CSS débutant nous offrent une liste de discussion francophone pour créateurs de sites web.

Articles sur le même sujet

31 outils en ligne simples et efficaces pour les travailleurs du web

Bruno Bichet — Sat, 11 Feb 2012 13:56:11 +0000

Ce billet est une sorte de «Note pour plus tard» pour garder sous le coude quelques outils en ligne que j’utilise régulièrement ou que j’ai redécouverts dernièrement. Ils vous permettront de partager des bouts de code, prendre des notes, créer des penses-bêtes, sauvegarder vos bookmarks, partager des textes, valider votre prose (CSS, HTML, XML, RDF), placer du faux-texte et des fausses images (placeholders) dans vos pages web. Vous (re)découvrirez également des dictionnaires, des correcteurs orthographiques et des ressources web à garder sous la souris. Le tout réparti entre développement web, édition & travail collaboratif et dictionnaires et ressources.

Développement web

jsfiddle — Idéal pour partager des bouts de code ou mettre en place des tests avec HTML, CSS, jQuery (ou Mootools, etc.). Voir aussi : JS Bin, Pastie, Pastebin.
MarkUp Validator – Utile pour tester la validité de votre code HTML (mais aussi XHTML, SMIL, MathML) selon les spécifications du W3C. D’autres outils de validation existent, notamment pour vérifier la conformité de CSS, RDF, RSS, XML. Quant à Link Checker, il vous permettra de vérifier si votre site contient des liens qui ne fonctionnent plus ; Semantic Extractor vous montrera vos pages du point de vue sémantique.
HTML-Ipsum – Bien sûr, rien ne vaut le texte définitif. Mais en attendant que votre client ne vous fournisse le Saint-Graal du Webdesign (le contenu), voici une ressource à garder sous le coude pour créer des blocs de HTML (paragraphes, listes ordonnées ou non, listes de définition, formulaires, titres et paragraphes plus ou moins longs, etc.), avec du faux-texte. Voir aussi Lipsum qui propose du faux-texte dans une quarantaine de langues.
Lorempixel — Choisissez une taille d’image et un thème en accord avec le sujet de votre site (parmi les 11 disponibles), puis cliquez sur Image couleur ou Niveau de gris pour obtenir un visuel de placement pour agrémenter vos pages remplies de Lorem Ipsum. Voir aussi Placekitten, Dummyimage ou Placehold.it.
CSSLisible — Tout droit sorti du labo de Darklg, cet outil réorganise vos CSS et change l’ordre des propriétés pour faciliter la lecture (et donc la maintenance) de vos feuilles de style. Attention, pour le moment, les commentaires sont retirés ! Voir aussi Styleneat.
PunyPNG — La compression d’image qui va bien. Cet outil optimise vos images en réduisant considérablement leur taille, sans perte de qualité. Voir aussi Smush.it.
Listes pour Webdesigner — Last but not least, voilà une liste d’une vingtaine de liste qui devrait faire plaisir aux accros des bons tuyaux !

Edition & travail collaboratif

Markdown Editor — J’ai adopté la syntaxe Markdown depuis déjà plusieurs années pour prendre des notes structurées et les transformer en billet via l’excellent plugin Markdown on Save pour WordPress. Pour en revenir à Markdown Editor, il vous permettra de transformer à la volée votre syntaxe Markdown en HTML sans forcément passer par un CMS…
Diigo — J’ai cherché une solution de bookmarks alternative à Delicious lorsque Yahoo! a cherché des repreneurs, il y a quelques mois. J’utilise régulièrement la Diigolet pour sauvegarder mes liens, prendre des notes et les partager sur les réseaux sociaux. Une fonction enregistre automatiquement les liens sur Delicious. Vous pouvez me retrouver sur mon compte Diigo. Voir aussi Scrible.
Notepad.cc — Mini éditeur en ligne, à l’image du Bloc-note de Windows. Idéal pour partager des notes, protégées ou non par mot de passe.
Ta-da List — Créer des listes de choses à faire, réordonner les items, partager vos listes, etc. Un site de todolist simple et efficace, pour nous, qui avons toujours tant de choses à faire pour avant-hier. Voir aussi Workflowy.
Writeboard — Un outil pratique pour rédiger et corriger des textes à plusieurs. Chaque «Board» est accessible via une URL. Les révisions sont listées dans la marge avec le nom des personnes ayant apporté des modifications. Il est possible de s’abonner au flux RSS des modifications faites sur les documents.
Doodle — Organiser des réunions, des rencontres en créant des sondages pour connaitre le moment qui conviendra au plus grand nombre de participants. Vue Tabulaire (liste) ou vue Calendrier pour avoir une vue d’ensemble des disponibilités et des événements.
Twtpoll — Créer des sondages et des enquêtes d’opinion et partagez-les sur les réseaux sociaux grâce à une simple URL.
Kiwoos — Créez votre sondage en quelques clics … Et partagez-le sur Twitter et Facebook avec vos amis.

Réseaux

Ping.eu — Tout connaitre ou presque à propos d’une adresse IP ou d’un nom de domaine : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter !

Dictionnaires et références

yoyodesign — Nombreuses traductions d’articles et de recommendations du W3C. Voir également la liste des traductions françaises des documents du W3C.
htmldog — C’est en anglais, mais la clarté des explications en fait une référence incontournable pour tout ce qui touche au développement web, avec un dictionnaire HTML où l’on retrouve toutes les balises passées au crible avec des exemples d’utilisation, les attributs requis, les attributs optionels et des exemples !
gotAPI — regroupe les principales API du web dans une interface Ajax très réactive : HTML, CSS, Javascript, jQuery, PHP, Ruby, asp, mais aussi le fonctionnement de certains CMS comme Drupal ou de services web comme Flickr.
Giminik — La liste des balises XHTML 1.1 (ou 1.0 Strict sans les éléments obsolètes), leur utilité, leurs attributs, leurs évènements et la relation entre parents et enfants (hiérarchie). Indispensable pour construire un document valide.
Guide HTML — Le HTML de A à Z de Laurent Bernat : 95 balises HTML décrites par le menu (version, compatibilité Netscape / IE, type, attributs, usage, exemples) (Merci Loïc M.).
Opquast — l’ensemble des bonnes pratiques pour la qualité des services en ligne. Abonnez-vous au fil RSS des bonnes pratiques pour avoir votre dose quotidienne.
Openweb — Les bonnes pratiques en action pour les technologies du web (XHTML, RSS, CSS, DOM, PNG) et les différents thèmes qui y sont associés (pages dynamiques, navigateurs, accessibilité, études de cas, mise en page, multimédia, structure).
Développez (pour le web) — toutes les technologies du web à portée de clic. Des tutoriels, des cours, des documents à télécharger. Allez, faites le plein !
Forum Alsacreations — Presque toutes les questions sur les CSS et le HTML et quasiment toutes les réponses ! Cerise sur le gâteau, la FAQ est complète et bien organisée.
Wiki Media Box — Pour obtenir une présention claire (succinte ?) d’une propriété CSS et sa compatiblité avec les navigateurs, c’est nickel (Merci Pierre le Bot).
Leftlogic — Permet de voir le code html d’un caractère, pratique lorsqu’on cherche le code pour ñ par exemple (Merci Anthony).
Format publicitaire AdSense — Et oui, qui n’a pas eu besoin de prévoir des emplacements publicitaires dans une charte graphique et de chercher les formats les plus courants ? Voici les formats en vigueur chez Google, qu’il s’agisse des formats textes, images ou vidéos.
WordReference — Sans doute le meilleur site de traduction (mot à mot en incluant les locutions idiomatiques). Pour les cas difficiles, vous pouvez utiliser le forum. Nombreux plugins Firefox pour la recherche par langue.
Les dictionnaires — Un maximum de dictionnaires thématiques classés par catégories : langue française, synonymes, encyclopédie, citations et expressions, gastronomie, humour, acronymes, etc. Mention spéciale pour le Trésor de la Langue Française Informatisée (TLFI pour les intimes) : interface web 0.2 mais très efficace (Florent V. sous souffle dans l’oreillette que l’on peut y accéder via le portail lexical du Centre national de ressources textuelles et lexicales.
BonPatron — Correcteur qui trouve des fautes d’orthographe et de grammaire en français.

N.’hésitez pas à partager vos services en ligne préférés dans les commentaires de ce billet, sur Twitter ou sur Google+, c’est vous qui voyez :-)

Articles sur le même sujet

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.

CSS & Webdesign » Images

Optimiser les images PNG, JPG, GIF

Outils en ligne

Logiciels à installer

Autres outils

Articles sur le même sujet

11 vidéos pour comprendre l'accessibilité du point de vue… des mal-voyants

Articles sur le même sujet

31 outils en ligne simples et efficaces pour les travailleurs du web

Développement web

Edition & travail collaboratif

Réseaux

Dictionnaires et références

Articles sur le même sujet

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