CSS & Webdesign » Accessibilité

La journée mondiale de l’accessibilité, c’est maintenant !

Bruno Bichet — Wed, 09 May 2012 17:49:58 +0000

Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap.

Demain, le Web sera plus humain

Merci à Monique Brunel (Webatou) d’avoir partagé cette vidéo.

Articles sur le même sujet

Check your avec le W3C

Bruno Bichet — Wed, 11 Apr 2012 20:35:20 +0000

Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web.

Principaux validateurs du W3C

Unicorn– C’est le Validateur unifié du W3C pour :
- Vérifier la conformité générale en effectuant tous les tests possibles.
- Vérifier la validité pour les profils CSS 1, CSS 2, CSS 2.1 et CSS 3.
- Vérifier la compatibilité avec les portables.
- Vérifier la syntaxe des flux Atom ou RSS.
- Un dernier choix permet de sélectionner les tests à effectuer parmi les items précédents.
Markup Validation Service — Connu également sous le nom de Validateur HTML, ce service vérifie la conformité des formats HTML, XHTML, SVG ou MathML.
Link Checker — Vérifie les ancres dans un document HTML / XHTML. Pratique pour faire le point sur les liens brisés.
CSS Validator — Vérifie la conformité des feuilles de style CSS ou des documents qui comportent des styles CSS. Les trois derniers outils sont réunis dans Log Validator qui permet d’améliorer la qualité d’un site web pas à pas en cherchant les erreurs en premier lieu dans les documents les plus populaires. Plus d’information à ce sujet dans Passer aux standards Web rédigé par Karl Dubost (@karlpro).
mobileOK checker — Vous développez pour les périphériques mobiles ? Ce service vous aidera à découvrir les points faibles de votre site lorsqu’il est affiché sur un smartphone.

Autres services du W3C

Semantic Extractor — Affiche votre page web d’un point de vue sémantique : outline, description, langages utilisés, etc.,
RDF Validator — Vérification et affichage des documents RDF,
Feed Validator — Vérification des flux de nouvelles aux formats ATOM et RSS,
P3P Validator — Vérifie si un site est compatible P3P,
XML Schema Validator — Outil en cours d’approbation par le W3C,
Logiciels open source du W3C.

W3C Cheat Sheet

Valider c’est bien, encore faut-il savoir comment améliorer les éléments que ces fabuleux outils soumettent à notre sagacité. Si le W3C est capable de trouver la source des maux dont souffrent nos pages web, il nous donne aussi les clés pour améliorer notre pratique.

W3C Cheat Sheet est un outil open source que le W3C met librement à la disposition des développeurs web. Il fournit un accès rapide à tout un tas d’informations concernant les différentes spécifications publiées par le W3C :

Articles sur le même sujet

9 ressources pour web designer

Bruno Bichet — Sat, 25 Feb 2012 18:04:51 +0000

Il ne se passe pas une journée sans qu’un ou plusieurs liens ne tombent dans ma veille technique et attirent mon attention. Ces liens se retrouvent généralement sur mon compte Diigo. En voici une sélection triée sur le volet qui comprend des informations sur les standards du web et le W3C, l’accessibilité des icônes créées avec font-face, des ressources pour donner des couleurs à vos sites, des tutoriels pour apprendre Javascript et les API’s de Google, etc.

Standards du W3C — Après un bref historique sur l’histoire du HTML et les travaux du W3C et du WHAT WG, la présentation aborde le niveau de prise en charge des propriétés et API’s HTML5 par les navigateurs. Une présentation simple, rapide et qui va à l’essentiel.
Accessibilité des icônes “@font-face” — Le côté séduisant des icônes créées avec la propriété font-face ne doit pas nous faire oublier de penser à leur accessibilité par les lecteurs d’écran. (cf. 11 vidéos pour comprendre l’accessibilité).
CSS Color Palette extractor — Extrait les couleurs d’une feuille de style CSS sous la frome d’une palette des couleurs et des niveaux de gris. Idée originale et pratique de @mauriz.
Google Developper — Le site de Google pour maitriser les API’s de Google : Google+, Android, Chrome, Google Maps, Google TV, le e-commerce, etc.
Learning JavaScript Design Patterns — Un cours complet sur les bonnes pratiques de développement avec Javascript et jQuery.
ColorHexa — Informations sur les couleurs et conversion vers les modèles Hexadecimal, Binaire, RVB, CMJN, TSL, CIE-Lab, etc. ColorHexa gère également les correspondances de couleur complémentaire, analogique, triadique ou monochromatique.
Microthemer — Un plugin pour personnaliser votre thème WordPress visuellement, sans connaissance technique particulière. Fonctionne pour les thèmes : Twenty Eleven, Twenty Ten, Thematic et Toolbox. Via @BoiteAWeb.
Typography Converter — Un outil de conversion de mesures typographiques parmi la myriade des convertisseurs disponibles sur unitconversion.org. Un must-have à garder sous la souris.
La timeline de la création numérique — Last but not least, voici une présentation rapide de mon nouveau projet pour tous les designers : web, print et au-delà.

Retrouvez-moi sur Twitter à travers mon compte @br1o, histoire de faire plus ample connaissance o/

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

Logo pour les Libres Ballons du Bastberg

Bruno Bichet — Fri, 22 Apr 2011 09:44:44 +0000

Il y a environ un an, j’ai eu l’occasion de réfléchir avec Luc Muller (développeur Web spécialiste TYPO3) sur la création d’un logo pour l’association alsacienne Libres Ballons du Bastberg. Ces passionnés de montgolfière proposent aux membres de l’association des vols d’initiation, des formations au pilotage et des animations publiques. Et comme l’accessibilité ne concerne pas uniquement le web, l’association LLB-67 réfléchit à la mise en place de montgolfières accessibles aux personnes en situation de handicap en Alsace. Egalement accessible aux touristes de passage, logeant dans un hôtel ou un gîte en Alsace.

C’est dans le cadre de ce projet que j’ai eu le plaisir de proposer un logo pour permettre à l’association de le présenter aux différentes institutions susceptibles d’apporter leur soutien.

A ma connaissance, c’est la première fois que je réalise un logo qui s’envoie en l’air, imprimé sur une montgolfière ;-)

Articles sur le même sujet

Utiliser les rôles ARIA à la place des identifiants CSS

Bruno Bichet — Mon, 18 Apr 2011 08:48:44 +0000

Les rôles ARIA sont des attributs que l’on ajoute aux balises HTML dans certaines zones du document pour préciser leur fonction. Ces attributs permettent aux différentes technologies d’assistance pour les personnes en situation de handicap de se repérer dans votre document. Dans cet article nous verrons comment nous pouvons remplacer l’attribut id par les rôles ARIA lorsqu’il s’agit d’accéder aux éléments pour les styler avec CSS.

Marquage HTML

Voici quelques exemples de balises auxquelles j’ai attribué des rôles ARIA :

Exemple de CSS

Pour cibler les éléments vus plus haut, il suffit d’utiliser les sélecteurs d’attributs à la place des identifiants.

header[role="banner"] {
    background: #E5525C;
}

A la place de

#banner {
    background: #E5525C;
}

En bref

A première vue, et après quelques essais, il semble que cela fonctionne bien dans les navigateurs modernes et à partir de IE7 pour Internet Explorer. J’ai mis un exemple en ligne pour fixer un peu les idées ; il me sers également à tester les propriétés display: table et display: table-cell pour faire une mise en page web en attendant de développer cette technique dans un prochain article.

→ Voir l’exemple et la CSS associée

→ Lire cette excellente introduction à WAI-ARIA, De l’accessibilité dans HTML5 et la documentation officielle du W3C.

Articles sur le même sujet

CSS Sans Stress — Une formation intégrateur HTML & CSS

Bruno Bichet — Fri, 25 Mar 2011 15:21:54 +0000

La plupart des formations dédiées à la création de sites web ressemble trop souvent encore aujourd’hui aux formations PAO d’hier où l’on apprenait à utiliser des logiciels sans rien connaitre des aspects «métier». A quoi bon connaitre les différentes manières de faire des colonnes dans Quark XPress ou InDesign et d’importer du texte et des images si l’on a aucune notion de mise en page et de typographie ?! C’est la même chose avec Dreameweaver ou votre éditeur HTML préféré. Les fondamentaux du graphisme et les principes de base de l’ergonomie doivent faire partie intégrante des projets de formation en Webdesign, sans quoi ils sont voués à l’échec.

Introduction

En attendant que les pouvoirs publics ne se décident à financer des formations adaptées — et puisque le Pôle-Emploi est souvent hors du coup et hors des coûts –, se sont des générations de Webdesigners qui sont souvent formés à la va comme je te pousse ! A moins qu’un veilleur bien inspiré de la Région Rhône-Alpes ne vienne lire ce billet…

«Les Standards du Web, connais pas, c’est quoi ? Moi, j’ai suivi une formation en Webdesign Dreamweaver. Mais une fois, le formateur nous a fait cliquer sur le mode Source. Ça ne compte pas ?»

Par Astrid Graeber via Wikimedia Commons

Former des grands débutants à la création de site Web From Scratch est un pari difficile. Voici quelques éléments issus de la formation Chargé d’Intervention Multimédia que j’ai mise en place il y a une dizaine d’années pour le compte de la région Rhône-Alpes.

A l’issue de cette formation, les apprenants devaient être capables de mettre au jour les besoins du client, de formaliser les besoins dans un cahier des charges, de créer l’architecture d’un site internet, de concevoir le design à l’aide de Photoshop et d’Illustrator, de réaliser l’intégration d’un PSD dans Dreamweaver et de comprendre les bases de Javascript, PHP & MySQL.

Si je devais remettre cette formation en place aujourd’hui, je remplacerais Dreamweaver par Notepad++, j’insisterais lourdement sur les CSS 2.1 et CSS3 et la sémantique associée aux balises HTML5 et j’ajouterais la réalisation d’un thème WordPress comme examen de fin d’année ;-)

«J’ai bien envie de savoir découper un PSD autrement qu’en exportant toutes les tranches depuis ImageReady, c’est possible ?»

Niabot (Licence GFDL ou CC-BY-3.0), via Wikimedia Commons

Tout au long de la formation, j’insiste sur l’accessibilité, l’ergonomie, les standards du Web, la rédaction Web et le référencement (SEO). J’aborde également les outils de mesure d’audience (Google Analytics, GetClicky, Feedburner) et l’utilisation des réseaux sociaux pour faire la promotion de son site et effectuer une veille technique pro-active.

Ça fait beaucoup de choses, mais distillés par petites touches, ces conseils trouvent leur place et permettent de recadrer la production des apprenants avec des arguments concrets du type : «oui, ton texte est très bien écrit, mais non, en verdana 9px ça passe difficilement et en plus tu risques d’augmenter ton taux de rebond» ou encore : « Ton formulaire de recherche est bien placé mais sans bordure, avec son fond gris clair sur blanc on ne le distingue pas », etc.

Après Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS , ce billet fait partie d’un ensemble d’articles que je compte consacrer à la mise en place d’une formation globale sur l’intégration HTML & CSS dont le nom de code provisoire est :

« CSS Sans Stress & HTML S’en Mêle »

C’est quoi le Web ?

Expliquer comment faire un site Web c’est d’abord dire deux mots sur le Web et l’Internet dans les grandes lignes : histoire, protocoles, notions de client-serveur, débits, navigateurs et enfin la page web elle-même. Un site web n’est qu’une collection de pages reliées entre elles par une intention plus que par une technologie. C’est cette intention qui se traduit par le design dans le sens de «dessein».

A partir de là seulement, on peut évoquer la partie technique : HTML, CSS, Javascript, formats d’images et vidéos puis aller voir sous le capot l’apparence du code source. Pour éviter que l’expression «code source» ne soit source de confusion, j’insiste sur le fait que ni HTML ni CSS ne sont des langages de programmation, contrairement à Javascript côté client ou PHP côté serveur, par exemple.

Une très brève histoire du web

Représentation symbolique du réseau Arpanet (september 1974)

Par Yngvar (Public domain), via Wikimedia Commons

En 1969, un réseau connecte les universités d’Utah et de Californie. A partir de 1972 et jusqu’en 1981, les 213 hôtes qui sont reliés donneront naissance au cœur du réseau des réseaux (l’Internet). C’est à cette époque que les RFC sont mises en place : elles permettront de proposer et de distribuer les protocoles qui régissent et font vivre Internet aujourd’hui encore. Source Wikipédia.

Alors, c’est quoi le Web ? La lecture de l’article La plateforme Web de Karl Dubost (@karlpro sur Twitter) est très instructive. Le web est un espace d’information composé d’éléments caractérisés par des identifiants, appelé URI pour Uniform Resource Identifier. En gros, il s’agit de documents accessibles via un identifiant, par exemple une URL. Ce n’est peut-être pas grand chose, mais c’est déjà beaucoup.

Les premiers documents Web

Le site web du consortium du World Wide Web en 1992 encore accessible sur le site du W3.org

Les premières pages web sont principalement des documents universitaires, ce qui n’est pas étonnant puisque le Web est né du besoin des universités de partager leurs connaissances ou de confronter leurs travaux. Les balises HTML ont été conçues pour mettre en ligne des documents sémantiques et structurés et HTML5 ne déroge pas à ce sacro-saint principe.

Mise en page en tableaux

Les tableaux ont permis aux Webmasters de proposer des pages moins linéaires. On a ainsi vu apparaitre des en-têtes, des colonnes et des pieds de page. L’augmentation progressive des débits de connexion aidant, les images ont pris peu à peu la place qu’elles occupaient déjà dans les documents imprimés.

Inutile de sortir votre palette et vos pinceaux : la mise en page en tableaux ne fera pas de vous un(e) artiste ! (Photo par Rinina25)

photo by Rinina25 sur Wikimedia

Les tableaux c’était bien, mais leurs limites ont rapidement été atteintes : la maintenance est un casse-tête, l’accessibilité est souvent compromise et le ratio «code vs. contenu» n’est pas du bon côté de la force.

Mise en page avec CSS

Dans les années 2001, on a commencé à se dire que les CSS permettraient de produire des sites web plus efficaces en terme de maintenance, notamment en ce qui concerne la partie liées à la décoration des polices de caractères pour éviter d’alourdir les pages avec trop de «font» . Mais c’est à partir de 2005 (à la louche) que leur utilisation a vraiment commencé à s’imposer dans les esprits grâce au nouvelles possibilités de positionnement des blocs.

Les feuilles de styles CSS de l’intégrateur web ne sont pas fatiguées d’être sexy, elles !

By danBLOO (Own work) Public domain, via Wikimedia Commons

Toutefois, à cette époque encore, les CSS ont la réputation d’être un peu rigides ; les sites un peu funky n’y trouvent pas toujours leur compte. On reproche aux CSS de produire des mise en pages trop «carrés» (bien avant border-radius, donc). Pour certains, les CSS permettent tout juste d’arriver à la hauteur des sites Web en tableaux les plus basiques.

La lecture régulière de sites tels que Cybercodeur, Openweb, CSS Zen Garden ou Alsacréations ont permis de tirer le meilleur du couple HTML & CSS vers le haut pour produire des pages Web respectueuses des standards, des maquettes du client et des délais (et des performances).

C’est quoi le graphisme ?

Les notions de Graphisme et de Design sont un peu les «laissés pour compte» dans les formations en création de site web. Tout au plus a-t-on le temps d’enfoncer le clou de la lisibilité et de donner quelques conseils de base concernant les trois mamelles du gris typographique : polices de caractères, contraste et interlignage.

Ce n’est pourtant pas une mission impossible. Il suffit de rappeler que le graphisme est composé de deux parties distinctes et complémentaires : Direction artistique et Design. La première va définir l’ambiance, le style, ce que le visiteur va ressentir en voyant le site ; tandis que le second est l’application des bonnes pratiques concernant la manière dont sont agencées les composantes de chaque page. Ce n’est jamais que l’expression de l’opposition de principe entre le fond et la forme, l’intention et l’exécution.

Une fois que l’on a bien compris que la direction artistique et le Web Design sont deux choses différentes, on peut se concentrer sur les fondamentaux du graphisme : les principes du design (traduit en français sur pouipouidesign) et les éléments que ces principes doivent organiser.

Graphisme & Webdesign

Voici le minimum syndical dont tout apprenant en Webdesign devrait entendre parler, ne serait-ce que dans les grandes lignes en fonction de la durée de la formation.

Quelques principes de base, un milliard de possibilités

Équilibre (symétrie, asymétrie)

Les notions de base de notre physique quotidienne comme la masse, la gravité ou encore le vide restent actives lorsque nous regardons une composition graphique. Nous attribuons un «poids visuel» aux éléments qui composent une mise en pages. Cet équilibre peut être arrangé de manière symétrique ou asymétrique.

Dans le premier cas, la composition est répartie autour d’un axe vertical ou horizontal. Il en résulte une impression… d’équilibre, de paix, de stabilité. Dans le cas de l’asymétrie, les éléments sont organisés de manière à produire une plus grande tension visuelle par l’utilisation de plusieurs petits éléments pour équilibrer une plus grande forme, par exemple.

Rythme (régulier, mouvant, progressif)

L’intervalle entre la répétition ou l’alternance d’éléments crée le sens du mouvement et définit des motifs ou des textures. Le rythme peut être régulier lorsque les intervalles ou les éléments sont similaires en taille ou en longueur, fluide avec un mouvement plus organique ou plus naturel, ou encore progressif lorsque des étapes sont suggérées.

Proportion (distribution des formes, échelle et relation entre les éléments)

Il s’agit des dimensions ou de la distribution des formes, mais aussi de l’échelle entre un élément et un autre. Un petit objet à côté d’un plus important peut donner l’impression d’être plus éloigné.

Hiérarchique ou prédominance (quelle place pour quel élément)…

…Ou comment établir la perspective d’une composition et décider de l’importance relative des éléments entre eux selon le premier-plan, le plan médian et l’arrière-plan. Il existe la perspective à deux points de fuite et à trois points. Rarement utilisée, cette dernière est utilisée pour augmenter une perspective représentant des immeubles très hauts, des clochers d’église, etc. Via ABC Dessin.

Unité (d’après la Gestalt théorie)

Il s’agit de la composition vue comme un tout, où chaque élément, les liens et les relations qu’ils entretiennent font partie d’une démarche conceptuelle qui pousse l’esprit à établir des liens, à former des catégories ou des groupes porteurs de sens. La nature a horreur du vide, l’esprit humain aussi !

Fermeture — L’esprit imagine les pièces manquantes dans une composition,
Continuité — L’œil continue dans une direction donnée,
Similarité — Relation entre la forme et la fonction,
Proximité — Relation entre les éléments et comportement induit,
Alignement — Mise en place des objets dans l’espace pour organiser des ensembles cohérents.

La couleur

J’ajoute un topo sur les couleurs, sans lesquelles la vie serait bien triste. Sans entrer dans le détail de la symbolique des couleurs, je retiens que l’on a toujours besoin d’une couleur dominante et de quelques couleurs secondaires.

Couleur dominante (bandeau ou logo) déclinée en 3 couleurs moins saturées et/ou plus claires pour découper la page en blocs fonctionnels.
Couleur tonique pour les titres, déclinée en deux couleurs pour les puces, les pictos ou des textes courts,
Troisième couleur pour les encarts, déclinée en deux couleurs pour les mises en exergue, les traits de séparation,
Couleur typo pour le texte principal,
Fond de page.

Le nuancier Pantone, que les imprimeurs appellent aussi « pantonier » et qui ne comprend pas moins de huit cents teintes, donne en fait les proportions de chacune de ces dix teintes de base

Nuancier Pantone

Un travail de qualité ne saurait se contenter de ces cinq étapes pour déterminer une palette de couleurs. Néanmoins, cette to-do list permet de franchir le cap de la feuille blanche. N’hésitez à consulter Choisir sa palette de couleurs où vous trouverez pas moins de 14 outils en ligne pour vous aider dans cette tâche. C’est d’ailleurs l’une des phases les plus passionnantes dans le processus de création ; c’est aussi celle qui sera la plus impactante en terme de première impression.

L’idéal serait d’avoir un très beau visuel sur lequel promener la pipette pour recueillir délicatement quelques gouttes de pixels… Ne rêvons pas trop, car la réalité est souvent plus proche d’un logo conçu en fonction des contraintes de l’imprimé versus les possibilités chatoyantes de l’écran.

Le gris typographique

C’est grosso modo l’impression visuelle faite par un pavé de texte que l’on regarde de loin en plissant les yeux (‘-_-’). En appliquant cette idée du gris typographique à l’ensemble des blocs (et au texte qu’ils contiennent), il est possible de travailler sur le rythme du site et la respiration de la page.

Rythmer la navigation

Nous avons plus haut la notion de rythme appliquée au niveau de la page. Ici, je m’intéresse aux relations qu’entretiennent les différentes pages d’un site en fonction des éléments qu’elles partagent : logo, bandeau et les menus de navigation qui fédèrent par nature les pages d’un site Web. L’enchainement des liens va donner du souffle à la navigation et à l’expérience utilisateur.

Il ne faut pas non plus que le site se transforme en machine à cliquer. Chaque page doit retenir le visiteur en offrant un espace qu’il peut identifier et situer immédiatement par rapport au reste du site. Si ce n’est pas le cas, il faut revoir la copie !

Plan de cours

A l’issue de cette série de billets , je proposerai un plan de cours sur cinq jours pour l’apprentissage de HTML & CSS auprès d’un public de débutants plus ou moins avancés. Cette formation devrait être idéale pour les webdesigners ou les graphistes voulant aller plus loin que le mode «Aperçu» de Dreamweaver ;-).

Exemple pour la première journée :

Lundi

Matin :
- Présentation rapide de l’objectif de la formation : exemple de page web à assembler le dernier jours #1,
- Qu’est-ce que le web (les grands jalons historiques),
- Qu’y trouve-t-on, (sites web, les blog, pages perso, intranet),
- La relation client-serveur (comment ça marche, les protocoles utilisés).
Après-midi :
- Présentation détaillée de l’objectif de la formation : exemple de page web à assembler le dernier jours #2,
- Présentation des briques composant l’exemple de la page web sur un support papier distribué aux apprenants,
- Présentation du code source commenté de la page web en isolant bien chaque brique et en indiquant où elle se situe sur le support papier.

C’est tout pour le moment ;)

PS — Ah, j’oubliais : n’hésitez pas à me contacter pour que nous discutions ensemble de votre projet de formation, que vous soyez débutant, ou pas.

Articles sur le même sujet

Une solution CSS accessible pour remplacer du texte HTML par une image

Bruno Bichet — Thu, 17 Feb 2011 08:09:57 +0000

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau h1 (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes.

Une solution satisfaisante devrait permettre de garder un document intelligible lorsque les feuilles de styles et les images sont désactivées, mais aussi lorsque l’une ou l’autre seulement est active. Pour cela, il suffit de placer le texte en question derrière l’image via la propriété z-index pour jouer avec la profondeur. De cette manière, le texte apparait lorsque les images et/ou les feuilles de styles CSS ont été désactivées par l’( agent ) utilisateur.

Marquage HTML & CSS

Voici un exemple que j’ai testé en situation réelle pour m’assurer que cette solution n’entrainait pas d’effets de bord sur le reste de la page. Voici donc la partie de l’en-tête avec un logo et une description en mode texte, et une image en dur pour avoir un bon vieil attribut alt des familles comme on les aime !


    
        Salut, c'est moi : logo !
        Salut, c'est moi : motto !

header {
    position: relative;
    height: 170px;
}
hgroup {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 1px;
}
#banner {
    position: absolute;
    z-index: 2;
}

Dans un premier temps, la déclaration position: relative sur l’élément header permet de placer hgroup et #banner en position absolue par rapport à header et non au Viewport. La valeur de height: 170px remplace la hauteur qu’aurait du avoir header si les éléments qu’il contient n’avait pas été sortis du flux par le positionnement absolu.

Les éléments hgroup et #banner sont positionnés de manière absolue pour permettre d’utilisation de la propriété z-index. Quant à hgroup, il est en z-index: 1 pour permettre aux liens qu’il contient de rester cliquables (ce qui ne serait pas le cas, s’il leur z-index était inférieur à zéro).

L’image contenue dans #banner est en z-index: 2, ce qui la place au-dessus des éléments contenus dans hgroup. Le décalage en top et left sert à positionner précisément hgroup derrière l’image, selon ses dimensions. Le left: 1px empêche les serifs de certaines polices de caractères de dépasser de l’image.

Aperçu du composé HTML & CSS en images

Après le code, voici le résultat des courses en image avec les différentes cas de figure que l’on peut rencontrer :

Avec CSS et images,
Avec image sans CSS,
Sans image mais avec CSS,
Sans image et sans CSS.

CSS et images activées

Le logo texte et la description se retrouve derrière l’image conformément à leurs propriétés z-index respectives.

Fig. 1 : CSS et images activées. Cliquez pour agrandir l'image.

Avec images sans CSS

L’absence de CSS annule les propriétés de positionnement dans le flux et d’empilement des éléments.

Fig. 2 : image activée, CSS désactivée. Cliquez pour agrandir l'image.

Sans images avec CSS

Si les images sont désactivées, les propriétés position: absolute et z-index continuent de jouer leur partition.

Fig. 3 : CSS activée, image désactivée. Cliquez pour agrandir l'image.

Sans image et sans CSS

Le grand jeu ! Voici le header en l’absence de toute fioriture : plus d’image et plus de CSS !

Fig. 4 : image et CSS désactivées. Cliquez pour agrandir l'image.

Conclusion

Cette solution est loin d’être parfaite, notamment en raison de l’utilisation du positionnement absolu dont je ne suis pas fan ou du moins que j’évite en général pour les éléments structurels d’une page. Il existe certainement d’autres manières de placer du texte derrière une image en faisant en sorte que l’accessibilité des uns et des autres ne soit pas compromise.

Merci à Sébastien Delorme et à Sylvain Fix qui ont inspiré ce billet grâce à leurs commentaires.

A suivre :-)

Articles sur le même sujet

Le petit journal du Web — Décembre 2010

Bruno Bichet — Fri, 24 Dec 2010 12:40:13 +0000

Comme à son habitude, le petit journal du Web fait le point sur les sites et les services (re)découverts pendant les 30 derniers jours. Pour décembre, ce petit journal vous propose : à la Une, un site consacré à l’accessibilité Web ; dans la rubrique Graphisme et Ergonomie, un bookmarklet pour afficher les Wireframes ; dans la catégorie CSS, CSS3 et HTML5, une piqûre de rappel sur l’organisation des feuilles de styles CSS ; et nous terminons avec un rappel des éléments à prendre en compte lors de la migration d’un blog WordPress et une mine de ressources pour les chefs de projet Web !

A la Une !

Handi pratique — Portail professionnel sur l’accessibilité Web, les standards du Web et l’utilisation de l’informatique pour les personnes en situation de handicap. Vous y trouverez les dernières actualités, conseils, études de cas, tests de logiciels et matériels. Lire Accessibilité des liens : utilisation correcte de l’attribut Title.

Graphisme & Ergonomie

Wirify — Un Wireframe est une représentation stylisée d’une page, appelé également maquette «fil de fer» qui permet de faire apparaitre les zones principales sans se soucier des détails. Cette maquette sert de base pour le travail du graphiste. Wirify affiche la version «fil de fer» du site affiché dans votre navigateur, ce qui s’avère pratique pour faire apparaitre la structure d’une page. via John’s Graphisme.
Guiding user Eye in your Designs — La capacité a retenir l’attention des utilisateurs et à les guider à travers la page en utilisant les nuances de couleurs pour rythmer la page est un élément fondamental que tout Webdesigner devrait prendre en compte.
Le principe de proximité dans le webdesign — Le principe de proximité est relativement simple à mettre en oeuvre : il suffit d’augmenter ou de diminuer la « distance » entre deux ensembles pour que l’utilisateur identifie rapidement les zones principales à parcourir, le faisant passer du statut de « visiteur » à celui de « lecteur ».
Vendredi c’est graphism ! — La rubrique hebdomadaire sur OWNI de Geoffrey Dorne (@geoffreydorne) sur l’actualité du graphisme dans l’univers et au-delà !!!
Guidelines, l’exemple de la BBC — Présentation par Eric Le Bihan des Guidelines (lignes directrices) de la BBC à l’attention de leurs fournisseurs en terme d’accessibilité, de charte éditoriale et graphique et de considérations plus techniques.
The Noun Project — L’objectif est ambitieux : collecter, organiser et rendre accessible les symboles du langage visuel de notre monde, sous forme d’icônes, de pictogrammes disponibles au téléchargement au format SVG, sous licence Creative Commons. Via @mbonnel.
Where is the fold? — Superpose la matérialisation du fold à la page Web spécifiée. Le fold est la zone en deça de laquelle l’utilisateur n’a pas besoin de scroller pour visualiser la page. Where is the fold? montre le fold tel qu’il apparait selon les résolutions d’écran les plus courantes, avec des indications statistiques sur le pourcentage d’utilisation. Via @chef2projet. Lire Les habitudes de scrolling à la loupe.
Web Without Words — Expérience visuelle intéressante consistant à remplacer les mots d’un site Web par des blocs noirs et gris.
Le petit journal permanent de la TypOgrApHiE ! — Toujours vaillant, cet article mis à jour régulièrement rassemble toujours le meilleur de la typographie sur le Web.

CSS / CSS3 / HTML5

Méthode Daisy : les CSS feuille à feuille — Très bonne initiation à la philophie des frameworks CSS avec une fort belle métaphore de la marguerite au service de l’intégrateur HTML & CSS. Dites-le avec des fleurs !
Lightbox sans Javascript – Une Lightbox full CSS qui remplaçe l’événement `click` par la pseudo-classe `:focus` et la propriété `tabindex` pour permettre aux images d’avoir le «focus». Voir la démonstration.
Le Web Design Réactif — Traduction de l’article Responsive Web Design d’Ethan Marcotte sur l’utilisation des Medias Queries pour concevoir des sites Web s’adaptant aux contraintes des agents utilisateurs, la taille du viewport notamment, mais pas seulement.
HTML5 and CSS3 Without Guilt — Net|tuts fait le point sur les différentes techniques pour commencer à utiliser HTML5 et CSS3, là, tout de suite.
Gérer les débordements de contenu grâce à CSS — Article très utile de Raphaël sur les différentes manières d’éviter que votre contenu ou celui de vos rédacteurs ne casse votre belle mise en page. Au menu : `overflow: hidden`, `word-wrap: break-word`, `text-overflow: ellipsis`, `max-width: 100%`, avec des exemples, des conseils d’utilisation et un point sur la compatibilité inter-navigateur !
CSS Gradient Text Effect — Utilisez des dégradés pour plusieurs titres avec une seule image au format PNG. Pas mal de contre-indications, mais peut faire son petit effet !
Ultimate Guide to Microformats: Reference and Examples — Guide complet sur les microformats avec une table des microformats disponibles et des exemples concrêt d’utilisation.
Internet Explorer 7 : le nouveau standard du Web — Avec la mort annoncée de IE6, il est judicieux de se remettre en mémoire les propriétés CSS dont nous nous sommes privées depuis (trop) longtemps : sélecteurs multiples, sélecteurs d’attributs, sélecteur adjacent, sélecteur d’enfant direct, propriétés `max-width`, etc. Et non, IE7 ne sera peut-être pas le nouveau IE6 ;)
Un menu utilisant un sprite CSS — L’utilisation des sprites est un atout pour améliorer les performances de votre site. Voir la démonstration.
Le petit journal permanent de HTML5 — Toujours vaillant, cet article mis à jour régulièrement rassemble toujours le meilleur des ressources sur HTML5 !

Miscellanées

Migration de mon blog WordPress — Article expliquant dans le détail la migration du nom de domaine et de l’hébergement de notre ami Darklg. Toujours utile pour ne rien oublier dans cette opération, toujours périlleuse !
chef2projet – Boîte à outils pour chef de projet web et webmaster classés dans 4 catégories : optimisation du référencement, veille de sites ou blogs, gestion de projet web et création de site web.

Articles sur le même sujet

Opquast : dites « bonjour » à M. Référent Accessibilité

Bruno Bichet — Thu, 16 Sep 2010 06:52:20 +0000

Je m’étais inscrit il y a déjà ~~quelques temps~~ très longtemps pour suivre les contributions pour la nouvelle version du référent accessibilité pour les sites web édité par Opquast sous la houlette de Elie Sloïm de l’équipe Temesis. Si je connais Opquast depuis son lancement, je me rend compte que je l’ai peu consulté : j’ai l’impression de faire de l’accessibilité comme Jourdain faisait de la prose, mais la plupart du temps, lorsque je prends connaissance d’une bonne pratique, je me rends compte que les miennes sont perfectibles. Vous aussi ? Faites comme moi et commencez donc par télécharger une copie des 217 bonnes pratiques pour la conception de sites web de qualité.

Vidéo de présentation Opquast

Opquast : les bonnes pratiques 2010. Envoyé par Opquast.

217 bonnes pratiques pour mieux «Web développer»

Ces bonnes pratiques sont classées selon une vingtaine de thématiques sur trois niveaux de sensibilité. Elles sont accompagnées d’une courte description menant à une fiche individuelle : numéro, description, date de création, niveau d’automatisation, objectif, solution technique, moyen(s) de contrôle, plus les tags associés.

18 thématiques pour cadrer vos bonnes pratiques

Alternatives,
Code,
Contact,
Contenus,
E-commerce,
Espaces publics,
Fichiers et multimédia,
Formulaires,
Hyperliens,
Identification,
Internationalisation,
Navigation,
Newsletter,
Présentation,
Serveur et performances,
Syndication,
Sécurité et confidentialité,
Tableaux.

Exemples de bonnes pratiques pour l’intégrateur web

Selon votre coeur de métier, il est possible de se concentrer sur les bonnes pratiques liées au design, à l‘intégration HTML/CSS, au référencement, aux contenus ou à l’e-commerce (liste non exhaustive).

La bonne pratique numéro 206 indique que Le site propose une ou plusieurs feuilles de style dédiées aux terminaux mobiles
La bonne pratique numéro 194 indique que Les liens d’accès aux versions traduites pointent directement vers la traduction de la page courante.
La bonne pratique numéro 120 indique que Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.
La bonne pratique numéro 118 indique que La soumission d’un formulaire est suivie d’un message indiquant la réussite ou non de l’action souhaitée

Opquast Reporting

L’inscription à Opquast Reporting permet de suivre gratuitement jusqu’à 3 projets de sites web en proposant une liste des bonnes pratiques à cocher au fur et à mesure de l’avancement de la mise en conformité de votre site.

Il est possible d’ajouter des collaborateurs, de rédiger et partager des notes privée ou des documents, ou encore de voir le pourcentage de bonnes pratiques déjà mises en place grâce à une barre de progression.

Une version Pro à partir de 2,5€ par mois vous permettra de suivre jusqu’à 10 projets avec 5 collaborateurs en bénéficiant d’une synthèse détaillée. Voir les autres offres Opquast.

En bref

Opquast est un outil original pour mettre en oeuvre — là tout de suite — les bonnes pratiques qui permettront à tous les visiteurs de profiter de votre site dans les meilleures conditions, à votre rythme et en fonction de vos priorités.

Lire le blog consacré à Opquast pour en savoir plus.

PS : le flux RSS disponible à l’adresse http://checklists.opquast.com/dailybp/feed permet d’afficher une bonne pratique par jour !

CSS & Webdesign » Accessibilité

La journée mondiale de l’accessibilité, c’est maintenant !

Demain, le Web sera plus humain

Articles sur le même sujet

Check your avec le W3C

Principaux validateurs du W3C

Autres services du W3C

W3C Cheat Sheet

Articles sur le même sujet

9 ressources pour web designer

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

Logo pour les Libres Ballons du Bastberg

Articles sur le même sujet

Utiliser les rôles ARIA à la place des identifiants CSS

Marquage HTML

Exemple de CSS

En bref

Articles sur le même sujet

CSS Sans Stress — Une formation intégrateur HTML & CSS

Introduction

«Les Standards du Web, connais pas, c’est quoi ? Moi, j’ai suivi une formation en Webdesign Dreamweaver. Mais une fois, le formateur nous a fait cliquer sur le mode Source. Ça ne compte pas ?»

«J’ai bien envie de savoir découper un PSD autrement qu’en exportant toutes les tranches depuis ImageReady, c’est possible ?»

« CSS Sans Stress & HTML S’en Mêle »

C’est quoi le Web ?

Une très brève histoire du web

Représentation symbolique du réseau Arpanet (september 1974)

Les premiers documents Web

Le site web du consortium du World Wide Web en 1992 encore accessible sur le site du W3.org

Mise en page en tableaux

Inutile de sortir votre palette et vos pinceaux : la mise en page en tableaux ne fera pas de vous un(e) artiste ! (Photo par Rinina25)

Mise en page avec CSS

Les feuilles de styles CSS de l’intégrateur web ne sont pas fatiguées d’être sexy, elles !

C’est quoi le graphisme ?

Graphisme & Webdesign

Quelques principes de base, un milliard de possibilités

Équilibre (symétrie, asymétrie)

Rythme (régulier, mouvant, progressif)

Proportion (distribution des formes, échelle et relation entre les éléments)

Hiérarchique ou prédominance (quelle place pour quel élément)…

Unité (d’après la Gestalt théorie)

La couleur

Le nuancier Pantone, que les imprimeurs appellent aussi « pantonier » et qui ne comprend pas moins de huit cents teintes, donne en fait les proportions de chacune de ces dix teintes de base

Le gris typographique

Rythmer la navigation

Plan de cours

Lundi

Matin :

Après-midi :

C’est tout pour le moment ;)

Articles sur le même sujet

Une solution CSS accessible pour remplacer du texte HTML par une image

Marquage HTML & CSS

Aperçu du composé HTML & CSS en images

CSS et images activées

Le logo texte et la description se retrouve derrière l’image conformément à leurs propriétés z-index respectives.

Avec images sans CSS

L’absence de CSS annule les propriétés de positionnement dans le flux et d’empilement des éléments.

Sans images avec CSS

Si les images sont désactivées, les propriétés position: absolute et z-index continuent de jouer leur partition.

Sans image et sans CSS

Le grand jeu ! Voici le header en l’absence de toute fioriture : plus d’image et plus de CSS !

Conclusion

Articles sur le même sujet

Le petit journal du Web — Décembre 2010

A la Une !

Graphisme & Ergonomie

CSS / CSS3 / HTML5

Miscellanées

Articles sur le même sujet

Opquast : dites « bonjour » à M. Référent Accessibilité

Vidéo de présentation Opquast

217 bonnes pratiques pour mieux «Web développer»

18 thématiques pour cadrer vos bonnes pratiques

Exemples de bonnes pratiques pour l’intégrateur web