css 4 design » Intégration web

HTML5 Please — Fallback et Polyfills (ou pas)

Bruno Bichet — Tue, 24 Jan 2012 19:54:00 +0000

Envie de mettre les nouveautés HTML5 et CSS3 à contribution lors du redesign de votre site, mais un peu inquiet quand même sur la compatibilité de ces nouveaux jouets avec les nombreux navigateurs qui se battent pour occuper toute la RAM de votre poste de travail ? N’hésitez plus, et venez jeter un oeil sur HTML5 Please qui vient d’apparaitre dans ma timeline Twitter ⁽¹⁾ !

Ce site indique, pour chacune des fonctionnalités, si l’on peut l’utiliser passionnément, à la folie ou pas du tout. Elles sont présentées sous forme de liste, résumées et accompagnées d’une indication claire grâce au code couleur suivant :

Vert : Utilisable ; Utilisable avec Fallbacks ; Utilisable avec Polyfills.
Orange : Attention ; Attention avec Polyfills ; Attention avec Fallbacks.
Rouge : A éviter ; A éviter avec Polyfills.

D’un coup d’oeil, on voit immédiatement si la fonctionnalité est prête à l’emploi, et si oui, comment l’utiliser au mieux telle qu’elle, accompagnée d’un Polyfills ou d’un Fallbacks le cas échéant.

Tandis que When Can I Use nous précise le niveau de prise en charge que l’on peut attendre d’un navigateur et d’une version donnés pour telle ou telle fonctionnalité, Modernizr nous donne la possibilité d’en détecter le support.

Le rôle joué par HTML5 Please ressemble à celui d’un coach ou d’un conseiller qui donnerait des recommandations pour savoir quel est le Polyfills le plus adapté.

⁽¹⁾ Merci à Thierry Roget o/

Articles sur le même sujet

Quelques notes — Programme de formation HTML & CSS

Bruno Bichet — Wed, 04 Jan 2012 12:01:47 +0000

Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés. Ce qui est normal après tout : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C.

Si les spécifications sont très utiles pour comprendre la nature des ingrédients (balises HTML et propriétés CSS), elles ne nous disent pas grand chose sur la manière de les mettre en oeuvre pour réaliser un site web. S’il n’existe pas de recette toute faite, c’est certainement à cause des plats (les contenus) qui sont uniques.

Enfin, en même temps, on ne peut pas ne pas constater que les sites Web sont à 90% composés de :

En-tête pour : logo, baseline, visuel, un ou plusieurs menus de navigation,
Zone de contenu principale : texte, image, vidéo,
Une, deux ou trois barre latérales (Sidebar) à droite, à gauche de la zone de contenu,
Pied de page (Footer).

Depuis quelques temps, je réfléchis à la mise en place d’un plan de cours pour l’apprentissage du couple HTML & CSS. Dans l’idéal, cette formation devrait être :

Assimilable rapidement par les débutants qui n’ont jamais vu une balise HTML ou une règle CSS,
Convainquante pour inciter les créatifs à se pencher sur les notions d’intégration web,
Intéressante pour ceux qui utilisent ces langages dans leur vie professionnelle ou en amateur (dans le noble sens du terme).

La plupart des plans de cours sur le sujet séparent souvent l’étude du HTML des CSS. J’aimerais mettre en place une méthode globale s’inspirant (très librement) de la Programmation Orientée Objet (POO), en initialisant un super objet — le site web — englobant d’autres objets comme le header, la sidebar, les menus et les différentes zones de contenu que l’on trouve généralement dans un site internet ou sur un blog (titres, sous-titres, paragraphes, liste, etc.). A cet égard, HTML 5 permet d’aller dans ce sens avec les balises header, nav, article, aside, footer.

CSS et HTML sont dans un bateau…

Sans le HTML, les CSS ne servent à rien. Dans la pratique, on rencontre rarement HTML sans CSS. Au lieu d’aborder les deux langages de manière séquentielle, j’envisage de démarrer par la mise en place d’un vocabulaire de base qui fournirait les briques élémentaires nécessaires à la construction d’un site web. Cela pourrait s’effectuer en abordant les deux langages simultanément tout en ajoutant les notions d’ergonomie et d’accessibilité : les bonnes manières s’apprennent dès le début.

Ces briques seraient composées de bouts de code, de module, de composés HTML & CSS «prêts à l’emploi» à expliquer aux apprenants par le biais d’exercices pratiques qui débuteraient le plus tôt possible dans la formation. L’apprenant serait ensuite invité à assembler ces briques pour construire une page web. Le formateur fournissant à cette occasion les indispensables conseils, trucs et astuces concernant l’apparence sur les différents navigateurs, l’utilisation des commentaires conditionnels, etc., selon le temps disponible.

Parmi les méthodes proposées dans les commentaires du billet d’Aymeric, nombreuses sont celles qui préconisent de partir du contenu pour commencer l’apprentissage de HTML. Je suis généralement le premier à prendre mon Stabilo ® pour baliser le contenu avant même de prendre une tablette graphique ou mon Notepad++. Toutefois, intégrer le balisage du contenu dans la formation peut s’avérer chronophage et ne pas trouver sa place dans le temps généralement impartie dans les centres de formation où un module de base dure rarement plus d’une semaine.

En outre, indépendamment du contenu, l’immense majorité des sites web partage les mêmes caractéristiques. On pourrait passer beaucoup de temps à lister tous les éléments constituant un site et faire des statistiques pour savoir si tel ou tel élément se retrouve le plus souvent dans le header, la sidebar ou le footer, etc. mais force est de constater qu’à ce niveau, un consensus se dégage : le logo, la baseline et le menu principal se retrouvent dans haut de la page tandis que les informations de contact et de copyright se situent plutôt en bas de la page !

On pourrait donc, dans le cadre d’une formation sur cinq jours, fixer les idées autour des zones que l’on rencontre généralement sur les sites web ou les blogs :

un header (pour le logo, la baseline, la navigation principale et les liens d’évitement),
une zone de contenu…
… associée à une ou plusieurs barres latérales,
avec un footer (contact, crédits, copyright) pour finir.

Ce découpage mélange joyeusement l’analyse fonctionnelle et la présentation, mais présente l’avantage de fixer les idées sur des choses auxquelles les apprenants ont été confrontés, ce qui a son importance.

Pour aborder l’apprentissage des balises et la sémantique qui leur est associée, je propose de partir du logo qui peut être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO). On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une autre.

Partant du principe qu’une zone de menu sera souvent composée avec une liste de liens, il me semble utile de proposer dès le début les méthodes généralement utilisées pour faire flotter les li, transformer les a en bloc, utiliser les images de fonds, etc.

Une zone de contenu secondaire est souvent représentée par une barre latérale placée à droite ou à gauche de la zone de contenu. Pourquoi ne pas introduire directement les notions de positionnement avec float et les positions relative et absolute ? Pour un débutant, ces notions ne sont pas plus difficiles à comprendre que le reste. Je me dis qu’elle seront peut-être même plus rapidement assimilées en les abordant dès le début, même si les notions de contexte de formatage ou de clearing ne sont pas très évidentes au premier abord.

Je reviendrais sur le sujet un peu plus tard selon vos retours. L’objectif est de remplir un programme de formation détaillé sur 5 jours permettant à des personnes ayant des pré-requis réduit au minimum de pouvoir créer une page web «classique».

Pour ne pas conclure

Ce billet est une ébauche que je compléterais au fur et à mesure de mes idées et de vos suggestions. Ce billet traine dans mes brouillons depuis que Aymeric a eu dès 2007 l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage du XHTML et des CSS que je vous invite à lire sans plus attendre.

Linkographie

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

100+ Polyfills et Fallbacks pour HTML5

Bruno Bichet — Sun, 20 Nov 2011 19:20:24 +0000

Un Polyfill est un script qui permet d’émuler les fonctionnalités qui manquent à un navigateur. Par exemple, HTML5 est constitué de nombreuses API dont certaines ne sont pas prises en charge par tous les navigateurs, y compris les plus récents. Les Polyfills permettent d’utiliser ces API d’une manière standard sans être obligé d’utiliser des contournements qui seront obsolètes à terme. Pour nous aider dans cette tâche, voici une collection de bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Modernizr est un bon point de départ pour détecter ces fonctionnalités.

Guide tout-en-un des solutions de repli pour HTML5. Liste garantie entièrement non-alphabétique et sans grumeau ! Voici quelques exemples parmi cette liste de plus de 100 Polyfills et Fallbacks :

SVG

RaphaelJS – Raphaël est une petite bibliothèque Javascript développée par Dmitry Baranovskiy qui devrait vous simplifier la vie lors de l’utilisation des images vectorielles sur le web. Raphaël utilise les recommandations du W3C pour SVG et la technologie VML pour créer des images. Chaque visuel créé fait partie du DOM. Il est donc aisé d’ajouter des gestionnaires d’événements pour modifier ces objets à volonté. Raphaël est compatible avec Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer à partir de la version 6.0.

Canvas

ExplorerCanvas (ExCanvas) — L’élément HTML5 Canvas pour Internet Explorer. Les navigateurs modernes comme Firefox, Safari, Chrome et Opera prennent en charge le tag

Session Storage

sessionstorage – L’objet sessionStorage pour tous les navigateurs ! (Voir aussi le script Storage polyfill de Remy Sharp).

HTML 5

html5shim & innerShiv – html5shim permet d’injecter dans le DOM d’Internet Explorer les balises HTML5. Quant à innerShiv, il s’arrange pour que les balises injectées par html5shim fonctionnent toujours lorsqu’elles sont créées via la méthode Javascript innerHTML. A noter que innerShiv n’est plus nécessaire avec jQuery 1.7.

Audio & Video

MediaElement.js – Propose des players et en pur HTML & CSS pour les navigateurs modernes et des versions Flash et Silverlight pour les vieux navigateurs. Cette stratégie permet d’offrir une expérience visuelle identique aux visiteurs quel que soit le navigateur qu’ils utilisent. Cerises sur le gâteau : respect de l’accessibilité et des plugins pour les CMS WordPress, Drupal, Joomla, jQuery, and BlogEngine.NET, Ruby Gem et Plone.

Formulaires HTML5

H5F – HTML 5 Forms autorise l’utilisation des nouveaux types de champs, attributs et contraintes de validation de formulaire apparus avec HTML5, dans les vieux navigateurs.

CSS3

CSS3 PIE – Utilisez les propriétés border-radius, box-shadow, multiple backgrounds, linear gradients, border-image dans IE de la version 6 à 9
CSS3 – Multi Column – Utilisez les propriétés column-count, column-width, column-gap, column-rule dans Safari 1.3, Opera 7.54, Opera 8, Firefox 1.0.4, Netscape 7.1 et IE 6.
Respond – Permet d’utiliser les propriétés min/max-width de CSS3 Media Queries dans IE 6 — 8.

Cette liste est éditée et maintenue par Paul Irish avec les contributions de Jonathan Cook, Mark Boas, Michael Behan, Mathias Bynens, Eli Grey, Øyvind Sean Kinsey, et bien d’autres.

Articles sur le même sujet

Notes de lecture : « Responsive Web Design »

Bruno Bichet — Tue, 01 Nov 2011 19:21:07 +0000

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed».

Les Medias Queries n’arrivent qu’au chapitre 4, une fois les fondamentaux mis en place. Rien à dire sur cette partie, si ce n’est qu’elle est concise et que les exemples sont clairs. Le meilleur est pour la fin avec la description d’un Workflow pour faire des sites web «responsive» dans une optique d’amélioration progressive, avec comme mot d’ordre : pensez mobile !

En effet, dans cette dernière partie, l’auteur explique comment mettre en place une stratégie pour utiliser les Medias Queries au plus près des besoins des utilisateurs. Il en profite pour exposer une méthode de travail qui me plait tout particulièrement : le design dans le navigateur. Bien sûr, il ne s’agit pas de remplacer Photoshop, mais de lui demander ce qu’il sait faire de mieux : produire une maquette fixe qu’il faudra adapter selon les contraintes d’affichages des différents agents utilisateurs disponibles sur le marché. Je ne peux m’empêcher de ressortir pour l’occasion cette phrase issue de l’article Et si Photoshop permettait de tester des maquettes fluides ? qui résonne bien ici :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Le sommaire

Principes du responsive design
- Attachez vos ceintures
- Responsive architecture
- La voie à suivre
La grille flexible
- Composition flexible
- Créer une grille flexible
- Marges et espacement flexibles
Les images flexibles
- Retour aux (codes) sources
- Images fluides
- Mosaïque d’arrière-plan flexible
- Apprenez à aimer overflow
- Négociez votre contenu
- Images et grilles flexibles, tenez-vous bien
Les media queries
- Cicatrisation douloureuse
- Le problème en question
- Traînasser vers plus de réactivité
- Un robot plus « responsive »
- Les media queries en action
- Au sujet de la compatibilité
- Pourquoi la flexibilité ?
Passer au responsive, design
- Une question de contexte
- Mobile first
- Vers un responsive workflow
- Être « responsive » et responsable
- L’amélioration progressive revisitée
- Va et sois « responsive »

Acheter le livre

Responsive web design

Auteur(s) : Ethan Marcotte
Editeur : Eyrolles
Nombre de pages : 160 pages
Date de parution : 15/09/2011

Articles sur le même sujet

Quelques liens sur les Media Queries en CSS3

Bruno Bichet — Sun, 09 Oct 2011 21:38:47 +0000

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage !

CSS3 Media Queries

Media Queries : W3C Candidate Recommendation – La recommandation du W3C sur les Media Queries
mediaqueri.es – Collection de site utilisant Media Queries
Hardboiled CSS3 Media Queries – La boite à outils de Stuff and Nonsense avec de nombreux exemples de Media Queries prêts à l’emploi
Progressive Enhancement with CSS Media Queries – Stratégies pour utiliser les Media Queries dans une optique d’amélioration progressive
Les Media Queries CSS — Le but [des Media Queries] est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.
CSS3 : les Media Queries – Les Media-Queries, permettent de cibler différents cas et ainsi d’adapter la restitution de sa page html à différentes caractéristiques des terminaux.
Responsive Web Design: What It Is and How To Use It — Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
Playing with CSS3 Media Queries — Un exemple simple de mise en oeuvre pour voir les Media Queries en action
Media queries — Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.
CSS3 Media Queries JS — Javascript library which make CSS3 Media Queries work in all browsers (via JS 4 Design)
Responsive Design with CSS3 Media Queries – Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher.

Grilles adaptatives

Skeleton – A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
columnal – A responsive CSS grid system helping desktop and mobile browsers play nicely together.
Responsive Grid Systems — A Conceptual Framework for Extending Upon the Functionality of 960.gs

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

Schema.org — Microdata pour Google, Bing et Yahoo!

Bruno Bichet — Fri, 03 Jun 2011 21:09:17 +0000

Schema.org propose un ensemble de micro-données hiérarchisé destiné à donner du sens au marquage HTML qui structure les pages web. Ce système complet de microdatas est comparable à RDFa, à ceci près qu’il est proposé conjointement par Google, Bing et Yahoo! pour enrichir les résultats de leurs moteurs de recherche respectifs.

Pour vous faire une idée de la richesse de ce vocabulaire commun, il suffit de jeter un oeil sur l’ensemble de la hiérarchie disponible sur la page The Type Hierarchy. On le voit, ce vocabulaire a l’ambition de taguer l’ensemble de la production culturelle humaine, et plus à venir.

Thing

Au sommet de cette hiérarchie de micro-données, on trouve la «chose».Thing est décomposée en:

CreativeWork,
Event,
Intangible,
Organization,
Person,
Place,
Product.

CreativeWork

Chaque élément est lui-même structuré en sous-ensemble. Pour CreativeWork, nous avons par exemple :

Article,
Blog,
Book,
ItemList,
Map,
MediaObject,
Movie,
MusicPlaylist,
MusicRecording,
Painting,
Photograph,
Recipe,
Review,
Sculpture,
TVEpisode,
TVSeason,
TVSerie,
WebPage,
WebPageElement.

WebPageElement

Parmi les éléments qui permettent d’ajouter du sens aux balises HTML pour préciser leur portée. Par exemple, WebPageElement se subdivise en :

SiteNavigationElement,
Table,
WPAdBlock,
WPFooter,
WPHeader,
WPSideBar.

Exemple d’utilisation du schema « Movie »

J’ai repris un exemple de la documentation de schema.org en prenant la liberté de modifier le balisage HTML initialement proposé pour ajouter un peu plus de sémantique via une liste de définition. Un peu dans l’esprit de ce que j’avais fait pour le microformat hCard, souvent expliqué avec des exemples de marquage HTML un peu «léger».


    Avatar
     Director: James Cameron (born August 16, 1954)
     Science fiction
     Trailer

Fig. 1 : exemple de fiche pour le film Avatar sans les microdatas.


    Avatar
    Director: James Cameron (born August 16, 1954)
    Science fiction
    Trailer

Fig. 2 : même marquage qu’au-dessus avec les microdata issues de «Movie».

RDFa c’est fini ?

D’après Google, les site utilisant RDFa continueront à être valorisés en tant que Rich Snippets mais il ne dit pas pendant combien de temps…

Enfin une solution stable et pérenne pour enrichir nos données ?

Je suis un farouche supporter des microformats, mais j’ai toujours gardé également à l’esprit qu’il ne s’agissait globalement que d’un exercice de style. Je n’ai jamais pu observer un quelconque impact dans le fait de mettre des classes microformatées dans mes balises. Avec les schémas proposés par Google Bing et Yahoo! nous aurons peut-être plus de chances de voir nos efforts enfin récompensés. A tester et à voir.

→ Consulter HTML Microdata du W3C

Articles sur le même sujet

Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)

Bruno Bichet — Fri, 20 May 2011 10:26:02 +0000

L’ajout des classes CSS pour spécifier la largeur des colonnes dans le code HTML est le lot des frameworks CSS qui proposent un mécanisme pour créer une grille de mise en pages. Pour couronner le tout, la plupart des frameworks ont besoin d’une classe pour la première colonne (.first pour The Simpler Grid) ou la dernière colonne (.last pour Blueprint CSS) voire pour la première et la dernière colonne (.alpha et .omega pour 960 Grid System) pour annuler les marges droites et/ou gauches attribuées par avance aux colonnes.

Dans ma liste de plus de 30 frameworks CSS, seul inuit.css s’affranchit de ces classes .first, .last, .alpha ou .omega. Mais c’est au prix d’un décalage global du container (.grids, en l’occurrence) de la valeur de la gouttière. Je suis assez admiratif de cette technique et je m’en veux de ne pas l’avoir trouvée au lieu de faire l’intéressant avec mon mashup de Blueprint CSS, The Simpler Grid, 960.gs ^^

Sélecteur de frère adjacent

Dans mes mises en page web, j’utilise souvent un nombre de colonne différent selon le contexte : contenu principal accompagné de deux ou trois colonnes en page d’accueil; contenu principal plus une colonne lorsque j’affiche le contenu d’un article seul. C’est là qu’intervient le sélecteur de frère adjacent, symbolisé par le signe «+».

La spécification des CSS 2 nous apprend que :

Les sélecteurs d’enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l’arbre du document et quand E1 y précède immédiatement E2.

J’avais l’habitude de me servir de ce sélecteur pour supprimer l’alinéa du premier paragraphe qui n’a littéralement aucune raison d’être ici, puisque par définition, il n’y a rien à mettre «à la ligne» :

p + p {
    text-indent: 1em;
}

Ici, étant donné que le deuxième p est le sujet du sélecteur, on sous-entend que le premier n’est pas indenté.

.sidebars + .sidebars = grille ?

Je me suis dit qu’il pourrait être intéressant d’utiliser cette propriété dans le cas où le nombre de colonnes varie selon le contexte, sans être obligé de définir ce contexte de manière trop précise. L’exemple qui suit, que j’aurais pu mettre en place pour des sites de casinos en ligne (je sais que vous êtes joueurs), illustre à merveille ce concept :-)

#sidebar { margin-left: 20px; }
#sidebar .sidebars + .sidebars {
    margin-left: 20px;
}

#sidebar contient entre une et deux colonnes. Lorsqu’une seule .sidebars est présente, je n’ai pas besoin de spécifier de marge gauche ⁽¹⁾ (celle de #sidebar suffit à créer la gouttière entre #main (le contenu de l’article) et #sidebar). Lorsqu’il y a deux .sidebars dans #sidebar, seule la deuxième doit avoir cette marge gauche pour créer la gouttière. Et voilà !

⁽¹⁾ j’utilise une marge gauche pour créer des gouttières afin de pouvoir annuler la marge du premier élément — au cas où j’aurais appliqué un float: left et un margin-left: 20px à toutes mes colonnes — avec le pseudo-sélecteur :first-child (CSS 1) pris en charge plus largement que :last-child qui nous arrive tout juste avec CSS 3.

Dans le cas d’une troisième .sidebars, il suffirait donc d’utiliser une déclaration du type :

#sidebar .sidebars + .sidebars + .sidebars {
    margin-left: 20px;
}

On s’en «grille» une ?

Voici un exemple d’une rangée de 12 colonnes bâtie sur ce principe avec une version en ligne de cette grille CSS (notez l’utilisation des rôles WAI-ARIA en action) :

#page {
    width: 940px;
    margin: 0 auto;
    text-align: center;
}
[role="banner"],
[role="contentinfo"] {
    clear: both;
    background: #333;
    color: #eee;
}
[role="main"] > div {
    width: 60px;
    float: left;
    background: #eee;
    margin: 1.539em 0;
}
[role="main"] > div + div {
    margin-left: 20px;
}

Un système encore expérimental

Cette utilisation du sélecteur d’enfant adjacent est encore expérimentale et devrait faire l’objet de tests plus approfondi pour voir où peut mener cette technique qui ne nécessite à priori aucune intrusion intempestive dans le code HTML si votre page est bien structurée (je suis sûr que c’est le cas chez tout le monde, non ?). Je compte sur vous pour tester ce concept qui en a sous la botte ou le talon aiguille afin d’en tirer la substantifique moelle. Merci d’avance :)

Articles sur le même sujet

Astuce CSS3 et RGBA avec les outils de développement de Google Chrome

Bruno Bichet — Wed, 18 May 2011 14:59:01 +0000

J’utilise de plus en plus Google Chrome pour tester mes pages web. J’ai trouvé dernièrement une petite astuce qui m’évite d’ouvrir Photoshop pour connaitre la correspondance des couleurs hexadécimales dans les formats RGB ou HSL. Dans une optique de dégradation gracieuse, je prends l’habitude de préciser une couleur au format «hexa» suivie de la même couleur au format RGBa pour profiter des effets de transparence.

Pour cela, je lance les outils de développement de Google Chrome (Ctrl + Maj + i ou Clic droit et «Inspecter l’élément»). Je clique ensuite plusieurs fois sur le carré de couleur jusqu’à ce que le mode rgb() apparaisse. Il suffit ensuite de copier-coller les valeurs dans lafeuille de style CSS.

Exemple visible sur la nouvelle version de WordPress & Webdesign :

#menu-download-basics a {
    background: #807666;
    background: rgba(128,118,102,0.8);
}

Le premier background précise une couleur au format hexadécimal pour les anciens navigateurs, tandis que le deuxième s’adresse aux navigateurs capables d’afficher une couleur en transparence avec la propriégé RGBa indiquée dans le 4ème paramètre (ici, 0.8).

Finie, l’ouverture de Photoshop pour connaitre les valeurs RGB d’une couleur au format Hexadécimal !

Fonction "Inspecter l'élément" de Google Chrome

Parmi les modes colorimétriques disponibles, on trouve :

Hexadécimal (Rouge, Vert, Bleu) : #807666,
RGB (Rouge, Vert, Bleu) : rgb(128, 118, 102),
HSL (Teinte, Saturation et luminance) : hsl(37, 11%, 45%).

Le dernier mode (TSL en français) est très intéressant car il permet de modifier, pour une couleur donnée, uniquement la teinte (en gardant les informations de saturation et de luminosité intactes), la saturation (en gardant les deux autres) ou la luminosité (idem).

Je ne dis pas que ces outils de développement remplaceront l’extension ColorZilla de Firefox, mais ils peuvent ponctuellement rendre des services.