n1c0

Aller au contenu | Aller au menu | Aller à la recherche

Construire des sites extensibles

Le développement d'un petit site web est relativement aisé, même pour un débutant. Quelques heures dans les docs de PHP et MySQL suffisent pour faire un site dynamique qui pourra supporter quelques centaines de milliers de connexions par jours (et c'est déjà pas mal). En règle générale, on adapte la taille du serveur au nombre d'utilisateurs et avec quelques centaines d'euros par mois on peut avoir de belles machines.

Le problème survient quand un seul serveur n'est plus suffisant pour gérer tout le trafic et qu'il n'y a plus d'optimisation possible (algos, cache, bdd,...). Il faut alors répartir le trafic sur plusieurs serveurs et c'est la que les ennuis (ou le fun) commencent. Il faut en effet veiller à la synchronisation de tout ce petit monde ce qui n'est pas forcément trivial. Il n'y a pas de solution prête à l'emploi et une architecture extensible (scalable in english) doit être le fruit d'une profonde réflexion sur les différentes fonctionnalités et technologies impliquées dans le site web.

Sur ce sujet je viens de découvrir un blog très intéressant : High Scalability Building bigger, faster, more reliable websites avec entre autre un article sur l'architecture de Flickr.

Bonne lecture.

Assembla : un repository subversion gratuit

Pour travailler à plusieurs sur du code, rien de mieux qu'un système de contrôle de version, qui permet de synchroniser tout le monde. Les plus connus sont CVS, Subversion et GIT qui sont Open Source.

Si cela vous intéresse, il faut alors

  • soit utiliser votre propre serveur et installer les packages requis
  • soit payer pour abonnement chez un des nombreux fournisseurs
  • soit ouvrir un compte chez Google Code ou SourceForge, c'est gratuit mais cela impose de passer en OpenSource
  • et enfin, si vous n'avez pas de serveur, pas de sous et que vous n'êtes pas Open Source, il vous reste un site, Assembla, qui offre cela gratuitement avec en plus Trac pour la gestion des bugs et un wiki pour communiquer. La limititation à 500 Mo me parait honnête et rien n'oblige à ouvrir le repository au public. C'est à mon avis une bonne solution pour une petite équipe.

MàJ 06 nov 2008 : Je viens de recevoir un mail d'assembla annonçant que la solution privée et gratuite n'était plus supportée et que je devais soit payer, soit rendre mon projet public. C'est assez moche de changer les conditions d'utilisation juste après avoir créé le buzz. Si leur opé marketing a surement permis de faire venir pas mal de nouveau utilisateur, ils sont pour moi complètement décrédibilisés.

Ca me fait penser à Darty qui vient discrètement de changer ses CGV pour imposer une durée minimale d'abonnement de 12 mois reniant ainsi un des 10 points de leur contrat confiance.

Google App Engine

Google App EngineGoogle augmente (encore) sa présence sur le net en proposant aux développeurs une plate-forme de développement pour créer des application web et, surtout, pour héberger cette application sur ses propres serveurs.

Avec ce nouveau service, appelée Google App Engine, il sera donc possible d' héberger son appli au sein de l'infrastructure Google et ainsi bénéficier de la très grande fiabilité de celle ci. Pour être sûr de rallier un maximum de développeurs à sa cause, cette offre sera gratuite pour les sites ayant moins de 5 millions de page vues par mois.

Le framework est, pour le moment, basé sur python mais il sera probablement décliné dans d'autres langages dans quelques temps. Il utilise classiquement une approche MVC et pour se faire un idée, voici une vidéo montrant l'écriture d'une appli web par une des développeurs Google : http://www.youtube.com/watch?v=bfgO-LXGpTM.

YSlow

Tous les developpeurs web connaissent FireBug, l'extension pour Firefox qui permet de debuger du code javascript et de suivre précisément les requêtes effectuées par la page.

Et bien il existe aussi une extension à l'extension : YSlow fournie par Yahoo qui permet de faire une analyse statique sur le différents éléments de la page.

ReCaptcha

Il est rare de voir une idée aussi géniale que celle ci : quitte à demander aux internautes de lire le texte d'une image, ce qui est le principe du captcha, autant lui demander de déchiffrer un texte utile.

Pour ne pas paraphraser l'excellent Louis Naugès, je vous laisse lire son article : ReCaptcha une idée lumineuse.

Accèder à l'historique de internautes

Voici une bien mauvaise nouvelle pour notre vie privée : il est possible de connaitre votre historique de navigation, ou presque, depuis n'importe quel site contenant quelques lignes de javascript.

Je ne donnerai pas l'adresse du site qui diffuse le code prêt à l'emploi mais juste le concept. L'idée est de récupérer la couleur d'un lien pour savoir si il a été visité ou non. Il est ainsi possible de tester des milliers d'adresses en quelques secondes.

Aide au remplissage de formulaire

Avez vous remarquez comment dans YaPa une vous êtes aidés pour choisir votre login.

A chaque lettre entrée dans la case login, une fonction JavaScript valide que le nom d'utilisateur est conforme aux règles en vigueur sur YaPa et affiche si besoin un message d'erreur adapté à la situation. Cela évite que le login soit refusé par le serveur à la soumission du formulaire et fait gagner un peu de temps à tout le monde.

En pratique, pour implémenter ce genre de validation il faut :

  • un endroit pour afficher le message d'erreur. Dans mon cas, il s'agit d'une balise <div></div> avec un style adapté et un id pour la référencer facilement. Cette balise est vide au chargement de la page puisqu'il n'y a pas encore d'erreur.
  • une fonction JavaScript appellé à chaque caractère entré (onKeyUp) qui valide la syntaxe et suivant le cas insère dans la balise en question un message d'erreur ou le supprime.

Voici un exemple de formulaire qui s'auto valide :

<script type="text/javascript">
   function validate()
   {
     var to_validate = document.getElementById("to_validate").value;

     if( ! to_validate.match( someregex ) )
     {
       document.getElementById("input_error").innerHTML = "Input is invalid";
       document.getElementById("submit_button").disabled = true;
     }
     else
     {
       document.getElementById("input_error").innerHTML = "";
       document.getElementById("submit_button").disabled = false;
     }
   }
 </script>
 <form method="post" action="adress_of script_using_the_form">
   <input type="text" id="to_validate" name="my_input" value="" onKeyUp="javscript:validate();" />
   <input type="submit" id="submit_button" value="ok"/>
   <div style="color:red" id="input_error"></div>
 </form>

Google Web Toolkit

Google met à la disposition de tous un framework de developpement Google Web Toolkit qui permet de programmer en Java, GWT s'occupant de traduire le code en JavaScript et HTML

DewPlayer : Un petit player de mp3 à intégrer dans une page web

http://www.alsacreations.fr/mp3-dewplayer.html

C'est une petite appli flash que l'on peut utiliser gratuitement pour streamer du mp3 depuis un site.

TiddlyWiki - a reusable non-linear personal web notebook

C'est tout simplement fantastique un wiki complet qui tient dans une seul page HTML. Ca donne des tas d'idées d'applications ce genre de technologie.

TiddlyWiki - a reusable non-linear personal web notebook

D'autant plus interressant que les mises à jours sont fréquentes et qu'il existe une communauté autour de ce concept ce qui permet de le faire évoluer.

La syntaxe wiki est une des meilleurs que je connaisse. A mon avis, c'est un concept à suivre, ne serait-ce que pour en repiquer certaine idées géniales.