J’utilise aujourd’hui les services Google à grande échelle. J’ai plusieurs compte Google Apps, avec lesquels j’utilise des dizaines de services. Mon unique navigateur est depuis des années Firefox dont je suis très content, mis à part quelques « détails ».

J’ai déjà testé Chrome, il m’a plu, mais sans me convaincre de me détourner de Firefox qui je pense correspond mieux à mes attentes, surtout en termes d’idéologie.

J’ai appris hier qu’une version offline de Gmail multicompte était disponible sur Chrome sous forme d’application, j’ai sauté le pas et j’ai été rapidement séduit.

Une discussion s’est engagée sur Twitter entre @zeroload qui m’a soufflé l’info, @jwajsberg qui a lancé le débat et @rik24d qui l’a enrichi. Le sujet me semble très intéressant, mais je reviens un peu tard dans la discussion et le format de 140 caractères ne me suffit pas pour ce sujet, voilà donc mon point de vue sur les différentes thématiques abordées.

Neutralité

Tout part de là, l’application ne fonctionnant que sur Chrome remet en cause la neutralité. Je n’ai plus le choix de mon navigateur pour utiliser un service web.
Je suis à 100% d’accord sur la théorie, c’est vraiment dommage, voire inadmissible.
C’est peut être moins grave dans mon cas car je ne switche pas d navigateur, je continue d’utiliser Firefox, je ne switche que les services Google, pour bénéficier d’une meilleure intégration.
Mais clairement la démarche est nuisible au web.

Appli cross browser

Il n’y aurait à priori pas de soucis technique pour rendre l’appli cross-browser. Si c’est vrai c’est d’autant plus grave, Google bloque donc sciemment certaines fonctionnalités pour favoriser son navigateur. N’est il pas assez bon pour convaincre seul ?

Libre concurrence

Google fait donc la promotion d’un produit par un autre, ce qu’il reprochait à Microsoft de faire en livrant par défaut IE avec Windows.
Bon, ok il ne s’agit que du mode offline, Gmail est disponible depuis n’importe quel navigateur, mais il fausse la concurrence et c’est critiquable !

Et en face ?

Le problème est le même chez Apple ou Microsoft et les exemples sont légions. Le problème est général, et on peut difficilement s’en plaindre si on l’accepte. C’est là que je suis le moins clair avec moi-même, et ou je ne vois que mon intérêt personnel à court terme.

Desktop ou appli embarquée ?

Le débat rebondit ensuite sur la différence entre une application desktop ou appli web embarquée. Et cela change quelque chose à mes yeux. Je considère finalement plus cette application comme faisant partie de l’écosystème Chrome, que d’une appli web. Chrome est ici plus qu’un navigateur, c’est aussi un conteneur d’application. Il sert de support comme j’utilise certaines application avec [firefox ?].

J’ai d’ailleurs un avis mitigé sur les apps-stores, et je préfère souvent un site web à une appli si celle-ci n’apporte rien de plus. Pourtant dans bien des cas j’utilise l’appli qui apporte un plus ergonomique et fonctionnel et n’est pas forcément multiplateforme.

Que penser de tout cela ?

Je vais tester pour voir si l’usage que m’apporte cette version offline vaut le détour, mais j’avoue que pour travailler dans le train c’est bien tentant.
Cela me permet aussi d’utiliser Firefox pour de véritables pages web, et Chrome pour des applications avec certainement plus de réactivité car j’ai maintenant deux logiciels qui se partagent la tâche. J’ai aussi moins d’onglets dans chacun et je serais probablement moins distrait par les notifications de l’un ou de l’autre.

Pour aller plus loin

Et si on me demandait mon avis, j’irai encore plus loin, @davidbgk avait abordé le sujet aux RMLL Nantaises il y a quelques temps sur un angle intéressant, il souhaitait évidemment cette qualité de service des applis mais avec du logiciel libre auto hébergé, hackable… Je suis évidemment un grand fan de cette idée. Ce serait encore mieux ! On peut rêver de beaucoup plus mais on est tout de même tributaire de l’existant.

Chrome n’est donc pas pour moi un navigateur web mais bien un conteneur d’application, mais je dénonce clairement la méthode utilisée ici par Google ! Laissez nous le choix !

Merci à Vincent, Julien et Anthony pour ce débat, j’attends vos commentaires pour clarifier encore le sujet

Photo de ecstaticist depuis Flickr

Sur le même thème

• Maquettage avec Pencil Sketching
• Bien utiliser Javascript
• Les plugins Firefox : Firebug
• Les plugins Firefox : Colorzilla
• Les plugins Firefox : FoxyProxy

Photo de robertobas depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer TileTabs pour Firefox

Présentation

TileTabs est une extension qui permet d’afficher plusieurs pages web côté à côte sur un seul écran. Utile pour comparer deux pages, saisir des infos sur une pendant que l’on lit sur une autre… Avec le scrolling synchronisé c’est tip top !

On peut afficher les pages verticalement, horizontalement ou en mixant ces deux modes pour un rendu vraiment personnalisable, sans limitations !

J’en utilisais une équivalente avec Firefox 3, mais, la disposition de la barre d’adresse par rapport aux onglets limitait grandement les possibilités. C’est désormais du passé, il manque à mon sens juste quelques options de drag and drop et une utilisation accrue des couleurs sur les onglets pour mieux se repérer…

Conclusion

A utiliser dès aujourd’hui pour améliorer l’ergonomie de votre outil principal, augmenter votre productivité, mais, attention à bien surveiller la concurrence et les nouvelles fonctionnalités qui devraient découler des nouveaux usage de cette nouvelle mouture de Firefox. L’essayer c’est l’adopter, mais si vous trouvez mieux, n’oubliez pas de me prévenir !

Sur le même thème

• Les plugins Firefox : Colorzilla
• Les plugins Firefox : Firebug
• Les plugins Firefox : XRefresh
• Maquettage avec Pencil Sketching
• Les plugins Firefox : FoxyProxy

Photo de exquisitur depuis Flickr

Présentation

Mon besoin se limite au maquettage web, et Pencil Sketching à une belle bibliothèque de composants web. On peut également y importer d’autres collections d’objet ou de cliparts pour faire des diagrammes.
L’installation est simplifiée au maximum, et la prise en main immédiate. Quelques essais rapides m’ont convaincu.

Points forts

Une application comme je les aime, utilisable sur n’importe quelle machine, avec une prise en mais rapide…

• Licence GPL version 2
• Gratuit
• Mutli plateforme (Windows, MacOS, Linux)
• Environnement graphique intuitif
• Bibliothèques graphiques variées (mobile, icônes…)

Fonctionnalités

• Outils pour créer des diagrammes et faire du prototypage
• Documents multi-page avec liens entre les pages
• Edition de texte riche
• Installing user-defined stencils and templates
• Opérations standards : superpositions, alignements, rotations,…
• Collections d’objets extensibles
• Exports au format HTML, PNG, Openoffice, Word et PDF.

Documentation

Une documentation basée notamment sur des screencasts permet de rapidement prendre en main une application naturellement intuitive.

• Tutoriel vidéo sur Pencil Sketcher

Bibliothèques graphiques (pencils)

Une dizaine de bibliothèques permettent d’étendre les possibilités graphiques du produit, et d’autre devraient venir compléter la gamme.

• Bibliothèques pour Pencil Sketching

Plugin pour Firefox

Ce logiciel est distribué de plusieurs manières. Soit en application stand-alone telle que je vous l’ai présentée, soit en plugin de Firefox. Elle est dans ce cas disponible sur le site d’extension du navigateur :

• Le plugin Pencil Sketching pour Firefox

Site officiel du projet

• Site officiel du projet
• Le projet sur Google Code

Conclusion

Un outil prometteur à tester ! Je vous en dit plus dès que j’aurai pris le temps de tester…

Sur le même thème

• Les plugins Firefox : XRefresh
• Bien utiliser Javascript
• Les bons outils pour PHP (partie 2)
• Utiliser Chrome et violer la neutralité ?
• Recette & environnements de test

Photo de Darrren Hester depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox et sur le site de l’éditeur :

• Installer Firebug pour Firefox
• Voir le site de l’éditeur

Il n’existe qu’une version pour Windows et OSX pour le moment mais une version Linux devrait suivre.

Présentation

XRefresh est un plugin développé pour les intégrateurs. Pour tester des mises en pages et des modifications de feuilles de styles, on relance sans cesse son navigateur pour rafraichir notre page. Xrefresh peut le faire pour vous !

Ce plugin nécessite l’installation d’un logiciel pour Windows, nommé Windows monitor. Celui-ci scanne les répertoires de sources que vous lui indiquer à la recherche de modifications sur les fichiers. Dès qu’il en détecte une il passe le relais au plugin qui se charge de modifier la page en conséquence !

Il faut noter que ce plugin peut également gérer des ajout en Javascript, mais ne peut pas supprimer des fonctions déjà chargées en mémoire.

Conclusion

Même si c’est idéal avec deux écrans, avec un seul grand, il y a déjà moyen de bien en profiter. Au final c’est plus simple que d’éditer les propriétés CSS directement dans Firebug.

Sur le même thème

• Les plugins Firefox : Firebug
• Outils : Edition de fichiers avec Notepad++
• Outils XML : Cooktop
• Les plugins Firefox : Colorzilla
• Comparaison et fusion de fichiers et de dossiers

Voici donc aujourd’hui une extension pour Firefox, qui permet d’avoir tout un tas d’outils sous la main directement dans le navigateur : Colorzilla.

Photo de Richard0 depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer Colorzilla pour Firefox

Présentation

Colorzilla est un outil qui permet de zoomer sur la page pour sélectionner une couleur et la copie automatiquement dans le presse papier, vous n’avez plus qu’à la coller dans votre code ! Il extrait les couleur d’une page en s’appuyant sur leDOM. Vous pouvez même enregistrer des palettes de couleurs et les partager.

L’outil est léger et sait se faire oublier. Il est disponible en bas à gauche de votre navigateur ou via un clic droit.

Fonctionnalités principales

• Pipette pour sélectionner les couleurs de la page
• Palette de couleur (simples à enregistrer et partager)
• Analyseur des couleurs du DOM
• Zoom
• Copie automatique de la couleur dans le presse papier
• Gestion de formats de couleurs multiples (Hexadécimal, RVB, TSV…)

Un outil vraiment bien pensé et donc indispensable pour gérer ses couleurs web au quotidien qui mérite ses 5 étoiles.

Sur le même thème

• Les plugins Firefox : XRefresh
• Les plugins Firefox : TileTabs
• Les plugins Firefox : FoxyProxy
• Navigateur Web standard : Firefox
• Les plugins Firefox : Firebug

Photo de batega depuis Flickr

Fonctionnalités

Il fonctionne pourtant parfaitement, je l’utilise depuis 5 ans sans problèmes sous Windows. Voici ses principales fonctionnalités :

• Édition de documents XML, DTD, et XSLT
• Coloration syntaxique du code XML, DTD, et XSLT
• Vérification de la validité du code XML
• Indentation automatique du code
• Test de feuille style XSLT
• Test d’expressions XPATH
• Formatage XML avec Tidy
• Léger et peu intrusif

Il reste à ma connaissance le seul outil gratuit et relativement complet pour l’édition de fichiers XML. Il existe aussi la solution d’Eclipse et de plugins que j’utilise également avec satisfaction, mais de façon plus basique.

Je teste actuellement le plugin Eclipse WTP.

Aide !

Je suis donc à la recherche d’un éditeur ayant les mêmes fonctionnalités, gratuit, si possible open-source et multi-plateformes afin de pouvoir l’utiliser à la maison comme au travail. Qu’utilisez vous pour éditer vos fichiers XML/XSL ?

Sur le même thème

• Outils : Edition de fichiers avec Notepad++
• Les plugins Firefox : XRefresh
• Comparaison et fusion de fichiers et de dossiers
• MySQL GUI Tools
• Navigateur Web standard : Firefox

Il faut bien avoir en tête que ce sont les petits gains par ci par là qui feront la différence. Cela vous demandera finalement assez peu de travail pour les premiers résultats et beaucoup plus pour arriver à un résultat parfait. Mais même sans pousser la démarche jusqu’au bout, l’effet sera bénéfique en termes d’audience, et votre taux de transformation devrait augmenter lui aussi.

Voici donc quelques conseils, et quelques références afin de maîtriser le sujet

Photo de GemMoth depuis Flickr

L’optimisation c’est quoi ?

On peut voir dans un premier temps l’optimisation comme la mise en œuvre des moyens disponibles pour améliorer l’existant. Un second temps permet d’accentuer encore les performances en ajoutant de nouveaux moyens. Nous traiterons uniquement du premier point ici. Changer d’hébergeur ou de serveur pour augmenter vos performances est un solution, mais avant cela tout un panel de techniques permet de faire mieux avec les mêmes ressources.

Quelques statistiques

La taille des pages a plus que triplé en 5 ans, passant de 90Ko à 310Ko. Dans le même temps on a aussi doublé le nombre de composants externes par page (de 25 à 50)Une page web c’est en moyenne 500 mots et 600 balises HTML ! Si l’on ajoute a cela que le nombre de connexion RTC est encore non négligeable aux États-Unis par exemple.

Perdre 500ms c’est perdre 20% de trafic pour Google et réduire de 25% le poids de la page c’est gagner 25% d’utilisateurs à moyen terme pour Google. Augmenter la latence de 100ms c’est perdre 1% de ventes pour Amazon. Pour Yahoo! perdre 400ms c’est avoir 5 à 9% d’abandon en plus.

A partir de 4 secondes d’attente on perd massivement les visiteurs…

Que doit on améliorer ?

Les améliorations à prévoir sont au niveau du paramétrage du serveur, de la qualité du code, de choix techniques, de la gestion des composants web…

Des outils sont là pour vous aider à identifier les points importants parmi lesquels on trouve des plugins Firefox :

• Yslow
• Google Page Speed

Et des sites de mesure de performance :

• site-perf
• IBM Page Detailer
• Web Pagetest

Notez que ces derniers pourrons vous permettre de tester votre site depuis l’autre bout du monde et voir les impacts que cela a sur votre site.

Deux règles principales pour la performance des sites web sont de réduire le nombre de requêtes HTTP et de limiter la taille des données qu’on télécharge. Voyons cela plus en détail.

Optimisation de la configuration du serveur

La mise en cache

La mise en place d’un cache côté serveur est une bonne chose et permettra de fournir un contenu plus rapidement à l’internaute, mais le protocole HTTP permet lui aussi quelques prouesses. Il est efficace pour la moitié des utilisateurs qui affichent une première page de votre site. Soit parce qu’ils sont déjà venus auparavant ou parce que vous partagez des ressources avec d’autres sites via des CDN.
Dès la deuxième page de votre site il est bénéfique pour 80% des utilisateurs, les 20% restants ayant par exemple désactivé leur cache.

Configurez donc votre serveur pour qu’il envoie des indications de mise en cache au navigateur.

La compression des données

On peut gagner entre 50 et 90% du poids d’une page pour une occupation serveur de 5%. Si votre serveur le permet en terme de ressources, le bénéfice sera immédiat, et encore plus pour les connexions lentes.

• Tests de compression de pages web
• Visualiseur de ressources réseau

ETags

Désactivez les ETags si le site est en cluster. Leur performance est alors très aléatoire. Si vous n’avez pas de cluster, vous pouvez les laisser, même si YSlow vous fait la remarque.

Impacts de la latence réseau

Avec un temps de latence avec le serveur de 20ms, pour 25 requêtes externes on perd donc une demi seconde ! Et encore le temps de latence est plus souvent entre 30 et 60 ms. On peut cependant relativiser un peu car la parallélisation des téléchargements permet de limiter cet effet.

Il est donc important de limiter le nombre de composants à charger par page.

L’utilisation de connexions persistantes sur des serveurs statiques (CDN) paraît être un bon moyen de limiter les effets de la latence, mais son paramétrage peut être délicat et dépends de votre cas particulier. L’abus de cette techniques pourrait avoir l’effet inverse en engorgeant le serveur de connexions persistantes inutiles.

Pour la concaténation de vos fichiers, un module d’Apache permet de faire le travail côté serveur, je ne l’ai pas testé, mais j’attends vos retours sur le sujet dans les commentaires :

• Mod_concat

Optimisation du code source

HTML

Un code standard limite le travail de l’interpréteur HTML, par rapport à un code illisible que le navigateur devra corriger à la volée.
Limiter la profondeur du DOM pour limiter le reflow, c’est à dire la réorganisation de la page par le navigateur en cas de changements au niveau de la structure de la page. Pour les tableaux vous pouvez utiliser le mode de rendu fixe des tableaux HTML pour limiter le reflow.

Vous devez limiter les iframes qui sont coûteuses en termes de performances, même vides.

CSS

Pour les frameworks CSS, utiliser un cache central (google, yahoo…) permet de partager un cache avec tous les autres utilisateurs du CDN. Ainsi il y a de fortes chances pour que vos librairies soient déjà en cache dans le navigateur de votre visiteur.

Mettre les scripts en début de page pour que le navigateur puisse faire la mise en page le plus tôt possible.
L’utilisation conjointe de scripts externes minimisés, permet de gagner jusqu’à 25% du poids des feuilles de style.

Ne pas utiliser @import pour les CSS, moins performant et ne pas utiliser les filtres CSS, non standard et très coûteux en ressources. Si vous avez des modifications CSS à faire, faites les d’un seul coup pour éviter le reflow et non pas dans une boucle !

Javascript

Pour les bibliothèques génériques (jQuery, Dojo…) l’utilisation d’un cache central (google, yahoo…) permet comme pour les CSS de partager un cache avec tous les autres utilisateurs du CDN.

Pour optimiser encore mettez les scripts en fin de page. Le navigateur pourra afficher la page correctement avant de les charger, et l’utilisateur pourra naviguer avant la fin du chargement. Le temps qu’il interagisse avec la page, le Javascript sera chargé.

Comme pour les CCS, des scripts externes minimisés, permettent de gagner jusqu’à un tiers du poids des fichiers.

• CSSOptimiser
• CleanCSS

Et dans vos scripts utilisez des sélecteurs précis basés sur l’id et pas sur les classes css, l’identifiant étant unique la navigateur retrouve plus facilement la balise demandée; que si il doit analyser toutes celles de la page.

Ajax

Ajax permet d’améliorer le ressenti utilisateur en limitant le rechargement de la page au strict minimum. C’est donc une bonne piste d’optimisation, mais attention à le faire le mieux possible. Pour cela, envoyer les requêtes AJAX avec la méthode get et utiliser le cache de requête HTTP.
Pour le format de données vous pouvez utiliser JSON ou XML, les deux solutions ont leurs avantages et inconvénients, mais sont bien plus performantes que d’envoyer du code HTML pur !

Optimisation des images

Les formats d’image

En JPEG on peut gagner jusqu’à 90% du poids d’une image avec une perte acceptable (compression autour de 55, à tester car chaque logiciel implémente sa propre échelle de compression). Idéal pour les photos.

En PNG on peut gagner entre 75 et 90% du poids de l’image sans perte. Idéal pour des images avec du texte. Attention à prendre du PNG8 et non pas 24 !

Le GIF ne devrait jamais être utilisé, sauf éventuellement pour du GIF animé.

Sprites et métadatas

L’utilisation des sprites, permet de diminuer l’impact du temps de latence et le poids des images. Le poids du sprite généré est inférieur à la somme des images qui le composent !

• Sprites CSS : Meurs, découpe d’images, meurs !
• CSSSprites
• SpriteGen

La suppression des metadata des images avec Smushit, Optipng, Pngcrush ou PunyPng apporte un gain de 15% environ du poids des images en supprimant les données inutiles dans un contexte web des photos.

• PNGCrush
• OptiPNG
• PunyPNG

Favicon

Même si il n’est pas spécifié, les navigateurs le cherchent et chargent une page 404 si il n’est pas présent. Cela peut donc être très coûteux, surtout si votre page d’erreur personnalisée est lourde.

Ma référence pour avoir des information et des tests sur le traitement des images :

• CSS-IG : Optimisation Web, format PNG

D’autres pistes d’optimisation

Il faut à tout prix limiter les redirections sur la page d’accueil, cela augmente la latence et n’est souvent qu’un mauvais palliatif à une solution plus pérenne. Ce n’est d’ailleurs pas bon non plus pour votre référencement.

Les cookies

Un cookie est envoyé avec chaque requête http, il faut limiter strictement leur taille, un cookie de 1ko retarde la réponse de 16ms en moyenne, avec 50 composants dans la page, on gagne donc 0,8s ! Il faut donc si vous le pouvez limiter les cookies aux sous domaines afin qu’il s n’impactent pas le téléchargement des autres ressources. En utilisant un CDN ou un sous domaines pour les données statiques, vous règlerez le problème.

DNS

Le temps de résolution d’un domaine tourne autour de 30ms. Multiplier le nombre de domaine permet de paralléliser les téléchargements. Certains « vieux » navigateurs ne téléchargent que deux ressources simultanément, mais les plus récents en prennent 4 fois plus en moyenne. Limiter le nombre de domaines à 4 est un bon compromis.

Buffer

Il est important également d’envoyer votre buffer le plus rapidement possible. L’utilisateur verra sa page commencer à se charger plus rapidement. Son ressenti sera bien meilleur, surtout si les temps de génération de votre page sont longs.

Références utiles

Une des meilleures références sur le sujet est en français. Vous y trouverez beaucoup d’explications

• Le blog d’Éric Daspet sur les performances web

Les autres en anglais sont aussi de très bonne facture :

• Les bonnes pratiques par Yahoo
• Les bonnes pratiques par Google
• Le blog de Steve Souders

Conclusion

Une fois tous ces éléments mis en place, votre site doit avoir retrouvé de sa vigueur et si tout n’est pas encore parfait, il est peut être temps de passer à l’étape deux. Votre site à probablement besoins de moyens spécifiques, mais ces conseils lui sont déjà profitables et sont suffisants pour la plupart des projets web.

un livre sur le sujet devrait paraitre bientôt, je ne manquerai pas de vous tenir informé !

Merci à Eric Daspet de m’avoir ouvert les yeux sur ce sujet aussi utile que passionnant.

Sur le même thème

• Les générateurs de sprites CSS
• Bien utiliser les feuilles de style (CSS)
• Recette & environnements de test
• Utiliser Chrome et violer la neutralité ?
• Les plugins Firefox : Colorzilla

Photo de Frédéric de Villamil depuis Flickr

Définitions

Javascript ou JScript, suivant le navigateur, est un langage de script orienté objet ou plus exactement orienté prototype qui s’exécute côté client, sur la machine de l’internaute. Il est issu de la norme ECMAScript.

• La définition de Javascript sur Wikipédia
• La définition d’ECMAScript sur Wikipédia

Historique

Javascript a été créé par Netscape en 1995 et mis en place dand Netscape Navigator dès 1996. Microsoft réagit rapidement et implémente alors JScript dans son navigateur. Netscape propose son implémentation à l’Ecma International pour le standardiser, ce qui sera fait en 1997.

Depuis Adobe a lui aussi créé sa propre implémentation du standard, ActionScript, utilisée dans Flash, et le standard évolue régulièrement pour apporter de nouvelles fonctionnalités.

Toutes ces implémentations sont quasiment respectueuses du standard, mais pas entièrement compatible entre elles. Les différences sont cependant minimes et l’utilisation d’un framework Javascript permet de ne pas se préoccuper de ces différences.

Ou apprendre ?

Pour bien débuter, Openweb propose une belle présentation du langage qui pourra à l’occasion servir d’aide mémoire. Je vous conseille également les articles sur le sujet de l’excellent Pompage, qui explique très bien comment écrire un code Javascript non-intrusif afin de ne pas gêner les utilisateurs qui le désactivent ou utilisent des navigateurs alternatifs sans Javascript comme les lecteurs d’écran.

• Tutoriel ECMAScript sur OpenWeb
• Tutoriels Javascript sur Pompage.net

Je n’ai pas d’autres ressources sous la main pour apprendre le JS, mais c’est un langage objet qui peut aussi être utilisé de façon procédurale, les habitué des ces techniques s’y retrouverons vite, pour les autres, l’apprentissage sera favorisé par un livre récent, mais là aussi, je n’en ai pas en référence. J’attends donc vos commentaires sur le sujet.

Documentation

La documentation est disponible sous différentes formes, je vous conseille les suivantes qui sont claires et complètes.

• Documentation Javascript de mozilla
• Documentation ECMAScript officielle

Méfiez vous des sites spécialisés en javascript « procédural » et qui ne proposent que des bouts de scripts, si ils étaient intéressants il y a quelques années, l’utilisation d’un framework est aujourd’hui une solution plus pérenne.

Questions / Réponses

Et comme la documentation ne suffira pas, la Faq de developpez.com et le forum Javascript d’Alsacréation devraient vous permettre de solutionner vos problèmes.

• Faq Javascript de Developpez.com
• Forum Javascript d’Alsacréation

Les frameworks et bibliothèques Javascript

Elles sont à l’origine du renouveau de Javascript car elles simplifient grandement le développement. Elles permettent de ne pas réinventer le roue en permanence, et permettent des effets très « web 2.0″ qui améliorent l’ergonomie et l’expérience utilisateur. Quelle que soit celle que vous choisissez les fonctionnalités sont en partie équivalentes, et le résultat dépendra surtout des plugins que vous pourrez installer ou des développements que vous ferez.

Pour simplifier, les plugisn permettent à l’utilisateur lamda de rapidement avoir l’effet voulu, mais pour un résultat plus rapide ou plus précis fonctionnellement, il faudra écrire son propre code.

J’utilise principalement JQuery avec JQueryUI pour les effets graphiques et Mootools. Ils sont simples à utiliser pour mettre facilement en place des effets simples sans trp de connaissances, ou pour des développements plus complexes avec une bonne expérience en JS.

• JQuery
• JQuery UI
• Mootools

Il en existe plein d’autres avec parmi les plus connus :

• Prototype
• Dojo Toolkit

Pour vous aider dans votre choix, des comparatifs existent sur Internet, Bestwebframeworks devrait vous aider dans cette tâche.

Outils

Pour déboguer vos scripts je vous conseille les extensions Firefox, en particulier Firebug que j’utilise en quotidiennement.

• Installer Firebug pour Firefox
• Installer Venkman pour Firefox

Je déborde un peu du sujet en abordant l’optimisation de code. Pour améliorer le temps de chargement de vos scripts, n’hésitez pas à utiliser des bibliothèques disponible sur les CDN de Google ou Yahoo par exemple et de compresser votre code avec Compressorrater.

• Compressorrater

Vous voilà avec l’essentiel des connaissances pour travailler sereinement avec Javascript.
Et pour ceux qui veulent creuser le sujet, je vous conseille une discussion sur l’implémentation de Javascript coté serveur sur Linuxfr.org.

Encore une fois je n’ai pas trouvé de photo illustrant parfaitement « Javascript », alors celle-ci avec ses branches tortueuses me rappelle un peu le Javascript approximatif d’il y a quelques années… C’est léger comme explication, mais c’est tout ce que j’ai, et puis la photo est belle, ça suffit non ?

Sur le même thème

• Les plugins Firefox : Firebug
• Les plugins Firefox : TileTabs
• Bien utiliser les feuilles de style (CSS)
• Bien développer en PHP (partie 1)
• Bien écrire HTML & XHTML

Photo de Hamed Saber depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer Firebug pour Firefox

Présentation

Firebug permet d’infiltrer le code source de votre page web afin de vérifier ce qui s’y passe, aussi bien pour le DOM, le code HTML, les CSS, le Javascript ou les requêtes AJAX. Vous pourrez même agir en direct sur le code et voir les effets de vos modifications instantanément.
Pour cela Firebug est doté d’un débogueur, d’une console d’erreur, et d’une ligne de commande.

Fonctionnalités principales

Pour HTML et CSS, vous pouvez afficher le code lié à chaque balise HTML, et voir toutes les propriétés définies que ce soit directement ou par héritage. En modifiant ces valeurs vous pourrez vous rendre compte des changements de rendu immédiatement.

Coté Javascript vous pourrez ainsi visualiser le code lié à la page et le suivre pas à pas dans son exécution. Les erreurs sont visibles dans la barre d’état et affichées dans la console. Vous pourrez également interagir avec Javascript grâce à la ligne de commande.

AJAX bénéficie aussi de fonctionnalités bien pratiques. Vous pouvez ainsi visualiser les requêtes envoyées et les réponses obtenues en temps réel.

Le profilage d’application est également facilité avec un outil graphique qui permet de visualiser les requêtes HTTP et les temps de réponse qui en découlent.

Tutoriel

L’extension est tellement complexe et puissante que je vous recommande la lecture d’un très bon tutoriel :

• Tutoriel Firebug

FirebugLite

Une version plus légère mais tout aussi pratique peut être embarquée dans d’autres navigateurs comme Internet Explorer, Opéra ou Safari. Utile donc pour finaliser votre développement sur ces environnements.

• FirebugLite

Les extensions

Firebug à beau être une extension, cela ne l’empêche pas d’être extensible ! D’autres extensions Firefox étendent encore les possibilités de Firebug parmis lesquelles on retrouve :

• Firecookie : pour gérer les cookies
• Firediff : pour voir les différences entre deux états
• FirePHP : pour déboguer votre code PHP
• FireRainbow : pour ajouter la coloration syntaxique au Javascript
• YSlow : pour optimiser le temps d’affichage votre site web
• SenSEO : pour optimiser votre référencement naturel

Je reviendrais bientôt sur certaines de ces extensions qui méritent un article spécifique. En attendant vous en trouverez en tout plus d’une vingtaine sur le site de l’éditeur :

• La liste complète des extensions de Firebug

Et si vous n’en avez pas encore assez, il ne vous reste plus qu’a créer votre propre extension pour Firebug, pour cela rendez vous sur le groupe Google « Firebug Working Group » créé à l’occasion.

Voilà, vous avez désormais les cartes en main pour déboguer facilement vos applications. Bon courage !

Sur le même thème

• Les plugins Firefox : XRefresh
• Bien utiliser Javascript
• Les plugins Firefox : TileTabs
• Les plugins Firefox : Colorzilla
• Bien utiliser les feuilles de style (CSS)

Simple à installer, intégrés dans le navigateur, multiplateforme, ils sont d’une utilisation souvent très simple mais apportent non seulement des fonctionnalités inédites, mais un confort d’utilisation exemplaire. On y gagne en efficacité, productivité, inventivité… Que du bonheur donc…

Photo de Stuck in Customs depuis Flickr

pourquoi faire ?

Je commence donc avec FoxyProxy, un gestionnaire avancé de configuration de proxy qui remplacera avantageusement celui plus simpliste de Firefox si vous avez des besoins plus élaborés. pour ma part le besoin s’est fait ressentir chez un client qui possède un réseau énorme. La configuration automatique du proxy ne me convenait, mon but était donc de paramétrer au plus juste les règles d’utilisation du serveur proxy.

Comment ca marche ?

Le module se configure à partir de listes blanches et noires, et de définitions de serveurs proxy.

Vous définissez ainsi quels sites (définis soit par ip, par plage d’ip, par nom ou expression régulière) doit utiliser quel proxy ou se connecter en direct à Internet. Votre navigateur sait ainsi en analysant votre requête de quelle manière il va se connecter au réseau.
Vous pouvez bien entendu déclarer un accès par défaut au réseau, et activer ou désactiver une règle d’un simple clic.

FoxyProxy peut aussi vous permettre d’accéder à une ressource réseau bloquée (dans certains pays par exemple) en passant par un serveur proxy public…

Aide & Support pour la configuration

Vous trouverez certainement réponse à vos question dans la FAQ de Foxy Proxy.

Un forum d’entraide, d’échange d’astuces et de soumission de bugs vous permettra de répondre à tous les autres problèmes que vous pourrez rencontrer.

Ou le trouver ?

Vous pouvez le trouver sur l’indispensable site qui regroupe tous les modules de Firefox, ou directement à l’adresse suivante :

• Installer FoxyProxy

Sur le même thème

• Les plugins Firefox : Colorzilla
• Navigateur Web standard : Firefox
• Les plugins Firefox : XRefresh
• Outils : Edition de fichiers avec Notepad++
• MySQL GUI Tools