Solutions alternatives

Cependant, il existe une solution alternative à l’utilisation d’un tierce langage. Bien souvent, lorsque l’application à diffuser sur appareil mobile n’est pas un applicatif très particulier, comme un jeu ou une application à traitements complexe, il n’est pas nécessairement utile d’avoir recours, ou d’apprendre, un nouveau langage. Et à plus forte raison, s’il s’agit d’une refonte d’un site web existant, en application mobile.

A cet effet, il est possible, d’utiliser un framework qui a pour fonction d’empaqueter les fichiers de codes HTML, CSS et Javascript, dans une coquille écrite, elle, en byte code et propre à la plateforme visée.

Ces frameworks de type Phone gap, Titanium (appcelerator) ou encore Rhodes (Rhomobile), permettent de partir d’une base déjà écrite en HTML, CSS et Javascript et de transformer ce contenu en application directement installable sur un appareil mobile.

Tous proposent une version de base gratuite de l’environnement, mais tous ne proposent pas les mêmes services ni les mêmes finalités. Pour en savoir plus, il est préférable de se rendre sur le site de developpez.com avec l’article Frameworks open source pour applications smartphones multiplateformes – developpez.com.

L’avantage principal est l’utilisation des langages déjà très familiers, à des équipes développant des sites web. Il est également intéressant de prendre en compte, la réelle simplicité de mise en place, surtout lorsque le service visé est proche de celui d’un site web…

Cependant, il faut prendre en considération certaines limitations en terme de performances et d’applicativité qui peuvent être rapidement atteintes. On ne remplace pas dans ces cas là une véritable application native écrite en C, C++ , Java ou Objective C…

Les langages de la solution alternative

Faisons un rapide rappel sur les langages du web, car cette grande innovation dans le champ du web et de la mobilité reste donc, la prise en compte des standards déjà utilisés par la majeure partie des agences web.

Les bases restent établies sur des langages robustes, et améliorés, du web. Il est vrai également, qu’en ce qui concerne les dernières versions de ces langages, celles-ci ne sont pas proposées par l’industrie mais deviennent utilisées et façonnées par les besoins de la profession.

HTML 5

Il ne s’agit pas là de la cinquième version du langage, mais d’une approche encore plus sémantique et structurée, répondant encore plus aux attentes des développeurs de sites et applications web. Cette version est encore en brouillon et devrait être en version finale vers 2022. Mais qu’à cela ne tienne, html 5 a un sens et il est l’heure de s’enivrer. Que se passe-t-il donc sous le capot ?

• L’ajout de nouvelles balises telles que <nav>, <header>, <footer>, etc… permet de prendre lieu et place des anciennes techniques de structuration de contenu de la page, <div class= »nav »>, < div class= »header »>, < div class= »footer »>, etc… .
• La présence de balises telles que <canvas>, <svg>, <audio>, <video> permet de compléter les contenus par des éléments plus interactifs et multimédia, tout en respectant l’aspect non propriétaire et standard des langages du web.
• L’adaption interactive des balises telles que <details>, <command>, <summary>…. ou le renforcement d’attributs tels que role= » », data= » » ou encore aria= » » permet de préciser et affiner le caractère des métas données propre à un enrichissement sémantique et accessible des contenus.
• La gestion des données locales, qui sont en quelque sorte une alternatives aux fameux cookies et qui permettent surtout, d’une part, de ne donner l’accès qu’au client, mais d’autre part, d’autoriser un volume de stockage bien supérieur. L’utilisation reste tributaire de l’activation de javascript mais ouvre correctement la porte au développement d’applications hors ligne.

Il reste à savoir comment les outils de navigation les intègrent et les supportent avec leur moteurs de rendu respectifs. Voir HTML5 Demos and Examples de Remy Sharp, ainsi que la liste des diverses API disponibles depuis HTML5.

CSS 3

Aujourd’hui l’ensemble des nouveaux navigateurs proposés par les éditeurs prennent en compte les spécificités des CSS3 en proposant une déclinaison propriétaire des principales propriétés CSS, par exemple la description :

proprieteCSS:  8px;

… peut être complétée par les descriptions complémentaires et propriétaires suivantes propres à chaque éditeur :

-webkit-proprieteCSS:  8px;
-moz-proprieteCSS:  8px;
-o-proprieteCSS: 8px;
-ms-proprieteCSS: 8px;
proprieteCSS: 8px;

Jusqu’à présent, l’utilisation de code propriétaire pouvait être déconseillée, mais ici cela permet au contraire, une mise en application directe et progressive des CSS3. Ainsi, il est possible d’utiliser des transformations ainsi que des transitions… d’ajouter des filtres type ombre portée, des boites à coins arrondies, ou encore des boites avec différentes images d’arrière-plan, bref la liste est longue …

Cela offre la possibilité, cerise sur le gâteau, de continuellement rester web-standard compatible, plein texte, avec une pure séparation contenu /contenant et d’éviter ou du moins de limiter, l’utilisation de Javascript. Ceci afin d’apporter une mise en forme et un affichage très souple et quasi sans contrainte.

Par contre, l’ajout de code Javascript permet d’obtenir une couverture plus élargie en intégrant notamment les vieilles versions d’Internet explorer. Par exemple, CSS3 Progressive Internet Explorer permet, moyennant la ligne de code ci-dessous, et le fichier .htc téléchargeable sur le site, d’inclure les versions de 6 à 9 d’IE :

behavior:  url(/PIE.htc);

CSS3 intègre également la confirmation de la règle @font-face, apparu timidement en CSS2, qui permet dorénavant d’utiliser toutes sortes de polices ‘non web’. De ce fait, cela permet d’enrichir la panoplie des interfaces de contenu, sans devoir avoir recours à des subtilités de remplacement image ou d’alternative telles que Cufon,Typeface.js, or SIFR.

JavaScript

Bien que lors de la dernière décade Javascript eut été un frein à l’utilisation d’application DHTML, il est aujourd’hui omni présent sur la majeure partie des sites web et s’est largement démocratisé sur l’ensemble du web.

Son intégration discrète (Unobtrusive JavaScript) se doit quand même d’être prise en compte, afin de ne pas pénaliser les utilisateurs qui n’auraient pas choisit d’activer ce langage sur leur navigateur.

L’utilisation de plus en plus fréquente de technologies comme AJAX rend les contenus dynamiques plus simples à utiliser au sein des interfaces et améliore considérablement l’expérience utilisateur et l’ergonomie du web en général.

Le DOM scripting permet de réécrire à la volée le contenu des pages et l’utilisation de librairies telle que prototype, scriptaculous, spry, jquery, mootools, dojo, etc… en simplifie la mise en place. Pour en savoir plus à ce sujet, rapprochez-vous sur ce même site, de l’article Les diverses librairies Javascript.

Comme nous venons de le voir, il existe une pleïade de librairies Javascript disponibles, toutes répondent plus ou moins au même attentes et il y va de la sensibilité de chacun pour opter en faveur de l’une ou l’autre.

Cependant, aujourd’hui, la librairie jQuery reste majoritairement utilisée par la communauté de développeurs du web. Elle se décline sous trois formes :

La librairie jQuery elle-même, qui représente le cœur des fonctionnalités et reste utile et nécessaire avec la majorité des extensions et plug-ins disponibles. Elle est secondée par jQuery UserInterface, une librairie spécialement dédiée aux composants d’interface d’application web en général, qui évolue assez souvent et intègre au fur et à mesure des plug-ins, comme dernièrement,t Auto-complète. Une troisième solution vient compléter le tableau par jQuery mobile, une partie prenant en compte tous les éléments d’interface orientés appareils mobiles et enfin jQtouch pour le développement spécifique d’application mobile.

Il reste toujours possible de venir complèter ces librairies par des extensions, ou des plug-ins externes, comme par exemple, qTips, pour réaliser des infos bulles personnalisés, maphilight pour gérer plus finement la gestion des cartes et les survols détournés, chosen pour affiner la représentation des objets de formulaires ou encore checkbox qui facilite la personnalisation des cases à cocher.

Il existe d’autres librairies spécifiques aux sélecteurs javascript, autre que jQuery et qui, de par leur petite taille deviennent un complément ou une substitution potentielle dans certaines situations :

• Sencha Touch
• XUI
• Sizzle
• Peppy
• Comment choisir ? ou avec speed / validity selectors

AJAX

Bien que cette technologie soit intégralement prise en compte par l’utilisation des principales librairies et notamment la librairie jQuery, il n’en reste pas moins qu’AJAX peut fonctionner de manière autonome.

En résumé, on peut dire qu’AJAX permet le chargement d’informations au travers du protocole http sans devoir recharger l’intégralité de la page et de manière asynchrone. Ses utilisations les plus connues, ou répendues, reste Google Maps ou encore le classique autocomplète des champs de formulaires.

Récapitulatifs

Nous avons donc affaire à un véritable tryptique de construction, HTML pour la structure, CSS pour l’affichage et Javascript pour la gestion des diverses interactions, qu’elles soient système ou utilisateur. Chacun fonctionnant de manière indépendante et pleinement modulaire, ce qui rend le système très pérenne et évolutif. Le plus simple reste de se rapprocher de cet exemple qui parle de lui-même.

Conclusions

Donc que nous developions un site web mobile ou une application mobile, il est important de constater que dans les deux cas l’usage commun des langages du web, à savoir html5, css3 et Javascript reste une solution viable et possible. Dans le cas d’une application mobile, l’usage complémentaire d’un frameworks permet alors d’une part de s’appuyer pleinement sur la prise en compte des capacités du périférique et d’autre part de compacter et encapsuler l’application finale afin de la rendre distribuable sur des magasins d’applications.