Planète Standards du Web

Maintenant que les navigateurs supportent l'inclusion de fontes dans les feuilles de style, et que des licences permettent d'utiliser ces jeux de caractères, il est temps de dépasser toute l'excitation autour des caractères du web pour réfléchir de façon pragmatique à la façon d'utiliser de véritables polices dans nos projets web. Après de nombreuses expériences avec la propriété @font-face, y compris un travail préliminaire avec le très attendu Typekit, j'en suis arrivé à une seule conclusion : je dois (...)

D'après At Internet Institute, Google reste stable, à 90,9 % de parts de visites. Il en est de même pour Bing, Yahoo! et Orange, qui restent à 2,8 %, 1,8 % et 0,9 %, respectivement. Conduit, moteur de recherche basé sur Google, progresse légèrement, à 0,9 % de parts de visites.

Ces statistiques sont basées sur les visites générées en France sur les sites Web français audités par une solution At Internet.

Si, le 6 septembre prochain, soit lundi prochain, vous êtes à Paris et que vous êtes intéressés par le SVG, sachez que le W3C organise un meetup qui lui est dédié.

Voici un extrait du communiqué du W3C :

Le W3C invite la communauté Web (développeurs, designers, etc.) à participer à un meetup dédié à SVG (Scalable Vector Graphics), le lundi 6 septembre 2010, à partir de 19h00, à La Cantine.

Scalable vector graphics (SVG) est une spécification XML et un format de fichiers permettant la description vectorielle de graphismes à deux dimensions, fixes ou animés. Des experts présenteront les dernières nouveautés SVG assorties de démonstrations é-pous-tou-flan-tes. Ils sont :

• Chris Lilley (W3C)
• Erik Dahlström (Opera Software)
• Doug Schepers (W3C)
• Julien Quint (consultant indépendant)

François Daoust (W3C) sera l'animateur de la soirée meetup.

Pour information, La Cantine est située au 12 galerie Montmartre, dans le deuxième arrondissement (la galerie en question est accessible depuis le 151 rue Montmartre) ; la station de métro la plus proche est Grands Boulevards, sur les lignes 8 et 9. Enfin, il ne faut pas oublier de s'inscrire.

Voici quelques statistiques sur les navigateurs pour août 2010.

Statistiques de StatCounter

Pour le monde entier

Internet Explorer 8 est en tête et preogresse légèrement, avec 29,4 % de parts de marché. Il est suivi de Firefox 3.6, qui grimpe à 23,38 %. Internet Explorer 7 baisse à 13,91 %. Google Chrome 5 franchit la barre des 10 %, avec 10,02 %. Internet Explorer 6 baisse à 8,02 %. Firefox 3.5 baisse à 4,65 % et Firefox 3.0 à 2,59 %, se faisant dépasser par Safari 5, qui monte à 2,61 %. Safari 4 baisse à 1,03 % et se fait dépasser par Opera 10.6, qui monte à 1,22 %. Firefox 2 est pratiquement stable, avec 0,41 %. Google Chrome 6, qui n'est pas encore en version finale, montre le bout de son nez, avec 0,38 % de parts de marché.

Pour l'Europe

Firefox 3.6 continue sa progression en tête, avec 29,84 % de parts de marché. Internet Explorer 8 grimpe à 27,6 %. Internet Explorer 7 baisse à 10,66 %. Google Chrome 5 franchit la barre des 10 %, avec 10,26 %. Firefox 3.5 baisse à 5,11 % et Internet Explorer 6 à 3,75 %. Firefox 3.0, baissant à 2,54 %, se fait dépasser par Opera 10.6 et Safari 5, qui grimpent respectivement à 2,95 % et 2,69 %. Safari 4 baisse à 0,88 % et Opera 10.5 à 0,47 %, Firefox 2 s'établissant à 0,39 % de parts de marché.

Pour la France métropolitaine

Firefox 3.6 progresse légèrement, avec 27,93 % de parts de marché, mais se fait ravir la première place par Internet Explorer 8, qui grimpe à 28,49 %. Internet Explorer 7 baisse à 15,1 %. Google Chrome 5 grimpe à 9,21 %. Firefox 3.5 baisse à 4,99 %. Internet Explorer 6 baisse légèrement à 3,63 %. Safari 5 monte à 3,61 %. Firefox 3.0 baisse à 2,18 % et Safari 4 à 1,13 %. Opera 10.6 est pratiquement stable, avec 0,88 %, de même que Firefox 2, avec 0,41 %. Google Chrome 6 montre le bout de son nez, s'établissant à 0,27 % de parts de marché.

Statistiques pour Britoweb

Firefox 3.6 continue à progresser, avec 44,7 %, Firefox 3.5 baissant à 4,1 %, Firefox 3.0 à 1,2 % et Firefox 2 à 0,3 % de parts de marché. Internet Explorer 8 remonte à 8,4 %, Internet Explorer 7 à 3,8 % et 6 à 4,6 %. Opera remonte à 11,7 %, Safari 5 baisse à 3,3 % et Safari 4 reste à 0,9 %. Chrome 5 grimpe à 11,8 %, Chrome 4 restant à 0,2 %.

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

Si vous êtes webmestre d'un site communautaire, et plus particulièrement d'un site communautaire autour d'un ou de plusieurs logiciels libres, sachez qu'en rendant accessible le site dont avez la charge, vous avez la possibilité de faire découvrir votre communauté du logiciel libre à un plus grand nombre potentiel d'internautes.

Seulement voilà, vous ne savez peut-être pas comment vous y prendre, voire n'avez aucune notion en la matière. Rassurez-vous, le groupe Accessibilité et Logiciels libres de l'April organisera, le 20 novembre prochain, une journée d'initiation technique à l'accessibilité du Web pour développeurs front office, à la Fondation pour le Progrès de l'Homme, à Paris.

Durant cette journée interviendra Armony Altinier, directrice de la société ACS Horizons et experte en accessibilité (certifiée Accessiweb). Son objectif sera de permettre aux différentes communautés d'acquérir des connaissances sur l'accessibilité numérique et d'en comprendre les enjeux et les développeurs participants, en échange de cette formation, seront invités à s'engager à améliorer l'accessibilité de leur site.

Jquery selected text sharer est un 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, afin de le partager sur les réseaux sociaux, par exemple. La démonstration vous permettra de vous faire une idée plus précise des possibilités. [...]

En suivant quelques personnes sur des plateformes de microblog comme Twitter ou Identi.ca, j'ai découvert le site Point de vue, un autre regard sur l'accessibilité Web. Le site, tout en se montrant recommandable dans son initiative et son contenu, me laisse sur ma faim du point de vue des standards du Web et de l'accessibilité.

Les principaux points positifs que je relève sur ce site, outre le fond (le témoignage d'un internaute aveugle montrant les difficultés auxquelles il est confronté lorsqu'il consulte des sites peu accessibles et qui ne réduit pas l'accessibilité au handicap physique), sont les suivants :

• le site reste consultable lorsque JavaScript est désactivé (toutes les sections sont affichées),
• le texte lu dans chaque vidéo est restitué par une voix off,
• la structure de la page des vidéos est correctement établie et la hiérarchie des titres de section est respectée.

En revanche, j'ai relevé pas mal de points négatifs qui mériteraient d'être corrigés au plus vite, d'autant plus qu'il s'agit d'un site traitant de l'accessibilité du Web.

D'abord, les vidéos sont dépourvues de transcription textuelle et sont donc inaccessibles à quiconque consulte le site sans plug-in Flash, à commencer par les utilisateurs d'un iPad, voire d'un iPhone. Quant aux utilisateurs sourds et malentendants, les vidéos étant dépourvues de sous-titres, ils ne saisiront que le texte du début de chaque vidéo, à savoir l'intitulé de celle-ci ; autrement dit, un film muet des débuts du cinéma leur semblera bien plus accessible.

Ensuite, le code source comporte des lacunes, à commencer par l'absence de déclaration de la langue principale du site : une synthèse vocale configurée par défaut en anglais risque de restituer le contenu du site comme s'il était en anglais. Ce code source est invalide syntaxiquement : l'élément embed ne fait pas partie du standard XHTML 1.0 et un attribut id est répété plusieurs fois.

Enfin, certains liens s'ouvrent sur une nouvelle fenêtre (utilisation de l'attribut target avec la valeur _blank) sans prévenir l'utilisateur.

À cela il faut ajouter que certains contenus ne sont pas à jour : quand il est question du référentiel d'accessibilité de l'administration, un lien pointe vers un référentiel de 2004 au lieu de se diriger vers la version actuelle du RGAA et un lien intitulé « Page WCAG en français » ne pointe pas vers la traduction agréée des WCAG 2.0, mais vers une URL générant une erreur 404.

Et, pour couronner le tout, le site est accessible par le domaine www.factsandfiction.com, qui est redirigé par un système de redirection utilisé par l'hébergeur du site ; mais, ce n'est pas une redirection : le nom de domaine reste affiché et des éléments frame dépourvus d'attribut title (un lecteur d'écran ou un navigateur texte pourront nommer ces éléments « Cadre 1 », « Cadre 2 »…) sont utilisés pour afficher le site et l'élément noframes contient, pour seul contenu, un lien Click here non explicite et pointant, néanmoins, vers le site affiché.

Bref, il y a du pain sur la planche pour que le site soit, en matière d'accessibilité, à la hauteur du sujet traité.

ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript et de jQuery pour la majorité des solutions pour régler 12 problèmes courant liés aux navigateurs. Via @zeubeubeu. function changeClass(oldClass, newClass) { var elements = document.getElementsByTagName("*"); for( i = 0; i < elements.length; i++ ) [...]

Dans un billet publié hier et intitulé IE9, Opacity, and Alpha, le blog de MSDN parle d'une des améliorations du support de CSS 3 par IE 9 : le support de la propriété opacity.

Jusqu'à la version 8, Internet Explorer appliquait une couche Alpha aux couleurs de texte et couleurs de fond au moyen de la propriété propriétaire filter (ou -ms-filter sous la version 8 dans son mode standard), avec une syntaxe comportant une valeur comprise entre 0 et 100, alors que la propriété opacity admet pour valeur un nombre décimal compris entre 0 et 1. Ainsi, pour obtenir l'équivalent d'un opacity: 0.5;, il fallait déclarer -ms-filter: alpha(opacity=50); et filter: alpha(opacity=50);.

La version 9 non seulement interprétera la propriété opacity selon la syntaxe prévue par le module couleur de CSS 3, mais surtout n'implémentera pas -ms-filter et filter avec la fonction alpha(), dans le mode standard d'IE 9. En revanche, dans les autres modes de rendu, IE 9 continuera à implémenter -ms-filter et filter avec la fonction alpha(), tout en ignorant opacity. Preuve de plus, s'il en est, qu'il faut savoir casser le Web et que le meta switching n'est pas pour nous.

Une petite astuce toute  simple mais néanmoins efficace pour simplifier l’accès aux identifiants CSS à la manière de jQuery. function $( element ) { return document.getElementById( element ); } Simple, mais il fallait y penser !

Il n'est pas nécessaire de générer une version imprimable en HTML pour offrir à l'utilisateur la possibilité d'imprimer la page Web qu'il est en train de consulter, grâce au média print de CSS.

L'article Maîtriser l'impression CSS, publié sur Openweb (qui n'est pas un site mort ), fournit les détails permettant de maîtriser ce média CSS, tout en insistant sur l'état d'implémentation par les navigateurs des propriétés CSS spécifiques à ce média, ainsi que sur certains écueils (couleurs, configuration du navigateur…).

CLEditor est un éditeur HTML WYSIWYG que vous pourrez ajouter facilement à votre site Internet : léger (10 ko) , compatible avec tous les navigateurs (IE6 inclus). Sa conception autorise la création de plugins pour adapter l’éditeur à vos besoins. Via Cocktail de Web.

Voici quelques statistiques sur les navigateurs pour juillet 2010.

Statistiques de StatCounter

Pour le monde entier

Internet Explorer 8 est en tête, avec 29,04 % de parts de marché. Il est suivi de Firefox 3.6, avec 22,05 %, d'Internet Explorer 7 avec 14,84 %, de Google Chrome 5, avec 9,27 %, d'Internet Explorer 6, avec 8,79 %, de Firefox 3.5, avec 5,34 %, de Firefox 3.0, avec 2,79 %, de Safari 5, avec 2,2 %, de Safari 4, avec 1,35 %, d'Opera 10.6, avec 0,96 %, d'Opera 10.5, avec 0,46 %, et de Firefox 2, avec 0,43 %.

Pour l'Europe

Firefox 3.6 est en tête, avec 28,67 % de parts de marché. Il est suivi d'Internet Explorer 8, avec 26,99 %, d'Internet Explorer 7 avec 11,44 %, de Google Chrome 5, avec 9,66 %, de Firefox 3.5, avec 6 %, d'Internet Explorer 6, avec 4,17 %, de Firefox 3.0, avec 2,81 %, d'Opera 10.6, avec 2,44 %, de Safari 5, avec 2,29 %, de Safari 4, avec 1,13 %, d'Opera 10.5, avec 1,06 %, et d'Opera 10.0, avec 0,47 %.

Pour la France métropolitaine

Firefox 3.6 est en tête, avec 27,42 % de parts de marché. Il est suivi d'Internet Explorer 8, avec 27,41 %, d'Internet Explorer 7 avec 16,25 %, de Google Chrome 5, avec 8,54 %, de Firefox 3.5, avec 5,8 %, d'Internet Explorer 6, avec 3,74 %, de Safari 5, avec 3,27 %, de Firefox 3.0, avec 2,43 %, de Safari 4, avec 1,51 %, d'Opera 10.6, avec 0,84 %, de Firefox 2, avec 0,48 %, et d'Opera 10.5, avec 0,25 %.

Statistiques pour Britoweb

Firefox 3.6 continue à progresser, avec 43,9 %, Firefox 3.5 baissant à 5,5 % et Firefox 3.0 à 1,8 %, Firefox 2 remontant à 0,6 % de parts de marché. Internet Explorer 8 baisse à 7,2 %, Internet Explorer 7 baissant à 3,3 % et 6 remontant à 4,4 %. Opera baisse à 9,6 %, Safari 5 monte à 3,5 %, Safari 4 baissant à 0,9 %. Chrome 5 s'établit à 5,6 %, Chrome 4 à 0,2 %.

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

Sudo Slider est un plugin jQuery de 10 ko permettant de 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.). Une dégradation gracieuse est prévu en l’absence de Javascript (sauf si les contenus sont appelés via Ajax). Les nombreuses options [...]

La société Atalan a mis en place le projet AcceDe sur l'accessibilité des documents PDF. Ce projet était motivé par la quasi absence de documentation, si l'on excepte celle fournie par Adobe, sur l'accessibilité des documents PDF et sur les moyens d'y parvenir.

Ce manque est désormais comblé, puisque le projet AcceDe vient de publier un manuel fournissant l'art de rendre accessible un document PDF avec Adobe Acrobat Pro, ce manuel étant accompagné d'un support d'exercices en deux versions, l'une en PDF balisé, l'autre en PDF non balisé.

Les acteurs de la PAO ne sont pas en reste, puisqu'une notice est également publiée qui leur est destinée et leur fournit les règles d'accessibilité à respecter en phase de conception PAO d'un PDF.

Ces différents documents sont téléchargeables depuis la page manuels du projet AcceDe.

Le W3C vient de lancer Unicorn.

Ce validateur unifié permet de vérifier à la fois :

• la validité du HTML ou du XHTML et bonne formation du XML,
• la validité des CSS,
• la compatibilité avec les mobiles (le service MobileOK),
• la validité des flux de syndication.

À l'instar du validateur de balisage et du validateur CSS, Unicorn permet de vérifier en saisissant un URI, en chargeant un fichier ou en effectuant une saisie directe.

Mais, il se distingue des autres validateurs du W3C existants par le fait qu'il demande d'abord de sélectionner une tâche parmi cinq possibles :

1. vérification de la conformité générale, tâche qui effectue tous les tests possibles ;
2. validation des profils CSS, tâche qui tient compte de tous les niveaux de CSS présents et futurs (CSS 1, 2.0, 2.1 et 3), sans pour autant permettre de choisir le niveau des CSS ;
3. vérificateur MobileOK ;
4. validateur de flux ;
5. tâche personnalisée, qui permet de sélectionner un ou plusieurs tests à effectuer, au choix, avec possibilité de choisir le niveau des CSS.

Autre point de distinction : la validation par saisie directe permet de sélectionner le type de document à valider parmi les types MIME suivants :

• text/html,
• application/xhtml+xml,
• image/svg+xml,
• application/mathml+xml,
• application/smil+xml,
• text/css,
• application/xml,
• text/xml.

En revanche, il n'est pas possible de valider un fragment de code HTML, XHTML.

Enfin, Unicorn est disponible en 22 langues, dont le français.

Pour en savoir plus, lire le billet du W3C annonçant la sortie d'Unicorn.

Non seulement la langue principale d'une page Web doit être déclarée dans le code source afin que les synthèses vocales en restituent correctement le contenu avec la bonne prononciation, mais tout changement de langue au sein de ladite page doit l'être également.

Comme pour la déclaration de la langue principale d'une page Web, chaque changement de langue doit être signalé au moyen de l'attribut lang, qui peut être doublé de l'attribut xml:lang en XHTML, sauf en XHTML 1.1, où seul l'attribut xml:lang est autorisé, comme en XML.

Ceci est également valable lorsqu'il s'agit de contenu multimédia, comme une version audio de la page Web consultée, par exemple.

Or, il se trouve que le site de l'Élysée fournissait une fonctionnalité permettant d'écouter le CV en ligne en anglais du Président de la République. Seulement voilà : faute de signalement dans le code qu'il s'agissait de l'anglais, le CV en ligne était restitué comme s'il avait été rédigé en français, ce qui donnait un résultat pire que l'accent frenchie, résultat qu'on peut encore écouter sur l'article d'Écrans sur la refonte du site de l'Élysée (étant donné que le site de l'Élysée ne permet plus maintenant d'écouter le CV en anglais du Président).

Enterprise jQuery est un site Web qui s’adresse aux développeurs front-end. Il leur permettre de trouver des solutions aux défis auxquels ils sont confrontés dans leur travail au sein des moyennes ou grandes entreprises. Chacun trouvera matière à améliorer ses connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes [...]

jQuery.eventManager est un plugin qui permet de faciliter la gestion d’événement via delegate. Il suffit de créer un objet recensant les objets globaux, les événements attachés, le filtre et l’action à effectuer, comme par exemple : var eventList = { 'div' : { 'mouseover' : { '.sidebar' : function (elem) { $(elem).addClass('over'); }, default : [...]

Video JS est un 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, dont Internet Explorer. Nombreuses fonctionnalités et avantages : Gratuit et Open Source, Léger (n’utilise pas d’image), Entièrement personnalisable via [...]