Webaaz » Code http://www.webaaz.com Le développement web de A à Z Thu, 19 Jan 2012 11:40:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Les plugins Firefox : XRefreshhttp://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/ http://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/#comments Thu, 18 Feb 2010 16:28:09 +0000 Martin http://www.webaaz.com/?p=523 Firebug, je vais maintenant vous présenter une extension de ce plugin. En effet, Firebug est très complet techniquement mais extensible. Ainsi ses fonctionnalités sont exploitées par d'autres plugins pour répondre à tout type de fonctionnalité. Glaçons bleus Photo de Darrren Hester depuis Flickr]]> Firefox est la référence incontesté pour les développeurs web. Son rendu est excellent, mais c’est surtout pour la multitude d’outils qu’il propose qu’il fait la différence. Je vous avais déjà présenté Firebug, je vais maintenant vous présenter une extension de ce plugin. En effet, Firebug est très complet techniquement mais extensible. Ainsi ses fonctionnalités sont exploitées par d’autres plugins pour répondre à tout type de fonctionnalité.

Glaçons bleus
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 :

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

]]> http://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/feed/ 0 Bien utiliser Javascripthttp://www.webaaz.com/2009/09/bien-utiliser-javascript/ http://www.webaaz.com/2009/09/bien-utiliser-javascript/#comments Wed, 23 Sep 2009 06:00:00 +0000 Martin http://www.webaaz.com/?p=245 Ajax il permet d'ajouter une couche d'ergonomie supplémentaire à l'interface utilisateur. Javascript s'est "professionnalisé" ces dernières années, au travers de frameworks qui apportent leur simplicité et standardisent les développements. Fini donc les bouts de code que chacun bidouillait dans son coin, aujourd'hui Javascript permet beaucoup plus que cela, encore faut il en connaitre un minimum sur le sujet, c'est ce que nous allons voir. 129 years old tree Photo de Frédéric de Villamil depuis Flickr]]> Depuis l’arrivée du web2.0 avec ses interfaces plus vivantes, le Javascript est de nouveau à la mode.
Souvent utilisé avec Ajax il permet d’ajouter une couche d’ergonomie supplémentaire à l’interface utilisateur.
Javascript s’est « professionnalisé » ces dernières années, au travers de frameworks qui apportent leur simplicité et standardisent les développements. Fini donc les bouts de code que chacun bidouillait dans son coin, aujourd’hui Javascript permet beaucoup plus que cela, encore faut il en connaitre un minimum sur le sujet, c’est ce que nous allons voir.

129 years old tree
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.

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.

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.

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.

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.

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

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.

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.

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

]]> http://www.webaaz.com/2009/09/bien-utiliser-javascript/feed/ 0 La compatibilité du code avec les navigateurshttp://www.webaaz.com/2009/05/la-compatibilite-du-code-avec-les-navigateurs/ http://www.webaaz.com/2009/05/la-compatibilite-du-code-avec-les-navigateurs/#comments Mon, 04 May 2009 13:09:16 +0000 Martin http://www.webaaz.com/?p=50
Photo de rpeschetz depuis Flickr]]> Le sujet de cette semaine est « la compatibilité du code avec les navigateurs », ou le contraire d’ailleurs… Nous allons voir cela dans le détail

Détail de machine à écrire
Photo de rpeschetz depuis Flickr

Historique

Aux débuts du web, l’offre en navigateurs était limitée, très limitée. Le premier à réellement s’imposer est, dès 1995, Netscape Navigator qui devient la référence pour surfer, mais le public est encore limité. Microsoft sort la même année la première version de son navigateur Internet Explorer.

A partir de 2000, avec le développement de l’accès Internet chez les particulier, IE devient pour la plupart des internautes néophytes, le seul moyen d’accéder à Internet sous Windows. On le trouve sur quasiment tout les pc, alors pourquoi faire autrement ? IE grâce à la position dominante de Microsoft s’impose rapidement, c’est le début d’un très long règne…

Qui durera et dure encore… Même si depuis 2005 Mozilla et son navigateur Firefox, grignote tous les mois des parts de marché au géant de Redmond. Aujourd’hui suivant les statistiques, on estime que plus de 30% des internautes utilisent Firefox (70% pour ce blog).

Pour en savoir plus :

Contexte

Si les premiers navigateurs respectaient le code rudimentaire de l’époque, le développement des technologies du web avec l’évolution de l’HTML, l’arrivée du javascript, ou de fonctionnalités propriétaires comme flash, a amené chaque navigateur a implémenter à sa manière toutes ses nouveautés. Chacun voulant à tout prix imposer sa façon de faire aux autres, et tout cela sans aucune concertation. C’est à ce moment que des choix peu judicieux ont étés faits, Microsoft décidant que son navigateurs devait être souple avec la « grammaire » du code HTML et tolérer des approximations dans le code. Ainsi la plupart des erreurs de code étaient interprétées par IE qui les corrigeait. Les développeurs ont ainsi pris de bien mauvaises habitudes.

Par la suite chaque navigateurs ayant ses spécificités dans l’interprétation et la mise en page du code, il a fallu commencer à corriger ces différences, on a ainsi développé différentes versions des sites web, en fonction du navigateur qui affichait la page. Imaginez la charge de travail supplémentaire ! En plus bien souvent les différentes versions étaient contradictoires et arriver au compromis souhaité relevait du défi… Et quand un navigateur implémentait une nouveauté intéressante mais que les concurrents ne l’utilisaient pas, il fallait faire des choix cornéliens aux dépends des internautes.

Et puis… tout a changé…

Ou presque… Disons que en théorie au moins, il y a eu une volonté de faire mieux. LeW3C est arrivé, en fait dès 1994, avec la volonté d’unifier et de normaliser les technologies du web. Ainsi HTML, CSS ou ECMAScript ont étés standardisés. On avait ainsi un modèle à suivre et c’est ce qui à permis à des navigateurs comme Opéra ou Firefox de tirer leur épingle du jeu en promettant un rendu parfait, correspondant exactement au code développé. Ainsi plus de version spécifique, l’utilisateur est libre du choix de son navigateur en fonction du logiciel lui même, de son extensibilité, de son ergonomie ou de sa portabilité…

Firefox est ainsi devenu une référence grâce a un panel d’extensions unique, une ergonomie appréciée et sa portabilité sur les différents OS.
Aujourd’hui Microsoft à senti le vent tourner et s’est remis au travail, lui qui n’avait pas sorti de nouvelle version de son navigateur phare depuis 2001, a depuis 2006 sorti deux nouvelles versions et tente de rattraper le retard avec l’ambition de garder sa place de numéro un et la volonté affichée de respecter les standards. Sur ce point il reste encore beaucoup de travail à Microsoft même si les progrès des dernières versions sont encourageants.

Alors, comment ca marche ?

Aujourd’hui plusieurs façons de faire divergent, mais on sent une évolution et une volonté d’abandonner les mauvaises habitudes du coté des développeurs professionnels du moins, les autres ne cernant pas forcément les enjeux.

Aujourd’hui donc, on voit émerger quelques initiatives visant à ne plus développer de site « compatible » avec Internet Explorer 6. Le but est de casser le cercle vicieux de l’incompatibilité en forçant les utilisateurs à évoluer et passer à la dernière version proposée par leur éditeur. Les navigateurs étant gratuits, le seul points acceptable pour rester dans une version antérieure est un problème de rapidité du PC. Cependant pour les 20% d’utilisateurs de Internet Explorer 6, la plupart peuvent facilement évoluer. Beaucoup de ces anciennes versions sont encore utilisées dans de grandes entreprises qui ne migrent pas pour des raisons d’incompatibilité avec des outils maison spécifiquement développés pour IE6, la migration se fera au fur et à mesure de l’élimination de ces barrières.

Certains sont aujourd’hui beaucoup plus virulents et crient haut et fort qu’ils ne veulent plus des vieux navigateurs à l’instar de plusieurs gros sites norvégiens qui ont lancé une campagne pour éradiquer IE6 dont Framablog se fait l’écho.

Mais beaucoup de Web Agency font encore des sites pour IE6 en 2009 car le client reste le roi, reste sourd aux explications, et ne voit que les avantages à court terme.

Et les bonnes pratiques alors ?

Si il y a quelques années, il était encore « normal » d’arborer un logo « optimisé pour IE6″, aujourd’hui la tendance est plutôt de faire un site conforme avec éventuellement quelques adaptations pour les « vieux » navigateurs. Il apparait aujourd’hui logique de faire un site pour la dernière version d’un navigateur et éventuellement garder la compatibilité avec la version précédente afin de toucher un large public, il n’est donc pas choquant de développer sans penser à IE6. Plus le web sera standard, plus les navigateurs le seront et l’internaute sera gagnant !

Alors si vous hésitez à utilisez une technologie, que vous vous posez des questions sur le support des CSS sur un navigateur, sur l’implémentation de CANVAS ou le support des images PNG, un site recense pour vous les différentes implémentations des navigateurs web.

Conclusion

Les avis sont donc partagés, tout le monde n’ayant pas les mêmes besoins, mais les navigateurs et les développeurs allant dans le même sens, on peut espérer pouvoir développer des sites standards et les voir s’afficher correctement dans les différents navigateurs du marché. D’ailleurs même Chrome le dernier venu respecte déjà très bien les normes du W3C.

Pour ma part, je développe autant que faire se peut en respectant les normes et standards en vigueur, et pour peu que ce soit le souhait de mes clients, mais à titre personnel, je ne m’accorde plus aucune digression, mes sites seront donc dégradés avec des navigateurs ne respectant pas les standards, mais resterons lisibles, et j’espère que cela incitera les utilisateurs à migrer vers une version plus récente, ou un navigateur plus respectueux du travail des développeurs.

Alors pour tenter de dégrader proprement, je vais tenter cette initiative qui me parait intéressante et qui consiste à avoir une feuille de style simplifiée pour IE6 :

Rien n’empêche en plus d’afficher un message explicatif, invitant l’internaute à changer de navigateur, ou au moins de version.

Pour en savoir plus

Sur le même thème

]]> http://www.webaaz.com/2009/05/la-compatibilite-du-code-avec-les-navigateurs/feed/ 2