Dernièrement, j’ai participé au développement d’un Framework de composants visuels en HTML, jQuery et Java. Parmi ces composants, nous avons mis en place une grille de données évoluée avec des fonctionnalités étendues (Support du drag and drop, rafraichissement partiel de la page, …). Ce composant est intégré dans une application web utilisée la majorité de temps depuis un terminal tactile. Pour naviguer à travers les données, la grille de données utilisait un contrôle de pagination classique dans le style ci-dessous :
Ce type de pagination contraint l’utilisateur à effectuer plusieurs clics pour avancer à travers les données paginées, et atteindre sa page cible. Pour améliorer ce comportement, un ergonome et moi avons proposé une nouvelle stratégie de pagination permettant d’atteindre la page souhaitée avec un minimum de clics, tout en gardant un comportement proche d’une pagination classique (pagination des pages). Le résultat de notre travail est un contrôle scroll permettant de paginer à travers les données en utilisant la fonctionnalité drag-and-drop.
L’expérience tactile des utilisateurs et la résolution fixe du terminal nous imposait certaines règles à respecter pour une interaction facile et aisée avec l’application :
- La barre de scroll doit avoir une taille fixe (56 pixels dans mon exemple) pour mieux interagir avec les doigts des utilisateurs.
- Le contrôle scroll (boutons de navigation+espace de scrolling) doit avoir une hauteur fixe selon le nombre de lignes par page et la résolution du terminal. (L’affichage du scroll navigateur est banni)
Une fois le travail réalisé, j’ai trouvé intéressante l’idée de partager cette expérience de code avec des personnes sensibles à l’ergonomie et à l’utilisabilité des interfaces web.
Lire la suite de cet article »
HTML 5 est définitivement à l’honneur de ce Devoxx 2011. Pour preuve les salles de 3 conférences dédiées au sujet étaient pleines. Nous vous avons déjà parlé de « Devoxx – Les nouvelles applications HTML 5 et DART » et nous allons maintenant évoquer les 2 autres sessions que nous avons vues:
Elles ont toutes été réalisées par des personnes de Google, preuve de l’implication de la compagnie dans le futur du HTML.
Il y avait aussi un sujet « Intro to HTML5 Game Programming – WebGL Edition » mais auquel aucun Xebian n’a pu assister: il faut bien faire un choix lorsque plusieurs sessions intéressantes sont en parallèle !
Lire la suite de cet article »
HTML 5 est sans conteste un des sujets phare de ce Devoxx 2011. Pour preuve la salle est bien remplie. Lors de cette présentation David Chandler commence par nous montrer comment HTML 5 peut nous aider à simplifier la conception et l’utilisation des applications Web. Il nous rappelle également que les versions récentes des navigateurs prennent en charge le HTML 5, mis à part Internet Explorer (étonnant non ?)
Lire la suite de cet article »
Dans l’article précédent, nous avons rendu une interface HTML disponible hors-ligne via l’utilisation du fichier manifest de cache. L’interface était totalement statique, ne supportait que la consultation en lecture seule et la gestion du contenu dynamique reposait sur les différents versions du manifest ; les nouvelles API JavaScript vont nous aider à résoudre ces problèmes.
Avec le localStorage et l’état window.onLine, nous pourrons stocker le contenu dynamique et différencier les traitements JavaScript selon le mode (dé)connecté.
Sommaire
Lire la suite de cet article »
Dans le train, l’avion, plus généralement en déplacement, combien se retrouvent perdus sans la précieuse connexion à internet ? Rappelez vous la dernière fois que vous avez voulu consulter un article ou une documentation en ligne. Prenons le cas d’un blog : vous voulez pouvoir le lire en déplacement, voire même pouvoir éditer vos articles en cours de rédaction. Avec le manifest de cache HTML5, il est possible de rendre disponible hors-ligne les interfaces web. Dans cet article, nous étudierons la mise en pratique d’un manifest de cache appliquée à un blog.
Sommaire
Lire la suite de cet article »
A l’origine Michaël Chaize évangéliste de la plateforme Flash devait présenter cette session seul. Mais finalement il a obtenu le renfort de James Ward évangéliste Flex qui y a ajouté son expérience sur Flex et la plateforme Flash.
Lire la suite de cet article »
Après avoir réalisé le projet sous Catalyst comme présenté dans le précédent billet, nous voici prêt à passer aux choses sérieuses : le développement de l’application.
Récupération du projet Flash Catalyst
Commençons donc par récupérer ce que notre designer a réalisé. Ce dernier nous génère grâce à Flash Catalyst un fichier fxp. Pour le récupérer dans Flash Builder, il suffit d’aller dans Fichier > Importer un projet Flex (FXP) et de sélectionner le fichier à importer.
Une fois cette importation terminée, le projet apparaît comme un projet Flex classique dans Flash Builder. Il contient la librairie de Flash Catalyst. Le projet compile et s’exécute à merveille. Inspectons maintenant le code généré par Flash Catalyst.
Lire la suite de cet article »
Lors du XKE de Février, nous avons eu l’occasion de tester les outils Flash Catalyst et Builder en version beta. Pour ce faire, nous avons décidé de faire un projet et de présenter les facilités et les difficultés que nous avons rencontrées.
Concernant le projet, ce dernier est simple : mettre en place une application permettant de lister des voyages, et à partir d’une image Photoshop, nous allons définir les états/transitions dans Flash Catalyst, et brancher un backend Java avec Flash Builder. Cette série d’articles reprendra ces points avec nos analyses et critiques.
Avant toute chose, nous allons commencer par nous excuser auprès des designers/graphistes : n’étant pas notre coeur de métier, le design et l’ergonomie de l’application pourra peut être heurter la sensibilité de certains de nos lecteurs.
Lire la suite de cet article »
C’est le moment de passer à la deuxième partie de cette série sur HTML5, avec en ligne de mire les nouveautés côté JavaScript. La spécification a pris le parti de mettre JavaScript en avant, avec des API standards qui pourront être implémentées dans tous les navigateurs. L’un des buts de la spécification est de faire monter HTML et JavaScript à un niveau de finition et de performance égalant les applications de bureau. Côté performance, il y a le parallélisme et quelques fonctions natives qui viendront remplacer des fonctions déjà implémentées par les frameworks JavaScript. Mais HTML5 fait aussi écho à l’explosion du Web mobile avec la géolocalisation et les applications hors ligne pour ceux qui ne sont pas connectés en permanence.
Sommaire
Lire la suite de cet article »
Comme évoqué dans une précédente revue de presse, voici le premier article de ma série sur HTML5. Plutôt que de faire du comptage de points entre Apple et Adobe, j’ai décidé de commencer par faire un tour d’horizon des nouveautés proposées par cette nouvelle spécification du W3C. Dans ce premier article, je vous propose donc de faire un voyage à la découverte des nouveautés du côté de HTML. ; pour connaître les nouvelles balises, et les nouveaux attributs que nous pouvons déjà ou pourrons bientôt utiliser dans nos navigateurs. Du layout au canvas en passant par les WebForms, le son et la vidéo, tout tout tout, je vous dirai tout sur HTML5. Commençons donc par le commencement: HTML5 qu’est-ce que c’est ?
Sommaire
Lire la suite de cet article »
Complet
Twitter
