Tag: Web

Techdays 2010, jour 3

Posted by – February 11, 2010

Ce 3è jour sera beaucoup consacré à l’ergonomie et au design. Ce n’est pas ma compétence première, cela sera donc très difficile pour moi de résumer correctement les 3 sessions auxquelles j’ai assisté – malgré leur richesse – autrement que par des mots clés et de façon très lapidaire.

More

Design et Ergonomie : “Donne-moi ce que je veux !”

Posted by – September 21, 2008

Remise en ligne d’un billet que j’avais publié en octobre 2007 sur le livre “Internet, donne-moi ce que je veux”, ce dernier est maintenant disponible gratuitement en ligne : http://www.navigation-web.com/autour-du-livre/les-60-modeles-de-navigation

——

J’ai acheté ce livre suite au passage sur le blog de notre ami Frédéric, l’ayant plébiscité.

Orienté marketting, l’ouvrage se veut pragmatique et répond exactement à la phrase impérative : donner aux internautes ce qu’ils cherchent, et selon ce que veut mettre en avant le site (le besoin).

Les modèles proposés sont riches et pertinents et contiennent un bon nombre d’astuces ergonomiques ou techniques, le sujet de l’accessibilité est également abordé. Les rappels sur les bonnes pratiques sont répétés afin de mieux les retenir au fil de la lecture.

Comme souvent, la stratégie de design et d’ergonomie d’un site sera en fonction du besoin, c’est à dire ce que l’on souhaite mettre en avant, et “vendre”.

Autrement dit, pas un design idéal, mais bien des solutions différentes selon la typologie du site : marchant (avec toutes les déclinaisons selon la nature des objets vendus), blog, encyclopédique, photos, moteurs, etc.

Les conseils glanés peuvent être facilement appliqués, sous réserve d’étudier un minimum le comportement des internautes de son site/blog : qu’est-ce qu’ils cherchent, et comment le cherchent-ils ? (Google analytics, phpmyVisites sont vos amis pour cela).

Ce livre pourra être complété par le Zen des CSS, ce dernier1 se veut plus technique pour le côté mise en forme CSS.

Retrouvez l’actualité du livre sur le site navigation web.

1 du site (presque) éponyme Css Zen garden

Développement Web et Frameworks

Posted by – May 2, 2008

Une application Web visible des internautes n’est que la face visible de l’iceberg qu’est un projet. Après tout, ce n’est que du (X)HTML que nous affichons sur le navigateur, mais pour arriver jusqu’à ce stade ultime, les étapes sont innombrables.

Toute mise en oeuvre sérieuse demande un minimum de frameworks ou de librairies à tout niveau : de la présentation à la gestion de données. Alors, quelques frameworks que nous utilisons quotidiennement, et qui nous facilitent la vie, nous affranchissant de nombreuses contraintes.

  • ORM : NHibernate et DSmap : il est très utile d’avoir un framework de mapping entre la base et le monde objet, les 2 mondes peuvent être conçus différemment. Le 2ème est un ancien ORM maison, basé sur les attributs. En raison d’une communauté inexistante, le choix était logique de migrer vers un ORM reconnu et surtout développé et maintenu par une forte communauté, NHibernate fut le choix de facto. L’avantage de ce dernier face à DSmap est l’absence d’attributs, chaque entité est une classe sérialisable non polluée, le mapping vers la table s’effectuant sous forme de fichier de description XML : champs, relations, référence vers une autre table, …
  • Javascript : Prototype / Scriptaculous : Prototype est une librairie puissante, notamment connue grâce à Ruby on Rails. Elle emprunte au niveau syntaxique et fonctionnalités beaucoup à Ruby. L’avantage de Prototype est l’usage d’Ajax, de la manipulation du DOM et des apports en POO, la librairie nous soulage énormément des rouages de bas niveau, notamment vis-à-vis des navigateurs ou des retours Ajax. Scriptaculous est une librairie développée au dessus de Prototype, proposant des composants prêts à l’emploi (Autocompleter, drag & drop, …). En ASP.NET, afin d’abstraire la librairie utilisée, on développera plus volontiers des contrôles utilisateurs, encapsulant les librairies utilisées. L’avantage est de pouvoir ou du moins plus facilement changer de librairie si le désir et le besoin s’en fait sentir (jQuery par exemple).
  • Web : ASP.NET : Microsoft a apporté un nouveau modèle de développement Web, en y intégrant une multitude de principes, dont certains issus des applications fenêtrées : évenementiel, simulation de la persistance de l’état d’une page (HTTP est state less), data binding, contrôles, et un très puissant système de cache, voir un résumé des points importants sur ASP.NET. On ne développera bien entendu pas tout dans un projet Web, une architecture n-tiers est primordiale afin d’abstraire et de découpler les couches, dans un prochain billet, je présenterai une introduction à ce type d’architecture.

S’appuyer sur des frameworks réduit le temps de développement et la maintenance de librairies qui sont déjà utilisées, ne pas redévelopper ce qui existe déjà.

On pourra aller encore plus loin, dans un environnement full objet et fortement découplé, en utilisant des frameworks supplémentaires :

  • la capacité de .NET2 de gérer des providers : pouvoir en temps réel instancier une implémentation spécifique avec peu ou prou de modification de code.
  • des frameworks de type MVC : ASP.NET MVC, MonoRail, Promesh. Même si, d’un avis tout personnel, dans un environnement ASP.NET, l’utilisation de MVC est une hérésie, on y perd une bonne partie du paradigme ASP.NET. Parmi les extensions nouvelles d’ASP.NET, ADO.NET Entity et ADO.NET Data Services seraient bien plus intéressantes de s’y pencher, pour exposer une API (sous forme d’URL REST) par exemple.

Quelques librairies ou composants Javascript :

Le choix d’un framework ou d’une librairie reste difficile et il faut se poser les bonnes questions afin de ne pas investir du temps pour rien : est-il pérenne, a-t-il une communauté suffisamment constituée, est-il suffisamment modulable et souple, y a-t-il souvent des mises à jour (ie: projet actif), répond-t-il aux besoins, sera-t-il facilement remplaçable ?

Une veille permanent est importante afin de réfléchir à de meilleures solutions d’implémentations, merci aux RSS :-)

Page Web : enlever les caractères indésirables (les puces) de Word

Posted by – April 30, 2008

Lors de saisies de formulaires, il arrive assez fréquemment que l’utilisateur copie / colle à partir de Word son texte. Malheureusement, ce dernier est souvent formaté, notamment avec des puces dessinés.

Ces puces ne seront pas lisibles par le navigateur, malgré l’UTF-8 de la page Web. Aussi, autant que faire se peut, il faut les retirer pour l’affichage sinon on encourt le risque d’avoir ce type de caracères sous FF ou IE ou Safari (disponible en version 3.11, apparemment plus stable sous Windows) :

puces Word FF

puces Word IE

Alors comment faire ?

Grâce à ce site qui nous permettra de rechercher le code UTF du ou des caractères indésirables, par exemple les puces de l’exemple, on recherchera (copier/coller directement du symbole affiché) le symbole qui donnera le code F0E0 :

Une fonction utilitaire avec une regexp suffira pour remplacer les puces par le caractère -, avec un fichier Resource.resx qui contiendra tous les codes UTF des puces à substituer. Pour dire au Replace d’interpréter un code UTF, il faudra préfixer le code par \\u, pour F0E0, cela donnera

  1. Regex.Replace("\\uF0E0","-");

La méthode utilitaire :

  1. public static String CleanWord(String chaine)
  2. {
  3. string mystr = chaine;
  4.  
  5. string[] paras = Resource.RegexSubstituteUTF8.Split(';');
  6. mystr = Regex.Replace(mystr, paras[0], paras[1]); // puce Word , ...
  7.  
  8. return mystr;
  9. }

avec comme Resource.resx :

Resource.resx

on aura alors le résultat escompté

Puces

.NET & cache local / distribué

Posted by – March 18, 2008

.NET 2.0 a introduit la capacité de créer des providers simplement, tout en gérant assez finement la configuration. Ces fournisseurs (ie : 1 fournisseur = 1 implémentation d’une interface / contrat) sont configurables par un fichier .config (XML), et chargeables dynamiquement selon les besoins du client, en y introduisant une abstraction. Un exemple sur le MSDN comme point de départ.

du côté client

On va tenter à partir des providers de créer 2 fournisseurs :

  • un cache local, basé sur le cache d’Asp.Net, ou bien sur le HttpRuntime dans le cas d’une assembly non contenue dans une application Web (cela permettra d’utiliser l’objet Cache hors d’une application Web, par exemple dans une assembly, une application console, …)
  • un cache distribué à l’aide de cette librairie, basé sur Memcached. Il en existe 2 autres, non testées, EnyimMemcached et BeIT Memcached, cette dernière me paraissant très prometteuse.

Ces fournisseurs seront accessibles par un helper (classe statique), celui-ci encapsulant l’implémentation souhaitée (cache distribué ou local).

Le but est d’avoir une utilisation simple de cette classe :

// par défaut le cache local CacheHelper.Add("cle","ma donnee",60000); string val= CacheHelper.Get("cle") as string;   // utilisation du cache ditribué CacheHelper.Strategy = "DistributedCacheProvider"; CacheHelper.Add("sharedkey","ma donnee a partager",60000); string val2 = CacheHelper.Get("sharedkey") as string;

Je suis parti de ce code auquel j’ai ajouté la notion de stratégie, et de cet excellent article sur les mystères de la configuration .NET.

Chaque fournisseur, que nous appellerons AspNetcachedProvider et MemcachedProvider implémentent la classe abstraite ci-après, qui elle-même hérite de ProviderBase :

public abstract class CacheProvider : ProviderBase {         public abstract long DefaultExpireTime { get;set;}         public abstract bool Add(string strKey, object objValue);         public abstract bool Add(string strKey, object objValue, bool bDefaultExpire);         public abstract bool Add(string strKey, object objValue, long lNumofMilliSeconds);         public abstract object Get(string strKey);         public abstract object Remove(string strKey); }

Les providers sont définis dans un fichier de configuration (web.config, app.config ou fichier externe avec l’attribut possible configSource sur la section)

A titre d’exemple, on pourra avoir :

<configuration>  <configSections>   <section name="cacheProvider" type="Caching.CacheProviderSection, Caching"             allowDefinition="MachineToApplication" restartOnExternalChanges="true"/>  </configSections>    <cacheProvider defaultProvider="AspnetCacheProvider">   <providers>    <add name="AspnetCacheProvider" type="Caching.AspnetCacheProvider,Caching"/>    <add name="DistributedCacheProvider" type="Caching.MemcachedCacheProvider,Caching"     servers="10.75.92.10:11211" socketConnectTimeout="1000" socketTimeout="1000"/>   </providers>  </cacheProvider> </configuration>

Les fournisseurs sont instanciés lors de l’appel de CacheHelper. Cela permet de respecter le principe de Ouvert-Fermé. Ainsi, rien ne nous empêche d’avoir une autre implémentation pour le cache distribué, comme par exemple des données stockées par un serveur de bases de données ou bien une autre implémentation de Memcached (BeITMemcached). Il suffirait alors d’appeler cette implémentation au lieu de Memcached.

En conséquence, la configuration se transformerait en :

<configuration>  <configSections>   <section name="cacheProvider" type="CacheProvider.CacheProviderSection, CacheProvider"               allowDefinition="MachineToApplication" restartOnExternalChanges="true"/>  </configSections>    <cacheProvider defaultProvider="AspnetCacheProvider">   <providers>    <add name="AspnetCacheProvider" type="Caching.AspnetCacheProvider,Caching"/>    <add name="DistributedCacheProvider" type="Caching.SqlCacheProvider,Caching"/>   </providers>  </cacheProvider> </configuration>

Découplé, souple, extensible, j’aime.

Quelques cas d’utilisation

Lorsqu’on utilise les pools d’applications, l’objet Cache n’est pas partagé entre les applications, le cache distribué est là le bienvenu.

Sur une plateforme avec des systèmes hétérogènes (Windows, Linux), partager des données entre plusieurs serveurs peut s’avérer utile, avoir un cache distribué est encore une fois bienvenue.

Enfin, on pourrait penser au besoin de partage d’objets entre une application (fenêtrée, service windows, …) et une application Web. Contraintes

Entre le cache local (utilisation de l’objet Cache) et Memcached, le comportement peut-être différent pour le stockage des objets. En effet, Cache permet de stocker n’importe quel objet, contrairement à Memcached qui nécessite que l’objet soit marqué de l’attribut Serializable, sans quoi la sérialisation échouera.

du côté serveur

serveur memcached 1.2.4 sur Debian

Le package Debian est trop ancien (1.1x), il est préférable de partir des sources : 1.2.4 installée, la 1.2.5 vient de sortir. Il est nécessaire d’avoir libevent (apt-get install libevent-dev).

Suivre ce tutoriel

monitoring

Un plugin est disponible pour Munin afin de monitorer le serveur Memcached, prendre le plugin de 2ème génération.

Cela permet d’avoir des graphes de ce type :

memcached monitoring

memcached monitoring

serveur Windows

Une version Windows est disponible, non testée.

Sources

Le zip Caching.zip contient 3 répertoires :

  • Caching : la librairie pour la gestion des 2 fournisseurs
  • memcacheddotnet : l’implémentation Memcached, API v 1.1.5 trouvée sur Sourceforge
  • Clients, scindé en CachingWebTest et CachingWinTest, 2 applications, Web et Winform qui utilisent le cache; en lançant les 2 en //, vous pourrez accéder à la même donnée partagée

Il suffit d’ouvrir la solution Caching.sln.

Livres blancs : CMS, bonnes pratiques, frameworks PHP, référencement, .NET, …

Posted by – December 19, 2007

Smile propose 10 livres blancs sur des thèmes très intéressants :

  • CMS opensource (Drupal, Joomla, EzPublish, …)
  • frameworks PHP
  • 100 bonnes pratiques du Web
  • conception d’applications Web
  • virtualisation opensource
  • .NET

Laissez vos coordonnées, et vous recevrez directement le PDF du livre blanc souhaité, cela se passe sur leur site

YSlow et performance des pages Web

Posted by – August 10, 2007

Je suis souvent à l’affût de bonnes pratiques que cela soit en développement ou en administration système, savoir comment améliorer toujours plus les performances d’accès à une application Web.

L’extension Firefox YSlow s’inscrit dans cette démarche : optimisation des pages Web pour une meilleure performance d’accès. YSlow analyse la page et propose une liste de bons conseils à appliquer, avec un lien sur l’explication technique : cache, compression, JS, CSS, …et donne une note globale de performance : plus elle sera haute, plus votre page est bien développée.

Les bonnes pratiques sont tirées d’un livre qui sortira à la rentrée : High Performance Web Sites

…sur ce, je repars en vacances ;)