[JAVAS] Synthèse et Plan du Rapport

Bonjour à tous,

Voila presque cinq mois que Sébastien et moi-même faisons une veille technologique sur le thème des API Javascript et nous vous proposons aujourd’hui par ce post d’en faire la synthèse.

Tout d’abord pourquoi ce sujet des API JavaScript ? Tout simplement parce que lorsqu’au travers de la nouvelle spécification du HTML5 le W3C standardise de nombreuses API JavaScript, il change le rapport que les sites et applications Web auront avec les visiteurs. Qu’on se le dise, le JavaScript est maintenant au cœur du développement web. Voici ci-dessous la liste des API JavaScript triées par ordre alphabétique qui ont donc été standardisées et en gras celles que nous avons eu l’occasion de traiter lors de notre travail de veille technologique pour l’École Centrale de Nantes :

  • ContentEditable
  • Drag’n'Drop
  • Geolocation
  • Offline Web Application
  • Selectors
  • Timers
  • Web Workers
  • Web Storage
  • WebSocket
  • Web SQL Database

Plan du rapport

  1. Comment la nouvelle spécification du HTML5 remet au goût du jour les API JavaScript
  2. Tour d’horizon des API JavaScript qui révolutionnent notre façon de naviguer

[JAVAS] Web Workers

Contexte

Avant l’arrivée du HTML5 et de ses Web Workers, le code Javascript était généré dans le même processus (thread) que la fenêtre active. Par conséquent, le navigateur pouvait se freezer dans le cas d’un chargement de script trop lourd, voir même demander à l’utilisateur s’il souhaite le stopper.

Quel est le principe de cette nouvelle API ?

Les Web Workers permettent d’échapper à cette difficulté en générant le code dans un autre thread. Ainsi, la page pourra répondre aux interactions de l’utilisateur (clics, scroll, …) tout en chargeant le script.

Il existe deux types de Web Workers:

  • Les Dedicated Workers sont directement liés à leur créateur. Ce sont les plus faciles à utiliser et c’est sur eux que nous nous concentrerons dans l’article.
  • Les Shared Workers peuvent communiquer avec tout script provenant de la même origine que leur créateur. Vous pouvez lire cet article pour plus d’informations sur leur utilisation.

Comment utiliser cette API?

Chaque worker va utiliser un thread dédié, ce qui implique que leur code devra être hébergé dans des fichiers séparés de la classe principale.
Le code suivant présente un cas simple d’utilisation de worker, qui renvoie un simple message.
Le fichier index.html contenant le script appelant le Worker
Le worker, stocké dans helloworkers.js

Le résultat sera : “Bonjour David depuis un thread séparé !”.

Il faut noter que le Worker continuera à fonctionner tant qu’il n’aura pas été “tué”. On peut le faire:

  • directement dans celui ci avec la commande close();
  • ou bien dans le script créateur du worker (comme dans le code précédent) avec la commande terminate();
De plus, les commandes du DOM ne sont pas accessibles depuis les Web Workers.
Dans quels cas utiliser les Web Workers ?

Etant donné que la technologie est encore très récente, ceux ci ne sont pas encore très utilisés et la majorité des tutoraux en ligne propose de les utiliser lors de calculs lourds comme la recherche de nombres premiers. Cependant, on peut penser à d’autres cas:

  • Charger des données pour une utilisation future
  • Edition de texte avec coloration syntaxique ou correction orthographique en temps réel
  • Analyse de lourdes données video ou audio
  • Filtrage d’images dans la balise HTML5 <canvas>
  • Etc…

Quels navigateurs supportent cette API?

Ce tableau, provenant du site Caniuse, présente l’état d’implémentation des Web Workers. C’est une technologie encore peu présente sur les terminaux mobiles, car énergivore.

Pour vérifier si le navigateur d’un utilisateur le supporte, on peut utiliser le code suivant.

Démonstrations

  • http://slides.html5rocks.com/#web-workers
  • http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml
Sources
  • https://developer.mozilla.org/En/Using_web_workers
  • http://www.whatwg.org/specs/web-workers/current-work/
  • http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx#debugging
  • http://www.html5rocks.com/en/tutorials/workers/basics/

[JAVAS] Web Storage

Contexte

La complexité des applications Web augmente de jour en jour, et ces dernières nécessitent de stocker des informations de plus en plus lourdes. Jusqu’ici, le stockage devait se faire côté serveur, ce qui pouvait devenir lourd pour ce dernier. Une alternative était l’utilisation des Cookies côté client mais leur taille limitée (4ko) et leurs petits défauts (sécurité, gestion du multi-tab) limitaient leur utilisation. Aujourd’hui, le HTML5 apporte une alternative intéressante: le Web Storage.

Quel est le principe de cette nouvelle API ?

Le Web Storage permet de stocker simplement des informations sous la forme Clé/Valeur. Ces informations sont très facile à exploiter et ne seront jamais envoyées au serveur, contrairement aux cookies.

Il existe deux types de Storage:

  • Le SessionStorage est le plus restrictif, puisqu’il ne stocke les informations que pour la durée de la session, et uniquement pour l’onglet actif. Il peut être intéressant dans l’utilisation d’un formulaire multipage par exemple.
  • Le LocalStorage stocke quant à lui les données pour une donnée indéterminée, pour mémoriser des logins, ou une liste de tâches par exemple.

Comment l’utiliser ?

Le stockage et la récupération des données sont très simples:

Les outils d’inspection les plus récents permettent de visualiser les données stockées (ici, Google Chrome).

Quels sont ses avantages de cette API ?

  • Fonctionnement de l’application en mode hors-ligne: On peut stocker les données en local, puis les synchroniser avec le serveur une fois connecté.
  • Amélioration des performances: Mise en cache des données.
  • Limitation du développement serveur
  • Stockage par instance et non par domaine (contrairement aux cookies)
  • Stockage des données en local et non transmission au réseau (contrairement aux cookies)
  • Disposition d’un espace de stockage important (5 Mo)

Quels sont ses inconvénients de cette API ?

  • Vulnérabilité des données stockés, visibles et modifiables par le client
  • Inaccessibilité en dehors de l’ordinateur et du navigateur concerné

Quel est son état d’implémentation ?

Le Web Storage est déjà compatible avec la majorité des navigateurs récents, même mobiles, comme nous le montre ce tableau provenant de Caniuse.

Quelles alternatives existe-t-il ?

  • Ce plugin jQuery utilise le Web Storage, et utilise des alternatives en cas de non support, telles que Gears, UserData pour IE ou en dernier recours, les Cookies.
  • L’API Web SQL Database, également introduit par l’arrivée du HTML5, permet de contrôler une base de données facilement, et offre ainsi beaucoup plus de fonctionnalités. Cependant, même si cette API est supporté par des navigateurs tels que Chrome et Safari, le W3C a décidé d’arrêter son développement en novembre 2010.
  • L’API IndexedDB est un mélange entre Web Storage et Web SQL Database: elle propose un stockage local de valeurs simples et d’objets hiérarchiques.

Sources

  • http://www.mti.epita.fr/blogs/2011/03/21/html5-les-nouveautes-non-multimedia/
  • http://www.clever-age.com/veille/blog/web-storage-le-stockage-de-donnees-cote-client.html
  • http://www.html5rocks.com/en/features/storage
  • http://caniuse.com/#feat=namevalue-storage

Démonstrations

  • http://html5demos.com/storage
  • http://html5demos.com/storage-events

[JAVAS] ContentEditable

Bonjour à tous,

Pour la suite de notre tour d’horizon des API JavaScript nous avons choisi de nous pencher sur l’édition de contenu au sein d’un navigateur Web. Ce qu’on appelle communément le WYSIWYG (What You See Is What You Get – Ce que vous voyez c’est ce que vous obtenez) se positionne par exemple comme une évolution de nos vieux input et textarea et des commandes type BBCode. Ces derniers nous montraient souvent à quel point ce qu’on l’on souhaitait obtenir est parfois loin de ce que l’on a effectivement écrit dès lors que le feedback n’est pas instantané mais qu’il survient après une validation de formulaire.

Exemple d'éditeur de texte WYSIWYG

Quels sont les avantages d’un éditeur de texte WYSIWYG ?

Les avantages d’un tel éditeur de texte sont assez simple à mettre en avant :

  • Mise en forme de mon texte sans passer par des balises HTML ou BBCode qui sont pas faciles à utiliser pour le grand public.
  • L’éditeur de texte WYSIWYG permet d’avoir un retour immédiat sur le contenu que l’on génère et notamment sur sa forme. Cela permet d’une part de ne pas avoir de mauvaise surprise après validation du texte et, d’autre part, de changer rapidement selon ses convenances la mise en page du contenu.
  • Meilleure expérience utilisateur qui sera plus enclin à écrire un contenu sous ce genre d’éditeur puisqu’ils sont plus commodes. On peut donc de ce fait augmenter le nombre de commentaires laissés sur mon blog par exemple.

Comment obtenir un rendu WYSIWYG ?

Il y a plusieurs façons d’implémenter cela sur son application Web de nos jours. On peut tout d’abord passer tout simplement par du HTML5 avec les deux attributs d’objets qui sont designMode et contentEditable. Aujourd’hui cette caractéristique est supportée par tous les principaux navigateurs Web à savoir : Firefox 3, Safari 3, Opéra 9, Google Chrome et même Internet Explorer (à partir de la version 5.5). Concrètement ça se passe comme cela :

À partir du moment où j’ai mis l’attribut designMode de mon document à “on” ou contentEditable de mon objet à “true” je vais pouvoir executer des commandes telles que document.queryCommandEnabled qui va déterminer si la commande d’édition de texte (par exemple mettre en gras, en italique, souligner, …) est supportée par le navigateur puis avec document.execCommand je vais pouvoir appliquer cette commande à la région mise en évidence par ma sélection. C’est ici qu’intervient donc les différents niveaux de compatibilité en fonction des navigateurs car tous ces navigateurs ne supportent pas les mêmes commandes. Vous trouverez en Annexe 1 une page récapitulant les commandes supportés pour 4 navigateurs majeurs.

Existe-t-il des solutions “clef en main” ?

Effectivement on peut passer par un des nombreux éditeurs de texte WYSIWYG disponibles sur la toile. Il ne vous restera plus qu’à l’implémenter sur votre site. Ce sont des éditeurs de texte comme on peut trouver sur différents CMS tels Joomla ou encore WordPress. On peut mentionner par exemple Tiny MCE qui est réputé pour être l’un des éditeurs de texte WYSIWYG les plus complet en version gratuite tout en conservant une intégration facile à réaliser.

Exemple d'utilisation de Tiny MCE

CKeditor est un autre éditeur de texte tout à fait aussi populaire et performant que son homologue TinyMCE avec une interface peut-être un peu plus travaillé niveau design.

Exemple d'utilisation de CKEditor

Vous trouverez en Annexe 2 une liste plus complète des différents éditeurs de texte WYSIWYG disponibles sur la toile.

 Plus d’infos ?

Annexe 1

Annexe 2

 Sources

http://blog.whatwg.org/

http://www.w3.org/TR/html5/editing.html#contenteditable

http://blog.xebia.fr/2010/03/18/html5-les-api-javascript/#ContentEditable

[JAVAS] Géolocalisation

Qu’est-ce que la géolocalisation ?

“La géolocalisation, ou géoréférencement, est un procédé permettant de positionner un objet (une personne, etc) sur un plan ou une carte à l’aide de ses coordonnées géographiques.” – Wikipédia

Aujourd’hui, une grande partie de nos appareils de communication tels que les ordinateurs ainsi que les téléphones mobiles peuvent être géolocalisés, et ce grâce à différentes techniques plus ou moins performante suivant le cas d’utilisation:

  • La géolocalisation par satellite:  C’est la technologie utilisée par les puces GPS, présentes dans les smartphones les plus récents. Elle se montre très précise et peu couteuse, mais elle demeure très peu performante en intérieur.
  • La géolocalisation par  GSM: Cette technique permet de localiser téléphone mobile par rapport aux antennes GSM, qui permettent les communications “voix”. Cependant, son efficacité dépend de la couverture géographique et nécessite l’accès au réseau GPRS pour exploiter l’information.
  • La géolocalisation par WiFi: L’appareil récupère les informations géographiques des bornes WiFi proches, ce qui se montre performant principalement en zone rurale.
  • La géolocalisation par adresse IP: Cette méthode permet de déterminer la position géographique d’un ordinateur ou de n’importe quel terminal connecté à internet en se basant sur son adresse IP, et peut un niveau de précision de l’ordre de la ville en se basant sur la distribution des adresses IP faite par les fournisseurs d’accès à internet.

Si le système fonctionne très bien sur les mobiles grâce au GPS et au triangulation GSM, il s’avère assez hasardeux dès qu’il repose sur la géolocalisation par adresse IP. Afin d’obtenir la position la plus précise possible, certains appareils (tels que l’iPhone d’Apple) utilisent des méthodes hybrides de géolocalisation en couplant les différentes techniques expliquées ci dessus.

Pourquoi utiliser la Géolocalisation?

La géolocalisation est une technologie naissante qui, couplée à des systèmes et des bases d’informations, permet d’ouvrir une nouvelle dimension à l’expérience utilisateur. Un large panel d’applications commencent à l’utiliser pour offrir des services telles que la navigation, les services de secours et sécurité ou encore la publicité ciblée.

Les limites de la Géolocalisation

La Géolocalisation est soumise à des règles afin de protéger la vie privée des utilisateurs. Ces derniers doivent au préalable donner l’autorisation à l’application de prélever leurs données de localisation et doivent pouvoir en être conscient et pouvoir la révoquer à tout moment. Les spécifications peuvent être trouvées sur le site du W3.

User agents must not send location information to Web sites without the express permission of the user. User agents must acquire permission through a user interface, unless they have prearranged trust relationships with users, as described below. The user interface must include the URI of the document origin. Those permissions that are acquired through the user interface and that are preserved beyond the current browsing session (i.e. beyond the time when the browsing context is navigated to another URL) must be revocable and user agents must respect revoked permissions.

Une icône sur le navigateur Chrome permet de savoir quand la localisation est activée.

 

Comment utiliser la géolocalisation sur un site web?

  • La première technique qui vient à l’esprit est de coupler les nouveaux standards du HTML5 avec l’API Javascript dédiée, supportée par tous les navigateurs (IE à partir de la version 9). Pour se faire on utilise l’objet geolocation, membre de navigator. Le tutoriel présent ici explique comment utiliser des fonctions telles que getCurrentPosition() ou watchPosition() pour tracker un utilisateur.
  •  Le plugin GeoPlugin permet d’avoir accès aux fonctions basiques de géolocalisation en utilisant différents langages tels que le Javascript, le PHP, le JSON, le XML ou encore l’ASP. Il propose également des services de conversion d’argent, de localisation d’adresse IP, de mapping de coordonnées géographiques et de localisation de villes proches.

Exemples d’utilisation de la Géolocalisation

  • Un des services les plus utiles pouvant utiliser la géolocalisation est l’application Google Maps présent sur les smartphones récents. Elle permet d’afficher des cartes et de nous localiser très précisément dessus.

La localisation s’avère très précise une fois connecté au réseau WIFI (20m)

  • Le premier réseau social à se concentrer exclusivement sur la géolocalisation est Foursquare, disponible sur la majorité des plateformes mobiles. Les utilisateurs font des “check-in” dans des lieux, et sont récompensés par des points, des badges ou encore des réductions dans les lieux partenaires de l’opération.Le service peut nous proposer de nouveaux lieux cohérents avec nos check-in et ceux de nos amis
  • La dernière version d’iOS permet aux utilisateurs de localiser leur iPhone à l’aide d’une application dédiée. Il peut ainsi le faire sonner à distance, le bloquer ou encore supprimer l’intégralité de son contenu. En cas de vol, ces données peuvent être fournies aux forces de l’ordre afin de récupérer l’appareil.

Démonstrations

  • http://html5demos.com/geo

Sources

  • http://fr.wikipedia.org/wiki/G%C3%A9olocalisation
  • http://www.w3.org/TR/geolocation-API/
  • http://www.html5-css3.fr/html5/tutoriel-geolocalisation-html5
  • http://wapiti.telecom-lille1.eu/commun/ens/peda/options/ST/RIO/pub/exposes/exposesrio2006/Borie-Ceuterickx/index.htm
  •  http://www.geoplugin.com/
  • http://www.html5-css3.fr/html5/tutoriel-geolocalisation-html5
  • http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html

[JAVAS] Drag and Drop

Bonjour à tous,

Nous allons commencer cet état de l’art par une très célèbre API JavaScript : Drag and Drop. Rappelons tout d’abord brièvement ce qu’est le Drag and Drop. Selon Wikipedia le Drag and Drop est tout simplement une méthode consistant utiliser un dispositif de pointage [...] pour déplacer d’un endroit à un autre un élément graphique présent sur [un] écran. Cette API offre de belles possibilités en terme d’ergonomie sur votre site web.

Pourquoi utiliser le Drag and Drop ?

La raison majeure d’un tel choix est la réorganisation des données par l’utilisateur. Par exemple, s’il souhaite trier une liste il est plus agréable et rapide de l’effectuer à l’aide du Drag and Drop en ayant rendu tous les éléments “draggable”, plutôt que d’instaurer un système de case cliquable ou d’entrée devant chaque ligne demandant l’ordre souhaité. On peut également disposer d’une fenêtre de navigation qui peut être déplacée suivant les besoins de l’utilisateur. C’est intuitif, moderne, mais également “OS-like” dans le sens où le navigateur réagit comme l’application de gestion des fichiers de son ordinateur, et peut même interagir avec celui-ci. Cela transforme votre site web en véritable expérience de navigation pour l’internaute le parcourant.

Cependant, le drag & drop ne doit être employé que s’il est utile pour l’internaute, et non parce qu’il est possible de le faire techniquement. De plus, une fois qu’il est présent, un guide expliquant son usage peut être nécessaire pour aider l’utilisateur.

Différentes technologies permettant d’utiliser le Drag and Drop

  • Le HTML5
    Supporté par les dernières versions des navigateurs, le HTML5 introduit l’attribut global draggable, qui rend directement implémentable le Drag and Drop, sans API. On peut en trouver un exemple simple ici, avec le code correspondant.
  • Le plugin jQuery UI Droppable
    Afin de permettre de proposer cette technologie à une plus grande audience n’ayant pas forcément un navigateur à jour, il est possible d’utiliser jQuery, et l’UI Droppable, qui permet à l’utilisateur de bouger certaines DIV et de définir des zones cibles permettant de recevoir les DIV.
  • La Yahoo User Interface (YUI) library
    Cette librairie JavaScript et CSS possède plus de 30 fonctionnalités, dont le Drag and Drop.

Exemples d’utilisation du Drag and Drop

  • L’application de gestion de tâches Wunderlist utilise le drag and drop sur sa version web à l’aide du plugin jQuery UI Droppable. L’utilisateur peut ainsi réorganiser intuitivement la liste des catégories de la barre. 
  •  L’application web Gmail permet l’upload de fichiers directement en Drag and Drop depuis le gestionnaire de fichiers.
  • Le site Panic, développeur de logiciel pour Mac tels que Coda et Transmit, fait également usage du Drag and Drop afin de proposer une expérience de navigation originale à l’utilisateur.

Plus d’infos ?

Sources

[JAVAS] Les API Javascript – Présentation du projet de veille technologique

Bonjour à tous,

Nous sommes Sébastien Bro et Marc Laurent, élèves ingénieurs en 3e année à l’École Centrale de Nantes en option Informatique. Dans le cadre d’un projet de veille technologique nous allons publier chaque semaine un article sur le thème des API Javascript. L’objectif est de faire un tour d’horizon des API existantes et de l’état des implémentations offertes par les navigateurs courants.

Ce projet est encadré par Jean-Yves Martin, directeur adjoint du département d’enseignement Informatique et Mathématiques à l’Ecole Centrale de Nantes, et s’effectue conjointement avec des étudiants de l’Ecole Centrale de Lyon, sous la tutelle de Daniel Muller, Responsable du MS Management et Développement des Systèmes d’Information.

Cet article constituera le sommaire de toutes les API JavaScript que nous allons aborder. Il sera régulièrement mis à jour et linké à tous les articles portant sur les API JavaScript auxquelles il fait référence.

Sommaire des API JavaScript traitées dans le cadre de ce projet de veille technologique :

Licence Creative Commons
Les API Javascript de Bro – Laurent est mis à disposition selon les termes de la licence Creative Commons Paternité – Pas de Modification 3.0 non transcrit.
Basé(e) sur une oeuvre à veille-techno.blogs.ec-nantes.fr.
Les autorisations au-delà du champ de cette licence peuvent être obtenues à http://veille-techno.blogs.ec-nantes.fr/.