Webaaz » Design 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 Les plugins Firefox : Colorzillahttp://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/ http://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/#comments Tue, 22 Dec 2009 11:30:19 +0000 Martin http://www.webaaz.com/?p=427 CSS pour au final avoir un rendu le plus agréable possible. 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. Coucher de soleil en technicolor Photo de Richard0 depuis Flickr]]> Dans tout projet web, la gestion des couleurs est une composante essentielle du graphisme. Des premières maquettes jusqu’à l’intégration, nous avons besoin d’outils pour travailler les couleurs, échanger avec les graphistes, gérer nos CSS pour au final avoir un rendu le plus agréable possible.

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.

Coucher de soleil en technicolor
Photo de Richard0 depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de 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

]]> http://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/feed/ 1 Les plugins Firefox : Firebughttp://www.webaaz.com/2009/09/les-plugins-firefox-firebug/ http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/#comments Thu, 03 Sep 2009 08:00:11 +0000 Martin http://www.webaaz.com/?p=230 Firefox. L'une des plus connues et utilisée est Firebug, un condensé de fonctionnalités destinées à vous aider à déboguer et comprendre tout ce qui est lié à l'affichage de votre page. Insecte de couleur feu en Iran Photo de Hamed Saber depuis Flickr]]> Pour le développement web, il existe plusieurs extensions très pratiques pour améliorer la qualité de son code, le déboguer, ou l’optimiser. Elles sont véritablement plébiscitées par les développeurs, et sont en partie à l’origine du succès de Firefox. L’une des plus connues et utilisée est Firebug, un condensé de fonctionnalités destinées à vous aider à déboguer et comprendre tout ce qui est lié à l’affichage de votre page.

Insecte de couleur feu en Iran
Photo de Hamed Saber depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de 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 :

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.

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 :

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 :

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

]]> http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/feed/ 0 Trouver de belles photos pour son site webhttp://www.webaaz.com/2009/07/trouver-de-belles-photos-pour-son-site-web/ http://www.webaaz.com/2009/07/trouver-de-belles-photos-pour-son-site-web/#comments Sun, 26 Jul 2009 19:09:06 +0000 Martin http://www.webaaz.com/?p=174 Photo de Pierre H. depuis Flickr]]> Que l’on tienne un blog perso, un blog technique, un site web tout simple ou un site de e-commerce, on est toujours confronté au besoin d’illustrer un article, une page thématique, un menu… Un site internet sans image, quel que soit le contenu, ce n’est pas très attrayant ! Ainsi nous avons tous l’occasion de rechercher une image pour animer un peu un article et le rendre plus vivant. Mais alors les photos on les trouve ou ? Plusieurs solutions sont possibles, petit tour d’horizon.

Sur les toits
Photo de Pierre H. depuis Flickr

Les photos maison

La solution la plus simple aujourd’hui est encore de faire soit même une photo, de la retoucher et de l’utiliser. Surtout si vous êtes un photographe averti, le résultat sera tel que vous l’imaginiez, et vous pourrez l’afficher sur votre site avec une certaine fierté. Les avantages sont certains en termes de rapidité, de coûts et d’originalité. Cependant ce n’est pas la panacée si vous avez besoin d’une photo de la terre, d’un paquebot en pleine mer ou de votre star favorite. Ou tout simplement si vous êtes incapable de cadrer correctement une photo ou d’éviter les flous même avec un appareil numérique.

Les moteurs de recherche

Alors du coup on se tourne vers son moteur de recherche favori, la plupart proposent même une recherche spécifique pour les images. La recherche avancée permet de filtrer précisément, le type d’image, la taille, la couleur dominante et bien sûr le sujet… C’est effectivement assez pratique, même si les résultats ne sont pas de très grande qualité et souvent pollués par des images sans intérêt. Cependant ces images ne vous appartiennent pas et vous ne pouvez pas les utiliser sans une autorisation de leur auteur. Ce qui n’est pas impossible, mais certainement pas très facile, les crédits photos étant rarement cités sur le web et la photo probablement déjà une copie sans droits…

Les banques d’images

Les banques d’images proposent elles des photos de qualité, souvent de photographes professionnels ou d’amateurs avertis. Via un moteur de recherche interne au site vous trouverez rapidement votre bonheur tant la qualité et la quantité sont au rendez-vous… Les images sont disponibles en très haute définition, ce qui peut être très utile en cas de retouche ou d’utilisation sur un support papier en parallèle du web. Évidemment, tout ceci a un prix et ces magnifiques photographies risque d’être inaccessibles si votre budget est serré. Certains sites proposent ainsi des images à plusieurs centaines d’euros. Le prix est fonction du statut exclusif ou non de la photo, de sa résolution, et des droits qui y sont associés.
Certaines banques d’images proposent des prix cassés avec des photos basse définition, bien suffisant pour un usage web, a partir de un euro. Évidemment à ce prix vous risquez de retrouver cette photo ailleurs sur Internet…

Voici quelque unes des banques d’images les plus connues :

Et si votre besoin de photos est récurent la plupart de ces sites proposent des tarifs dégressifs sur abonnement.

Les banques d’images gratuites

Mais sur Internet on trouve très souvent tout ce que l’on cherche gratuitement à condition de savoir ou chercher. Vous trouverez donc également des banques d’images gratuites ! Le site Flickr permet de stocker ses photos pour le montrer à ses amis ou au monde entier, et une grande partie des utilisateurs laisse ses photos sous une licence assez simple et peu restrictive, la licence « Creative Commons« . La description de la licence explique que les droits sur les photos sont cédés gratuitement à l’utilisateur sous certaines conditions. On simplifie ainsi la réutilisation en s’affranchissant de la demande d’autorisation systématique à l’auteur du cliché.
Les différentes conditions imposent tout de même de citer obligatoirement l’auteur du contenu sous licence Creative Commons, et peut également imposer l’interdiction de modifier l’œuvre, l’interdiction de l’utiliser commercialement, et vous obligez à redistribuer l’œuvre sous la même licence.

Il y a actuellement plus de 100 millions de photos sous licence Créative Commons sur Flickr.

C’est ainsi que je trouve toutes les photos de ce blog, via le site Blue Moutains cité plus bas et son moteur de recherche, qui filtre les photos de Flickr en fonction de leur licence. Je préviens les auteurs des photos qui sont en général content et très fier de voir leur travail reconnu, et avec le lien vers Flickr tout le monde peut aller voir les autres photos de l’auteur. Et bien sûr dès que j’illustrerai mes articles avec mes propres photos je les distribuerai sur Flickr sous licence libre !

Et les droits comment ça fonctionne

Pour avoir plus d’informations sur les droits d’auteur, je vous conseille de lire systématiquement les licences des photos que vous envisagez d’utiliser.

Pour des informations plus générales, le site du ministère de la culture présente un dossier sur les droits

N’oubliez pas que vous devez disposer directement ou indirectement des accords des personnes présentes sur vos photos pour les publier !

Liens utiles

Le petit truc en plus pour retrouver des copies d’une photo, c’est TinEye et le labo de Google qui proposent des fonctionnalités de recherche d’images similaires. Idéal pour savoir si une photo est unique ou pas, ou pour retrouver l’original d’une photo.

Pour plus d’informations sur le sujet je vous propose l’excellent article de Framasoft sur le sujet : La gestion des images dans Wikipédia.

Conclusion

Alors il n’y a pas une solution, mais des solutions, à chacun de trouver la sienne ou de les utiliser chacune pour ses avantages suivant les besoins du moment.

Et vous ? Ou trouvez vous vos photos ? Avez vous quelque site de référence sur le sujet qui mérite que l’on s’y arrête ? Comment trouvez vous les photos d’illustration de ce blog ? Je vous invite à lire tout mes articles si vous ne les avez pas encore vues !

Sur le même thème

]]> http://www.webaaz.com/2009/07/trouver-de-belles-photos-pour-son-site-web/feed/ 2