Critiquer une page web en moins de 30 secondes

L'article du jour nous viens du blog de Zurb, apportant 5 techniques permettant de critiquer une page web rapidement, simplement, et sans outils.

Les 5 techniques proposées sont :

  1. Analysez ou vos yeux vont au chargement de la page.
  2. Plissez les yeux, afin de voir ce qui ressort le plus de votre page.
  3. Scannez la page diagonalement, partant d'en haut à gauche vers en bas à droite. (bien sûr, l'inverse s'applique dans certains pays).
  4. L'astuce des "5 trucs" : regardez la page 5 secondes, puis fermez les yeux et indiquez les 5 poins qui vous ont le plus marqué.
  5. Trouvez les intersections, les endroits qui attirent vos yeux.

Pour le 3ième point, je ne pourrai vous conseiller que le très pratique outil proposé par google : BrowserSize

Filed under  //  Advices   Development   Scripts   browsersize   critique   scan   web  
Posted by Cyril Nicodème 

10 Golden Principles of Successful Web Apps

Lors de la FOWA conférence qui s'est déroulée à Miami, Fred Wilson à présenté ce qui correspondait selon lui aux 10 principes essentiels à la réussite d'une application web.

Carsonified à publié la conférence de Fred Wilson sur Vimeo, et les conseils donnés par ce dernier sont très intéressants !

Pour information, voici les 10 conseils :

  1. Speed
  2. Instant utility
  3. Voice
  4. Less is more
  5. Programmable
  6. Personal
  7. Restful (pas dans le sens software architecture)
  8. Discoverable
  9. Clean
  10. Playful

Vous pouvez voir la vidéo ci-dessous ou lire directement le transcript.

L'article de blog dont fait référence Fred Wilson se trouve ici et je vous conseille aussi fortement de lire les commentaires (malgré le nombre rebutant), qui apportent eux aussi leur brin d'idée sur les autres points utiles à la réussite d'une application web.

Filed under  //  Fred Wilson   Projects   apps   carsonified   future   golden   principle   success   video   vimeo   web  
Posted by Cyril Nicodème 

20 à faire et à ne pas faire pour un design web fonctionnel

Voici un article anglophone qui apporte des conseils sur la réalisations de design web efficaces. Bien que certains points soient évidents, d'autres sont très intéressants à prendre en compte.

Comme d'habitude, je vais faire un résumé ici de cet article, et je vous invite à aller sur le site anglophone afin d'avoir plus de détails :)

  1. A faire : Gardez votre page structurée
  2. A ne pas faire : Mettez des boîtes n'importe ou !
  3. A faire : Mettez l'accent sur les éléments important
  4. A ne pas faire : Placez des publicités sans aucun rapport partout sur votre page.
  5. A faire : Choisissez un schéma de couleurs approprié
  6. A ne pas faire : Jouez avec 20 couleurs différentes
  7. A faire : Facilitez la lecture de la page
  8. A ne pas faire : Ecrivez un paragraphe de plus de 1000 mots par pages
  9. A faire : KISS : Faites simple !
  10. A ne pas faire : Faites, faites, faites sur n'importe quoi
  11. A faire : Mettez l'accent sur les textes essentiels
  12. A ne pas faire : Remplissez vos pages de mots clefs
  13. A faire : Mettez en place une navigation claire
  14. A ne pas faire : Obligez vos visiteurs à rechercher sans cesse
  15. A faire : Optimisez le temps de chargement de vos pages
  16. A ne pas faire : Tout sur votre page sont des images (ou tableaux)
  17. A faire : Choisissez une bonne taille et type de police
  18. A ne pas faire : Utilisez 5 différentes tailles et 10 différents typesde polices
  19. A faire : Rendez votre page visuellement attractive
  20. A ne pas faire : Mettez plein de bordel les uns à côté des autres et penser l'avoir bien fait !

Voilà pour cette petite liste.

Le site illustre son article d'images de sites utilisant les bonnes pratiques (mais pas les mauvaises ;)). Chaque points sont agrémentés d'une petite description, pas très longue, ce qui rends l'article intéressant à lire.

Filed under  //  Design   effective   fonctionnel   web  
Posted by Cyril Nicodème 

Petite réflexion sur le développement web

Le web d'aujourd'hui est beaucoup axé sur des bases d'Ajax, couplés à de nombreux principes tels que KISS, DRY et le design pattern MVC (les principaux).

Maintenant, j'ignore vous, mais appliquer ces différents principes au maximum ouvre les portes de nouvelles complexités, là ou il devrait y avoir de la simplicité.

En effet, en règle générale, je suis confronté à deux principaux problèmes. Je vais vous les exposer ici et proposer une approche dans leur résolution.
Je vous invite à me donner votre avis et votre méthode, afin de parvenir à quelque chose de plus fonctionnel et me sortir de ce casse tête :)

Les moteurs de templates, il en existe beaucoup, notamment en PHP. A vrai dire, PHP lui même est un moteur de template à la base, c'est pour dire !

On peux classifier les moteurs de templates en deux catégories, en fonction du travail effectué : coté client et coté serveur.

Les moteurs de templates côté serveur

La liste est plutôt longue si on veux lister les moteurs de templates, ne serait-ce qu'en PHP. Le mieux est donc d'aller voir la doc de Wikipedia sur les moteurs de templates (en) pour profiter de la liste.

Parmis cette liste, on peux indiquer :

  • Smarty : Quand même une référence, même si ce n'est pas mon préféré
  • TinyButStrong : Le principal concurrent de Smarty
  • H20 : L'implémentation du moteur de template de Django en PHP
  • Twig : Similaire au moteur de template de Django

Les moteurs de templates côté client

Il existe peu de moteur de template étant traité côté client en ma connaissance. Leur avantage est de diminuer la consommation cpu du côté serveur. Le gros désavantage est les problèmes de compatibilités lié au différents navigateurs (non c'est pas vrai, je ne pense pas à un navigateur en particulier ! :p)

  • Transformations XSL : Le serveur fournis un XML structuré et indique une feuille de style qui fera la transformation du XML en HTML. Son gros avantages et qu'il permet de transformer le XML en plein de format possible (PDF, DOC, etc). Le problème est que la transformation n'est possible que par les navigateurs récents.
  • Les templates javascript, tel que JQuery Template ou PURE. Nécéssite l'activation de javascript et ne fonctionne pas pour toutes les pages (il faut au moins une page html qui contienne la structure principale).

Le problème actuel

Le problème actuel est que, pour répondre à une requête, il existe aujourd'hui plusieurs moyens :

  • La réponse HTML
  • La réponse JSON (pour du js)
  • La réponse en XML (pour les webservices)
  • ...

L'idée ici est de produire du code côté serveur qui ne se soucie pas du type de réponse. La réponse doit être formulée en fonction du type de demande.

En effet, que le client demande la liste des produits via son navigateur web, via une requête ajax ou via un webservice, le traitement effectué par le serveur sera le même
Seul la réponse change.

Une solution ?

Le but serait donc de proposer une interface de communication uniformisée qui prendrait en entrée le résultat du travail demandé (par exemple la liste des produits) pour la retourner dans le format attendu par la demande, peu importe cette demande.

Concrètement, cela serait possible via l'utilisation d'un wrapper autour de la couche de réponse du framework côté serveur. Au lieu de retourner la réponse tel que :

echo $oTemplate->render ();

vous faites un :

echo new ResponseWrapper ($oTemplate->render ());

par exemple.

Ensuite, il ne resterait plus qu'à mettre en place différentes classes par type de sortie que l'on veux. Cela pousse le vice à pouvoir proposer une réponse en .doc ou .pdf sans avoir à modifier (ou très légèrement) le code métier !

XSLT est un début de cette approche.
L'idée d'un tel moteur de template est excellente, mais pas encore totalement au point.
Entre autres, IE interprète des balises à sa façon et la compréhension de la structure d'un élément xsl est assez ... tordue :p

De plus, outre des possibilités de formatage au niveau des sorties (html, pdf, doc), la réponse est quand même limitée : le format nécéssaire en entrée DOIT ÊTRE de l'XML.

Donc à moins d'anticiper son travail en webservice et de faire tourner tous son code autour (notamment l'interprétation du xml par le javascript), l'utilisation du XML en tant que réponse limite quand même le type de réponse (et javascript préfère quand même le json ;)).

(En plus le traitement du xml avec PHP via DOMDocument est assez longue et nécéssite beaucoup d'instance :p)

Conclusion

Voilà, c'était mon point de vue sur la chose, quel est le vôtre ? qu'en pensez-vous ? comment faites-vous ? Je serai ravis de le savoir :)

Filed under  //  Development   General   Projects   ajax   dry   engine   i18n   internationalisation   moteur   mvc   reflexion   template   web  
Posted by Cyril Nicodème 

Graphique de flux d'une application web

Le site du framework CodeIgniter propose un graphique expliquant le fonctionnement de leur framework lors de la demande d'un fichier.

Je trouve ce graphique très complet et précis, qui permet de regrouper la majorité des éléments que nécéssite un framework fonctionnel.

Une structure simple mais efficace !

Plus de détails ici.

Filed under  //  Design   Development   General   Projects   application   chart   codeigniter   flow   flux   framework   graphique   request   web  
Posted by Cyril Nicodème 

Tutoriels sur l'installation d'un serveur Web : Mise en place

Bien, nous allons tout d'abord préparer l'environnement, histoire d'avoir quelque chose d'accueillant ! :)

Première chose, nous allons modifier le fichier /etc/apt/sources.list, afin qu'il prenne les fichiers de la version stable, et non le nom de la version que vous avez téléchargez (lenny). Ceci afin de toujours disposer des dernières versions stables.

Pour ce faire, éditez le fichier /etc/apt/sources.list et remplacez toutes les occurences de lenny en stable ! :) C'est tout !

Ensuite, mettez à jour la liste des paquets :

apt-get update

Puis installez les éventuelles mises à jours :

apt-get upgrade && apt-get dist-upgrade

Ensuite, nous allons créer un petit fichier qui va s'avérer utile, .email. Ce fichier ne contiendra qu'un email, ne sera visible que par vous, et permettra à des services tels que cron de vous envoyer un email en cas de problème. (Bon, ca ne fonctionnera pas tout de suite puisque nous avons encore aucun serveur mail, mais pour la suite, ce sera vraiment utile !).

Voici la commande :

echo "votre_email@example.org" > .email

Ensuite, nous allons nommer correctement le serveur. Pour cela, plusieurs éléments à modifier :
/etc/hosts, rajoutez le nom de domaine sur l'ip publique :

127.0.0.1       localhost webserv
192.168.0.8     example.org

/etc/hostname, donnez lui le nom voulu :

WebServ

Ensuite, exécutez le script /etc/init.d/hostname.sh, afin de mettre à jour votre nom de serveur. Le changement sera effectué lors de la prochaine connection.

/etc/init.d/hostname.sh

Pour ceux qui auraient des problèmes d'accents dans leur console, il faut modifier le fichier .bashrc, et y ajouter cette ligne :

echo "export LANG=fr_FR.UTF-8" >> ~/.bashrc

La configuration basique est terminée !

Maintenant, prêt pour attaquer le gros du travail ? :)

Filed under  //  .email   Howtos   Scripts   Unix/Linux   apt-get   hostname   mise en place   server   serveur   sources.list   web  
Posted by Cyril Nicodème 

Tutoriels sur l'installation d'un serveur Web : Informations sur le serveur

Normallement, vous disposez d'une version de  Debian toute fraîche, prête à l'emploi.

Vous connaissez son IP, pour mon tutoriel, ce sera la 192.168.0.8, et vous avez définit votre dns afin que le nom de domaine que vous disposez pointe bien sur votre ip.

Dans mon cas, j'ai modifié mon fichier hosts :

192.168.0.8         www.example.org

Mais si vous êtes chez un hébergeur, vous pouvez très bien faire pointer les dns sur votre IP ! :)

Il faut aussi que nous donnions un nom à la machine, ce sera WebServ.

Et bien voilà ! Tout est prêt pour attaquer les configurations ! :)

Filed under  //  Howtos   Scripts   Unix/Linux   example   informations   server   web  
Posted by Cyril Nicodème 

Tutoriels sur l'installation d'un serveur Web : Installation et pré configuration

Tout d'abord, installez un logiciel d'émulation type VMWare ou VirtualBox.
Je recommande personnellement VirtualBox, qui est libre.

Téléchargez la version vous concernant, installez là et, probablement, redémarrez.

Ensuite, rendez-vous sur le site de Debian, afin de récuperer la toute dernière version, notre petite Lenny : http://www.debian.org/distrib/.
Comme à l'accoutumé, téléchargez la version vous concernant.

Pour ma part, j'ai opté pour la version NetInst, petit iso de 180Mo qui contient l'essentiel, le reste étant mis à jour une fois l'installation terminée. C'est la version la plus propre d'après moi.

Ensuite, il va falloir définir le réseau de votre environnement émulé.
Deux options s'offrent à vous :

  • En tant que Bridge, histoire qu'il soit considéré comme une autre machine à part entière sur le réseau.
  • Ou en tant que "Host Only", si vous souhaitez que le serveur ne puisse communiquer qu'avec votre machine.

Comme cela dépends de votre choix, de votre émulateur et de votre OS, je ne vais pas faire un détail ici ! Vous êtes suffisamment grand pour trouver la porte d'entrée de Google :)

Afin que notre machine soit reconnue comme un serveur ayant une url (en supposant que l'on dispose d'un nom de domaine), on va modifier le fichier hosts, afin de pointer l'ip du serveur sur un faux nom. Nous utiliserons le nom de domaine http://www.example.org.

Vous trouverez le fichier hosts :

  • Windows : C:\Windows\System32\Drivers\etc\hosts
  • Linux : /etc/hosts

Ceci est pour la plupart des distribs, si vous ne le trouvez pas à l'adresse indiquée, googlez :p

Ensuite, créez votre environnement virtualisé, en choisissant le mode (Bridge/Host-Only) et démarrez l'installation.

L'installation en elle-même n'est pas très compliquée, c'est pour cela qu'elle ne sera pas détaillée ici :) Je vous conseil juste de n'installer que le système standard (une invite vous proposera d'installer, avec, divers serveurs, environnement de bureau, etc. Ne prennez que "Système  Standard").

L'installation est terminée ! :) Maintenant, nous allons définir l'ip en statique, histoire de ne pas avoir de mauvaise surprise :p

Editez le fichier /etc/network/interfaces avec votre éditeur préféré (vi, vim, nano, ...), et mettez ceci :

# This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

# The loopback network interface
auto lo
iface lo inet loopback

#eth0 is enabled during initrd
auto eth0:0
iface eth0:0 inet static
        address xxx.xxx.xxx.xxx
        netmask 255.255.255.0

Ou xxx.xxx.xxx.xxx sera l'ip que vous aurez définit (à vous d'adapter le netmask ensuite). Nous récapitulerons toutes ces informations dans le prochain article.

Et bien voilà ! Votre nouvelle Debian est prête à subir des attaques d'apt !

Le prochain article récapitulera les différentes informations nécéssaires, qui seront récapitulées au début de chaque tutoriels.

Si vous avez des questions/conseils, n'hésitez pas !

Filed under  //  Debian   Howtos   Scripts   Unix/Linux   host-only   installation   lenny   pré configuration   server   virtualbox   vmware   web  
Posted by Cyril Nicodème 

Summer holiday, work plan

On one of my previous post, I listed the todos for this year.

Actually, I've done the beginning of the cms (yes, I have a lot to do on this project) and I nearly to finish the Fcpe90 website.

For the moment (June 2008), I have to finish the Fcpe website, the Supinfo project and the exams. After that, I have to write somes tutorials on the Security Labs for my school and the holidays will start.

From July to October 31st, I have to :
  • Work on my webmail
  • Set up a mail server to use with
  • Create something to make the website realisation more easier

Lot's of work for these 4 month !

And from November to December, maybe starting to write my book ?

This year will be heavy of project :)

Filed under  //  General   fcpe   holiday   mail   project   web   year  
Posted by Cyril Nicodème 

web 2.0 master's degree

I am

Media_http3bpblogspot_hjhqb

So easy ! ;)

Filed under  //  2.0   Development   degree   master   web  
Posted by Cyril Nicodème