Le site exemple

Le site pris pour exemple présente un logo trop petit, une navigation peu claire, un colonnage trop constant… des objectifs non affirmés (tient ça me rappelle des trucs).

Les propositions

Quelles sont les propositions des différents groupes, faites pour cette page d’accueil :

• Devenir membre
• Appel au don
• Proposition d’un jeu pour se familiariser avec le produit
• Navigation explicative sur les objectifs du site

La conclusion

La proposition de différentes idées pour la refonte de cette page a permis de dégager de réels parti pris. Même si on ne peut pas se réduire à penser que chaque idée est une bonne idée ou que le cumul de toutes les idées peut favoriser l’optimisation de cette page ; le dialogue a été très porteur.

D’ailleurs bien plus que quand une seule personne se charge de la conception.

If one person in charge of this page only relied on their own ideas, we may not [be] able to achieve the highest level of success,”

Il est fort probable que la refonte d’une page laissée à une seule personne ne permette pas d’atteindre un succès optimal. Le web est collaboratif, il est possible que la conception des sites doivent l’être aussi.

Articles similaires :

1. TYPO3 : les avancées après le T3UXW09
2. WhiteHouse.gov : la maison blanche participe au développement de Drupal
3. Un FrameWork mobile, mb.ile
4. Un calendrier partagé dans Thunderbird

la spécification WAI-ARIA du W3C a acquis le statut de Candidate Recommendation (candidate pour la recommandation)

En gros, on pourra désormais coder un menu déroulant en spécifiant que c’est un menu, qu’il est ouvert ou fermé, qu’il comporte un sous-menu, et que tel bloc de texte caché dans la page en est la description.

WAI-ARIA candidate à la recommandation.

Articles similaires :

1. La communauté WAI-ARIA
2. Commencer avec WAI-ARIA
3. WAI-ARIA sur Google health
4. Safari 4.0 (ne) supporte (pas) les rôles ARIA
5. Introduction à WAI ARIA chez les intégristes

Pourtant, comme chacun le sait, je ne suis jamais content et je trouve toujours un truc à reprocher. Pour tout dire, ce reproche ne concerne pas vraiment Paris Web, mais plutôt l’ensemble des intervenants du monde du web au sujet du libre.

Le web, c’était mieux avant

Voilà encore 2 ans quand on parlait avec un développeur, le discours était clair : microsoft, ce sont des mauvais, ils font de la merde, vive le libre, firefox vaincra ou encore c’est vraiment dommage cette situation de monopole de la part d’une seule entreprise, ça limite l’innovation.

A cette époque on se battait pour faire installer le navigateur firefox à sa famille et à ses amis, limite on passait l’ordinateur de mamie sous un linux pour enlever des parts de marchés à windows le toutbuggué.

Toute la salle se levait en applaudissant ce discours d’un monde meilleur contre les grandes sociétés américaines, chacun se pavanait dans les rues avec des badges des couleurs oranges pour signifier son engagement dans la révolution en marche.

Point sur l’écologie industrielle

Pour ceux qui n’ont pas bien suivi les cours au lycée, nos grandes revues papiers nous présentent de très grands articles didactiques pour nous expliquer que notre planète est en danger ; en cause la disparition de la biodiversité ou encore la destruction de nos écosystèmes.

La biodiversité, c’est un peu le principe d’avoir suffisamment de variétés d’espèces pour garantir la viabilité d’un système dans le temps. Si une espèce domine trop et qu’un virus arrive, pouf tout s’écroule.

Dans le cas du web, une seule espèce, IE6, pas de concurrence ; résultat plus années de retard prises dans le rendu interface.

Dans le cas du vraie monde des gens qui décident de notre avenir, un seul logiciel : PowerPoint. Résultat, la guerre en Irak (petit raccourci volontaire). Lire PowerPoint, c’est du cinéma :

Tout cela est allé de pair avec la prolifération des consultants. Ils arrivent à deux ou trois, avec leur mallette magique de projection PowerPoint, pour vendre leurs préconisations stratégiques. PowerPoint est leur outil de travail, la slide leur mode de communication principal et, de plus en plus, même le produit vendu au client est fabriqué dès le départ sous forme de présentation.

Ne pourrait-on pas établir la même réflexion avec Excel et l’attitude de nos chères banquiers qui ne doivent analyser leurs décisions qu’à l’observation de flèches qui montrent le plafond ?

Mais alors c’est quoi le rapport avec cette conférence sur le web ?

A Paris Web (avant) dans les amphithéâtres, les orateurs défendaient les standards en invoquant des arguments qui résonnaient dans la tête de ouvriers de la profession : mais tu imagines, dans un monde où tous les navigateurs respecteraient les standards, tu n’aurais plus besoin de coder la même page sous plusieurs interfaces ; ainsi l’accessibilité des contenus serait garantie pour l’ensemble des utilisateurs du monde.

En 2010, sur les genoux, des pommes ; dans les yeux des démonstrations de firefox 4.0 ou autres dernières versions des navigateurs. Dans les oreilles des constats : HTML5 et CSS3, c’est bien mais attention au triple fallback en qui concerne l’affichage des vidéos et aussi au chargement de trois librairies JS pour IE6 plus un patch pour Opéra 9.

L’orateur de Paris Web 2008, il a fait un stage UMP ? Ou alors il s’est foutu de ma gueule en me disant que les standards allaient régler le problème de débogage multi-navigateur ? Là, moi au quotidien, je fais comment pour avoir un site rapide, identique pour tout le monde si je dois gérer trois versions d’IE, trois versions de firefox et intégrer des propriétés qui ne sont pas implémentées de la même manière partout ?

Sinon, tu veux en venir où bertrandkeller ?

Ok, j’y viens, pour tout remettre à plat. Dans le développement informatique, il est toujours de très bon ton de défendre le logiciel libre contre les grands monopoles pour garantir nos libertés (hadopi, loppsi, tout ça) ; pourtant à Paris Web tout le monde a un mac.

A Paris Web, on défendait un web accessible à tous, un web avec des pages propres, une sorte d’universalisme ; pourtant, je n’ai entendu aucune critique sur la position dominante qu’on pourrait imaginer pour webkit sur le web mobile (d’où le chapitre sur les écosystèmes).

Conclusion

L’apparition récente de HTML5 et CSS3 implique, évidemment, une phase transitoire durant laquelle nous devons gérer ces différentes versions de navigateurs. Il n’est pas interdit de tripper sur les possibilités futurs des navigateurs web. Le tout est de bien spécifier que, même s’il faut s’y intéresser, ces technologies ne sont pas encore tout à fait mûres.

En dehors de ça, je note qu’on passe d’un espace de développement dominé, précédemment par windows, à un espace de développement dominé par macOS. Personnellement, je trouve cela dangereux pour notre industrie dans le futur. J’aurais souhaité plus de recul face à cette situation dans une conférence de la renommée de Paris Web.

Articles similaires :

1. Paris Web 2010, quelques retours
2. Paris Web 2009, un pas vers le web symbiotique (web 4.0)
3. Paris Web 2008, c’est super
4. Bernard Stiegler : conférence à Paris du 8 septembre 2009
5. Nicolle Sullivan pour les performances CSS au Velocity 2010

Quelques trolls dans la journée :

TYPO3

Le premier par Matthieu Mingasson en disant : C’est un peu comme les personnes se spécialisant dans TYPO3, je ne vois pas l’intérêt.. Aucun intérêt, c’est juste que c’est un peu sorti de nul part dans la présentation, assez marrant sur le coup.

Le web design

Plus lourd, la présentation complétement manquée de Francis Chouquet qui est parti sur une hypothèse complément fausse dans sa conférence, sensée expliquer qu’on pourrait imaginer développer directement dans un navigateur.

Son point de départ fut de définir le métier de webdesigner par plusieurs définitions pour dire que tout le monde aime son métier et que si on est compétent dans son métier, le web, alors on peut être un bon designer.

Franchement merci, sauf que webdesigner, ça n’existe pas, je pensais qu’on était tous d’accord. Dans le processus de conception web, on a d’un côté des phases à réaliser (conception fonctionnel, ergonomie, habillage, intégration…) et d’un autre côté des compétences. A chacun de déterminer comment il souhaite faire correspondre ces compétences aux éléments techniques à réaliser.

Le webdesigner, c’est un peu la manière de désigner une personne qui regroupe plusieurs de ces compétences, qui souvent fait le projet un peu de A à Z.

A partir de là, dans la salle, chacun étant dans une configuration différente, les répliques ont fusé afin de défendre sa vision des choses. La séance de question est partie en vrille jusqu’à entendre : tout le monde le sait, les intégrateurs sont de toute façon des faignants., on le sait, un des deux métiers, intégrateur ou designer, est voué à disparaître.

Tout ça pour dire que de la belle unité d’il y a 2 ans, il ne reste pas grand chose. CSS3 et HTML5, deux nouveautés technologiques majeurs, qui demandent de revoir ses manières de créer des sites web, font remonter une certaine tension dès lors qu’on évoque la mutation des métiers.

En effet, tout le monde n’est pas égal dans ses capacités à imposer, à un client, la réalité de rendu dans les différents navigateurs. La course en avant des navigateurs les plus modernes et le retard des IE ouvre un spectre tellement large de choix techniques que les points de vues divergent et que les esprits s’échauffent.

Dans ce domaine, on peut dire que Paris Web permet à tout ce beau monde de digérer le passage à HTML5 et de présenter sa vision des choses. Paris Web, indispensable.

Articles similaires :

1. Paris Web 2010, ce que je n’ai pas aimé
2. Paris Web 2008, c’est super
3. Paris Web 2009, un pas vers le web symbiotique (web 4.0)
4. Nicolle Sullivan pour les performances CSS au Velocity 2010
5. Bernard Stiegler : conférence à Paris du 8 septembre 2009

Voici une liste de 8 outils permettant de mesurer l’accessibilité de ses sites :

• Color Blindness Simulator
• Juicy Studios Image Analyzer
• Firefox Accessibility Extension
• Test and Improve Readability
• LinkPatch
• WAVE
• AccessColor
• aDesigner

Tester l’accessibilité, c’est tester la structure du code mais aussi les contrastes, les couleurs, l’intelligibilité des textes…

Articles similaires :

1. Tester ses applications pour iPhone et iPad
2. Tests multinavigateurs – tester sous IE
3. 15 outils de gestion de projets
4. Outils de recherche web
5. Magento SEO – optimisez le référencement de votre site E-commerce

Consultez Sébastien Delorme pour une description plus complète, Transcription de vidéos et référencement :

Les enjeux et utilisations de la transcription automatique peuvent être nombreux et enrichir considérablement l’expérience utilisateur. Dès lors qu’il est possible de transcrire automatiquement une vidéo, il est tout à fait envisageable de :

• Proposer des sous-titres de façon automatique ;
• Fournir automatique une traduction ou des sous-titres traduits (c’est par exemple le cas sur Youtube avec l’utilisation de Google Translate sur les sous-titres, même si les traductions sont encore très imparfaites) ;
• Indexer les contenus vidéos dans les moteurs de recherche (ce que propose justement Exalead sur Voxalead France 24 où il est possible de rechercher des vidéos en fonction de leurs contenus);
• Proposer des fonctionnalités de recherche au sein de contenus vidéos (également possible sur Voxalead France 24);
• …

Voyez aussi un billet de Mikiane sur le sujet, Démo: inauguration de la transcription automatique des programmes TV/video live :

A court terme, cette technologie peut grandement améliorer le référencement de nos contenus. Elle offre un meilleur confort de lecture quand l’audio pose des difficultés et en particulier pour les malentendants. Enfin, elle peut être une aide potentielle dans le cadre de l’apprentissage des langues.

Bien entendu, rien ne surpassera jamais une transcription manuelle, plus pertinente, surtout pour les traductions. Cependant, tant que l’homme restera une grosse faignasse, ce genre de solution restera un bon support par défaut.

Articles similaires :

1. Intégration video : tags et sous titres
2. TYPO3 V4 – les tutoriaux vidéos pour éditeurs
3. La BBC maîtresse des titres consistants
4. Accessibilité, ne pas trop en faire
5. Le référencement pour Google News

Aujourd’hui, le W3C vient de lancer un groupe de travail dédié au RDFa : le RDFa Working Group.

La mission de ce nouveau groupe de travail consistera à encourager l’utilisation du RDFa, un format permettant d’embarquer des données structurées dans les documents Web, autrement dit un format ouvrant la porte à l’univers du Web sémantique (d’ailleurs, le groupe de travail est rattaché à l’activité Web sémantique du W3C).

Lire Lancement du groupe de travail RDFa par le W3C.

Articles similaires :

1. WYMeditor, éditeur de texte RDFa
2. Le Groupe Arnold et son Lonesome Troubadour
3. Pas de plaisir sans travail dans les réseaux sociaux d’entreprise
4. Traduction française du Resource Description Framework (RDF), format pour le web sémantique
5. IKS, des solutions pour le web sémantique

Le petit script gleeBox permet de lancer des actions dans votre navigateur, pour faire une recherche par exemple, d’accéder à des URL de sites, de trouver des définitions, ou encore d’activer des liens dans la page à partir de leur intitulé.

Voir gleeBox.

Articles similaires :

1. La navigation au clavier sur les sites d’images
2. Calendrier d’insertion de date en JavaScript avec raccourci clavier
3. Clavier français amélioré avec kbdfr dk
4. 10 principes en or pour le développement d’applications web
5. Ava 7 Patterns : des fonds de page pour site web

The dygraphs JavaScript library produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.

Les graphiques de la librairie dygraphs affichent la valeur des points (abscisses et ordonnées) que la souris survole. Il est possible de comparer la valeur de 2 courbes à une date donnée.

En bas à gauche des graphiques, se trouve un champ texte avec un chiffre. La modification de ce chiffre permet le lissage de chacune des courbes. Le rendu est donc moins précis mais permet d’avoir une appréciation de tendances.

Encore mieux, la définition d’un cadre à l’intérieur du graphique par un clic prolongé permet de zoomer sur les données. Un double clic réinitialise le graphique comme à son origine.

Voir dygraphs JavaScript Visualization Library.

Articles similaires :

1. Graphiques (Charts) avec JavaScript
2. Cartographer, librairie JavaScript pour associer des graphiques à Google Map
3. Grafico librarie JavaScript de Graphes
4. Easy, un FrameWork CSS/HTML/JavaScript
5. L’âge du JavaScript est arrivée

A filter is an independent package of code that modifies your CSS or gives you new abilities when writing CSS. An example of this is the Browser Filter. The Browser Filter gives you new capabilities in CSS writing to define certain blocks or properties as browser specific. The filter will remove any blocks or properties labeled « IE » if the visiting user is running Firefox. There are also other filters, like the Compressor Filter, that don’t give you any new capabilities but simply perform an action. In this case, the Compressor Filter removes all whitespace and line breaks in real time so you can edit clean code and send a small compressed file to the user.

Les filtres disponibles sont : Browser, Compressor, Inheritance, Reset, StripComments, Variables. Ils vont permettre d’avoir une gestion poussée de ses feuilles de styles.

La gestion du filtre Browser évitera d’appeler une feuille spécifique pour certains navigateurs, ainsi il n’y aura qu’une seule feuille contenant tous les hacks. Pour des feuilles de styles pour mobile, l’avantage peut être très intéressant. On pourra, de même, cumuler le filtre browser et les variables afin de déclarer des valeurs en fonction de l’interface de destination.

Au final, on se demande si l’usage de Rosemary n’est pas une source de complexité plus que de simplicité. Comme pour les FrameWork, Rosemary est destiné à des usages bien spécifiques : pour des sites contenant beaucoup de pages, des parcs de sites ou encore des sites s’affichant sur de nombreux terminaux.

En effet, Rosemary offre la possibilité de factoriser certaines parties du code ; le nombre de feuilles de styles sera diminué, la modification de certaines propriétés sera accéléré.

Découvrir A Dash of Rosemary on Your CSS.

Articles similaires :

1. 10 principes en or pour le développement d’applications web
2. Ideose : le numérique pour le développement durable
3. CSS FrameWork : Scaffold pour le développement rapide
4. Arora, un navigateur WebKit Cross Platform
5. TYPO3 est le meilleur système de gestion de contenu (CMS) pour entreprise