Gérer sa veille

Je vous propose un article en réaction à la lecture de ce tweet :

C’est l’occasion de faire cette migration de Dotclear vers WordPress entamée il y a plus d’un an et de passer sur un système plus souple et surtout d’avoir un template responsive. Moche certes. Merci pour ce tweet donc =)

C’est aussi l’occasion de faire le point sur ma façon de faire de la veille informationnelle et de voir si je suis dans le coup et si je dois récupérer quelques wagons. Je vais couvrir la question abordée par Clément sous l’angle de l’utilisation du navigateur puis je vous fournirai les source de ma veille dans le cadre de mon métier. Je ne lis pas la presse papier et j’utilise des outils dans mes navigateurs et sur mon mobile.

Disclaimer : J’utilise naturellement des mots et des anglicismes et l’article se veut volontairement généraliste dans sa formulation car le sujet ne concerne pas que les techniciens.

Des généralités et du contexte …

J’utilise deux navigateurs au quotidien, Firefox pour la navigation personnelle et Chrome pour la navigation professionnelle. Je fais cette distinction parce que j’aime Firefox pour son esprit, son respect de la vie privée, son ouverture, bref si vous atterrissez ici il y a des chances que vous ayez cette sensibilité. Je l’ai vu naître, j’ai râlé après pendant cette période sombre où il était lent et plantait (aussi à cause de mauvais plug-ins) et je n’oublierai jamais tout ce qu’il a apporté comme détrôner IE6 et offrir des plug-ins permettant de faire du développement Front-end avec beaucoup plus d’efficacité. Comme il me fallait un deuxième navigateur j’ai naturellement choisi Chrome car il offrait à l’époque peu ou prou les mêmes fonctionnalités puis avec le temps une intégration parfaite et surperformante de Google Drive, que j’utilisais beaucoup pour bosser.
J’utilise beaucoup (peu diront certains) les onglets, du coup je me suis organisé au fil des années.

Afin d’illustrer cet article, deux copies d’écran :

Firefox : bookmarks-ff

Chrome :

bookmarks-chrome

Les outils du navigateur

Les favoris et les bookmarlets

J’ai trois type de bookmarks dans ma barre personnelle située en haut du navigateur sous la barre d’url. Les premiers sont ceux auxquels j’accède le plus souvent et qui sont des services ou des sites d’infos. Je retire en général le titre (Editer le bookmark, supprimer la valeur de la propriété « Nom »)  parce que je trouve ça plus joli, que ça me facilite la lecture et que l’on peut en caser plus. Ils sont plutôt placés sur la gauche de la barre personnelle.

Les seconds sont les dossiers car je suis des sujets précis régulièrement que j’aime avoir sous le coude avec des sites de référence et que je ne me suis jamais fixé sur un système de bookmarks. Je les ai mis au milieu de la barre personnelle.
J’ai bien essayé Delicious.com (C’est dommage mon compte a été définitivement supprimé) mais au final, les ressources vont et viennent tellement vite qu’un moteur de recherche me convient bien finalement. @nhoizey a écrit un article sur ce type d’outils.
Avec l’explosion des services sociaux, j’ai également la possibilité d’enregistrer des ressources même si je trouve que leur système manque de finesse pour retrouver des « like / favoris ».

Et les troisièmes sont les bookmarlets que ce soit pour récupérer des informations sur une page ou pour enregistrer des articles dans un Pocket ou un Flipboard. Ils sont plutôt placés au centre. Le gros inconvénient étant qu’ils n’ont pas d’icônes et qu’il faut par conséquent les mémoriser, parfois un peu lourd quand on revient d’une période d’inactivité digitale. Il y aurait des solutions pour en mettre. Je vous laisse apprécier si vous voulez y consacrer le temps nécessaire.

Vous noterez au passage ce petit reliquat qu’est le répertoire [ RSS ] en premier, je ne peux me résoudre à le supprimer, preuve d’une nostalgie latente de cette époque. Pour le fun, son contenu :

rss

L’utilisation des Bookmarks est plus ou moins vivante et dépend des sujets du moment, par exemple, je peux créer un répertoire sur une recherche précise, au hasard des recherches sur matos PC ou pour ma moto, les vacances, des comparatifs divers et variés, les DMP. Pas de règles particulières ici.

Les raccourcis vers les bookmarks

Je l’utilise surtout pour Pocket, il y a plusieurs solutions possible, sous Firefox, sous Chrome.

La barre d’adresse

L’Awesome bar est aussi un outil génial et bizarrement je ne saurais pas dire si je m’en sers ou si c’est tellement intuitif que c’est devenu complètement transparent. La barre d’adresse de votre navigateur vous permet de taper des mots-clés qui vont directement chercher des urls dans votre historique de navigation, vos bookmarks ainsi que dans les onglets ouverts.

La connexion au navigateur

J’utilise également un compte déclaré au sein de Mozilla et Google pour synchroniser les bookmarks, les identifiants, l’historique et les cookies entre les machines. C’est très pratique et c’est transparent.  Personnellement cela me permet d’avoir des navigateurs identiques à la maison sur les différents postes et sur ma machine professionnelle.

Le dossier « A Lire » et les services tiers

Les services de bookmarks

Je garde un dossier « A lire » mais je l’utilise de moins en moins car je suis tombé sous le charme de Pocket. Cette application cross-platform vous permet via un bookmarklet et de raccourcis dans les applications mobiles d’enregistrer des liens que vous pourrez lire hors-ligne, dans les transports par exemple. Les fonctions sont simples et permettent de mettre en favoris des contenus, de les « marquer comme lu » pour les archiver ou de les supprimer. L’ajout de label et le moteur de recherche permettent de retrouver facilement des articles enregistrés. Couplé à Buffer qui est plus ou moins bien intégré c’est un bon outils pour repartager sur les réseaux sociaux ce que vous choisissez car le savoir ne vaut que s’il est partagé.

La gestion de la barre des onglets et la sauvegarde de session

Je suis complètement fan des onglets épinglés qui permettent de garder sous le coude les sites auxquels j’accède le plus souvent. Sous Firefox, j’ai la chance de pouvoir utiliser Tree Style Tab qui permet d’avoir les onglets sur le côté et donc de voir le <title /> de la page et donc de s’y retrouver plus facilement. Disponible sous Chrome jusqu’à la version 16, cette fonctionnalité a disparu, un ticket a été ouvert. Il y a bien les extensions Chrome Side Tabs et Sidewise Tree Style Tabs mais le fait que les tabs s’ouvrent dans une autre fenêtre me semble manquer d’utilisabilité. Pour approfondir le sujet en anglais.

La sauvegarde des onglets

Je dérive un peu mais les bookmarks servent à ouvrir des onglets non ? J’utilise aussi l’extension Session Manager sous Firefox et Session Buddy sous Chrome parce qu’un navigateur ça plante à cause d’un site, de votre machine ou d’une extension.

La liste des plug-ins

Ci-dessous le récapitulatif liste des modules relatifs à cet article, je vise à limiter leur nombre pour ne pas alourdir l’occupation de la RAM.

Communs :

  • Filtre les pubs : https://adblockplus.org/fr/
  • Importer des feuilles de styles utilisateurs, notamment pour forcer des thèmes sur fonds sombres pour moins fatiguer vos yeux : https://userstyles.org/

Firefox :

Chrome :

Mes sources de veilles

Les réseaux sociaux

Ils sont par définition une source de veille car ils possèdent des fonctionnalités de mise en relation directe avec des individus, des entreprises et des sites spécialisés ou de s’abonner à leur flux qui partagent ou créent du contenu.

Facebook / Twitter / LinkedIn

Facebook et LinkedIn possèdent des fonctionnalités similaires pour se mettre en relation directe avec des personnes ou des entreprises ou de s’abonner à leur fil de publication.

Je trouve qu’ils manquent cependant de bonnes fonctionnalités de tri, de catégorisation et de recherche. Ce sont des sources et non des gestionnaires, pour cela se reposer sur des gestionnaire de bookmarks.

Vous pouvez aussi jeter un coup d’œil sur Flipboard et Medium. Ça reste une question de goût en terme d’interface multi-plateforme.

Quelques conseils pour ne pas se retrouver noyé dans la masse :

  • Suivez des gens que avez rencontrés dans la vraie vie, pour ma part des collègues actuels ou d’expériences précédentes. Vous alimenterez les conversations à la machine à café ou au déjeuner et pourrez partager vos points de vue en physique.
  • Limitez le nombre de personne que vous suivez, cela fait longtemps que je me limite à une centaine de personnes sur Twitter. J’ai récemment fait le tri dans Facebook (division par deux du nombre de contacts).

Youtube

Je suis complètement fan de Youtube surtout pour ma veille musicale, les suggestions dans la barre latérale de droite et sur la homepages sont pertinentes. Un bon moyen de découvrir des contenus sur beaucoup de domaines.

La possibilité d’ajouter des vidéos à des playlists permettant de les regarder plus tard, de les catégoriser est un vrai plus. Vous pouvez décider si elles sont privées ou publiques.

RSS

Inoreader et RSS

J’avais complètement laisser tomber en désuétude cette super technologie suite à la fermeture de Google Reader. On m’a récemment fait découvrir Inoreader.

L’outil est naturellement très complet et avec l’aide de Google Search vous pourrez simplement créer des règles de recherches sur vos sujets préférés.

 

Un rêve de bienveillance collaborative

J’ai un rêve :

Je rêve qu’un jour les acteurs d’un projet partagent leur savoir et leurs document dans un Google Cloud ou un Office365.

Je rêve qu’un jour, même chez les chefs de projet et les commerciaux, avec leur manie d’envoyer des pièces jointes de 20Mo qui polluent et ralentissent nos boites aux lettres électroniques, on retrouve un lien partageant une ressource dans le cloud.

Je rêve que mes développeurs collaborent avec les autres corps de métiers et trouvent facilement les éléments dont ils ont besoin sans déranger à maintes reprises les chefs de projets ou les créatifs. Les spécifications fonctionnelles, les assets créatifs ou encore les compte-rendu de réunion. Je fais aujourd’hui un rêve !

Je rêve qu’un jour je puise trouver l’information, bien rangée et bien nommée pour me concentrer sur mon savoir-faire que tu sois en meeting, en congés ou simplement malade. Adieu Prez_Client_Auteur_Revu_par_initiales_versions_finales_V3_ne_pas_effacer_presentation_client_old.ext, bonjour AAAAMMJJ-Entreprise-Client-Sujet.ext !

Je rêve aussi que les solutions de ce type dans le cloud respectent les besoins des utilisateurs avec des interfaces intuitives et simples qui facilitent l’intervention de chacun.

Je rêve de cet outils qui nous permettent d’éditer ensemble ce dashboard de suivi qui nous permet de piloter ce futur succès et de retrouver ce fameux “Job Number” qui nous permet d’imputer le temps passés sur les projets.

Je rêve que tu sois à l’autre bout de monde et que puisses consulter n’importe qu’elle ressource sur ton mobile sans que ton forfait mette à genoux mon compte en banque. Je fais aujourd’hui un rêve !

Avec cette bienveillance nous serons capables de travailler ensemble, de concrétiser nos rêves, de défendre notre savoir-voir et nos expertises en sachant qu’un jour nous serons soudés et peut-être primés à Cannes.

Que la cloche de la bienveillance et du partage sonne à la Technique !

Que la cloche de la bienveillance et du partage sonne au Planning Stratégique !

Que la cloche de la bienveillance et du partage sonne à la Gestion de projet !

Que la cloche de la bienveillance et du partage sonne à la Data !

Que la cloche de la bienveillance et du partage sonne à la Création !

Disclaimer : Ces propos n’engagent bien sûr que moi et toute ressemblance avec des faits existants ou ayant existés sont purement fortuits.

Utiliser quoitidiennement Windows 7 sur un MacBook

La question ne tenait pas dans un twit, c’est encore aussi pratique de faire un billet.

Je me pose de temps en temps la question de savoir si ça vaut le coup d’installer un Windows 7 sur un MacBook pour profiter :

  • De la puissance de la machine et de son matos homogène
  • De son clavier qui est bien plus à mon goût que n’importe quel clavier de PC
  • De son design, je bosse sur PC depuis des années et je préfère le design d’un MacBook à celui d’un Lenovo, d’un Dell ou d’un HP (car c’est le matos qu’il y a en général dans les agences)

Qu’est-ce qu’il y a comme contraintes ? Je pense par exemple :

  • Au mapping du clavier et aux raccourcis
  • A la gestion du réseau
  • A la gestion des périphériques genre disque SSD ou carte graphique

Est-ce que quelqu’un aurait des retours d’expérience ?

Merci

Adrien

Problème de lecture des vidéos streamées avec Firefox et Flash

Je twittais ces jours-ci que j’avais le sentiment que Firefox et Chrome implémentait de moins en moins bien le plug-in Flash pour favoriser l’implémentation d’HTML5 par les développeurs. Firefox est mon navigateur depuis des années, j’y ai mes bookmarks, mes add-ons, mes flux RSS et mes habitudes, bref c’est mon navigateur principal, et je ne me vois pas en changer du jour au lendemain.

Ce qui m’agace particulièrement c’est son incapacité à lire une vidéo streamée sur Youtube, Vimeo, Dailymotion etc… Au début ça passe, on attend que ça bufferise un peu puis on relance la vidéo. Le problème étant que ça ne résout pas forcément le problème de saccade, le deuxième étant que j’adore aller sur http://www.setlist.fm/ découvrir les setlists des groupes que j’aime écouter et que je ne supporte pas que le morceau soit coupé toutes les 2 secondes.

Le problème se passe aussi bien à la maison qu’au boulot, je ne pense que ce soit un problème de débit. J’ai constaté le problème sur du PC Desktop qui fait tourner des jeux gourmands sous Win Seven, mon ancien PC Portable de boulot qui était un gros HP quad core avec 8 go de ram, mon Mac Book Blanc, celui de ma nana, avec et sans add-ons… et en râlant sur Facebook, des amis me confirme que c’est le même problème… et qu’eux on switchés sur Chrome :/

Quand je regarde les log « About:crashes », je vois une liste d’erreur. Ces erreurs sont fréquentes et surviennent plusieurs fois par jour. Je ne peux pas vous le copier / coller facilement ici, le formatage est tout pourri.

En cliquant sur l’erreur, j’arrive sur cette page https://crash-stats.mozilla.com/about/throttling qui dit ceci :

You’re seeing this page because the crash report you selected was held back from submission. For statistical purposes, we don’t need every crash report and sometimes we decline the submission of a crash report as a form of throttling. If you’d like to see your crash report, type about:crashes into your location bar and your report will be automatically submitted to our server where we’ll give it priority processing.

Thank you for reporting your crashes.

J’écris ce billet parce que des « Mozillians » veulent me donner un coup de main à ce propos et veulent donc en savoir plus et que c’est aussi le principe de fonctionnement de Firefox, tu t’en sers, ça marche pas, tu peux remonter le problème =)

J’ai fait une recherche sur le bugtracker et je pense que le problème a déjà été déclaré https://bugzilla.mozilla.org/show_bug.cgi?id=606838 , je vais appuyer ce bug et je vous demanderai de faire pareil. Accessoirement la création d’un compte sur le bugtracker est très rapide et ne vous prendra que 2 minutes.

Y’a plus qu’à espérer que ça vous aidera à mieux cerner le problème et que si vous êtes dans cette situation, vous donnera envie de compléter le tickert pour espérer une amélioration.

En attendant je vais rester la version HTML5 chez Youtube qui est activable ici.

Les outils de Wireframing

J’ai un besoin simple de faire mettre en forme à un Chef de projet fonctionnel les bases fonctionnelles de son projet. Cela permet d’avoir un tronc de discution commun avec les différents métiers qui vont réfléchir au concept. Je suis très « visuel » dans ma façon de penser et je trouve plus simple de pouvoir pointer dans un document une fonctionnalité que d’en parler. Par ailleurs, je pense qu’un schéma facilite la lecture et par conséquent le partage entre les équipes.

Comme ce n’est pas vraiment mon cœur de métier j’ai posé la question à mes followers. Personnellement, en situation de panique sur un précédent projet, j’avais opté pour une salle au calme, des feuilles A3, un crayon à papier et une gomme. J’avais ensuite fournis ce schéma au CP Fonc. pour qu’il le formalise sur Powerpoint.

Voici ce que vous m’avez partagez :

  • Powerpoint. Je pense que c’est un excellent outils surtout si l’on dispose de gabarits et d’une bibliothèque d’éléments bien fait.
  • Keynote, sensiblement pareil que Powerpoint mais éveille en mois les soucis de cross-compatibilité sur les OS.
  • Le papier. J’en ai fait l’expérience je pense que c’est bien quand on ne maitrise aucun outils, au moins on connait celui-là ce qui permet d’aller vite, par contre pour le partage sur le réseau ce n’est pas pratique
  • Tableau Velleda, je pense que c’est  du même ordre d’idée que le papier module le fait qu’il est difficile à déplacer
  • Mockflow, outils de wireframing en ligne, je pense que c’est plutôt le genre d’outils que je cherche pour sa facilité de partage
  • Pencil,Outils en ligne
  • Balsamiq,Outils en ligne
  • Un framework, ne conviendra pas à un chef de projet fonctionnel il me semble, ou alors la réponse n’est pas détaillée.

Il y en a plein d’autres mais je pense que je vais trouver ce qu’il me faut là-dedans, mon besoin est simple et doit le rester, merci à toutes et tous !

Google Analytics et Deeplinking

Comme quelqu’un a posé la question sur Twitter et que j’ai une page de test autant en faire profiter même si le procédé est relativement ancien.

Les sites web Flash et Ajax sont légions et utilisent le deep linking – liens profonds –  pour gérer l’historique de navigation et l’accès direct aux pages filles.

Vous avez surement du voir surfant des url du type http:/www.website.com/index.aspx#/about et http:/www.website.com/index.aspx#/categorie-01/sous-categorie-01

C’est très simple à mettre en place avec la librairie SWFAddress qui permet de modifier ou de récupérer la valeur de l’ancre dans l’url. Ce qui m’intéresse c’est que depuis 2008 Google Analytics supporte nativement l’utilisation du Deep Linking et envoie un hit quand l’url change. Voici la page d’exemple : http://bootleygues.net/wp-content/uploads/dotclear/lab/ga-hash/ . L’url est modifiée quand on clique sur les boutons.

Lorsque que vous cliquez sur le premier bouton l’url passe http://bootleygues.net/wp-content/uploads/dotclear/lab/ga-hash/ à http://bootleygues.net/wp-content/uploads/dotclear/lab/ga-hash/#/first-hash/ et vous voyez donc bien l’url envoyée vers Google analytics passer dans votre sniffer HTTP préféré : 

et quand vous cliquez sur le deuxième bouton l’url passe à http://bootleygues.net/wp-content/uploads/dotclear/lab/ga-hash/#/second-hash/

Rien d’extraordinaire mais toujours bon à savoir !

Twitter : Ajouter des followers dans une liste sans les ajouter dans la timeline principale

Twitter offre enfin la possibilité d’ajouter des followers dans une liste sans avoir à les ajouter dans la timeline principale. Voici les différentes étapes. Commencez par vous rendre sur l’interface en ligne de Twitter.

Puis cliquez sur « followers » :

Puis cliquer sur l’icône à côté du bouton « followers » et sélectionnez « Add to list » :

et enfin sélectionnez la liste dans laquelle vous désirez ajouter le followers.

C’est très pratique par exemple avec Tweetdeck car celui-ci n’affiche que la TL principale en mode « une colonne ».

Enjoy !

Charles : Web debugging proxy

Un outil pour bien développer

Charles Web debugging proxy  est sans doute le meilleur outils d’analyse de trames HTTP qui soit. Je ne ferai pas le détails ici des autres solutions, même si j’ai longtemps utilisé HTTPWatch 4.x et que d’autres versions sont sorties entretemps. La version 7 m’a l’air pas mal du tout mais la licence est un peu chère, 315 € pour un utilisateur unique! Il existe également Fiddler avec lequel j’ai longtemps joué mais qui ne me satisfaisait pas vraiment en raison d’une interface glauque et finalement peu pratique. Charles se positionne entre votre poste et Internet et interceptera toutes les trames issues des différents logiciels comme ceux de navigation, messageries instantanées, de microblogging ou encore des widgets. Firefox nécessite un add-on pour s’interfacer avec Charles. Ce dernier vous demande de l’installer au premier lancement du logiciel.

Revenons-en au produit, avant tout c’est un logiciel payant dont le prix est compris entre $50 et $700. Je n’ai pas de mal à payer des logiciels de qualité surtout quand ils me font gagner des nombreuses heures, c’est d’autant plus vrai si vous bosser sur des sites Flash ou que vous faites de l’AJAX. Il me semble que $50 pour une licence est abordable pour les freelances ou petites structures et que $700 est un prix juste pour les licences illimités.

Interface générale


Il y a deux types de vue. La vue « Séquence », qui est celle par défaut et qui liste les requêtes au fur et à mesure qu’elles sont émises par les logiciels et la vue « Structure » qui tri les trames par domaine.

Je travaille habituellement avec la vue « Séquence » qui affiche par ordre chronologique les appels des applications web.

Dans la partie basse de la fenêtre vous avez plusieurs onglets, principalement voici ceux qui m’intéressent :

  • Overview pour avoir des informations comme la réponse HTTP, le début / la fin du chargement de la page, le temps que la page a mis pour être chargée
  • Request permet de voir les variables envoyés sur la page
  • Response permet de voir ce qui est retourné par le serveur, c’est-à-dire la page HTML, ou un JSON / XML issu d’un webservice
  • Charts pour avoir une représentation graphique sous forme de barGraph, en sélectionnant plusieurs lignes dans la séquence vous pourrez comparer le temps de chargement des vos fichiers

Vous pouvez cliquer droit sur chaque ligne de la séquence pour éditer la requête en cours ! C’est vraiment très pratique car cela évite de recharger toute la page. On peut éditer variable par variable mais également une chaine XML qu’on envoie sur un webservice. Il est également possible de répéter une requête si vous avez un doute sur le fonctionnement d’une page ou si vous voulez tester des chargements sur différents serveurs.

Au niveau de la configuration, vous pouvez bien sur configurer des proxy de sortie en fonction de ce que vous utilisez. Mais il y a plus intéressant, comme pouvoir filtrer sur des domaines et des urls, très pratique pour éviter de voir votre séquence polluée par autre chose que ce que vous voulez tracker. Au hasard les DNS de votre client, des services de tracking ou de facebook pour vos applications.

Vous pouvez également empêcher le « caching » pour être certains de charger la dernière version des fichier sur lesquels vous travaillez.

Enfin, vous pouvez également « mapper » des appels distants sur des fichiers locaux, c’est très pratique si vous n’avez pas accès à votre serveur de dév., ou que la configuration est différente sur le serveur de production. Ainsi vous associez un url distant avec un fichier local, par exemple un fichier de configuration XML ou un fichier CSS.

Vous pouvez également exporter des sessions mais personnellement je n’ai pas trouvé d’utilisation vraiment utile car le seul format proposé est celui de Charles, c’est dommage que ça ne génère pas une page HTML, ça peut-être très pratique pour attester auprès d’une régie pub que l’implémentation de leur tracker fonctionne correctement dans votre page.

J’espère que vous aurez l’occasion d’essayer ce logiciel dont je ne peux personnellement plus me passer que je recommande à tous développeurs web.