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 <canvas> pour dessiner en 2D dans le navigateur sans plugin externe. ExplorerCanvas apporte la même fonctionnalité dans Internet Explorer grâce à l’inclusion d’un simple script dans vos pages existantes (à condition qu’elles utilisent l’élément <canvas> !).

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 <video> et <audio> 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

• 390 ressources Javascript & jQuery
• html5media — Les balises HTML5 audio et video sans contrainte
• Le petit journal du Web — 31 décembre 2010
• HTML5 Please — Fallback et Polyfills (ou pas)
• WordPress de A à Z — F comme Functions.php

Parmi les nombreux intervenants dans la chaine de production des métiers de l’internet, l’intégrateur web est sans doute celui qui se cherche le plus. C’est le «vilain petit canard» de l’Open Space. Souvent coincé entre les graphistes et les développeurs web, il peut se sentir à l’étroit. Placé au bout de la chaine, de nombreuses erreurs de conception faites en amont lui tombent dessus, à commencer par les délais. Le retro-planning donne souvent l’impression d’avoir zappé le temps nécessaire à «l’intégration». Pourtant, l’intégrateur HTML & CSS est une ressource précieuse que toute entreprise sérieuse devrait valoriser. C’est le garant de la qualité globale du site mis en ligne, du respect de la charte graphique à l’expérience utilisateur en terme de performance d’affichage des pages.

L’intégrateur web en milieu naturel

Selon les entreprises, en dehors de sa responsabilité évidente relative au bon affichage du site sur l’ensemble des navigateurs, il gère les «oublis» en matière de référencement et d’optimisation «SEO» pour les moteurs de recherche (pléonasme !) en remplissant les balises alt ou certains attributs title. Il peut même aller jusqu’à améliorer la densité des mots-clés présents dans les titres des articles. C’est dire son implication dans la réussite de l’entreprise.

Par ailleurs, sa passion du web et son goût pour l’accessibilité lui permettent de rendre votre site web accessible au plus grand nombre. Avec un peu d’expérience, votre intégrateur web pourra facilement devenir un chef de projet web capable de faire travailler ensemble graphistes et développeurs web.

Enfin, et c’est le plus important, l’intégrateur web, en fonction des composés HTML & CSS qu’il emploi et des bonnes pratiques qu’il observe lors de l’intégration des différents fichier Javascript, a une responsabilité importante en ce qui concerne la maintenance du site dont il intègre les pages. D’après mon expérience, la plupart de l’argent mal dépensé par les entreprises sur le web est lié à une mauvaise conception des pages et à une architecture de site défaillante. N’attendez plus et mettez donc un intégrateur web qualifié dans votre moteur !

Mais qui est donc l’intégrateur web ?

Les définitions concernant l’intégration web insistent souvent sur la découpe et l’intégration de la maquette réalisée par le graphiste. On parle souvent de «montage» de page web, terme qui nous vient du fin fond du monde de l’imprimé et de la PAO…

Définition globale du métier d’intégrateur web

L’intégrateur web produit généralement des pages web à partir d’indications visuelles ou sonores : maquette détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il crée le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composants la page et peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript. Source : Définir le métier intégrateur web.

L’intégrateur est avant tout un spécialiste des langages HTML et CSS. Produire des pages web consiste à taper du code dans un éditeur texte, à en tester le rendu dans les navigateurs web présents sur le marché et à s’arranger pour que la page web affichée corresponde au brief ou à la maquette.

Dans cette définition, je n’ai pas voulu enfermer l’intégrateur dans le rôle du méchant découpeur de .psd qui monte des pages à la chaine. D’une part, il peut très bien produire une page web (voire même tout un site) directement dans le navigateur d’après un simple croquis, comme j’ai pu le démontrer dans l’article Conception dans le navigateur avec HTML5 & CSS3, et d’autre part, lorsqu’elle existe, cette phase d’exécution pure n’est que la partie émergée de l’iceberg des compétences de «l’inté».

Les profils de l’intégrateur web

Selon le secteur d’activité, la taille de l’entreprise, et la définition de poste, le curseur initialement situé au centre des compétences premières de l’intégrateur web («découpe» de fichiers Photoshop et «montage» des pages)  se déplace sur une ligne qui va de l’intégrateur-graphiste à l’intégrateur-développeur :

• A gauche du curseur, nous avons le web designer capable de concevoir une charte graphique, de la mettre en œuvre à l’échelle d’un site web, de réaliser le montage HTML & CSS des pages. Ce web designer possède avant tout une forte culture graphique.
• Un peu plus vers la droite, le web designer peut également intervenir sur les développements côté client avec Javascript ou côté serveur avec PHP. Variante : le Web designer utilise un CMS comme WordPress pour l’assister dans cette tâche. Celui-ci possède plutôt une culture technique. C’est souvent un ancien webmaster qui a l’habitude de Photoshop.
• Au centre, nous trouvons notre intégrateur dont le rôle consiste à découper une maquette fournie (généralement) au format Photoshop et de la transmuter en page web à l’aide de HTML & CSS.
• Un peu plus loin vers la droite, nous avons le webmaster chargé initialement de l’intégration des contenus et qui fait naturellement l’intégration HTML & CSS des pages web qu’il ajoute au site. Il intervient également souvent sur la partie PHP.
• A droite du curseur, nous avons un développeur PHP dont le sens esthétique ou le goût pour la lisibilité lui permettra d’habiller ses développements PHP avec HTML & CSS3. Généralement adepte de The Gimp, il pourra reprendre le logo du client et placer des éléments graphiques dans sa composition.

→ Lire Je suis « enveloppeur web » moi monsieur et Intégrateur web + graphiste = intégraphiste !

En bref

Les compétences de base de l’intégrateur sont multiples, et ce d’autant plus que ce dernier peut porter plusieurs casquettes allant du graphiste au développeur web. Toute fiche «métier» devrait tenir compte de la spécificité de ce métier qui peut en cacher plusieurs autres ! A ce sujet, je recherche des témoignages d’intégrateurs web sous forme d’un ou deux paragraphes : brève description du travail effectué et place dans le flux de production de l’entreprise, et tout autre élément que vous jugerez nécessaire. Vous pouvez me faire parvenir votre témoignage dans les commentaires ou à l’adresse infographiste[at]gmail[dot]com Merci d’avance o/

Articles sur le même sujet

• Définir le métier « intégrateur web » ou « intégratrice web »
• Quelques notes sur la balise h1 avec HTML5
• 1000 ressources pour le développement web et WordPress
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Frameworks CSS + Reset CSS : design from scratch

Toujours en quête de concision et d’exhaustivité pour définir le métier d’intégrateur web — et puisque on n’est jamais mieux servi que par soi-même –, voici ma modeste contribution sous la forme d’une courte définition qui devrait prendre place prochainement dans une «fiche métier» consacrée à l’intégration HTML & CSS :

L’intégratrice web et l’intégrateur web produisent généralement des pages web à partir d’indications visuelles ou auditives ⁽¹⁾ : maquette plus ou moins détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Ils utilisent tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Ils créent le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composants la page. Ils peuvent ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript.

Notepad++ est probablement le meilleur ami de l’intégrateur web travaillant sous Windows

Balisage HTML d'une page web. Cliquez pour agrandir l'image.

⁽¹⁾ On pourrait ajouter «tactile» si le brief est rédigé en braille et «olfactif» à la liste des indications lorsque l’intégrateur travaille au «pifomètre».

Articles sur le même sujet

• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Framework CSS sémantique ? Comment je vois les choses
• Drawter : dessinez, c'est intégré ! (WYSYWYG Powa!)

Parmi les nombreux bugs qui affectent Internet Explorer 6, le bug des classes multiples apparait lorsqu’on utilise au moins deux classes CSS simultanément. Par exemple .classe1.classe2 pour adresser des propriétés CSS aux éléments possédant à la fois .classe1 et .classe2, ce qui est très pratique. Malheureusement, IE6 ne tient compte que de la dernière classe, soit .classe2, en l’occurrence. Une pratique répandue consiste simplement à se passer des classes multiples, ce que je fais depuis des années.

Malgré des débuts prometteurs, en 10 ans de bons et loyaux services sévices, Internet Explorer 6 ne s’est pas fait que des amis… [Illustration ci-contre par Mike Rohde]

«Die IE6, DIE!» Par Mike Rohde (rohdesign.com). Sous Licence CC.

Toutefois, il se trouve que dans le cadre d’un projet utilisant WordPress, j’avais besoin de styler différemment les images selon qu’elles possèdent une légende  ou pas, qu’elles soient alignées à droite, à gauche, au centre, pas du tout (à la folie, passionnément, etc.) et selon leur taille. Ce qui donne un nombre de combinaisons suffisamment important pour justifier l’utilisation des classes multiples, y compris dans IE6. En effet, dans mon cas, l’alignement des images fait partie intégrante du design qui doit (Must vs. Should) passer aussi dans IE6. Et non, en l’occurrence, le script kickie6.js n’est pas envisageable :-D

Dans l’idéal, il faudrait une fonction Javascript  pour détecter les classes multiples passées en paramètres afin d’obtenir en retour la concaténation des deux classes séparée par un tiret (ex. .classe1-classe2. N’étant pas développeur Javascript, j’ai fais appel aux bonnes volontés présentes sur Twitter. Quelques heures plus tard, plusieurs propositions surgirent.

Petit mais costaud, c’est jQuery

Quand on joue sur le web, jQuery est souvent de la partie. Il devient assez rare de faire l’économie d’un framework Javascript, quel qu’il soit. Voici deux méthodes pour ajouter une classe CSS afin de pallier les insuffisances d’Internet Explorer 6 en matière de gestion des classes multiples.

1. La solution fournie par Florian (@_Florian_R) a le mérite de la simplicité et de l’efficacité. Il suffit de passer les classes multiples à la fonction `jQuery()` et d’ajouter la classe de son choix avec la méthode `addClass()`. Seul petit bémol, cette méthode oblige à parcourir tout le document à la recherche des deux classes.

   $(document).ready(function() {
       $(".classe1.classe2").addClass("classe1-classe2");
   });

2. Allons plus loin avec Stéphane Rouillé (@stfr) – Web Developper, PHP and jQuery addict. Sa fonction permet,  au choix,  de remplacer les deux classes précédemment utilisées par une nouvelle classe (replace : true;) ou de les garder (replace : false;). Il est possible de spécifier le noeud DOM pour éviter de parcourir l’ensemble du document afin de ne pas gréver inutilement les performances déjà limitées de notre très cher (coûteux) IE6 !

   /*
   *   Merge multiple CSS classes in one.
   *   Just use : $('body').multipleClassCombiner();  in order to apply this filter on all multiple classes elements
   *   Take care : $('h1').multipleClassCombiner() will apply this filter on <h1>'s childrens. But you can easily modify it.
   *   Default delimiter : "-"
   *   Have Fun !
   *   @author Stéphane Rouillé (Twitter: @stfr)
   *   @date 2011-02-08
   *   Free to use, distribute, modify, etc etc...
   */
   (function($) {
       $.fn.multipleClassCombiner=function(params){
           var options={
               delimiter:'-',
               replace : true
           };
           $.extend(options,params);
           var multipleClassElements=$(this).find("*[class*=' ']");    /* Oh god ! */
           multipleClassElements.each(function(){
               var classes=$(this).attr('class').trim().split(' ');
               if(options.replace){
                   $(this).attr('class',classes.join(options.delimiter));
               }else{
                   $(this).attr('class',$(this).attr('class')+' '+classes.join(options.delimiter));
               }
           });
       }
   })(jQuery);

Regarde Maman, sans jQuery !

jQuery est souvent une bonne idée, mais de nombreux projets de sites internet ne nécessitent pas de framework. Mettre en place jQuery juste pour gérer les classes multiples dans IE6 n’est pas très raisonnable :  les utilisateurs de ce navigateur obsolète utilisent déjà des configurations assez modestes… Inutile, donc, de charger la mule ;)

C’est Edouard Cunibil (@DuaelFr) – Développeur web freelance certifié PHP — qui nous offre une fonction en pur Javascript. Pour utiliser patchMultipleClass(), il suffit de passer les classes multiples en paramètres, en ajoutant, le cas échéant, le noeud DOM impliqué dans la recherche. Par défaut, la fonction parcours tout le DOM à partir de body, mais rien ne vous empêche de limiter les dégâts à #content, par exemple.

function patchMultipleClass(classNames, parent)
{
    var children, current, classes, found, subfound, splitClassNames, joinClassNames;
    var i, j, k;
    splitClassNames = classNames.substr(1).split('.');
    joinClassNames  = splitClassNames.join('-');
    if (!parent) { parent = document.getElementsByTagName('body')[0]; }
    children = parent.children;
    for (i = 0 ; i < children.length ; ++i) {
        current = children[i];
        classes = current.className.split(' ');
        found   = true;
        for (j = 0 ; j < splitClassNames.length ; ++j) {
            subfound = false;
            for (k = 0 ; k < classes.length ; ++k) {
                if (classes[k] == splitClassNames[j]) {
                    subfound = true;
                    break;
                }
            }
            if (!subfound) {
                found = false;
                break;
            }
        }
        if (found) {
            if (current.className.indexOf(joinClassNames) == -1) {
                current.className += ' ' + joinClassNames;
            }
        }
        patchMultipleClass(classNames, current);
    }
}
if (window.attachEvent) {
   window.attachEvent("onload", function() {
       var parentElt = document.getElementById('content');
       patchMultipleClass('.wp-caption.alignright', parentElt);
       patchMultipleClass('.wp-caption.alignleft', parentElt);
       patchMultipleClass('.wp-caption.alignnone', parentElt);
       patchMultipleClass('.wp-caption.aligncenter', parentElt);
   });
}

Cibler uniquement IE6

Pour réserver ce traitement Javascript aux seuls navigateurs ne prenant pas en charge les classes multiples (IE5 — IE6), j’utilise les commentaires conditionnels :

<!--[if lte IE 6]>
    <script src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/functions-ie6.js""></script>
<![endif]-->

Voilà, c’est fini !

J’espère que ces quelques précisions sur ces quelques fonctions Javascript permettant de gérer les classes multiples dans Internet Explorer 6 vous permettront de vous amuser. Je tiens une nouvelle fois à remercier Florian (@_Florian_R), Stéphane Rouillé (@stfr) et Edouard Cunibil (@DuaelFr) pour avoir planché nuitamment sur ce problème :-)

N’hésitez pas à partager vos découvertes sur ce sujet, elles seront les bienvenues.

Merci également à tous ceux qui ont répondu d’une manière ou d’une autre à l’appel : @mgeoffray, @Remzz, @Tchesssss, @JeuneVeteran, @phenxdesign, @burninghat, @jcbrebion, @Darklg, @LDZintegratore, @naholyr, @piouPiouM, @cafenoirdesign, @rickdog, @studiohypehope.

Retrouvez-moi sur Twitter avec @br1o !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

Cette liste de liens pour le développeur web front-end est issue de la veille documentée que j’effectue sur Javascript & Webdesign — Les meilleures ressources Javascript pour développeurs web front-end (avec parfois un soupçon de PHP) – depuis plus de 6 mois. A quelques exceptions près, les resssources pointent directement sur les articles d’origine. La liste est affichée dans l’ordre où j’ai rédigé les billets : les plus anciens en premier par paquet de 10 pour aérer la lecture parce que vous le valez bien.

1. jCarousel Lite — Galerie d’images en jQuery.
2. eCSStender — Sélecteurs CSS avancés compatibles IE6.
3. Effets jQuery accessibles WAI-RIA — Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
4. Augmenter la taille du texte avec jQuery — Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
5. Javascript Framework Matrix — Tableau comparatif des principaux frameworks Javascript.
6. Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
7. jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
8. jQuery — renverser l’ordre d’une liste ordonnée — les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
9. Cufón : des polices de caractère pour tous — Implémenter font-face dans le plus grand nombre de navigateurs.
10. News déroulantes avec jQuery — Un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery.
11. jQuery Magnifier Loupe — Zoom sur images avec l’attribut longdesc.
12. Lazy loader : chargement des images à la volée — Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
13. Faire un Carrousel avec jQuery — Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
14. Tipsy — des bulles d’aide façon Facebook avec jQuery — Bulles d’aide façon bande dessinée comme celles que l’on trouve sur Facebook ouTwitter.
15. jQuery Tools — Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
16. jQuery UI Multiselect — Améliore l’apparence et l’ergonomie de la balise HTML select.
17. jQuery Flash Plugin — Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
18. Jquery Pagination System — Pagination côté client avec jQuery.
19. Choisir sa bibliothèque JS avec Javascript Framework Matrix — Tableau comparatif des principaux frameworks Javascript.
20. FireFinder — interagir avec la page web — Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
21. Sélecteur de date (Date-Picker) non-intrusif — Sélecteur de date avec mini calendrier.
22. Google Closure — les mauvaises pratiques Javascript en action ? — Google Closure a été développé par des spécialiste de Java… ça craint.
23. Un diaporama avec AnythingSlider jQuery Plugin — Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
24. Un «slider» à la manière du Playback de Google Wave — tutoriel pour afficher un historique progressif à la manière de la fonction Playback de Google Wave.
25. jsbin — tester votre code Javascript et partagez vos bugs — Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
26. PHP.JS — transposer des fonctions PHP en Javascript.
27. Le code CSS et Javascript au milieu du HTML c’est pas bien ! — Traduction de l’article Why Inline CSS And JavaScript Code Is Such A Bad Thing de Robert Nyman.
28. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
29. jQuery Image Cropper — recadrer et uploader des images.
30. ul2finder — un explorateur à l’image du Finder de MacOS X.
31. Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
32. Des cookies à la mode de jQuery — Ecrire, lire et effacer vos cookies pour 4,15 kb.
33. Simple jQuery Text Resizer — Laissez vos visiteurs choisiront la taille qui leur convient (un cookie gardera leur préférence en mémoire).
34. Changement de design «on the fly» avec jQuery — Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
35. 22 menus déroulants passés au crible — Tyssen Design passe en revue les principaux dropdown menu.
36. jQuery Context Menu — Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
37. Pikachoose — Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
38. dLite — une librairie Javascript « petit mais costaud ».
39. jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
40. Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
41. DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
42. FlashReplace – Insérer du Flash proprement.
43. DOMTab – Menu à onglets simple et efficace.
44. balance_columns – Équilibrer des colonnes avec Javascript.
45. cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
46. jTextTranslate – Traduction de votre site en 87 langues par Google.
47. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevre propose de faciliter l’utilisation d’Ajax.
48. iepngfix — Composant HTC qui gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6.
49. maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6.
50. Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
51. The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
52. Planet jQuery — Un planet pour jQuery.
53. Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
54. Ceebox — Lightbox qui afficher n’importe quel contenu dans une fenêtre modale ou non. Idéale pour les vidéos hébergées sur Google Video, Dailymotion ou Youtube.
55. Get viewport size with javascript — Connaitre la taille du « viewport » en Javascript.
56. Smart Columns with CSS & jQuery — Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
57. Menu déroulant Suckerfish — Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
58. Système de notation par étoiles accessible — Samuel Le Morvan propose un tutoriel complet sur la question.
59. Mootools Forge — Une forge pour les plugins Mootools.
60. TinySlider — Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
61. jQSlickWrap — Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
62. jQuery Before/After — Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
63. Hightcharts — Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
64. jTruncate — Plugin pour jQuery qui coupe un texte au bout d’un certain nombre de mots et qui ajoute un texte comme « Lire la suite » pour accéder à… la suite !
65. CSS3 animations and their jQuery equivalents — 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
66. Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
67. jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
68. 40 bouts de code — facilitez vos développements en Javascript ou jQuery.
69. jQuery Masonsy — Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
70. Animation avec quatre images et jQuery — Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
71. jQuery Quick Guide — Un guide pour avoir les fonctionnalités de jQuery sous la souris.
72. jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
73. jQuery 1.4 API Cheat Sheet — Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
74. jsfiddle — Propose un environnement pour tester et partager du code Javascript.
75. jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
76. Simple Image Viewer — Galerie d’image minimaliste.
77. A.P.E (Ajax Push Engine) – Le web en temps réel avec Ajax Push Engine.
78. Page Peel Corner — Effet de page cornée avec jQuery.
79. jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
80. Sexy.js — Améliorer l’interface Ajax de jQuery.
81. Dynamic tabs using jQuery — Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
82. DOMAssistant — Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
83. Comment System with jQuery, Ajax and PHP – L’excellent Srinivas Tamada de 9Lessons nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.
84. Adding Keyboard Navigation — Tutoriel sur la mise en place d’un diaporama avec utilisation du clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente.
85. Disable On Submit — Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
86. Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
87. Google Fade — Script disponible pour Mootools et jQuery pour reproduire chez vous l’effet introduit récemment par Google sur sa page. d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.
88. jqTransform — Stylez vos formulaires avec jQuery et CSS.
89. css-template-layout — Implémentation jQuery du module CSS3 Template Layout.
90. How to Easily Create a JavaScript Framework — Créez votre framework Javascript en 4 parties.
91. jQAPI — Documentation alternative pour jQuery 1.4.1.
92. jQuery Source Viewer — Naviguer à l’intérieur du code source de jQuery.
93. flot — Créez des graphiques avec jQuery.
94. Uniform — Ajouter du look and feel aux rugueuses cases à cocher, aux boutons radio anémiques, sans oublier les spartiates. boutons Parcourir… des sobres formulaires HTML.
95. Parallax — Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
96. Plupload — Gestionnaire de « téléversement » (upload) multiple en jQuery.
97. 6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
98. jQuery vs Mootools — Choisir jQuery ou Mootools en connaissance de cause.
99. jQuery Color Animation — Support du RGBa pour « jQuery Color Animations».
100. jSocial — Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
101. DataTables — Pagination et tri des données pour vos tableaux HTML.
102. Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
103. jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
104. jQuery SimpleTree Drag&Drop — Construisez des arborescences à la mode de Windows.
105. Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif.
106. Effets lightbox sans framework — L’ouverture de nouvelles fenêtrespopup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS.
107. Starter — Générateur de plugins jQuery.
108. jQuery Tutorials for Designers — 13 Tutoriels jQuery pour Webdesigners.
109. Comment, jQuery va tuer Flash ? — Question surprenante, mais force est de constater que Javascript a fait du chemin depuis  window.open() !
110. Clickoutside Event — Détectez les clics en dehors d’un élément.
111. TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
112. Custom jQuery Selectors — Créez des sélecteurs personnalisés avec jQuery.
113. Optimiser le chargement des AdSense — Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
114. Splash — un diaporama en pur Javascript.
115. DLink — Afficher le type de cible des liens avec Javascript.
116. Webform to wizard — Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
117. IE7.js — Transformez une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8 : ce n’est pas de la magie, c’est de la technologie !
118. 20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
119. Modernizr — Détection des fonctionnalités CSS3 et HTML5.
120. simpleCart (js) — Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
121. Créer une arborescence de fichier avec jQuery — Série de 8 tutoriels sur la création d’une arborescence de fichier à l’aide de jQuery.
122. Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
123. jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
124. FAT-FREE — Framework PHP léger et modulaire.
125. Popeye 2.0 — Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
126. jQuery.fn.sort — Trier des éléments avec jQuery.
127. Bloc de login à la Twitter avec jQuery — Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
128. Table des matières avec jQuery — Bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés.
129. Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
130. jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
131. Colorbox — une « lightbox » légère et extensible en jQuery.
132. Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
133. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
134. WebProjectHelper — Générateur de structure MySQL et de classes PHP.
135. UI.Layout – Créer des interfaces utilisateurs avec jQuery.
136. Scriptsrc — 10 Frameworks Javascript à emporter.
137. Griddy-Overlay — Afficher une grille par-dessus votre page web avec jQuery.
138. Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
139. SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.

PS : Pour trouver l’article correspondant sur js4design, il suffit de saisir l’ancre du lien dans le champs de recherche de la colonne latérale.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Quelques liens Javascript et PHP

Sur webdevfr, les discussions vont bon train sur HTML5 : Yves Van Goethem soumet à notre attention deux méthodes disponibles aujourd’hui pour pallier les insuffisances des anciens navigateurs (Firefox 2) ou des mauvais élèves du W3C (IE6, IE7) :

DOM vs Namespace html:

1. Le DOM pour créer from scratch ex nihilo les balises manquantes. Cette méthode préconisée notamment par John Resig consiste à créer les éléments dont nous avons besoin via Javascript :

   
       <!--[if IE]>
           <script type="text/javascript">
               document.createElement("header");
               document.createElement("footer");
               document.createElement("nav");
               document.createElement("article");
               document.createElement("section");
           </script>
       <![endif]-->
   

   Pour automatiser la création des éléments présents dans HTML5, Remy Sharp nous propose HTML5 enabling script :

   
      <!--[if IE]>
          <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
   

2. Le préfixe html: pour déclarer l’élément dans son namespace :

   
   <html:header>Ceci est un header</html:header>
   

Pour faire le point sur les avantages et inconvénients de ces deux techniques, voici l’excellent article How to get HTML5 working in IE and Firefox 2 suggéré par Adrien Leygues dans le fil de discussion en question.

Un script PHP à écrire…

Pour réunir le meilleur des deux mondes, Yves Van Goethem propose de servir les éléments HTML avec ce préfixe uniquement pour IE, le code serait réécrit par un moteur en back-end pour obtenir un script côté serveur (et non plus dépendant de Javascript) pour automatiser la prise en compte des balises HTML5 par IE, ce qui permettrait d’utiliser les nouvelles balises HTML5 dès avant-hier ! N’hésitez pas à vous manifester si vous avez déjà développé un script ou simplement si vous avez des idées sur la question.

En attendant Godot 2022 ^_^v

Voici un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js :

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8 />
            <title>HTML 5 complete</title>
            <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            <style>
                article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
            </style>
        </head>
        <body>
            <p>Hello World</p>
        </body>
    </html>

Notez le display: block pour déclencher la prise en compte des éléments HTML and the cat’s in the bag!.

Links for Free

• http://html5doctor.com/html-5-boilerplates
• http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
• http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web
• http://groups.google.fr/group/webdevfr
• http://ejohn.org/html5-shiv
• http://remysharp.com/2009/01/07/html5-enabling-script
• http://viralpatel.net/blogs/2009/05/html-5-the-new-html-kid-on-the-block.html
• http://www.alistapart.com/articles/previewofhtml5
• http://bbxdesign.com/2009/06/08/introduction-au-html-5
• http://www.iheni.com/html5-tips-structure-doctype-aria

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• HTML5 et CSS pour l'intégrateur web
• 390 ressources Javascript & jQuery
• 100+ Polyfills et Fallbacks pour HTML5

Google Doctype est une encyclopédie ouverte (wiki) écrite par des développeurs web pour des développeurs web. Google Doctype contient des articles sur la sécurité sur le web, la manipulation du DOM en Javascript, des trucs et astuces CSS. Une section présente les balises HTML avec leur compatibilité inter-navigateur.

Articles sur le même sujet

• Menu à onglets (tabs) — idTabs ou domTab ?
• Utilisez le DOM et Javascript comme un chef
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 390 ressources Javascript & jQuery
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web

Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.

Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :

1. Poids du script — généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.

   • idTabs -> 10 ko + jQuery -> 31 ko = 41 ko. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.

   • domtab -> 10 ko. C’est déjà beaucoup mieux, et par rapport à idTabs, vous pourrez encore installer plusieurs scripts intéressants avant d’arriver à 41 ko.

   Ceci dit, l’appétit vient en mangeant et le nombre de scripts à tendance à s’allonger, de sorte que l’investissement en jQuery est très vite rentabilisé.

2. Comportement quand javascript n’est pas activé — Ces deux scripts se dégradent élégamment en l’absence de Javascript. Comme l’affichage des onglets est géré par la feuille de style CSS ils restent en place ; les éléments masqués au départ s’affichent simplement les uns sous les autres.

3. Balisage HTML, classes CSS et identifiants nécessaires — Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des ancres internes vers lesquelles les liens des onglets pointeront.

Commençons par idTabs »

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Menu à onglets avec javascript et css
• Trucs et astuces Javascript
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

En général, j’utilise la notation .ma-classe-css pour nommer les classes réutilisables par n’importe quel élément HTML. Cette notation est en fait un raccourci pour .ma-classe-css où est utilisé comme joker universel (les tirets ne sont là que pour le référencement).

Me souvenant que le reset * { margin: 0; padding: 0; } n’était pas optimum en terme de performances, je me suis dit que l’utilisation de div.ma-classe-css (en préfixant le nom de la classe avec la balise HTML à laquelle elle s’applique) permettrait certainement au navigateur de parcourir le DOM plus rapidement en raison du nombre réduit d’éléments sur lesquels boucler.

Articles sur le même sujet

• Utilisez le DOM et Javascript comme un chef
• Quelques notes — Programme de formation HTML & CSS
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Définir le métier « intégrateur web » ou « intégratrice web »
• Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?

Pour ajouter un semblant d’interactivité aux pages web, il fallait auparavant chercher longtemps pour dénicher le bon bout de code Javascript cross-browsers qui va bien. Aujourd’hui, c’est le choix d’une librairie¹ Javascript adaptée à nos besoins qui prend du temps. Les prétendants sont nombreux et la qualité est au rendez-vous : Prototype accompagné de script.aculo.us, Mootools et le petit Moofx, Dojo, Yahoo! UI Library, jQuery avec Interface, etc. Whoa! quel chemin parcouru depuis la fin du 2^ème millénaire…

En suivant les conseils de blogueurs influents, j’ai installé jQuery. Cette librairie récente bénéficie d’une popularité grandissante et d’une documentation tout simplement exceptionnelle qui s’enrichit d’apports francophones, avec notamment une liste de diffusion spécialisée et des tutoriels avec des morceaux d’exemples dedans.

Le fait que Dotclear2 intègre jQuery, est un gage de qualité. Par ailleurs, lorsque la version 2 de Dotclear sera mise en production, je prédis qu’on trouvera de plus en plus de ressources sur jQuery en français, comme pour l’introduction de la biblithèque dans SPIP qui a donnée naissance à jquery.info :)

Les bases de chez base »

Articles sur le même sujet

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Améliorations cosmétiques et ergonomiques sur ce blog
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples