Evaluer l’accessibilité d’un site n’est pas chose aisée. Les référentiels (WCAG 2.0, RGAA 2.2 ou encore Accessiweb 2.0) existent bien mais qu’en est-il des outils pour faciliter l’évaluation ?

L’offre est assez disparate en ce qui concerne les outils gratuits et/ou open-source. En effet, les responsables de ces différents projets sont bien souvent sur plusieurs fronts (formateur, développeur, évaluateur…) à la fois d’où le peu de temps à consacrer au développement des outils. Cependant, leur aide (qu’ils en soient ici chaudement remerciés) permet de nous offrir des outils d’une grande qualité.

Extensions Firefox

• Fangs : extrait seulement le texte et affiche le contenu comme il serait lu par un synthétiseur vocal.
  
• Firebug & Web Developer : les plugins indispensables.
• Firefox Accessibility Extension : permet de tester selon les bonnes pratiques HTML IITAA (WCAG 1.0, section 508).
• HeadingsMap : affiche les balises <h1> à <h6> en vérifiant la pertinence hiérarchique.
  
• Semantic Checker : permet de mettre en évidence la sémantique d’un document.
• WAVE Toolbar : lance une panoplie de tests (WCAG et section 508) et affiche les résultats contextualisées. Graphique et pratique.
• WCAG Contrast checker : permet d’analyser les couleurs et le contraste d’un élément ou d’un document complet (WCAG 1.0 et 2.0).

A noter, le plugin pour Firebug : Firebug Accessibility (en phase de développement mais au ralenti).

Synthétiseur vocal (lecteurs d’écran)

Il existe un grand nombre de synthétiseurs vocaux sur le marché. Certains payants, d’autres open-source.

Le plus connu est Jaws, logiciel très puissant et performant mais onéreux.

Celui que j’utilise est NVDA, open-source et très complet. Les voix sont, cependant, encore assez métalliques mais compréhensibles à condition de bien les régler.

Aucun ne fonctionne sur Mac.

Autres ressources

• Contraste analyser est un petit logiciel très simple qui permet de vérifier les couleurs et contraste d’une image (pour la validation d’une maquette, par exemple)
• TAW3 est une application online, desktop et une extension Firefox. Très complète, elle permet de vérifier une page sur les critères WCAG 1.0, WCAG 2.0 avec niveau A, AA ou AAA.
• FAE (Functional Accessibility Evaluator) est une application online de l’université de l’Illinois qui permet d’évaluer une page ou un site (jusqu’à une profondeur de 3 niveaux) et d’obtenir un rapport assez détaillé.

La nouvelle est tombée pendant la nuit et risque de faire beaucoup de bruit dans le milieu du web et des standards. Les working groups HTML et CSS ont lancés un pavé dans la mare aux standards : les spécifications HTML 5 et CSS 3 devraient sortir en recommendation (REC), voire en proposed recommendation (PR) pour les plus en retard, d’ici à fin septembre 2010 !

La déclaration conjointe de Michael(tm) Smith, HTML Working Group co-chair et de Daniel Glazman, Co-Chairman of the CSS Working Group laisse entendre que les différents membres se seraient enfin entendu pour faire avancer les choses rapidement. Le calendrier voudrait faire passer toutes les spécifications en Candidate Recommendation (CR) d’ici à fin avril. Les réunions vont probablement s’enchaîner. Visiblement, les premières réactions sont plutôt positives, en témoigne le billet enthousiaste de Tristan Nitot, patron de Mozilla Europe ou encore le billet presque ironique de Charles McCathieNeville, Chief Standards Officer chez Opera à propos de l’avance de son navigateur en la matière.

Nous verrons bien comment se passent les prochains mois mais une chose est sure : les développeurs d’IE9 vont devoir mettre les bouchées doubles pour sortir une version stable d’ici à la rentrée en septembre.

>>Toutes les informations et la traduction de la déclaration.

Internet Explorer 9 vient de sortir en test drive ! Voici donc une version disponible pour les développeurs afin de voir ce que promet cette nouvelle mouture. Il ne s’agit pas, à proprement parler, du navigateur mais d’une plate-forme de visualisation ou de rendu qui permettra de lancer une premières salves de retours avant le lancement de la beta.

Microsoft semble vouloir frapper fort, en témoigne le tableau de compatibilité avec les standards : support du SVG 1.1, CSS 3 (border, background & selectors), DOM level 2 (Core & Style) et DOM level 3 (Events)… mais encore seulement 55/100 au test Acid3.

On pourra néanmoins louer la transparence de Microsoft sur les avancées et les retards de son nouveau navigateur.

Quelques informations supplémentaires :

• Internet Explorer 9 ne fonctionne pas avec XP à cause de l’utilisation d’un moteur de rendu graphique (le Direct2D) disponible sur Se7en et porté sur Vista.
• Il faut disposer de Se7en ou Vista et d’IE8 ainsi qu’installer la Platform Update for Windows
• La plate-forme de visualisation pourra être installée sans impacter une installation d’une autre version d’IE.
• Support de CSS3 (en partie)  et HTML5 sauf de la balise <video> (présentée au Mix 2010)

Voilà une nouvelle qui pourrait relancer la course à l’innovation des navigateurs. Le site Webmonkey annonce, en effet, qu’Internet Explorer 9 devrait supporter HTML5, CSS3 et SVG… ou au moins une partie. Cette information devrait être dévoilée lors du MIX de Las Vegas du 15 au 17 mars 2010. A l’ordre du jour, nouveau moteur de rendu (s’agirait-il de Webkit ?!!), d’une nouvelle machine virtuelle javascript et de l’accélération de l’affichage avec Direct2D. Cela va-t-il précipiter la mort annoncée d’IE6 ? Tout cela laisse présager d’un avenir meilleur pour tous les professionnels du web qui s’acharnent à rendre les applications web compatibles sur tous les navigateurs.

En attendant, les informations divulguées lors du MIX 2010 pourraient bousculer et réveiller les projets qui dorment dans les cartons des autres navigateurs. Stay tuned!

La trêve des confiseurs a commencé bien tôt pour se finir bien tard… Cela fait en effet pas loin de  4 mois de pause. Un peu de recul, simplement et, une nouvelle mission qui m’a occupé et pris le cerveau plus que prévu. J’ai mis de coté le développement pur pour me focaliser sur la qualité et le testing des applications que nous développons. Cela prend en charge pas mal de concepts et la ligne éditoriale de Web intention s’en fera l’écho : toujours du référencement, de l’ergonomie, des standards, des bonnes pratiques (avec la future v2 d’Opquast) mais aussi de l’optimisation de code et des performances serveur et un soupçon de logiciels de tests (SeleniumHQ, Molybdenum…) Voilà la nouvelle mouture de Web intention, avec des publications plus régulières et une ligne éditoriale étoffée. Ravi de vous revoir !

Crédit photo : traffic light by grendelkhan

jQuery fait partie des bibliothèques javascript qui ont le vent en poupe et pour cause, sa qualité et sa communauté lui confère un statut que beaucoup d’organisations lui ont reconnu : WordPress, Drupal, Spip, Mozilla, Google, Dell intègrent cette bibliothèque dans leur développement.

Voici une sélection de 12 plugins que j’ai trouvés particulièrement intéressants sur différents points. Certains offrent une profonde intégration de la notion d’accessibilité en respectant WCAG 2.0, d’autres (et c’est la majorité) améliorent grandement l’ergonomie des interfaces web et sont innovants pour l’expérience utilisateur.

1. jQuery-Accessible-RIA
   jQuery Accessible RIA est une collection de plugins jQuery conformes avec les guidelines WCAG 2.0 et les normes WAI-ARIA. On y compte un plugin de gestion de tableaux, un de validation de formulaire, un pour les onglets accessibles et une lightbox. Un projet à suivre.
2. FormToWizard
   Un plugin puissant qui permet de décomposer, de manière transparente, un formulaire long et indigeste en une suite de mini-formulaires avec affichage des étapes et la possibilité de naviguer dans ces étapes.
3. Sliding login panel
   A l’heure où les formulaires de connexion et d’inscription sont devenus légion mais posent toujours problème en matière d’architecture et de webdesign, voici un plugin qui permet d’obtenir une zone d’inscription ou de connexion propre et ergonomique.
4. Validation
   Le plugin ultime de validation de formulaire en live : propre, facile à utiliser, paramétrable à souhait. Indispensable !
5. Img Notes
   Un plugin simple qui permet d’ajouter des notes sur une image (comme le permet Flicker ou Facebook, par exemple)
6. ColorPicker
   Parmi la foultitude de colorpickers existants celui-ci me parait le plus équilibré, le meilleur rapport fonctionnalités/légèreté.
7. Pretty checkboxes
   Une méthode pour remplacer de manière innovante les « bêtes » cases à cocher. Propre et clair !
8. Créer un joli nuage de mots-clé avec Facelift et jQuery
   Un tutorial pour réaliser un nuage de mots-clé dont l’aspect peut mieux respecter une charte graphique et offrir un bien meilleur rendu. Aucun problème du coté SEO, le code est non obstrusif et respecte les standards.
9. selectToUISlider
   Un superbe plugin qui permet de réaliser des sliders à une ou 2 entrées grâce à des <select> pour des sélections d’intervalles, par exemple. A noter l’accessibilité du plugin.
10. jqGrid
    Voici une solution de gestion avancée de datagrid. jqGrid permet d’afficher et de manipuler les données dans un tableau. Les chargements de données se font par requêtes Ajax et ce plugin dispose de toutes les fonctionnalités qu’on peut en attendre : tri de colonne, sous-tableaux, tableaux dépendants, performance, data mapping, dédition des données (avec filtres possibles)…
11. David Walsh: Sexy Album Art with MooTools or jQuery
    Un tutorial bien sympathique pour afficher proprement les informations d’un album de musique mais cela peut aussi s’adapter à tout autre contenu visuel nécessitant une sur-couche informative dont la présence n’est pas indispensable de prime abord.
12. Recreate the Apple Product Slider
    Un tutorial pour obtenir un slider dynamique comme sur le site d’Apple.

• FireQuery
  Un addon, encore en beta, pour Firefox bien pratique qui vient se greffer intelligemment sur Firebug et qui permet de gérer jQuery directement depuis la console Firebug. On pourra voir, par exemple, tous les événements accrochés à un élément du DOM… indispensable !
• Zero Clipboard: Javascript Copy to Clipboard
  En cadeau, un petit script, non basé sur jQuery, prometteur qui mêle javascript et Flash pour la gestion du copier/coller sur tous les navigateurs.

Je reviens de Paris Web 2009 et j’en profite pour livrer mes impressions (l’esprit encore tout bouleversé)  de ces 2 jours de conférence (je n’ai malheureusement pas pu assister aux ateliers du samedi). Tout d’abord, je souhaite donner un grand coup de chapeau à toute l’équipe de Paris Web. Ils ont abattu un travail énorme pour nous assurer un cycle de conférences d’une exceptionnelle qualité. Jugez plutôt, pas moins de 43 orateurs se sont relayés dans 2 amphithéâtres et 16 ateliers. Et pas des moindres :

• l’inénarrable et inébranlable (il a été orateur à tous les Paris Web depuis leur création !) Daniel Glazman, co-chairman du Working Group CSS au W3C
• la pétulante Molly E. Holzschlag d’Opera Software et accessoirement éminent membre du Working Group CSS et expert au Working Group HTML
  
• Tristan Nitot, jamais avare de bons mots, président de Mozilla Europe
• le globe-trotter, Karl Dubost, ancien employé du W3C et Directeur technique chez Phéromone
• le réjouissant Charles McCathieNevile, chief Standards Officer chez Opera Software
• la charmante Amélie Boucher, ergonome reconnue pour ses travaux et son très bon livre sur l’ergonomie des sites web
• Eric Daspet, responsable innovation et consultant chez SQLi mais surtout évangéliste d’un web ouvert, expert francophone en PHP et un des pères fondateurs de Paris Web
• et j’en oublie mais la liste complète se trouve sur le site de Paris Web

Finalement, tout le beau monde de l’Open Web était présent. Alors que retenir de ces 2 jours de conférence ?

1. parmi les infos exclusives divulguées, une est particulièrement ressortie et a notamment marqué les esprits : la prédiction de Daniel Glazman ! Selon lui, et je suis tout enclin à le croire, IE 6 sera devenu une part négligeable du marché des navigateurs en mai 2010 et aura complètement disparu en mai 2011. Je ne sais pas sur quels chiffres il s’appuie mais je le crois, la courbe d’utilisation IE6 va dans ce sens. Au final, est-il encore opportun de perdre du temps, de l’énergie et donc de l’argent sur la compatibilité multi-navigateurs en y incluant IE6. Je suis un fervent défenseur de l’arrêt du support d’IE6 (et au moins dans un premier temps du support partiel que j’appelle souvent « dégradation propre ») et ce pour 2 raisons :
   • les utilisateurs d’IE6 le sont sur leur lieu de travail donc pas forcément dans la cible directe d’une application web (sauf cas des intranets antédiluviens ou d’application de type B2B particulière) et finalement, dans notre métier, nous avons une responsabilité importante vis à vis des utilisateurs (je ne parle pas que de nos clients mais bien de l’ensemble des internautes), à savoir, engager un processus pédagogique d’évangélisation et de sensibilisation à la qualité finale de l’expérience utilisateur qu’ils sont en train de vivre. Rendre compatible une application web avec IE6 est une contrainte forte à la créativité et à l’innovation, en plus d’être une aberration commerciale !
   • sinon, il s’agit d’un choix délibéré de leur part et il convient de se poser la question de savoir si ils font vraiment partie de la cible de notre projet et si par conséquent il est opportun de dépenser une fortune pour rendre notre application compatible avec ce navigateur en sachant que le ROI n’est absolument pas assuré. Cette cible et son coût d’acquisition intéresse-t-elle vraiment notre client ? Je ne crois pas tant les coûts de mise en compatibilité deviennent exorbitants avec la complexification des applications web.
2. nous avons un devoir d’éducation, au sens pédagogique, envers les internautes. Il convient de leur fournir un produit de qualité, respectueux des standards (et j’y tiens) et interopérable. En cela les démarches de plusieurs entreprises du web sont assez condamnables. Plusieurs ne se sont d’ailleurs pas privés… non, je ne donnerai pas de nom On pourra citer sans fournir un classement mais juste un pêle-mêle :
   • Apple et l’iphone pour sa fermeture et son contrôle du marché des applications par l’AppStore bridant ainsi l’innovation et la créativité des développeurs
   • Microsoft pour son retard incroyable avec les standards sous IE8 et sa faculté à répondre à un marché plus qu’à une compatibilité… mais ils se soignent… paraît-il
   • Apple qui s’offre une deuxième entrée dans la liste pour son brevet et, donc, sa demande de royalties sur la mise en place des mises à jour sur les widgets et qui bloque la normalisation de « Widgets 1.0: Updates ». Le W3C lance d’ailleurs un appel pour trouver des utilisations antérieures à ce brevet pour l’invalider.

   D’ailleurs, c’était assez comique de voir tous ces évangélisateurs d’un web ouvert avec leur iphone et autre Macbook pro… crédible ?

   Mais avoir une action pédagogique ne signifie pas simplement de fournir un produit aux standards mais également orienter l’utilisateur final vers une interface qui lui offre la bonne (sinon la meilleure) expérience utilisateur. On en revient à l’infatigable débat sur IE6 qui gangrène les développeurs web depuis 11 ans et qui continue à brider l’innovation technologique des applications web :  le lissage par le bas ! Un des leitmotive de ce Paris Web 2009 fût donc l’abandon pur et simple d’IE6. Oui… facile à dire ! Cependant la réalité du marché est celle qui nous fait vivre, on ne peut pas encore dire à nos clients qu’on ne supportera pas ou peu (mode dégradé)  IE6 dans l’application qu’on est en train de lui construire sans qu’il y ait des grincements de dents.

L’avenir des standards nous promet de belles choses. La conférence de Tristan Nitot et de Paul Rouget fût à ce point magistrale que tous les geeks présents en furent bluffés. En effet, hormis le sketch bien huilé de 2 personnes qui se respectent et s’admirent mutuellement, la démonstration technologique HTML5/CSS3 (certes sur un Firefox 3.7 en pré-alpha) a scotché l’ensemble de l’assemblée : détection de l’accéléromètre dans le navigateur, filtres CSS sur des vidéos et sur du canvas 3D… Ces technologies laissent augurer d’un web plus puissant, plus interactif et plus ergonomique… que du bonheur !

Pour conclure : une manifestation excellente en tous points. Par des professionnels, pour des professionnels. Le seul regret que je puisse y voir, c’est qu’il faille attendre une année pour y retourner et recharger les batteries !

En tout cas, une superbe présentation de la boite à outils magnifique que nous avons maintenant entre les mains… à nous de jouer !

Pour finir, quelques bonnes photos http://www.flickr.com/groups/parisweb2009/

Pour ceux qui ne connaissent pas, Paris Web est une manifestation dédiée au monde du… web. Il s’agit de 2 jours de conférence  par des orateurs qui figurent parmi les sommités du web (Daniel Glazman, Karl Dubost, Tristan Nitot, Amélie Boucher ou encore Molly Holzschlag, etc.) et une journée d’atelier le samedi. Si vous êtes un professionnel du web et que vous êtes particulièrement sensible aux standards, à l’accessibilité, au design, à l’ergonomie (ou utilisabilité), aux performances et à la sécurité des applications web, nous aurons probablement l’occasion de nous rencontrer et ce sera avec plaisir.

D’ailleurs, je lance un appel à tous pour savoir si il y aura des compte rendu des ateliers du samedi. Plusieurs m’intéressent mais je ne pourrais malheureusement pas rester le samedi.

Au plaisir de vous y voir !

Facebook s’est, semble-t-il, fourvoyé avec l’inclusion de son API sur des sites tiers. En effet, le code généré et proposé sur le Facebook developer wiki ne passe pas la validation W3C et ce, avec n’importe quel doctype XHTML, le problème semble encore assez difficile avec le draft HTML5.

Je n’ai visiblement pas été le seul à constater cet état de fait et après une petite discussion sur Twitter (merci à Jérémie Patonnier) , il s’avère que l’insertion de Facebook Connect à un site, fait perdre la validation W3C sans que l’on y puisse grand chose. La seule solution que j’ai pu entrevoir est de redéfinir la DTD du doctype comme mentionné dans cet article d’A List Apart : Validating a custom DTD. Cependant, cette technique ne sera pas intégralement reconnue par le validateur du W3C car s’appuyant sur un doctype non homologué… le serpent se mord la queue !

Finalement, cette méthode qui tente d’imposer sa manière de travailler à une profession et un consortium, ça ne vous rappelle pas quelques grandes sociétés informatiques ? Avez-vous une meilleure méthode pour valider proprement un site avec la fonctionnalité Facebook Connect ?

Edit : J’en parle de manière plus approfondie sur le blog de groupeReflect : Facebook et les standards W3C

Vous connaissez Facebook ? Mais connaissez-vous FriendFeed ? FriendFeed fait office de précurseur en matière de flux de messages en temps réel, comme Twitter. Ils sont, notamment à l’origine du bouton « J’aime » sous un  message… bouton qu’on a retrouvé, il y a quelques mois sur Facebook. Finalement, les deux entités ont décidé de se rapprocher et Facebook, comme FriendFeed, a annoncé le mariage.

Aux vues des idées novatrices de FriendFeed et de la qualité de son travail, il y a fort à parier que FriendFeed devienne rapidement l’emblème du département R&D de Facebook.

Mais au delà de cette bonne nouvelle pour Facebook, Twitter doit faire grise mine. En effet, de par sa qualité d’agrégateur de flux de services sociaux, FriendFeed offre une meilleure expérience utilisateur et un meilleur outil de recherche que Twitter (selon Mashable).

Nous risquons d’assister dans les semaines (mois) à venir à une véritable guerre entre Facebook et Google pour le pouvoir des réseaux sociaux et de leur contenu en temps réel. De quoi ranimer de récentes informations concernant le rachat éventuel de Twitter par Google.

Qu’en pensez-vous ? Cela sera-t-il profitable aux utilisateurs ou risque-t-on un enclavement de ce type de réseaux sociaux ?

¤ Edit : L’annonce vient d’être faite pendant la rédaction de ce billet. Le montant de la transaction s’élèverait à 50 millions de $ ¤

La notion de qualité web est étroitement liée à la notion de compatibilité navigateur. En sachant qu’il existe plus de 10 000 marques de navigateurs, versions et configurations et que ce nombre est en constante augmentation, comment faire pour que le site, l’application internet soit conforme sur tous les navigateurs aux souhaits de nos clients. Ne rêvons pas, c’est impossible à moins d’avoir une structure simplissime, pas de javascript, du HTML 3.2 et du CSS 1.0… et encore !

Ce constat étant fait, qu’en est-il vraiment ? Selon les dernières statistiques que j’ai pu trouver, celles d’AT Internet (ex Xiti Monitor) de mai 2009 ou celles de Médiamétrie de juin 2009, les parts de marché, en France, se découperaient comme suit (je vous passe le chapitre sur la précision des chiffres, là n’est pas la question, nous n’aurons besoin que de tendance générale) :

• Internet Explorer : environ 65%
  • IE 8 : 15%
  • IE7 : 35%
  • IE 6 : 15%
• Firefox : environ 28%
• Safari : 3.4%
• Google Chrome : 1.7%
• Opera : environ 1.3%
• Autres : environ 0.6%

Bon, nous sommes loin des 10 000 marques et versions mais c’est déjà largement suffisant pour commencer. En matière de qualité web et de conformité de produits, nous sommes également obligé de prendre en compte le système d’exploitation sur lequel tourne le navigateur. Effectivement, des différences, certes parfois infimes, existent selon l’OS. En nous penchant, à nouveau, sur les études de nos fournisseurs de chiffres français, nous remarquons :

• Windows : environ 94%
  • Vista : 31%
  • XP : 61%
  • 2000 : 1.2%
  • Autres : 0.8%
• Mac OS X : environ 4.4%
• Linux : 1%
• Autres : 0.6%

Maintenant, vous prenez ces derniers chiffres auxquels vous incorporez délicatement les premiers. Une fois le mélange homogène , battez fermement le mélange ! Vous obtenez l’incroyable mixture avec laquelle il faut jongler constamment lorsqu’on teste et recette un site.

Cependant, nous ne pouvons pas assurer une conformité totale sur l’ensemble des navigateurs. Il faudrait un budget colossal et plus d’une vie de développeur pour réaliser un tel prodige.

Yahoo! a introduit la notion de grade dans son Graded Browser Support de la Yahoo! UI Library. Cette notion permet finalement de s’orienter vers des niveaux de conformité et de compatibilité. Ainsi, nous pourront limiter et graduer la prise en charge des versions de navigateurs. Yahoo! propose, bien évidemment, son propre tableau de compatibilité pour sa bibliothèque mais on peut s’en inspirer pour offrir une vision correcte des problématiques de garantie de résultats sur un projet.

Au final, il en résulte un autre tableau que je soumets à votre sagacité. Dans cet arrangement, le niveau de garantie prend 2 valeurs :

• totalement compatible (Support Total – ST) : cas des dernières version stables des navigateurs. On assurera une correction complète des bugs
• partiellement compatible (Support Partiel – SP) : on pourra parler de dégradation propre (essentiellement visuelles), sur lesquelles on s’efforcera de corriger les bugs (il s’agit essentiellement de versions anciennes et plus développées de navigateurs)

J’ai opté pour le choix de ne plus ne plus assurer le support total d’IE 6 dans la mesure où il n’est plus développé et suivi par Microsoft. A ce propos, la fronde anti-IE6 se fait de plus en plus virulente. En témoignent les différentes actions menées de part la toile : IE 6 no more relayé par Mashable, le collectif SaveTheDevelopers dont je parlais justement ici ou l’analyse de CNN, Web citizens trying to kill Internet Explorer 6 d’aujourd’hui.

J’ai également opté pour le support de Safari 4 (pas de safari 3.x qui ne représente qu’une portion congrue), Firefox 3.x (pas de Firefox 2.x qui ne représente qu’environ 1.5%). Pas plus de support pour le moment d’Opera 9.x (moins de 1.5%) ni de Google Chrome 2.x qui peine à percer (avec moins de 2 % de part de marché en disposant d’un colossal vecteur de propagation). Nous verrons bien si la version 3 de Google Chrome et le support du HTML 5 viendra inverser cette tendance.

Avec cette adaptation, on arrive à couvrir plus de 96% de la population des internautes, pas 96% de la cible de votre projet.

Il est bien évident que ce genre de tableau n’est qu’une base de travail et qu’il conviendra de le modifier selon la typologie de votre projet. En effet, nous n’aurons pas le même tableau pour l’intranet d’une société dont la DSI pré-colombienne ne veut pas changer les navigateurs de ses 2500 postes et le site e-commerce de vente de gadgets pour geeks ou encore un site avec une problématique de mobilité importante.

Je n’ai pas fait mention des navigateurs mobile mais cela dépend toujours de la typologie de votre projet. Nous retiendrons quand même 3 navigateurs parmi les plus importants sur le marché mobile actuellement : Iphone Safari, Nokia Web et Opera mini.

Ps : Je me suis également appuyé sur un sondage que j’ai lancé sur Twitter avec moults RT (merci à tous) et même un billet de Fred de Villamil “Quels sont les navigateur sur lesquels vous garantissez une conformité totale ?“, qui je le rappelle est toujours à la recherche d’un appartement sur Paris ou RP. La demande devient urgentissime !

Google Page Speed (GPS) est le pendant de Yahoo YSlow et a pour objectif d’optimiser la vitesse de chargement et d’affichage d’une page. Pour cela comme YSlow, Google Page Speed s’appuie sur Firebug donc sur Firefox. Les informations remontées sont du même accabit que celles de YSlow bien que présentées différemment, on ne sera pas perdu.

Google Page Speed est, d’après l’Official Google Webmaster Central Blog, un outil qu’ils utilisaient à l’interne et que Google offre gentiment au monde. Bien ! Les règles sont basées sur les bonnes pratiques de la web performance édictées par Google.
On pourra notamment :

• optimiser le javascript (GPS propose une version minifiée de tout le js)
• optimiser à la volée des images (GPS propose également une version optimisée de ces images)
• identifier les sélecteurs CSS inéfficaces (un peu radical)
• connaitre les règles CSS inutilisées
• etc.

On ne s’étonnera pas de la similarité entre YSlow et Google Page Speed : Steve Souders, créateur de YSlow et co-fondateur du Firebug working group, travaille désormais chez Google sur la web performance.

A tester en parallèle de YSlow. Si vous avez un avis, n’hésitez pas, les commentaires sont là pour ça !

On en parle ailleurs :

• Google Webmaster Central Blog: Introducing Page Speed
• TechCrunch : Google Opens Up Internal Speed Tool To Developers
• Performance web : Google Page Speed
• Korben : Google Page Speed – Benchmarkez vos pages web

• Web-Based UML Sequence Diagram / MSC Generator

  Pour créer en ligne un diagramme de séquence et l’exporter (image ou pdf avec différents styles). Très sympa et simple.

  tags: uml, tools, web, visualization, generator, programming, design, utilities, diagrams, online

• HADOPI et ses dérives

  L’aspect technique d’Hadopi et ses dérives expliqués, vulgarisés. A lire absolument !

  tags: france, hadopi, internet

• CrawlTrack, le tableau de bord du webmaster.

  CrawlTrack n’est pas seulement un script de mesure d’audience comme Google analytics, AWstats, phpMyVisites ou Piwik, mais aussi un outil très complet. Avec CrawlTrack vous aurez des informations que les autres scripts sont incapables de donner (détecter et bloquer de nombreuses tentatives de piratage, suivre en temps réel l’activité des robots sur leur site, suivre jour après jour la connaissance de leur site par les moteurs de recherche et les sites de social bookmark, connaitre les mots clef utilisés pour trouver leur site et les pages d’entrées correspondantes). Bref, complet, je le teste dès que possible.

  tags: seo, statistiques, analytics, library, robots, référencement, web, webmaster, french

• 10 astuces de veille marketing online – MediaNaranja

  La veille marketing online est une activité qui consiste à se tenir au courant de ce qui se dit d’une marque (l’e-réputation), d’un produit ou d’une entreprise. Voici un article complet et synthétique sur le sujet.

  tags: marketing, veille, howto, socialmedia, french

Posted from Diigo. The rest of my favorite links are here.

• About Query Editor – Freebase

  “Créer les synapses du cerveau global” : c’est ainsi que Tim O’Reilly salue la création de Freebase. Cette première réalisation de Metaweb, la nouvelle société du spécialiste des “machines intelligentes” Danny Hillis et de Robert Cook, se fixe en effet pour mission, selon ses propres termes, de créer “une base de connaissances communes, une base de données structurée, interrogeable, constituée et modifiée par une communauté de contributeurs”, ou encore “”un espace public des données”” (data commons).

  tags: editor, interface, semanticweb, tutorial, search, ui

• Identify – Firefox entension | Madgex Lab

  Identify est un plugin Firefox va vous permettre de connaître le profil d’un bloggeur ou d’un simple utilisateur d’un service communautaire comme Twitter, Facebook, etc.

  tags: firefox, social, socialnetworking, microformats, google, extensions, plugins, network, identité, digital-identity, identity

• 15 Interesting online presentations for web developers

  tags: css, ajax, presentation, webdesign, design, php, development, web

• Prezi – The zooming presentation editor

  Prezi est une application en flash qui propose une approche différente de la présentation traditionnelle. Il est, maintenant, possible de créer des présentations non-linéaires sur lesquelles on peut zoomer avec des cartes comprenant des mots, des liens, des images, des vidéos, etc. Impressionnant !

  tags: presentation, animation, web, web2.0, tools, online, productivity

Posted from Diigo. The rest of my favorite links are here.

• La Quadrature du Net attaquée : le député Patrick Bloche répond – Numerama

  tags: hadopi, actualite, france

• Trautmann : « Le Parlement européen a montré sa volonté de défendre les droits fondamentaux »- Ecrans

  tags: hadopi, actualite, politique, france, europe

• Parti pirate : La Compil’ Pirate, volume 2 !

  Pas moins de 19 artistes français et étrangers nous ont rejoints avec des styles toujours plus variés : rock, pop, électro, jazz, chanson française, bossa, folk… une diversité et une qualité qui n’en finissent pas de nous surprendre.
  Cette Compil’ Pirate est donc librement téléchargeable sur notre site, dans divers formats audio et accompagnée d’une jaquette en Français et Anglais. Vous y retrouverez notamment les sites et plate-formes de chacun des artistes, où vous pourrez télécharger ou acheter leurs propres albums.

  tags: free, music, mp3, gratuit, french, post-wi

• TÉLÉCHARGEMENT ILLÉGAL : Le Parlement européen sur le point d’enterrer la loi Hadopi, actualité Tech & Net : Le Point

  Les eurodéputés ont maintenu, malgré de fortes pressions françaises, un amendement qui pourrait interdire à la France d’appliquer sa loi antipiratage. À Paris, après le rejet-surprise de la loi par l’Assemblée nationale, le 9 avril, le gouvernement va présenter à nouveau le même texte aux parlementaires.

  tags: hadopi, actualite, politique, france, europe, post-wi

• Owni.fr

  La communauté techno-citoyenne est lancée, Owni.fr est un thinktank digital et un média social auquel participent des journalistes, des blogueurs, des entrepreneurs, des étudiants, des chercheurs et des penseurs.
  Nous y expérimentons le Digital Journalism et cherchons à comprendre le monde qui nous entoure sous un regard technophile.

  tags: mixtheweb, hadopi, liberté numérique, politique, internet, journaux, presse, owni, post-wi

• Seavus DropMind | Smooth, flexible and creative mind mapping solution

  tags: mindmap, software, web2.0, online, desktop, brainstorming
  

• Le difficile chemin vers l’intelligence collective

  tags: veille, intelligence, business, web2.0, french

  • Excellent article de 01 Informatique sur la veille internet.

Posted from Diigo. The rest of my favorite links are here.

Une belle étude statistique de la population de Facebook depuis le 21 mai 2008 à maintenant par <a target="_blank" href="http://www.slideshare.net/oreillymedia" title="Slideshare : O"Reilly Media" target="_blank" class="liexternal">O’Reilly Media. On y découvre pêle-mêle :

• 193 millions d’utilisateurs dans le monde
• 51% de femmes et  45% d’hommes déclarés dans le monde
• 32,3% des utilisateurs sont européens soit 62 339 000 d’utilisateurs
• 51% de femmes et 47% d’hommes déclarés en Europe
• 9 530 000 d’utilisateurs actifs en France

via Smarkande

• Clusty the clustering search engine

  tags: search, searchengine, tools, web, internet, clustering, web2.0
  

  • Un moteur de recherche, puissant et pertinent qui cherche, range et classe les résultats. Indispensable pour approfondir une recherche.

• Postbox – A new way to work with email

  tags: mail, tools, Search, software, productivity
  

  • Un logiciel de messagerie qui innove, c’est rare et plaisant. Une navigation repensée et plus ergonomique et la création de message vraiment agréable : à voir !

• Je suis en colère ! Avis de consommateurs en colère

  tags: social, reputation, identité, french, marketing, buzz
  

  • Sur le même principe que Vie De Merde (VDM pour les intimes) mais appliqué aux consommateurs et leur relation avec les produits/services. A inclure dans la veille de marque, e-réputation.

• Samepoint Social Conversation Search | Social Mentions

  tags: search, searchengine, socialmedia, tools, social, web2.0, twitter, tracking, veille

  • Moteur de recherche social qui se base sur un large éventail de réseaux sociaux (Twitter, Facebook, Mybloglog, Technorati, Plurk, Blogger, etc.) Excellente ressource pour la veille de réputation.

• Comment savoir ce qui se dit de vous et de votre entreprise sur les médias sociaux ?

  tags: identité, digital-identity, french, blog, reputation

  • Analyse très pertinente de Karine Toussaint sur la veille et la réputation d’une marque. On peut également la suivre sur Twitter.

Posted from Diigo. The rest of my favorite links are here.

Web intention fait peau neuve. Pour l’occasion, j’ai choisi de vous faire partager directement une partie de ma veille grâce à Diigo que je préfère finalement à Delicious (même si je le conserve pour assurer une compatibilité de mes flux et que je n’ai pas réussi à ré-importer tous les bookmarks de Delicious vers Diigo). Pour ce faire, quotidiennement, un billet listera les bookmarks que je trouverai pertinents et intéressants.

Je teste Diigo depuis quelques jours maintenant et je dois avouer que je suis agréablement surpris par les améliorations effectuées depuis l’ouverture de ce service. En effet, les possibilités d’ajouter des annotations, de surligner et de partager simplement avec un faisceau très dense  de communautés, m’ont convaincu du retard maladif de Delicious et du fossé qui le sépare maintenant de Diigo.

Avez-vous déjà rencontré ce problème d’import des bookmarks Delicious vers Diigo ? J’ai commencé par importer avec l’API de Delicious depuis Diigo. Visiblement, il y a des restrictions ou le serveur avait du mal et je n’ai finalement qu’un tiers de mes bookmarks importés dans Diigo. J’ai alors fait un import de la différence par un fichier généré par Delicious… Diigo me confirme que l’import s’est bien déroulé mais je n’ai rien de plus dans mes bookmarks ! Si vous avez déjà rencontré ce problème ou si vous avez une idée, je suis preneur !

PS: Que pensez-vous de ce nouveau thème (un peu retravaillé) Aerodrome par the Bugmaker ?

• HADOPI : je suis contre, mais après ? | Presse-Citron

  tags: hadopi, analyse, french, post-wi

  • ll faut inventer un nouveau modèle de distribution des œuvres et de rémunération des artistes, équitable et profitable. Je suis personnellement prêt à payer une sorte de licence globale “privée”, par exemple sous la forme d’un abonnement universel à un service comme Deezer (ou autre), à condition d’avoir la garantie absolue de pouvoir y accéder à tout moment, en tout lieu, et avec n’importe-quel terminal, ce qui est encore loin d’être le cas

• 11 Best URL Shortening Services | Online Marketing Blog

  tags: tools, url, socialmedia, resources, tips, internet, online, post-wi

• 99 Essential Twitter Tools And Applications | Developer’s Toolbox | Smashing Magazine

  tags: twitter, tools, resources, utilities, social, web, web2.0, apps, post-wi

• Breadcrumbs In Web Design: Examples And Best Practices | Design Showcase | Smashing Magazine

  tags: usability, navigation, design, ui, web, tips, tutorial, webdesign, css, post-wi

• 400+ Creative Business Card Design Inspiration

  tags: design, inspiration, business, card, graphics, reference, photoshop, graphic, identité, post-wi

• Build Multi-lingual Websites With the Zend Framework

  tags: php, Zend, zf, framework, Multilingue, i18n, tutorials, guidelines, howto, post-wi

• InfoQ: Top Scripting Languages: PHP, Ruby, Python

  tags: post-wi, ruby, php, programming, language, research, web

Posted from Diigo. The rest of my favorite links are here.

• DHTML JavaScript Tooltips
  (tags: javascript tooltip dhtml css web programming)
• Bien demarrer avec le Mind Mapping
  (tags: mindmap carte heuristique french book freemind)
• +30 outils de Mind Mapping
  (tags: outils tools mindmap mashable heuristique software online application french)
• Alltop – Top Mind Mapping News
  (tags: mindmap news veille heuristique carte)
• AdWords Editor
  (tags: adwords editor google marketing business download sem tools)
• Mind Mapping (Cartographie Cognitive)
  (tags: mindmap veille french)
• html5.org — HTML revisited
  (tags: web internet xhtml standards html w3c html5 whatwg)
• HTML5 Elements and Attributes
  (tags: web reference webstandards xhtml html html5)
• Procaster
  (tags: tools software online video live screencast streaming radio)