HTML5/CSS3, interface utilisateur et applications web

HTML5/CSS3, interface utilisateur et applications web -  0

La création d'interface utilisateur pour les applications web devient de plus en plus aisée grâce à (x)HTML5 et CSS3. Petits tests et perspectives.

La création d'application web en HTML/CSS a toujours été un calvaire pour les développeurs. En effet, de nombreuses fonctionnalités étaient absentes et il fallait les simuler. Et pourtant elle sont toujours plus plèbicitées par les entreprises et les particuliers.

Une application dans le navigateur : Quel intérêt ?

Pourquoi un tel engouement pour les applications web ? En effet, elles sont moins efficientes que les applications de bureau, les données deviennent un sujet sensible (où sont mes données, sont-elles en sécurité etc...), elles sont très limitées en terme de fonctionnalités et qui plus est elle sont inopérantes sans connexion Internet.

L'engouement pour les applications web est principalement dû à la multiplicité des accès au web. En effet, autrefois, on utilisait un seul ordinateur, souvent à plusieurs. Aujourd'hui, on utilise un ordinateur fixe, un téléphone portable, des tablettes graphiques et bientôt sa télévision pour accéder au web. L'intérêt de ne pas avoir à installer un logiciel sur chacun de ces appareils devient évident. Gmail et consors deviennent alors le meilleur ami de l'utilisateur. C'est certainement de là que vient le succès de ce concept car les personnes sont prêtes à sacrifier leur confort d'utilisation pour cela (un webmail est bien plus lent qu'un client mail classique).

Mais les entreprises n'ont pas que cette idée en tête. En effet, l'intérêt des applications web est aussi stratégique. Le web est une super-plateforme standardisée qui est supportée par tous les OS. Investir dans le développement d'une application web permet d'obtenir une application multiplateforme et pérenne utilisable dans tous les contextes par tous les employés sans maintenance liée aux mises à jour systèmes ou logicielles.

De plus, le grand nombre de compétences disponibles sur le marché permet de limiter les coûts de développement et la dépendance vis à vis des éditeurs de progiciels souvent onéreux au point de justifier des développements spécifiques. Bref, le succès des applications web n'en est qu'à ses débuts et il y a fort à parier que ce sera le futur du marché logiciel dans sa globalité. Cependant, pour les développeurs, la simplicité n'est pas au rendez-vous...

Les applications web : Casse tête de la précédente décennie

L'idée d'exécuter des applications riches au sein même du navigateur ne date pas d'hier, de nombreux logiciels fonctionnent ainsi. Parmi les plus connus, on trouve GMail, GoogleDocs, Netvibes ou Twitter. Il existe également des Frameworks qui permettent de créer des applications web riches de manière assez intuitive. ExtJs ou MochaUI sont de très bons exemples. Mais alors qu'est-ce qui pose problème ?

Dans la jungle du HTML/CSS, tout doit être simulé. En effet, HTML est prévu à la base pour afficher des documents, très peu d'éléments permettent de décrire vraiment les zones qui composent un programme. Gérer l'affichage à l'aide des CSS devient très compliqué dès lors qu'on cumule les éléments et le positionnement est un calvaire pour tout non initié (et d'ailleurs, pour les initiés eux-même). Enfin, pour couronner le tout chaque navigateur implémente les fonctionnalités au choix ou au compte goutte ou pas du tout.

Du côté application, les entrées utilisateur se font via des éléments de formulaire qui acceptent très peu de types de données, les périphériques de l'appareil utilisé sont inexploitables en dehors de la souris et du clavier. Le code est du Javascript interprété et donc plus lent à s'exécuter que le code compilé et par dessus le marché, il faut télécharger le code avant de l'exécuter.

Bref, vous l'aurez compris, créer une application web est d'une complexité atroce et seuls quelques équipes d'experts parviennent à créer des logiciels utilisables (encore que tout le monde se souvient du bide retentissant de Google Wave).

Application HTML5/CSS3 : Ce qui va changer

Les dernières avancées arrivées avec HTML5 et CSS3 et les améliorations de Javascript et ses API vont probablement changer la donne. En effet, les limites connues bougent et nous pouvons faire mieux. Certaines interactions deviennent tout simplement possible quand certaines possibilités deviennent plus saines et plus performantes.

On peut citer le JIT Tracing dont la plupart des navigateurs seront bientôt équipés et qui va permettre une exécution du Javascript bien plus rapide. Le CSS3 va également permettre de faire plus simplement des interfaces utilisateurs sans avoir besoin de charger des tonnes de scripts et d'image pour quelques transparence et des coins arrondis. Par exemple le modèle de boîte flexible est majeur pour le design d'interfaces utilisateur riches. De plus, l'utilisation du GPU (processeur de la carte graphique) va permettre d'obtenir une fluidité rarement atteinte même pour les applications actuelles les plus simples.

Plus rapides, les applications web seront plus ouvertes. En effet, tout un nombre d' API ont vu le jour pour pouvoir accéder aux périphériques matériels. Ainsi, la géolocalisation, l'API de manipulation des fichiers, le drag n' drop, local storage etc... sont autant de nouvelles voies vers de nouveaux usages.

Ce qui ne va pas changer (de sitôt)

Internet Explorer 6 sera toujours Internet Explorer 6. Tout comme le 7 et le 8 d'ailleurs. Gênant puisque le parc des ordinateurs de bureau est équipé de ce navigateur en majorité. Les applications web doivent-elles rester compatibles ? Notre avis est que non. L'idée de s'adresser à un flot restreint d'utilisateurs ou d'entreprises qui ont compris que rester sur Internet Explorer <9 était une hérésie peut faire douter les plus téméraires.

Et pourtant, quand on y pense, c'est exactement ce que fait Apple. Ils se concentrent sur les utilisateurs qui ont les moyens de s'offrir un matériel de grande qualité et qui préfèrent perdre certaines fonctionnalités, voire certaines libertés (AppStores) pour une meilleure expérience utilisateur. Tout le monde trouve les produits Apple hype alors qu'en fait, c'est leur prix qui est hype et le fait de se concentrer sur une niche rend plus simplela chose. Sachant que nous sommes ici dans l'univers des navigateurs et qu'il est aisé de s'en procurer un qui propose HTML5 gratuitement, le parallèle est encore plus évident.

Et puis, à quoi bon supporter IE6, 7 ou 8 si c'est pour que ces utilisateurs aient une expérience utilisateur minable. Vous allez y dépenser du temps, de l'argent et impacter les versions HTML5/CSS par des effets de bord qui ralentiront au final l'application pour tout le monde. Vous dépenserez de l'énergie pour fournir quelque chose de moyen à tous plutôt que pour offrir la crème de la crème à tous ceux qui savent télécharger et installer un logiciel. Enfin, comme vos applications ne tournent que sur des navigateurs modernes, vos applications sont modernes et tout le monde les trouve hype. Sans oublier que le temps joue pour vous, la niche que vous visez aujourd'hui représente la majorité des utilisateurs de demain. La boucle est bouclée.

Bien sûr, nous n'appliquons cela qu'aux applications, les sites web que nous créons sont "grand public". Mais les sites web et les applications sont différents. Un site web de plombier n'est pas unique, personne ne va télécharger un navigateur pour y accéder, mais pour une application moderne, rapide et innovante qui apporte une véritable valeur ajoutée, il y a fort à parier que le jeu en vaut la chandelle !

Conclusion : les applications HTML5/CSS3, c'est maintenant ! Tout un monde d'opportunités s'offre à nous, il ne nous reste qu'à les saisir au vol. Vous n'êtes pas obligés de nous croire, mais pour vous mettre l'eau à la bouche, voici une interface utilisateur d'application web réalisée en moins de 100 lignes de CSS dont une bonne partie est vouée à disparaître quand les préfixes -webkit et -moz seront remplacés par les propriétés CSS3 finales.

Publié le Vendredi 12 Novembre 2010

Retour

Derniers sites créés

ACM Vis Archimède

ACM Vis ArchimèdeIntégration du site d'ACM Vis Archimède. Fabriquant de vis sans fin. Suite

Actualité

Performance améliorée

Nous avons profité d'un changement de serveur web pour améliorer une fois encore la performance de nos hébergements. Suite

A propos

Nous avons créé l'agence Elitwork en 2006 au coeur du Nord-Pas-de-Calais dans le triangle Arras - Cambrai - Douai. Depuis, nous forgeons notre savoir-faire au jour le jour afin rester experts du web et des technologies d'Internet en général.
Spécialisés dans la créations de sites Internet et le développement d'application/progiciels web sur mesure, nous permettons à nos clients de réussir leur transition vers un système d'information connecté. En savoir plus

Actu de l'agence

Orange HTML5 Hackathon

Orange HTML5 HackathonNicolas Froidure, le développeur d'Elitwork a remporté avec son équipe le grand prix du jury du concours de hacking Orange HTML5 Hackathon. Découvrez cette folle journée ! Suite

Nous contacter

Elitwork SARL
10, rue Antoine DEQUEANT
62860 Oisy le Verger
Tél. : 03 21 59 62 24
E-mail