Planète Standards du Web

J'ai le plaisir de vous annoncer le lancement, aujourd'hui, de la version en anglais de Planète Standards du Web : Planet Web Standards.

Cette version en anglais fonctionne sur les mêmes principes que sa grande sœur francophone, principes résumés dans le billet consacré au lancement de Planète Standards du Web et que je ne reprendrai donc pas ici. Il s'agit surtout d'ouvrir le panel de flux agrégés aux articles et ressources disponibles dans la langue de Shakespeare.

J'en profite pour remercier Coralie Mercier, du W3C, d'avoir accepté de mettre à disposition le flux Atom du blog du W3C.

jQuery Source Viewer permet de naviguer à l’intérieur du code source de jQuery. Choisissez une fonction, puis laissez-vous entrainer en cliquant sur les différentes méthodes qui apparaissent au fil du code. Très pratique pour savoir ce qu’il y a sous le capot de jQuery car la lecture du code source n’est pas une partie de plaisir et au bout de quelques lignes, Proust se fait presque regretter (presque).

Cacahouette sur la banane, les versions 1.4, 1.3.2 et 1.2.6 de jQuery sont incluses dans jQuery Source Viewer.

jQapi reprend le système retenu par la documentation de Ruby on Rails tout en reprenant le même contenu existant dans la documentation officielle de jQuery avec un mise en page différente (recodée en jQuery) qui permet d’aborder la documentation d’une manière différente. jQapi semble plus pratique à consulter, donc plus productive. Cerise sur le gâteau, une version à emporter est également disponible.

Tel est le message que souhaite faire passer le site 456 Berea Street dans un billet publié hier et intitulé Forgotten CSS selectors.

Ce billet présente brièvement quelques sélecteurs avancés de la spécification CSS 2.1 qui ont été oubliés jusqu'à présent, à cause qu'Internet Explorer 6 ne les prend pas du tout en charge ou très partiellement, mais auxquels on peut songer, vu qu'IE 6 a atteint des parts de marché suffisamment basses pour que la prise en compte de cette version de navigateur ne soit plus synonyme de « rendu visuel au pixel près ».

Les sélecteurs évoqués dans le billet de 456 Berea Street sont les suivants :

• le sélecteur d'élément enfant (E > F),
• le sélecteur d'élément frère adjacent (E + F),
• le sélecteur d'attribut (E[attribut] et E[attribut=valeur], notamment),
• la pseudo-classe :first-child,
• la pseudo-classe :hover applicable à n'importe quel élément et non seulement à l'élément a,
• la pseudo-classe :focus,
• le sélecteur de classes multiples (E.classe1.classe2).

L'enjeu de l'utilisation des sélecteurs avancés de CSS est résumé ainsi :

What these selectors offer us is cleaner HTML, since we can drop a lot of class names, and in some cases JavaScript, that were only necessary to achieve visual equivalence in IE 6. I am not saying that you should “drop support” for IE 6, just that it’s ok for some things to not look perfect in a Web browser that is eight and a half years old. Besides, Do websites need to look exactly the same in every browser?

En français :

Ce que ces sélecteurs nous offrent est du HTML plus propre, puisque nous pouvons retirer beaucoup de noms de classe, et de JavaScript dans certains cas, qui n'étaient nécessaires que pour parvenir à un visuel équivalent sous IE 6. Je ne dis pas que vous devriez « laisser tomber la prise en charge » d'IE 6, mais seulement de ce qui est bon pour que certaines choses n'aient pas l'air parfaites sous un navigateur Web qui a huit ans et demi. D'ailleurs, Les sites Web ont-ils besoin d'être exactement pareils sous chaque navigateur ?

La réponse est non. Du moins, à partir du moment où l'on se soucie de dégradation élégante pour les navigateurs obsolètes (ou d'amélioration progressive pour les navigateurs les plus avancés en matière de prise en compte des standards et de leur respect).

Voici quelques statistiques sur les navigateurs pour janvier 2010.

Statistiques de W3Schools

Firefox continue de mener la course en tête, mais baisse plus légèrement, avec 46,3 % de parts de marché. Internet Explorer 8 continue à progresser, avec 14,3 % de parts de marché, Internet Explorer 7 baissant à 11,7 % et Internet Explorer 6 à 10,2 %. Chrome obtient des parts de marché à deux chiffres avant la virgule, puisqu'il en atteint 10,8 %. Safari grimpe légèrement à 3,7 %. Opera baisse légèrement à 2,2 % de parts de marché.

Statistiques de Net Applications

Internet Explorer 6 continue de baisser, avec 20 % de parts de marché et se fait ravir la première place par Internet Explorer 8, qui grimpe à 22,37 %. Internet Explorer 7 baisse à 14,53 %. Firefox 3.5 grimpe à 17,08 % de parts de marché, tandis que la version 3.0 baisse à 5,24 % et Firefox 2 à 0,78 % ; la version 3.6, sortie en version finale le mois dernier, grimpe à 1,15 % de parts de marché. Opera 10 monte légèrement à 1,65 %, tandis qu'Opera 9 baisse à 0,70 % de parts de marché. Chrome 3 monte à 3,85 %, de même que Chrome 4, à 1,24 %, tandis que Chrome 2 est pratiquement stable, à 0,07 % de parts de marché. Du côté de Safari pour Mac, la version 4 monte légèrement à 3,57 % de parts de marché, les versions 3.2 et 3.1 étant pratiquement stables, respectivement à 0,12 % et 0,19 %. Du côté de Safari pour Windows, la version 4 reste à 0,29 %. Il en est de même pour Konqueror 3.5 et son 0,03 % de parts de marché.

Statistiques pour Britoweb

Firefox 3.5 continue de progresser en tête, grimpant à 45,4 %, Firefox 3.0 baissant à 7,3 % et Firefox 2 à 1,1 %. Internet Explorer 8 remonte à 11,3 %, Internet Explorer 6 baissant à 7 % et Internet Explorer 7 grimpant légèrement à 6,5 %. Opera baisse à 5,6 %, soit le même pourcentage que pour Safari 4, Chrome et Safari 3 baissant légèrement, respectivement à 7,2 % et 0,2 %.

Les statistiques pour Britoweb concernent l'ensemble du site et sont fournies par XiTi.

Les frameworks Javascript sont aussi répandus que les critiques qui les accompagnent : trop lourds, pas assez rapides, des bugs, des mises à jour trop espacées ou trop rapprochées, etc. S’il vous est déjà arrivé de tenir tout ou partie de ses propos vous êtes peut-être mûrs pour mettre en place votre propre framework Javascript, suivant en cela l’adage selon lequel on n’est jamais si bien servi que par soi-même !

Comment faire ?

Suivez simplement les conseils prodigués par Teylor Feliz qui ont été traduits par KalyParker dans Comment créer facilement un framework JavaScript Partie 1 et Partie 2. Au menu, vous trouverez des conseils concernant la méthode à utiliser pour : créer l’objet principal de votre framework (constructeur vs objet littéral) ; naviguer dans le DOM ; concevoir une méthode de chainage, etc.

Les articles originaux

Au cas où, voici les tutoriels en anglais :

1. How to Easily Create a JavaScript Framework, Part 1
2. How to Easily Create a JavaScript Framework, Part 2
3. How to Easily Create a JavaScript Framework, Part 3
4. How to Easily Create a JavaScript Framework, Part 4

css-template-layout est la transcription Javascript du module CSS Template Layout Module. Ce mécanisme prévu par CSS3 permet de faire une grille de mise en page indépendante de la position des éléments dans le flux, sous la forme de déclarations CSS.

Par exemple, une mise en page de type : 1 en-tête, 2 colonnes et 1 pied de page peut être représenté de la manière suivante :

body {
    display : "aa"
"bc"
"dd";
}

#header    { position : a; }
#footer    { position : d; }
#content   { position : b; }
#sidebar   { position : c; }

Voir les différentes possibilités de mise en page sur CSS Template Layout demos.

Via les Professionnels francophones du développement web.

jqTransform est un plugin jQuery qui améliore légèrement — mais sûrement — l’apparence des formulaires web en gardant l’essentiel : les formulaires ressemblent toujours à des formulaires ! Les champs text voient leurs coins légèrement arrondis, ainsi que les case à cocher avec une coche du plus bel effet. Les boutons radio et les menus select sont eux aussi légèrement stylés.

Google Fade est un script disponible pour Mootools et jQuery qui permet de reproduire chez vous un effet intéressant 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.

C’est très pratique pour éviter d’encombrer l’espace avec des choses inutiles pour ceux qui se contentent de saisir les mots-clés dans la boite de recherche qui a le focus au chargement de la page.

On notera au passage que Mootools requiert plus de lignes que jQuery pour le même résultat. Cerise sur le gâteau, David Walsh a pensé à ceux qui n’ont pas activé Javascript.

Thumbnail Zoom — Voici un effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris qui fera certainement son petit effet sur vos pages web. Ce tutoriel explique pas à pas le code HTML (liste non-ordonnée), les CSS et la pincée de jQuery nécessaire au bon fonctionnement de l’ensemble. Via colegramist.

Une des forces de jQuery est de permettre le lancement d’une fonction dès le chargement du DOM en mémoire, sans attendre que toutes les images soient affichées, par exemple. Or, il peut justement être intéressant d’attendre le chargement d’un élément précis avant d’agir dessus. Dans le cas d’un traitement spécifique sur une image, il est possible d’utiliser la méthode load() :

jQuery('img.featured').load(function() {
    faites quelques chose avec cette image
});

Ne pas confondre cette méthode load() avec l’événement load() dans un contexte Ajax.

Disable On Submit est un plugin jQuery qui désactive le bouton Submit une fois que le formulaire a été envoyé une première fois. Testé sur IE6+, FF3, Opera 9, et Safari 4. L’utilisation est très simple, puisqu’il suffit de :

$(function(){
  $('form').disableOnSubmit();
});

Via jquerylab.

Adding Keyboard Navigation est un tutoriel expliquant pas à pas la mise en place d’un diaporama avec la possibilité d’utiliser le clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente. Chez Remy Sharp, les tutoriels sont vraiment très bien fait. On trouve le tutoriel proprement dit avec les explications de code, la démonstration pour juger sur pièce et le code prêt à être copié-collé, sans oublier les commentaires, souvent utiles.

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. Au menu de ce tutoriel, nous trouvons l’exemple pour créer les tables de la base de données, le code Javascript qui va récupérer les variables saisies par l’utilisateur ainsi que les fichiers PHP nécessaires pour l’affichage, dont voici la démonstration.

DOMAssistant est une bibliothèque Javascript du genre « petit mais costaud » qui pourrait facilement remplacer jQuery pour une grande partie des utilisateurs. DOMAssitant a été créé par Robert Nyman qui a passé la main à Lim Cheng Hong. Le point fort de cette bibliothèque est sa rapidité, sa petite taille et sa modularité : DOMAssistant est segmenté en 6 modules indépendants  :

DOMAssistant modules

• DOMAssistant Core
• DOMAssistantAJAX
• DOMAssistantContent
• DOMAssistantCSS
• DOMAssistantEvents
• DOMAssistantLoad

CSS selectors

DOMAssitant prend en charge les sélecteurs CSS 1, CSS 2 et CSS 3. Idéal pour celles et ceux qui ne peuvent pas attendre ;)

En bref

La version 2.7.4  compressée et Gzipped ne pèse que 9kb ce qui permet à cette bibliothèque Javascript d’être probablement la plus rapide et la plus précise lorsqu’il s’agit d’atteindre un élément dans le DOM.

A noter que la documentation existe aussi en français, ce qui ne gâche rien.

Juste un mot pour ceux qui suivent js4design à travers leur aggrégateur : je viens de terminer l’intégration du nouveau thème Wordpress NoSushaï. Comme je l’ai préciser dans l’annonce faites sur css 4 design, j’ai privilégié la vitesse en évitant les effets : proposer des ressources sur Javascript ne signifie pas qu’il faut en consommer ! Toutefois, j’ai craqué pour la police de caractère FF Nuvo Web Pro de chez FontFont via Typekit.

Dynamic tabs using jQuery est un tutoriel qui montre comment utiliser jQuery pour créer un menu à onglets permettant d’ajouter ou de supprimer des onglets de manière dynamique. La démonstration semble à l’épreuve des balles et adaptée à toutes les situations. Cerise sur le gâteau, l’auteur prend le temps de décomposer son projet pas à pas et pour en expliquer les tenants et les aboutissements. Via taggle.org

La bibliothèque javascript Sexy.js améliore les aspects séquentiels d’Ajax tout en enrichissant les méthodes Ajax intégrées à jQuery. Sajax permet d’effectuer des requêtes HTTP asynchrones et de manipuler leurs fonctions de retour respectives de manière séquentielle indépendamment de l’ordre d’arrivée, en faisant en sorte que chaque fonction de retour reçoive bien la valeur qui lui est destinée.

En partageant les données entre les différents callbacks, Sajax facilite la combinaison et la manipulation aisée des données provenant de requêtes multiples et gère de manière transparente les problèmes inhérents à la nature asynchrone d’Ajax en terme de délais.

PS : cette « craduction » est certainement imparfaite. N’hésitez pas à me signaler les contresens que vous aurez relevés.

Les requêtes Ajax sur des sites tiers ne sont normalement pas permises en raison de restrictions liées à la sécurité. Toutefois, il existe plusieurs techniques côté client pour contourner ses limitations. Grâce à ce guide pratique vous saurez tout sur le JSON with padding (JSONP), le Screen Scraping (avec une pincée de YQL) ou encore le Flash Proxy sans oublier un peu de magie côté serveur avec un proxy PHP.

Tout le monde connait cet effet souvent utilisé pour afficher une publicité sous forme d’un page cornée placée généralement dans le coin supérieur droit qui se déroule au survol de la souris pour faire apparaitre le messsage complet. Avec Page Peel Corner, pas besoin d’utiliser Flash : quelques lignes de HTML, de CSS et de jQuery suffisent pour un effet du plus bel… effet !