Question fonctionnalités, Agile Carousel est bien fourni : play/pause, pagination, transitions multiples, retardateur… mais personnellement je n’aime pas beaucoup comment il fonctionne.

Tout d’abord, l’insertion de données à l’aide JSON peut se révéler intéressante pour récupérer des données extérieures, mais ces données ne font pas partie du document à son chargement ; elles sont ajoutées en JavaScript. Ainsi, si l’utilisateur n’active pas JavaScript, les données sont inexistantes, on n’a donc que des divisions ou zones vides.

Ensuite, la librairie oblige à définir les tailles du diaporama dans la configuration JavaScript. Ce que je trouve très contraignant au niveau de la maintenance. On mélange à la fois la configuration fonctionnelle du diaporama et ses dimensions. Ce genre de fonctionnement n’est pas pour faciliter le travail de l’intégrateur.

Bien que je comprenne la volonté de vouloir insérer des données externes, je ne comprends pas cette manie de placer toute la configuration du côté JS. Tant que je n’aurai pas compris l’avantage, je resterai sur des librairies comme bxSlider, bien plus cohérentes.

Voir Agile Carousel.

Articles similaires :

1. 15 Carrousels d’images en Javascript
2. L’avenir de l’information : le web de données
3. TYPO3 : la conception agile
4. Les institutions doivent construire des données réutilisables, pas des sites web
5. Listes de 10 CMS stockant les données en XML

Il y a trois mois, nous avons décidé de refondre le FrameWork que nous utilisions pour notre tableau de bord ; tout à été refait du côté client grâce à node.js.

Ce choix a été dirigé face après la constatation que la structure LAMP (Linux-Apache-MySQL-PHP) était morte. Depuis une vingtaine d’années que cette structure existe, beaucoup de virages ont déjà été réalisés concernant les contenus, les protocoles, les serveurs ou encore les clients.

Nous pouvons dégager, d’ailleurs, trois âges du web :

1991-1999 : l’âge du HTML

La vision originale de Tim Berners-Lee du web fut celle d’une grande bibliothèque en ligne. Le web était défini comme un corpus de documents statiques, codés en dur, en grande partie formatés par le niveau de rendu des navigateurs clients.

Pour résumer, nous avions des documents statiques disponibles pour des clients statiques.

2000-2009 : l’âge LAMP

La période LAMP fut très lié à celui des bases de données. La conception du web n’était plus orienté sur les documents, mais plutôt sur les principes LAMP, ou similaire. C’est-à-dire, une série de gabarit HTML intégrant des données provenant d’une base de données.

Nous avions bien un contenu dynamique, mais toujours un client statique.

2010-?? : l’âge du JavasScript

Dans cette troisième décennie nous entrons dans l’ère du flux. La page web n’est plus une page. Le modèle basé sur l’objet document existe toujours, mais plus en tant que structure (fixe). Le DOM (arbre structurelle d’une page) est chargé dans la mémoire du navigateur et une partie de celui-ci peut être modifié à l’aide de JavaScript.

L’architecture LAMP est morte en raison dans la mesure où, désormais, peu d’applications proposent d’actualiser l’ensemble d’un page en réponse à un événement (demande utilisateur minime) ; il suffit d’actualiser une partie du DOM grâce à JavaScript.

Nous passons de l’âge du document (HTML), à celui de l’affichage d’un gabarit (LAMP), pour arriver à celui de l’envoie de données. Le rôle principal du server est de passer d’une application vers un client (JavaScript), en passant par un formatage de données (JSON), et insérer ce contenu dans le document, ou plutôt le DOM.

Le deuxième rôle du serveur est d’être à l’écoute des événements côté client (édition, message…) et de renvoyer une réponse correspondante.

Node.js correspond aux demandes qu’on peut faire à un serveur en 2010. Il est asynchrone et très rapide. Il utilise HTTP 1.1, garde les connections ouvertes, il peut gérer des centaines de connections.

Les données deviennent de simples paquets, JSON semble s’imposer pour leur transfert. Il s’agit d’un format géré nativement par node.js.

Le JavaScript nous rapproche du web qui ne se résume plus à la grande bibliothèque numérique, mais plutôt à un système nerveux numérique.

Articles similaires :

1. dygraphs JavaScript Visualization Library
2. Graphiques (Charts) avec JavaScript
3. Easy, un FrameWork CSS/HTML/JavaScript
4. 15 Carrousels d’images en Javascript
5. Calendrier d’insertion de date en JavaScript avec raccourci clavier

• HTML5 & CSS3 Readiness
• HTML5 Security Cheatsheet
• Button Maker
• When can I use…
• CSS3 Color Names
• CSS3 Generator
• Modernizr
• The HTML5 test
• CSS Border Radius
• FindMeByIP
• CSS3 Gradient Generator
• CSS3 Watch
• tools & resources for web professionals
• CSS3, please!
• font dragr
• CSS3 Generator
• CSSDesk
• HTML5 Revision Tracker
• font-face Generator
• CSS3 Selectors Test
• IE Print Protector
• Web Browser CSS Support

Articles similaires :

1. Développement CSS3 compatible multi-navigateurs avec Modernizr et eCSStender
2. Trousse à outils pour commencer HTML5
3. IE-CSS3, support CSS3 pour IE 6, 7 et 8
4. 8 outils pour tester l’accessibilité de votre site
5. Présentation du HTML5 et du CSS3

La balise canvas permet d’effectuer des rendus dynamiques d’images dans un navigateur ; c’est-à-dire réaliser des animations d’images, interprétées par le navigateur. Précédemment, pour les sites internet, les animations étaient la plupart du temps codées en Flash. La balise canvas permet de limiter l’utilisation du Flash et ainsi d’améliorer les performances en rendant les pages moins lourdes.

Wadda est une fonctionnalité permettant de zoomer dans une image à partir de la balise canvas. Il suffit d’appeler une librairie JavaScript dans l’entête de sa page puis d’insérer le code adapter pour l’affichage de l’image concernée.

Bien se rappeler que pour l’intégration d’un zoom dans une page, il est nécessaire d’avoir deux images distinctes ; l’une pour la miniature, l’autre pour la haute définition. Wadda se charge de faire le rapport de coordonnées du curseur et d’agrandissement entre les deux images.

Au chargement de la page, plusieurs paramètres sont configurables :

• Taille de la zone de vision
• Fondu sur les bords de la zone de vision
• Valeur du grossissement
• Décalage du curseur

Voir Introducing Wadda the image zoomer using canvas.

Articles similaires :

1. Graphiques (Charts) avec JavaScript
2. Humble Finance: graphiques dynamiques avec HTML5
3. Le futur avec HTML5 par Bruce Lawson
4. Video for Everybody!, lecture de vidéos avec HTML5 ou pas
5. Galerie d’images avec bxGallery sous jQuery

• AlloyUI
• LiveUI

LiveUi a l’air très bien mais pour des projets en ASP.NET, il faut aimer ou être un pratiquant. Alloy n’est pas mal non plus, mais il me semble un peu lent, en ce qui concerne la démo.

Deux FrameWorks à tester, avant de les adopter.

Articles similaires :

1. CSS FrameWorks : les pour et les contre
2. Appliquer les règles apportées par les FrameWorks CSS
3. Tom’s Planner, Disciplanner, Yast : 3 interfaces de gestion de tâches
4. WAI ARIA – Applications riches Internet accessibles
5. Les deux capitalismes par Bernard Stiegler

La lightbox est très appréciée des concepteurs car elle permet de procéder à certaines configurations ou téléchargerments de fichiers sans quitter la page active. Cette fonctionnalité est une sorte de terrain d’entente entre les clients et les intégrateurs. Son utilisation n’est pas toujours du meilleur effet, mais elle remplace, de manière plus conforme aux règles de l’utilisabilité, la célèbre popup.

Pour éviter l’ouverture de nouvelles fenêtres, les intégrateurs pourront utiliser ColorBox. Respectant les règles du W3C, légère, gérant le préchargement d’images, les fondus, permettant les callbacks (…), cette fonctionnalité peut se révéler un solide avantage dans la réalisation de ses pages.

Découvrez ColorBox – A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4.

Articles similaires :

1. jQuery Accessible RIA : fonctionnalités jQuery accessibles
2. TYPO3 – galerie d’images : LightBox et FancyBox
3. Roundabout, plugin jQuery pour la rotation axiale d’éléments
4. Plugin jQuery : tablesorter
5. jQuery : plugin ARIA