Une idée simple

A la maison de l’outil à Troyes, on peut y visiter une succession de vitrines présentant les outils relatifs à un métier. Dans mon cas, je me suis imaginé gimp à la place du marteau, textmate à la place de l’établi ou encore l’explorateur de fichier en guise de ceinture pour ranger les clous.

Et puis je suis tombé sur cette phrase :

Travailler sur des systèmes abstraits de grande envergure nécessite d’avoir l’ensemble dudit système en tête. Quelqu’un a un jour comparé ce processus à la construction d’une maison faite en cristal précieux. Dès que quelqu’un vous distrait, l’édifice s’écroule et se brise en mille morceaux.

J’ai regardé mon code, je me suis relevé et je me suis dit : « en fait, je suis quoi, un orfèvre ? un calligraphe ? ». Et pensant à un reportage sur les cathédrales diffusés il y a quelques semaines, l’idée m’est revenue qu’on pouvait effectivement nous cataloguer comme des artisans.

Ils étaient bien payés, respectés, valorisés.

On sait que l’artisanat était composé de corporations, de confréries ; la formation de apprentis passait par le compagnonnage ; on y respectait des maîtres (une autorité).

Un centre de formation

Pourquoi pas alors reproduire ce principe de maître/apprenti ? C’est une idée, bien entendu, il faudrait le faire à la sauce web et technologie numérique.

Sans y coller le côté pompeux de titres, grades, etc ; on pourrait imaginer, plutôt que d’attendre qu’un cursus professionnel se mette en place, établir un principe d’apprentissage à partir de niveaux de maîtrise.

Sur des périodes diverses, 2 jours, 3 jours, 2 semaines ; proposer des types de sites (des oeuvres) à réaliser sous l’assistance d’un maître (oui, qu’il faudra trouver des maîtres de la force). Contrairement au milieu d’apprentissage habituel d’agence dans lequel on joue avec le temps ; l’accent serait cette fois mis sur l’excellence, c’est-à-dire la mise en pratique de notions comme l’accessibilité, le référencement, la maintenabilité, l’interopérabilité…

Ce serait un moyen de réfléchir aux méthodologies de travail idéales pour la fabrique de sites web. Cela permettrait de sensibiliser certains, de perfectionner d’autres ou encore de se lancer dans des projets de recherche… tout est permis.

Je vous propose l’idée pour ceux que ça intéresse. Je réfléchis très sérieusement à me lancer dans la formation et à animer ce genre de lieu. Je me dis que plutôt que d’avoir une équipe de développeurs qui développent, avec un telle considération, on pourrait plutôt avoir des équipes dans lesquelles les intervenants seraient réellement mis en valeur pour leurs compétences.

A suivre…

Si nous, les utilisateurs du Web, nous permettons à ces tendances et à d’autres encore de se développer sans les contrôler, le Web pourrait bien se retrouver fragmenté en archipel. Nous pourrions perdre la liberté de nous connecter aux sites Web de notre choix. Les effets néfastes pourraient s’étendre aux smartphones et aux tablettes, qui sont aussi des portails vers les nombreuses informations fournies par le Web.

Pourquoi est-ce votre affaire ? Parce que le Web est à vous. C’est une ressource publique dont vous, vos affaires, votre communauté et votre gouvernement dépendent. Le Web est également vital pour la démocratie, en tant que canal de communication qui rend possible une conversation globale permanente. Le Web est désormais plus crucial pour la liberté d’expression que tout autre média. Il transpose à l’âge numérique les principes établis dans la constitution des États-Unis, dans la Magna Carta britannique et d’autres textes fondateurs : la liberté de ne pas être surveillée, filtrée, censurée ni déconnectée.

Longue vie au Web ! Un appel pour le maintien des standards ouverts et de la neutralité

Articles similaires :

1. Tim Berners Lee: Raw Data Now !

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

Dans je passe du temps à essayer de comprendre la subtilité des propriétés CSS mais qui ne sont pas implémentées de la même manière dans tous les navigateurs ; voici quelques ressources intéréssantes :

• Mise en page CSS avancée grâce à la propriété display – Alsacréation
• La propriété CSS display: inline-block – chez Jérémie
• Inline-block dans tous les navigateurs modernes? – Florent Verschelde
• Everything you Know about Clearfix is Wrong – Thierry Koblentz
• The display declaration – Quirksmode
• What is Inline-Block? – Impressive Webs

Un peu de overflow:hidden, un peu de display:inline-block, des petites techniques qui semblent bien fonctionner.

Articles similaires :

1. YAML Debug : Un nouvel outil pour l’intégration web
2. Guillaume Dasquié mobilise la toile autour de sa mise en examen
3. Scandale autour de la transmission de la pensée grecque à l’Occident chrétien
4. Développement CSS3 compatible multi-navigateurs avec Modernizr et eCSStender
5. Google va proposer des polices via font-face

Le principe d’Instant Blueprint se décline en 5 points :

1. Indiquer le nom du projet
2. Sélectionner le DOCTYPE et la librairie JavaScript
3. Indiquer tous les tags d’id désirés
4. Choisir une extension pour le fichier index
5. Et euh… soumettre le formulaire

Voilà, un zip avec tout dedans, on gagne dix minutes pour un truc qu’on aurait pu faire à la main. Pratique, pas pratique ; je ne sais pas. Toujours bon à prendre en tous les cas.

Voir Instant Blueprint.

Articles similaires :

1. Easy, un FrameWork CSS/HTML/JavaScript
2. EZ-CSS, FrameWork CSS qui peut le moins peut le plus
3. OpenFaces, un FrameWork ajax
4. CSS FrameWorks : les pour et les contre
5. YAML, le FrameWork CSS, sort sa version 3.2

Voici, les 10 principes en or pour le développement d’applications web par Fred Wilson :

1. Rapidité
2. Utilité immédiate du service
3. Le logiciel est le média
4. Le moins est plus
5. Programmable (par des développeurs)
6. Facile d’adoption (par des développeurs)
7. Architecture REST
8. Visible dans les moteurs de recherche
9. Propre
10. Ludique

Encore une fois, on a l’impression qu’une Web App doit ressembler à une interface de jeu vidéo. Pourquoi pas ? Mais c’est quand même l’utilité d’un service, la possibilité de le modifier, la cohérence de son architecture qui feront son succès.

Lire Fred Wilson’s 10 Golden Principles of Successful Web Apps.

Articles similaires :

1. CSS FrameWork : Scaffold pour le développement rapide
2. Rosemary, gestion de filtres pour le développement CSS
3. Ideose : le numérique pour le développement durable
4. ColorBox, plugin lightbox pour jquery
5. TYPO3 : Web Service / iPhone App

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

Le principe est de copier/coller des blocs prêt à l’emploi dans des containers. J’ai une zone de contenu que je veux diviser en 3, je copie le code pour 3 colonnes et je le colle dans mon container et ainsi de suite à l’infini.

Le fichier CSS ne comprend que le code pour diviser une zone en x colonnes et les faire flotter dans le bon ordre. L’auteur a ajouté quelques lignes pour la compatibilité multi-navigateurs (IE) et le tour est joué.

EZ-CSS se montre très pratique pour la division rapide des zones de contenus de sa page. Justement, EZ-CSS propose une version encore plus basique spécialement dédiée au prototypage.

C’est Jean-Paul du marketing que vous pouvez impressionner avec un site plus vrai que nature. Enfin, faites gaffe quand même, il va croire que le boulot est terminé.

EZ-CSS est un FrameWork a montrer aux quarantenaires développant encore en tableau et à utiliser pour les mises en page à réaliser rapidement.

Voir EZ-CSS – FrameWork CSS.

Articles similaires :

1. Easy, un FrameWork CSS/HTML/JavaScript
2. TYPO3 : un FrameWork pour TemplaVoila
3. WordPress, FrameWork et custom post
4. Instant Blueprint, FrameWork CSS express
5. OpenFaces, un FrameWork ajax

On rappelle : avec une librairie de graphe, il est possible à l’aide d’une petite ligne de code en JavaScript et quelques paramètres, d’afficher ses plus belles courbes ou ses plus beaux histogrammes. Les librairies de graphes en JavaScript sont de bonnes alternatives à Flash.

Quelles sont les particularités de Grafico ?

• Sélection automatique de la meilleure échelle pour l’affichage
• Intégration d’informations relatives aux points ou zones des graphes
• Affichage (éventuel) de la moyenne
• Personnalisation des graphes avec affichage d’un logo en fond

Grafico affiche de beaux graphes. si on lit bien la page de leur site, on note que la librairie est plutôt lente sous le navigateur Opéra. Ces mauvaises performances ne sont pas pour aider à son adoption.

Grafico ne semble pas se démarquer spécifiquement de ses concurrents ; mais dans le domaine des librairies de graphes, on remarque qu’elle n’affichent pas toutes le même type de graphes dans les même conditions.

A retenir de Graphico, une librairie javaScript basée sur prototype.js affichant des courbes et des histogrammes avec les échelles en abscisses et en ordonnées.

Voir Grafico.

Articles similaires :

1. eCSStender : une librarie JavaScript pour prendre le contrôle de vos CSS
2. Graphiques (Charts) avec JavaScript
3. Cartographer, librairie JavaScript pour associer des graphiques à Google Map
4. Easy, un FrameWork CSS/HTML/JavaScript
5. dygraphs JavaScript Visualization Library