Créer des raccourcis clavier sur son site

Keyboard
Les raccourcis clavier nous font gagner un temps précieux lorsque nous utilisons notre ordinateur. Pour aller vite, il faut être un fainéant intelligent. Les raccourcis clavier ont été créés dans cette optique. De nombreux sites les utilisent (Facebook ou Twitter par exemple) et ils facilitent grandement la navigation. Dès lors, pourquoi ne pas créer ses propres raccourcis sur son site web, pour faciliter la vie de vos utilisateurs habitués à les utiliser ?

Le processus de création est très simple, et je vais vous le détailler.

Javascript

J’ai trouvé l’astuce sur le site www.catswhocode.com/blog/ qui propose de nombreuses astuces en terme de développement web. On utilise bien évidemment du Javascript pour les raccourcis clavier, car c’est une action côté client. Des solutions proposées par ce blog, j’ai choisi d’utiliser la solution faisant appel à la bibliothèque jQuery, je pense qu’elle est largement utilisée sur vos sites (en tout cas, si vous ne le faites pas, vous ratez quelque chose !).

Avant de se lancer dans la rédaction du code, réfléchissons aux raccourcis clavier que nous allons mettre en place. La première idée serait d’utiliser une combinaison du type : “Ctrl + touche”, car c’est le type de raccourcis que nous utilisons le plus fréquemment. Comme ceci est fréquemment utilisé par votre système d’exploitation et votre navigateur, c’est donc une excellente raison de ne pas utiliser cette combinaison pour ne pas faire de confusions (ou prendre la place d’un raccourci déjà utilisé).

J’ai choisi de suivre les raccourcis mis en place par Twitter pour naviguer d’une page à une autre : “G + touche”. Le G symbolise “Go to” et on choisit l’initiale du nom de la page pour l’autre touche.
Deux avantages :

la touche G est située au milieu du clavier, ce qui permet de choisir n’importe quelle combinaison de touches.
Vous n’avez aucun risque de créer un raccourci déjà utilisé par vos logiciels.

On pensera à désactiver tous les raccourcis clavier quand l’utilisateur se trouve dans un input ou une textarea, pour éviter toute redirection non voulue lorsqu’il frappe au clavier.

Passons maintenant au code, je vous rappelle que vous devez avoir jQuery sur votre site et placer ce bout de code avant la fin de balise head :
Mais c’est quoi ces numéros que tu utilises ? Pas de panique à bord, voici les correspondances :

Key Keyboard code
Backspace 8
Tab 9
Enter 13
Shift 16
Ctrl 17
Alt 18
Pause 19
Capslock 20
Esc 27
Page up 33
Page down 34
End 35
Home 36
Left arrow 37
Up arrow 38
Right arrow 39
Down arrow 40
Insert 45
Delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
0 (numpad) 96
1 (numpad) 97
2 (numpad) 98
3 (numpad) 99
4 (numpad) 100
5 (numpad) 101
6 (numpad) 102
7 (numpad) 103
8 (numpad) 104
9 (numpad) 105
* 106
+ 107
– 109
. 110
/ 111
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
= 187
Coma 188
Slash / 191
Backslash \ 220

Vous êtes maintenant armés pour créer vos raccourcis facilement. Notez que vous pouvez faire un tas d’autres actions que de la simple redirection vers une page, à vous d’être créatif !

Bonus : du CSS pour présenter les combinaisons de touches à vos utilisateurs

C’est bien beau d’avoir créé des raccourcis, encore faut-il informer vos utilisateurs de leur existence. Si comme moi vous ne pouvez pas réaliser quelque chose de potable sur un logiciel comme The Gimp ou Photoshop, je partage avec vous ce très joli bout de code de CSS qui vous permettra “d’imiter” les touches d’un clavier. Voici ce qu’on obtient :

Keyboard shortcuts Vous pouvez visualiser directement en ligne ici : teen-quotes.com/shortcuts. Et voici le code CSS, à appliquer sur une balise span :

Amusez-vous bien !

Création de CSS sprite : quelques icônes

CSS Sprite On est souvent amenés lorsque l’on crée un site web à utiliser beaucoup d’icônes. A ce sujet, je vous conseille l’excellent site www.iconfinder.com où je suis sûr que vous trouverez votre bonheur. Pensez à rechercher en anglais !

Dans une optique d’optimisation, il est opportun de regrouper ses icônes dans un seul fichier à l’aide de la technique du CSS Sprite. J’avais déjà abordé cette technique dans un précédent article : les outils pour développeurs web. Grâce à cette technique, vous ne faites plus qu’une seule requête HTTP (sinon, ce sera une requête par fichier…) et vous possédez moins de fichiers. Il suffit alors de mettre en cache chez l’utilisateur cette image, et voilà une bonne partie de la bande passante économisée ! Une belle optimisation, facile à réaliser.

La création du CSS sprite

Pour mes icônes, que j’utilise sur la nouvelle version de mon site personnel (www.antoine-augusti.fr), j’ai choisi d’utiliser des images de dimension 24×24. J’ai redimensionné à ce format les icônes qui étaient plus grandes.

Une fois ceci fait, j’ai utilisé l’excellent site www.csssprites.com pour créer mon CSS Sprite. Il suffit d’ajouter toutes les images au bon format, de choisir dans les options de les aligner comme vous souhaitez, de réduire l’espace entre elles (1px est suffisant) et le site s’occupe de générer votre image et le code CSS associé à celle-ci ! Magique !

Résultat

J’obtiens donc l’image suivante :

Et j’ai créé le CSS suivant :
J’ai associé une simple fonction en PHP :

Que l’on utilise de la manière suivante :

Afin de générer de belles icônes associées aux bons liens, très facilement.

Bien évidemment, vous pouvez créer une autre fonction pour pouvoir utiliser ces icônes sans des liens, par exemple dans le corps de votre site, en complément du contenu !

Les bénéfices incroyables d’Apple

Apple Voici une excellente infographie détaillant le business (profits, croissances et diverses statistiques) d’ Apple. Je l’ai trouvée sur l’excellent site tenu par un ami (ici) que je tiens à partager avec vous.

Je traduis donc les diverses statistiques ici, pour les anglophobes. Je vous invite également à jeter un oeil à l’image, qui est très bien réalisée et que vous trouverez à la fin de l’article.

Apple a réalisé 29 000 000 000 $ de bénéfice au cours des 6 derniers mois, soit 7 000 000 $ par heure.
L’iPhone et l’iPad génèrent un bénéfice de 130 000 000 000 $ par an, soit 2 fois plus que le bénéfice de Microsoft.
Apple vend 645 000 iPhones ou iPads par jour. Soit 267 iPhones et 90 iPads par minute.
La croissance d’Apple est de 114 % par an en Asie.
Apple vend pour 5 626 $ d’appareils par mètre carré dans ses Apple Stores.
Au dernier trimestre, Apple a réalisé un chiffre d’affaires de 12 000 000 $ dans ses 363 Apple Stores.
Apple est l’entreprise valant la plus chère au monde.

Business of Apple

Les parodies du débat du 2nd tour des élections présidentielles 2012

Sarkozy Hollande
Peut-être faites vous parti des 17,8 millions de téléspectateurs qui ont suivi le débat qui opposait M. François Hollande à M. Nicolas Sarkozy. Le débat était arbitré par Laurence Ferrari pour TF1 et David Pujadas pour France 2.

Plutôt que de vous proposer une analyse politique qui serait d’une qualité médiocre (je vous invite à lire les journaux aujourd’hui pour une analyse pertinente), je vous propose de partager quelques parodies que les internautes ont confectionné à l’occasion de ce débat. On a entendu beaucoup de journalistes qualifier cette élection présidentielle 2012 d’une élection 2.0, où les réseaux sociaux, les sites de campagne et l’Internet en général occupent une place plus importante que lors des précédentes élections. Et s’il est vrai que l’Internet se passionne pour ces élections présidentielles, on regrettera (en tout cas je le regrette) que le numérique ne soit pas encore assez abordé par les candidats.

Le débat d’hier a été l’objet de nombreuses moqueries, de diverses railleries sur l’Internet. Je souhaitais donc vous en faire partager quelques-unes, qui vous feront aborder la politique sous un angle bien plus léger que d’ordinaire. @seriouscharly a monté un Tumblr rassemblant divers montages des candidats et des journalistes lors du débat sur son site : ledebat.tumblr.com. Je vous laisse y jeter un oeil, certains montages sont vraiment excellents !

Dans le même esprit, si vous aimez les montages humoristiques, je vous invite à consulter trollcadero.tumblr.com où vous retrouverez plusieurs montages tirés d’une image de M. Nicolas Sarkozy lors de son meeting au Trocadéro, le 1^er Mai 2012.

Si vous avez d’autres montages politiques humoristiques à me faire partager, faites-le sur mon Twitter : @AntoineAugusti.

Instagram passe le cap des 50 millions d’utilisateurs

L’application Instagram fait encore parler d’elle. Après son rachat pour la coquette somme d’un milliard de dollars par Facebook le 10 avril dernier, la petite entreprise aux 13 employés, fondée il y a 2 ans, vient de passer le cap des 50 millions d’utilisateurs. La barre symbolique des 40 millions d’utilisateurs avait été franchie le 13 avril dernier, ce qui indique une remarquable progression de 5 millions d’utilisateurs par semaine.

Une progression pour le moins fulgurante pour une application qui ne comptait “que” 15 millions d’utilisateurs au début de l’année 2012. Pour rappel, Instagram est disponible sur Android depuis le 4 avril dernier après n’avoir été présent que sur iOS pendant deux ans. L’application suite à sa sortie sur Android avait alors été téléchargée plus d’un million de fois en 12 heures. Même si Google ne communique pas le nombre précis de téléchargement sur sa plateforme Google Play, on sait que l’application a dépassé les 10 millions de téléchargement sur Android il y a deux jours.

Il est certain que le fait que l’application soit maintenant disponible sur iOS et Android a contribué de manière significative les inscriptions, et les chiffres parlent d’eux-mêmes ! Pour le moment, le rachat par Facebook de l’application n’a eu aucun impact sur les utilisateurs mais on peut facilement imaginer le bonheur des employés d’Instagram qui profitent de l’expérience des employés et de l’infrastructure de Facebook pour continuer leur folle évolution. Bref, suivons avec attention la fabuleuse évolution d’Instagram dans les semaines à venir.

Le site officiel d’Instagram : www.instagr.am.

A day in the Internet

Voici une super infographie qui donne plusieurs statistiques sur toutes les choses qui se passent en 24 heures sur internet. Je l’ai trouvée sur l’excellent site tenu par un ami (ici) que je tiens à partager avec vous.

En une journée, l’information qui transite sur internet tiendrait sur 168 millions de DVDs.
294 milliards d’emails sont envoyés. Ceci prendrait 2 ans pour envoyer autant de lettres aux États-Unis.
2 millions d’articles sont rédigés sur des blogs. Assez pour remplir le Time Magazine pendant 770 ans.
172 millions de personnes différentes visitent Facebook.
4,7 milliards de minutes sont passées sur Facebook.
532 millions de statuts sont mis à jour.
250 millions de photos sont ajoutées sur Facebook. Si elles étaient imprimées et misent bout à bout, ceci serait aussi grand que 80 Tour Eiffel.
22 millions d’heures sont passées à regarder des émissions ou des films sur internet.
864 000 heures (98 ans) de vidéos sont ajoutées sur Youtube.
1288 nouvelles applications sont ajoutées au téléchargement et plus de 35 millions d’applications sont téléchargées.
378 000 iPhones sont vendus alors que 371 000 enfants naissent.

Des statistiques impressionnantes !

Une journée sur internet

[Code] Test des fonctions “aléatoires” en PHP

Dés
La génération de nombres aléatoires a souvent posé des soucis avec des algorithmes. Cette génération se fait le plus souvent en fonction de l’heure de la machine sur laquelle la fonction permettant de générer un nombre aléatoire est exécutée. Dès lors, il se pose un souci majeur : si les algorithmes sont fonction du temps, il peut être possible de prévoir le nombre aléatoire que va sortir la machine. On s’intéresse à ce risque en cryptographie et le but est de produire un algorithme rapide à exécuter, qui ne génère pas des nombres aléatoires périodiquement et dont on ne puisse pas prévoir les résultats.

Voici quelques tests que j’ai réalisé pour tester la qualité de deux fonctions permettant de générer aléatoirement des nombres en PHP rand et mt_rand.

Voici ce que dit la documentation de PHP à propos de ces fonctions.

“De nombreux générateurs de nombres aléatoires provenant de vieilles bibliothèques libcs ont des comportements douteux et sont très lents. Par défaut, PHP utilise le générateur de nombres aléatoires de libc avec la fonction rand(). mt_rand() est une fonction de remplacement, pour cette dernière. Elle utilise un générateur de nombres aléatoire de caractéristique connue, le “Mersenne Twister” qui est 4 fois plus rapide que la fonction standard libc.”

Création d’une image

Ce test permet de se représenter visuellement les résultats donnés par les fonctions. Voici le principe : on part sur une base d’une image complètement noire et on demande aux fonctions de colorier des coordonnées de l’image, calculées aléatoirement, en blanc. On balaie l’intégralité des coordonnées de l’image (en x et en y) et on regarde si certains pixels n’ont pas été coloriés plusieurs fois ou si on peut observer des formes, ce qui montre le caractère non parfaitement aléatoire de la fonction.

Voici le code PHP pour réaliser ceci :
Voici l’image que l’on obtient (lien vers l’image taille réelle) : Test aléatoire

(lien vers l’image taille réelle)
Et voici un zoom au centre de l’image, pour pouvoir comparer la nette différence entre rand et mt_rand : Test aléatoire

Le résultat est assez bluffant : on remarque sur l’image générée par la fonction rand des formes qui ressemblent à des lignes discontinues tandis que l’image générée par mt_rand ressemble bien à une image de bruit, ce qui est la représentation qu’on pouvait attendre.

Vérification de l’équiprobabilité

Nous allons maintenant nous intéresser à la vérification de la règle de l’équiprobabilité d’un tirage de chiffres. Le test est le suivant : on demande à l’algorithme de générer un chiffre aléatoire entre 0 et 9 inclus, soit 10 possibilités. Pour un grand nombre de tirages, la probabilité est de 10 % par chiffre. Vérifions ce résultat avec les fonctions rand et mt_randet regardons les différences. Le code PHP pour ce test, pour la fonction rand est le suivant :

Le test est le même pour la fonction mt_rand, sauf que l’on change le nom de la fonction permettant de générer le nombre à la ligne 44.

Voici les résultats que l’on obtient. Pour rand :
Test aléatoire
Et pour mt_rand :

Ouf, l’équiprobabilité est vérifiée pour les deux fonctions ! Résultat étrange en revanche, l’erreur moyenne et le temps de calcul sont plus grands pour la fonction mt_rand alors que la documentation PHP indique que cette fonction est “4 fois plus rapide”. Il faudrait réaliser plusieurs fois ce test pour s’assurer de ce résultat.

Le précédent test ne permet donc pas de dire que la fonction rand est “mauvaise” et elle génère quand même bien des nombres aléatoires, malgré ce que l’image obtenue pouvait laisser penser.

Les NTIC accentuent-elles notre stress ?

NTIC
Aujourd’hui, 190 000 SMS sont envoyés par seconde à travers le monde. Les nouvelles avancées technologiques de ces dernières années ont bien fait évoluer nos manières de communiquer et nos rapports humains.

Ces nouvelles technologies de l’information et de la communication (NTIC) ont permis de garder le contact avec des personnes éloignées, nous ont permis de pouvoir nous informer sur n’importe quel sujet en quelques secondes si l’on a accès à Internet et ont diminué nos délais de correspondances. Qui pense encore à envoyer une vingtaine de lettres à ses amis pour les convier à un anniversaire ? Un événement Facebook, quelques appels téléphoniques ou un e-mail groupé et les choses seront réglées en quelques secondes, sans soucis de la localisation de chacun et sans coût supplémentaire pour l’émetteur.

Les NTIC se sont fait leur place dans notre vie quotidienne, tant dans notre vie privée où elles ont modifié nos manières de communiquer ou de nous informer que dans notre univers professionnel où les méthodes de travail ont évolué suite à leur développement fulgurant. Aujourd’hui, l’usage de nos téléphones portables, ordinateurs, smartphones, tablettes s’est démocratisé et leur utilisation est de plus en plus intensive. Ces NTIC, omniprésentes dans nos vies, possèdent des avantages certains mais également d’importants défauts.

Les smartphones nous permettent d’être connectés à tout instant, nous devons répondre à une masse toujours plus importante d’e-mails et le travail s’immisce de plus en plus dans notre vie privée par le biais des nouvelles technologies. Voici quelques facteurs qui nous amènent à nous poser la question suivante : « Les nouvelles technologies de l’information et de la communication accentuent-elles notre stress ? ».

De toute évidence, la réponse à cette question est oui ; on parle du phénomène de technostress. Ce terme est utilisé pour les personnes souffrant de crises d’angoisse et de dépressions dans un environnement technologique déshumanisé.

Notre fil rouge est donné par la précédente question, et toutes les autres qui en découlent : les NTIC peuvent-elles être néfastes dans notre travail ? Où se situent les barrières entre vie privée et vie professionnelle ? Suis-je capable de me déconnecter complètement ? Comment peut-on faire un meilleur usage des NTIC ? Comment les entreprises peuvent-elles lutter contre le technostress ?

Pour la lire la suite de l’étude (qui est un petit peu trop longue pour être publiée ici), je vous invite à vous rendre sur www.technostress.fr

[Code] Déterminer les prochaines dates palindromes

Calendrier
Aujourd’hui, 21/02/2012, est une date palindrome, c’est-à-dire que l’ordre des lettres reste le même qu’on le lise de gauche à droite ou de droite à gauche comme le mot “kayak” (par exemple et pris au hasard !). Je ne sais pas si vous êtes superstitieux, mais en tout cas les dates palindromes sont très rares ! La prochaine sera en effet le 02/02/2020, dans 8 ans.

J’ai eu l’idée de créer un algorithme inutile (donc indispensable) pour trouver les prochaines dates palindromes dans les X prochaines années. Je partage avec vous ce bout de code, qui ne sera surement pas très utile dans la pratique mais a au moins un intérêt théorique. Et puis comme ça vous pourrez déjà noter dans votre calendrier ces dates si exceptionnelles (ou presque !).

Code de test des dates palindromes

Cet algorithme est écrit en PHP. Pour un test sur les 20 prochaines années, on obtient le résultat suivant :
Test dates palindromes

Voici le code source :

Je pense avoir suffisamment détaillé le code source pour qu’il soit facilement compréhensible. Si jamais vous ne compreniez pas un passage, n’hésitez pas à me demander !

Sur ce, je vous laisse, je retourne fêter la fin de ce jour palindrome comme il se doit !

Les États-Unis font fermer Megaupload, prémices des lois SOPA et PIPA

Megaupload, qui compte parmi les vingt sites les plus importants au monde, n’est plus accessible. Le site a été mis hors-ligne après une action de la justice américaine.

Le département de la justice américain confirme l’ouverture d’une procédure criminelle. Il estime que Megaupload aurait engrangé plus de 175 millions de dollars grâce à des activités frauduleuses, et provoqué plus de 500 millions de dollars de manque à gagner auprès des ayant-droits. « Cette action est relative au cas de crime contre le copyright le plus important jamais levé par les Etats-Unis et vise directement le mésusage d’un site de stockage et de distribution publics pour commettre et faciliter les crimes contre la propriété intellectuelle » annonce le département de la justice américain.

Cette action de la justice américaine pourrait être la première d’une longue série si les lois SOPA et PIPA sont adoptées.

SOPA et PIPA, c’est quoi ?

SOPA (Stop online piracy act) et PIPA (Protect intellectual property act) sont deux propositions de lois américaines qui visent à lutter contre le téléchargement illégal et le streaming d’œuvres protégés par le droit américain sur la protection intellectuelle. Elles prévoient une série de sanctions contre des sites accusés par les ayant-droit d’héberger du contenu illégal. La mesure la plus controversée concerne l’obligation qui serait faite aux fournisseurs d’accès ou hébergeurs de pratiquer un filtrage ou un blocage de sites mis en cause, qu’ils soient américains ou non. D’autres dispositions prévoient des amendes financières, le gel des comptes des propriétaires des sites ou encore la saisie des noms de domaine litigieux. Face à la campagne contre ces deux textes, les promoteurs de ces législations ont commencé à reculer sur certains points comme le blocage des sites accusés d’héberger du contenu illégal.

Une grève numérique contre ces lois

Hier, mercredi 18 janvier, de nombreux sites ont manifesté leur désaccord concernant ces lois. De nombreux sites américains ont procédé à des opérations de “black-out”, rendant inaccessibles leurs sites ou en indiquant leur désaccord face à ces propositions de lois. Ainsi, la version anglaise de Wikipedia était inaccessible et on pouvait trouver ce message :

Wikipedia SOPA

Imaginez un monde sans accès à la connaissance gratuite.
Pendant plus de dix ans, nous avons passé des millions d’heures à construire la plus grande encyclopédie dans l’histoire de l’humanité. En ce moment, le congrès des États-Unis est en train de considérer une loi qui pourrait endommager de manière dramatique l’Internet gratuit et libre tel que nous le connaissons. Pendant 24 heures, afin de sensibiliser la population, nous censurons Wikipedia.

Google affichait un logo barré de noir symbolisant la censure et WordPress avait coupé son site. Les grands acteurs d’internet s’allient et tentent de faire entendre leurs voix auprès des parlementaires américains dans le but qu’ils votent contre cette loi afin de préserver la neutralité du net, sa gratuité et son contenu libre.

Antoine Augusti

Technologie