Créer une application web en 2 clics

Souvenez-vous des débuts de l’Internet dans les années 1990, des pages Web statiques avec des images animées plutôt flashies  et parfois une certaine dose de mauvais goût. Depuis, les technologies ont évolué à une vitesse fulgurante,  les pages web deviennent dynamiques et interagissent avec les utilisateurs.

Depuis les origines de l’Internet, la page Web est encodée dans un langage de description, le html pour Hypertext Markup Language. Ce langage assure la présentation à l’écran des différents blocs de texte et fournit des pointeurs ou liens vers des éléments graphiques. Autrement dit, html est chargé de la présentation des informations, il encapsule le texte affiché et sans élément graphique.

Avec l’avènement du Web 2.0, les contenus Web sont devenus actifs et même interactifs, l’utilisateur peut agir sur la page web sans avoir à provoquer un rafraichissement, exactement comme avec une application ou un programme installé sur l’ordinateur. Bien sûr, Html existe toujours, il existe une nouvelle version de ce langage, html 5,  dont on peut découvrir quelques exemples ici.

Les pages Web interactives qui agissent comme des applications sont des applications Web ou Web App. En voici deux exemples :

Hootsuite  une application d’agrégation de réseaux sociaux qui permet de suivre des comptes Twitter, Facebook, Linkedln etc.. Chaque mise à jour de statut est automatiquement affichée.

Google Documents est un très bon exemple de Web App : lorsque le site Web devient une application bureautique, en l’occurrence un tableur ! Google Documents intègre un menu  et une barre d’outils, tout comme une application bureautique standard.

Une Web App sur votre bureau :

Revenons à nos moutons et à l’objet de ce billet…  avec une application web, on peut considérer son environnement d’exécution, le navigateur Web comme inadapté : plus besoin de barres d’outils, de menus puisque l’application Web est autonome.

L’idée est donc de sortir la Web App du navigateur pour qu’elle se rapproche au mieux près de l’application en gommant les éléments qui en rappelle les origines.

Pour cela un outil de conversion devrait disposer d’au moins deux fonctions :

* fournir un environnement d’exécution pour la page web, un moteur web le plus discret possible, au minimum une simple fenêtre.

* créer un raccourci sous forme d’une icône sur le bureau ou dans le menu démarrer.

Sur cette copie d’écran on peut voir l’icône de l’application Web qui ouvre une fenêtre sur Hootsuite. Il n’y a pas de barre d’outils, pas de menu de navigateur, uniquement le contenu Web.

Créer une application Web grâce à une extension de navigateur :

Sous Google Chrome, créer une application Web est vraiment très simple :

1- Affichez votre site Web dans Chrome
2- Cliquez sur le bouton de configuration
3- Puis sur Outils
4- puis sur Créer des raccourcis vers applications…

Il ne reste plus qu’à spécifier l’emplacement du raccourci :

Simple, mais sans aucun paramétrage ni configuration !

Sous Firefox, vous devez installer une extension : Prism si vous utilisez Firefox 3.0 à Firefox 4.0, Webrunner si vous utilisez Firefox 5.0

Edition du 31 juillet :
Je ne vous propose pas la démo de Webrunner qui ne fonctionne tout simplement pas sur ma machine !
Les extensions Prism et Webrunner fonctionnent de la même manière et avec le même écran de paramétrage identique à celui de la version autonome décrite ci-dessous.

Webrunner ne s’exécutera pas si le nom du compte utilisateur Windows et donc le dossier dans c:/users contiennent des caractères accentués !
Fin de l’édition !

Créer une application Web avec Prism en version autonome :

Mon préféré ! Prism est un projet dont le développement a été abandonné par Mozilla et repris sous le nom de Webrunner par Salsita Software. Néanmoins, le site Prism existe toujours :

L’intérêt de Prism est d’exister en version Standalone c’est à dire autonome tout comme un logiciel Windows. Non lié à un navigateur, il n’en subit pas les changements de version.

1- Installer Prism

Les binaires sont dispos pour Windows, Linux et Mac en version 1.0 béta 4 à cette adresse :  http://prism.mozillalabs.com/downloads/1.0b4/

La version Windows est un simple fichier Zip mais je vous ai concocté un installateur avec Inno Setup.

2- Convertir un site en Web App

Nous allons créer une Web App à partir du site Hootsuite :

Cliquez sur l’icône Prism dans le menu Démarrer ou sur le bureau, une fenêtre s’affiche :

-1- Collez l’adresse Web du site Hootsuite
-2- Nommez le raccourci et réglez les options d’affichage, ici la barre de statut sera affichée afin de suivre la progression du chargement de la page et d’accéder aux options de Prism
-4- Choisissez au moins un emplacement de stockage du raccourci, bureau menu démarrer ou lancement rapide.
-5- Cliquez sur OK, le raccourci est créé :

Les options de configuration de Prism sont accessibles dans la barre de statut puisque cette dernière a été activée :

Libre à vous de choisir le bon service web correspondant le mieux à ce nouvel environnement, les enseignants du primaire apprécieront la possibilité offerte de restreindre l’utilisation d’un site Internet pas de barre de navigation pour que les élèves s’échappe du site à visiter et risque minimum de les voir surfer en dehors des sentiers battus. Pensez-quand même  à cacher l’icône du navigateur, n’oubliez pas qu’ils sont tous nés avec les “nouvelles technos”.

Je vous laisse avec l’adresse du Wiki de Prism pour ceux qui veulent approfondir la question : https://wiki.mozilla.org/Prism