Web – Page 42 – French Coding

Chrome – Comment prendre une copie d’écran

Google Chrome est un navigateur web reconnu pour sa rapidité d’exécution, son côté novateur et sa fiabilité. Ces trois caratéristiques en font, à mon humble avis, le meilleur navigateur web actuellement disponible sur le marché.

Il y a un aspect que l’on néglige dans beaucoup de cas. Les possibilités au niveau de l’extensibilité du navigateur grâce à son API de développement. Le navigateur opère sur un API complet permettant d’interagir directement avec l’utilisateur et sa page web.

Je me suis arrêté aujourd’hui à démystifier le concept de capture d’écran à partir du navigateur. À une époque ancienne, il n’est était pas possible de prendre une copie d’écran d’une page web sans avoir recours à un logiciel tiers.

Cette époque est maintenant révolue car il est possible de procéder à une capture d’écran directement à partir de l’API offert par Google Chrome.

chrome.tabs.captureVisibleTab

La fonction chrome.tabs.captureVisibleTab permet, sur papier, de prendre en image le contenu de l’onglet courant de la fenêtre active de Chrome.

Il y a deux paramètres pouvant être spécifié ainsi qu’un fonction de callback à spécifier obligatoirement.

windowId : Optionnel. Permettant de spécifier l’identifiant de la fenêtre à viser.
options : Inclusion de deux sous paramètres : quality (int) et format (jpeg ou png).

Son utilisation est assez simple et à sens unique. Voici la recette que j’ai utilisé pour y arriver :

Utiliser un fichier manifest.json similaire à celui-ci.
- Il est important garder le manifest_version à 2. Sinon l’extension ne fonctionnera plus. De plus, la permission à <all_urls> doit rester.
Appeller la fonction captureVisibleTab de la façon suivante :

	chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.captureVisibleTab(tab.windowId, {"format": "png"}, function(img) {
	window.open(img);
	});
	});

view raw

gistfile1.js

hosted with ❤ by GitHub

Pour le reste, la magie va s’opérer par elle-même. Un nouvel onglet sera ouvert avec la copie d’écran en question. Cela se fera grâce au mécanisme du Data URI Scheme. L’image est encodée en format Base64 et sera interprété par le navigateur comme un fichier lire.

Il y aurai été aussi possible d’envoyer cette même image encodée à un service tiers qui aurait enregistré l’image sur un serveur pour un traitement quelconque.

Conclusion

Cette approche est intéressante et très simple. Toutefois, il faut connaître certaines des limitations de celle-ci.

Il ne sera pas possible de commander par l’API l’enregistrement de l’image au niveau client. C’est à dire que le maximum qui peut être fait c’est d’ouvrir l’image dans un onglet et laisser le restant de l’opération à compléter au client.
Il est seulement possible de prendre une copie d’écran du contenu de l’onglet et non de l’entièreté de la fenêtre.

Mozilla Persona

Votre identité en ligne est au cœur de vos interactions sur internet. Que ce soit le courriel que vous utilisez pour vous connecter sur Facebook ou le nom d’utilisateur pour votre compte en banque, ils font partie de votre ADN virtuel.

À l’heure actuelle, trois tendances sont observées lorsqu’il est temps de vous authentifier et d’utiliser un service en ligne.

Code utilisateur et mot de passe
Courriel et mot de passe
Protocole d’authentification fédéré : OAuth (Facebook et Twitter), et OpenID (Google).

Les deux premières présentent des désavantage tant au niveau sécurité qu’à la facilité d’utilisation. Selon moi, l’utilisation d’un protocole d’authentification présente une alternative beaucoup plus sécuritaire.

En contrepartie, à mon avis, les techniques énumérées présentent les faiblesses suivantes :

Il est facile d’oublier le nom d’utilisateur associé à un service utilisé peu fréquemment.
Un courriel comme identifiant utilisateur est pratique mais expose inutilement votre adresse courriel
Les précautions de sécurité employées avec les deux premières options sont difficilement évaluables.
Un fournisseur d’identité en ligne devient, potentiellement, le chaînon faible dans le cas où la sécurité de celui-ci est compromise.

Toutefois, il n’est pas sans hasards que les principaux services que vous utilisez implémentent l’un ou l’autre des protocoles d’authentification. Ils permettent une décentralisation de la validation de votre identité.

En termes clairs, il s’agit de la technique de ne pas mettre tous les œufs de la sécurité de votre identité dans le même panier.

L’histoire se répète et chaque joueur tiens, dans ses mains, les billes du plan lui permettant de dominer avec la technologie qu’il a choisi.

Mozilla Persona

Persona est le nom grand public que Mozilla a donné à la technologie BrowserID qu’ils ont développé. Il s’agit d’un mécanisme d’authentification au même titre qu’OAuth et OpenID. Son arrivée sur le marché est assez récente, les premières annonces à son sujet datent de la mi-2011.

Il s’agit d’un troisième joueur qui se lance dans l’arène. Comme le veut l’expression : Jamais deux sans trois.

Celui-ci, se distingue par son implémentation directement au niveau du navigateur avec l’utilisation de Javascript. Le principal avantage de cette approche est que le fournisseur d’identité ne possède aucun contexte au sujet de la provenance de la requête. Un plus pour la sécurité.

De plus, l’identifiant qui est utilisé par BrowserID est le courriel de l’utilisateur. Il n’y a alors pas d’excuses pour oublier son nom d’utilisateur.

Comment ça marche

BrowserID se base sur le principe que l’entité en charge de faire la gestion de l’authentification est le navigateur même. Cette gestion se fait grâce à l’ajout de l’API Javascript navigator.id développée par l’équipe de Mozilla.

Il est possible de procéder à l’implémentation de BrowserID sur votre site en utilisant uniquement Javascript et une requête côté serveur afin de valider l’authenticité de l’identité d’un utilisateur. Le cadre est assez flexible afin d’être utilisé peu importe la technologie sur laquelle votre site repose. Après tout, il s’agit seulement de requêtes HTTP.

Afin de résumer, il suffit de respecter les étapes suivantes afin d’implémenter BrowserID :

Ajout de la librairie de base : https://login.persona.org/include.js
Ajout actions de connexion et de déconnexion pour les appels navigator.id.request() et navigator.id.logout()
Implémentation de la fonction navigator.id.watch qui permet d’interpréter les actions d’authentification de l’utilisateur (Connexion et déconnexion). C’est à cette étape que la requête à une ressource côté serveur afin de valider l’authentification se fait.
Du côté serveur, une requête POST doit se faire au fournisseur d’identité. L’adresse de celui-ci est : https://verifier.login.persona.org/verify.

L’approche que Mozilla a préconisé pour s’attaquer au problème de l’authentification d’un utilisateur est intéressante. Depuis un certain temps, le rôle du navigateur dans les interactions avec un site web a pris une réelle ampleur.

Dans ce cas-ci, il joue le rôle de l’entité permettant de faire la gestion de l’authentification. Certes, il n’a pas la responsabilité d’authentifier. Toutefois, il permet de faire le relais de celle-ci au serveur de validation.

Si vous désirez voir un exemple, je vous conseille de visiter le site http://myfavoritebeer.org/. Il s’agit d’un exemple assez simple permettant de voir comment la technologie fonctionne.

Google et internet, vous me faites peur!

Ce blogue, je n’en fais pas plus de promotion qu’il n’en faut. À vrai dire, il y a quelques collègues et amis qui savent que j’écris à cette adresse et je crois que c’est complet. Après tout, je ne fais que mettre en mots les découvertes que je fais avec le temps.

Ce graphique que j’ai joint ci-haut, est la statistique des visites depuis les deux dernières semaines. En moyenne, le blogue attire tout au plus une dizaine de visites par jour. C’est très peu.

Une tendance très étrange s’est produite depuis cette fin de semaine. Les visites ont pratiquement triplé et même quadruplé depuis cette dernière fin de semaine. Le plus amusant est les mots clés entrants qui ont généré des visites au blogue ainsi que l’article le plus visité.

L’article en question est l’un de mes premiers billets. Celui du 23 mai passé : Pensée : Échographie = Inspection de variable à l’échelle humaine. Pour faire un résumé en une phrase, j’illustre la ressemblance entre le processus d’inspection d’une variable et l’action que représente d’assister à une échographie.

Ce que j’ai découvert c’est que cet article est populaire non pas pour son humour ou pour l’acrobatie que j’emploie pour exprimer que je serai papa d’un garçon. L’article est, en fait, le troisième résultat le plus populaire pour la recherche d’images sous les mots clé « echographie » et « échographie ».

Les principaux mots clés entrants sont reliés à l’échographie. Il faut souligner la personne qui tente, probablement, de deviner le mot de passe Facebook de sa copine en utilisant l’inspecteur de Google Chrome. Bravo!

La preuve que cela tiens la route? Faites-vous même la recherche sur Google.

Résultat échographie

Au moment d’écrire ceci, ça fait 30 minutes que j’ai découvert cela et je n’en reviens toujours pas. Je suis étonné parce que j’écris des articles reliés, de près ou de loin, au développement logiciel. Le vocabulaire est assez technique et associé à la technologie.

À l’exception de ce billet.

Je tiens à mentionner qu’il faut mettre les choses en perspective. Je suis loin d’être un succès viral. Mon point n’est pas là. Ce qui me fascine est que, sans trop le vouloir, je me suis retrouvé à être populaire sur un mot clé dont je n’ai jamais pensé être.

En résumé, ce qui se produit actuellement sur les visites du blogue se résume par les points suivants :

Internet, tu me surprendras toujours. Il est difficile de prévoir ce qui peut se produire sur le web.
Le SEO, ce n’est pas juste pour les mots. Dominer les mots clés pour les images peut être une façon de générer des liens entrants.
TOUJOURS indiquer du texte dans les balises alt et title de vos images

En plus de tout cela, la vraie ironie c’est que ce n’est même pas la photo d’échographie de mon garçon. Pour ceux qui pensent détenir une primeur sur ma vie privée, vous vous êtes mis le doigt dans l’oeil!

Google Chrome – Découverte accidentelle du jour : Visualisation de tableaux

Les meilleures découvertes sont souvent les celles que l’on attend le moins. En général, les outils qu’on utilise au quotidien font le travail qu’on exige et on passe peu de temps à tenter d’explorer des fonctionnalités cachées.

Google Chrome m’a réservé une belle surprise lorsque je travaillais sur un livrable client nécessitant beaucoup de développement HTML et Javascript. Qui dit HTML et Javascript, dit beaucoup de temps passé dans l’inspecteur d’éléments de son navigateur. Après tout, l’essentiel de l’interaction se passe là.

Dans le cas qui m’intéresse, j’étais à investiguer sur la structure de la liste d’éléments d’une liste de résultats de recherche à afficher. Il s’agissait d’une liste assez volumineuse d’éléments à manipuler, trier et filtrer.

La surprise est arrivée lorsque j’ai voulu consulter l’état actuel de la totalité de la liste des éléments. Comme à l’habitude, j’ai tapé la commande jQuery qui me permet d’afficher les résultats et puis là j’ai eu devant moi quelque chose de similaire à ceci :

L’inspecteur de Google Chrome regroupe par tranche les éléments d’un tableau ayant un grand volume d’éléments. Intéressant n’est-ce pas?

Si cela vous dit, pour avoir le senti de cette fonctionnalité, vous devez procéder de la façon suivante :

Visitez Stackoverflow
Invoquez la console de l’inspecteur Chrome avec le raccourci clavier : Control-Shift-J ou ⇧⌘C pour les utilisateurs Mac.
Tapez la commande jQuery suivante : $(‘a’)

Il semblerait que cette fonctionnalité est présente depuis très longtemps dans Chrome. Je fais cette déduction parce que je n’ai pas été en mesure de retrouver un article de blogue ou une documentation au sujet de celle-ci. Si ce n’est pas documenté, c’est que ça doit être évident au point qu’il ne vaut pas la peine d’en parler?

Firefox 16 – À la découverte de la nouvelle ligne de commande

En avril dernier, j’ai écrit au sujet des nouvelles fonctionnalités d’inspection offertes par la version en cours de développement de Firefox.

Dans cet article, la fonctionnalité permettant d’afficher en trois dimensions la structure HTML de votre site. À ce moment là, j’étais assez étonné de retrouver cette fonctionnalité dans le navigateur.

Depuis ce temps, l’équipe de développement a continué à améliorer et ajouter des fonctionnalités à l’inspection de documents du navigateur.

La fonctionnalité qui a attiré mon attention est l’ajout d’une interface agissant comme une ligne de commande permettant d’interagir avec le navigateur. Cette fonctionnalité est nommée, en anglais, GCLI (l’acronyme pour Graphical Command Line Interface). Je crois bien qu’il est inutile de procéder à une traduction française.

Le principal but de cet ajout est d’éviter, le plus possible, de manipuler la souris lors qu’il est temps de faire du développement web. Je crois beaucoup en ce concept.

À titre de mise en contexte, il a été déterminé, dans une recherche financée par Apple, que l’utilisation du clavier était significativement plus rapide la souris pour une même opération.

Le besoin pour cette fonctionnalité, à mon avis, est bien présent pour le développement web. Êtes-vous en mesure d’énumérer les étapes nécessaires pour l’inspection d’un élément dans une page web?

Prendre votre souris à une main
Positionner votre curseur au niveau de l’élément en question
Clic droit sur celui-ci
Sélectionner l’élément de menu « Inspecter cet élément«

Il s’agit d’une opération que nous répétons à multiple reprises à chaque jour. Le tout est long, fastidieux et répétitif.

Utilisation

Le GCLI est activé à l’aide du raccourcis clavier SHIFT-F2 ou par le menu contextuel Web developer > Developer Toolbar.

Il y a plusieurs commandes qui sont à votre disposition afin d’y accomplir le travail que vous avez besoin. En tout temps, vous pouvez y taper la commande help afin d’avoir la liste des commandes disponible pour exécution.

Par exemple, pour y consulter l’aide sur l’utilisation de la commande Resize, il suffit de taper help resize.

La syntaxe des commandes à utiliser est très bien balisée. En tout temps, il y a une aide visuelle qui permet de visualiser les paramètres à compléter pour une commande donnée.

Il est à noter, qu’en tout temps, la complétion de syntaxe est présente afin de vous aider à écrire vos commandes.

Exemples

Voici quelques commandes que j’ai trouvées intéressantes et que je crois pouvoir utiliser dans mon flux de travail quotidien.

Inspection d’un élément

Par exemple, la balise H1 de ce mon blogue se retrouve de la façon suivante : inspect #site-title

Redimensionnement de la taille visible du navigateur à une taille précise

resize to 320 480

Redimensionnement à la taille régulière

resize off

Gestion des cookies

cookie list

cookie set MonCookie 1

cookie remove MonCookie

Replacer le contenu d’un élément spécifique

pagemod replace « frenchcoding » « French Coding » true « a » « h1 » false true

Ou simplement : pagemod replace « frenchcoding » « French Coding »

Prendre une copie d’écran de la page courante

screenshot page.png 0 true