Mois : octobre 2012

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 :

  1. 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.
  2. 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.

Mes liens de la semaine – Édition #1

Une nouvelle initiative de ma part : je vais partager les liens que j’ai retenu de la semaine avec un léger résumé.

Je les retiens de toute façon dans mes listes de lecture. S’ils sont intéressants pour moi pourquoi pas pour vous?

  • Propriétaire d’un appareil Apple? Tu DOIS avoir Letterpress. Shwminator est mon utilisateur sur le Game Center.
  • Typescript est une extension du langage Javascript développé par Microsoft. Une approche analogue à CoffeeScript. Le projet propose des ajouts comme des classes, modules et interfaces afin de solidifier encore plus vos solutions dans ce langage. Le tout est open source!
  • pdf.js permet la lecture d’un fichier PDF en Javascript. Gracieuseté des camarades chez Mozilla.
  • Utiliser Github comme fournisseur d’identité? Les gens chez Parse proposent maintenant de se connecter à leur service avec son identifiant GitHub. Une approche intéressante.
  • js-url, une approche lightweight permettant de décortiquer en Javascript l’URL courante.
  • sweet.js se présente comme une librairie permettant de remodeler certaines parties du langage en utilisant des macros. Une autre initiative de Mozilla.
  • Pourquoi 0.1 n’existe pas lorsqu’il est question de virgule flottante. L‘explication est plus simple que cela en a l’air.
  • Un guide d’achat pour les pièces d’ordinateur extrêmement bien conçu.

À la découverte du mot clé « yield » avec C# et .NET 4.0

Je me répète lorsque je dis que c’est dans les outils que l’on utilise le plus souvent que l’on ignore le plus les secrets.

Le langage de programmation C# est l’un de mes outils de prédilection. Pour être clair, c’est le langage que j’utilise à tous les jours dans le cadre de mon travail.

Chaque langage a ses spécificités, ses avantages et limitations. En bout de compte, ils nous donnent les moyens de réaliser ce que nous avons à construire.

yield

Jusqu’à récemment, j’avais associé le mot clé yield à Java. Avec Java, le mot clé yield permet de notifier le système que le thread en cours peut être libéré de son exécution pour laisser l’occasion au CPU d’aller exécuter d’autre processus.

Le contexte d’utilisation du mot clé est uniquement réservé au contexte du Threading. Donc, ses utilisations sont très spécifiques et relativement limitées.

Il s’avère qu’avec .NET, le mot clé yield est associé aux collections et non pas au threading. Ceci étant dit, il n’est pas évident d’en deviner son utilisation à moins de lire la définition de celui-ci dans MSDN.

The yield keyword, indicates that the method, operator, or get accessor in which it appears is an iterator. You use an iterator to perform a custom iteration over a collection. The following example shows the two forms of the yield statement.

yield return <expression>;
yield break;

En autre termes, yield permet indique que vous pourrez itérer sur ce que vous retournerez au moment où vous l’utiliserez.

Pratiquement parlant, son utilisation et surtout reliée au cas où vous désirez extraire d’une collection un certain nombre de sous éléments. Par exemple, filtrer une liste d’utilisateurs par leur âge et procéder à un traitement spécifique pour un certain regroupement.

Utilisation

Utiliser yield implique très peu de choses à la structure de son code. Il faut toutefois changer l’approche avec laquelle on utilise ses collections.

Le meilleur exemple est assez visuel. Il est possible de procéder au calcul de la suite de Fibonacci de façon assez élégante de cette façon.


public IEnumerable<int> Fibonacci(int x)
{
int prev = -1;
int next = 1;
for (int i = 0; i < x; i++)
{
int sum = prev + next;
prev = next;
next = sum;
yield return sum;
}
}

view raw

gistfile1.cs

hosted with ❤ by GitHub

L’élégance vient du fait que cette fonction peut être utilisée dans une boucle ForEach comme ceci :


foreach (var x in YieldTest.Fibonacci(10))
{
System.Console.WriteLine(x);
}

view raw

gistfile1.cs

hosted with ❤ by GitHub

Avec yield, il n’est pas question de réécrire fanatiquement ses fonctions manipulant des collections en tenant compte que le mot clé est à notre disposition. Bien au contraire!

Toutefois, je crois qu’il est important de savoir comment fonctionne le Framework lorsqu’il est temps de manipuler des listes d’éléments. D’ailleurs, est-ce qu’il est nécessaire de mentionner que LINQ utilise déjà cette approche?

Ressources supplémentaires

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 :

  1. Ajout de la librairie de base : https://login.persona.org/include.js
  2. Ajout actions de connexion et de déconnexion pour les appels navigator.id.request() et navigator.id.logout()
  3. 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.
  4. 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!