Articles avec le tag ‘Javascript’

 

 

 

 

Voici un Learning Kit utilisable hors-ligne fait mis en ligne par Addy Osmani, un excellent bloggeur anglophone : jQuery 1.5.1 Offline Learning Kit.

Ce kit comprend entre autre:

  • La documentation hors-ligne complète de jQuery
  • Un Cheatsheet au format PDF imprimable
  • Une extension Chrome qui permet d’accèder la documentation jQuery depuis Chrome
  • Des exemples complet de site qui utilisent les aspects « Deferred » de jQuery
  • La dernière release de jQuery 1.5.1 minifié et de développement

Je pense que c’est une excellente idée que de regrouper toutes ces informations dans un package unique, çà facilite l’apprentissage, et permet de rendre disponible sur votre intranet par exemple pour le bénéfice de tous les développeurs de votre équipe ;-)

Aller, maintenant, il ne vous reste plus qu’à télécharger ce kit, et merci à Addy Osmani!

MyURI.me : Mon « URL Shortener »

Mais qu’est-ce? MyURI.me est une extension Safari qui propose de réduire la taille des URLs que l’on peut rencontrer sur le web pour en facilité le partage.

Pourquoi : Le déclencheur

Bonjour, depuis la sortie de Safari5, j’ai été agréablement surpris de l’ajout des extensions à celui-ci. Je pense que le concept d’extensions à base de Javascript/HTML5 est vraiment excellent, et facile d’accès au commun des mortels (comprendre non-expert en Objective-C…).

En fait, je m’y suis tellement intéressé, que j’ai décidé de faire un premier essai pour réaliser une extension pour Safari. En théorie, cela devrait être plutôt facile, puisque les technologies mise en oeuvres me sont connu : Javascript/html5/css3, en plus d’une api pour les fonctionnalitées propres à la création d’extensions.

L’objectif

L’objectif est de fournir un plugin qui permet de générer des URLs courte un peu à la bit.ly ou bien how.ly. A ce sujet, vous n’avez pas idée de la difficulté de trouver un nom de domaine court qui n’a pas déjà été pris.
Le plugin doit être facile d’utilisation, et intégré dans Safari assez bien pour qu’il devienne un outil qui peu aller plus loin que simplement réduire une URL. En fait, avec l’utilisation du plugin, je crois être arrivé à ce stade. Ce qui m’a donné l’idée d’aller un peu plus loin que la compétition sur le sujet.

La valeur ajouté

L’extra que veux fournir mon plugin, c’est d’avoir la possibilité de retrouver, et afficher tout les URLs que vous avez déjà créé. L’idée étant que lorsqu’on crée une URL avec les autres outils, à moins de les noter quelques part, il est impossible de les retrouver. Avec cette fonctionnalitée supplémentaire, MyURI devient un gestionnaire de bookmarks, dans lequel on peut y faire des recerches.

Le design

Le projet est constitué de 2 parties distincts:
  1. Le serveur « back-end » en Java
  2. Le plugin « MyURI » pour Safari
La partie Java est réalisé à l’aide du Play! Framework de Guillaume Bort, et utilise le module GAE (Google App Engine) adjoint du module SIENA (Accès aux données stocké dans le moteur de Google).
- Quelques classes, quelques annotations, quelques fichiers html5/css3
- jQuery
On ne peut plus simple…
La partie du plugin à proprement parlé est purement Javascript/html5/css3 aidé de l’API Apple pour les extensions (en Javascript aussi).

L’utilisation

Voici déjà à quoi ressemble ce fameux plugin:
MyURI.me plugin
- Le bouton « Console » vous ammène directement sur la page web du plugin (www.myuri.me)
- Le bouton « Shorten page URL » fait appel au service web avec l’url de la page en cours et le titre de celle-ci. Le titre de la page (onglet) est récupré via l’API Extension
- Le bouton « Update title » pour modifier le titre du lien nouvellement créé: Celui-ci n’est peut-être pas de votre goût…
Une fois le lien créé, vous pouvez le sélectioner et le copier pour partager avec le monde, par email, dans un post sur un blog, sur twitter, facebook, etc… C’est généralement plus agréable de voir un lien cour dans un post qu’un lien qui fait des kilomètre.
Ex. pour un lien sur la documentation de Apple:
Lien d’origine:
http://developer.apple.com/safari/library/documentation/Tools/Conceptual/SafariExtensionGuide/AddingaGlobalHTMLPage/AddingaGlobalHTMLPage.html#//apple_ref/doc/uid/TP40009977-CH16-DontLinkElementID_12
Lien de MyRUI:
http://www.myuri.me/3
Il est aussi possible de créé un lien à partir d’une sélection :
- Sélectioner une URL dans une page
- Cliquer sur le bouton droit de votre souris
- Cliquer sur « Shorten URL »
Si le lien est directement dans le texte (la sélection est une URL), un dialogue vous demandera d’entrer un titre, sinon, le texte du lien en lui-même sera utilisé en guise de titre.

L’avenir

Actuellement en ligne, la version manque encore une des fonctionnalité principale dont j’ai parlé plus haut : La recherche dans les liens déjà créé. Pour ce faire, je suis en train de mettre au point un mécanisme permettant d’identifier la source du lien, mais sans avoir aucune notion de compte, et rien qui permet de vous identifier (protection de la vie privée oblige…). Cela apportera évidemment une nouvelle version du plugin ou l’onglet de configuration comportera certaines informations en plus. Pour l’heure, aucune configuration n’est nécessaire. Voici la tête de ce panneau actuellement:

Conclusion

J’espère que cet outil vous sera utile, et que vous profiterez des possibilités qu’apporte cette nouvelle mouture de Safari5. Personnellement, j’ai passé les 5-6 dernières années à utilisé Firefox, mais vraiment, et franchement, aujourd’hui je préfère Safari pour sa rapidité, et son look épuré. Les fonctionnalitée, qui pouvait être en recul vis-à-vis Firefox auparavant sont pour moi disparu, et l’appartition des différentes extension le rende encore plus polyvalent.

Vous vous êtes déjà demandé comment créer un plugin jQuery? Mais ce n’est peut-être pas évident de bien démarrer, surtout d’avoir la bonne structure dès le début sans perdre de temps. Voici l’outil qu’il vous faut!

Voici un outil très pratique pour les développeurs de plugin jQuery : Starter.

Starter génère pour vous, selon vos paramètres, la structure de base du code de votre futur plugin.

De la création de l’objet racine, et l’enregistrement de celui-ci, la surcharge des options, à la création d’un espace de nommage pour accéder sans conflit avec des méthodes existantes dans d’autres plugins.

Le tout bien encapsulé dans une fonction anonyme standard : ((function($){})(jQuery);).

Bref, un outil très pratique à ajouter dans ses marques-pages.

Dans le monde du Web 2.0, les pages web ont une importante dépendances aux différentes librairies javascripts qu’il existe. Il est courant pour les pages dynamiques et riches qui utilisent le javascript d’importé 3-4 librairies externes, en plus du code javascript propre à la page. Lire la suite de cette entrée »

Catégories

Derniers Tweets