Webaaz » Wysiwyg 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 : 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 Outils : Edition de fichiers avec Notepad++http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/ http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/#comments Tue, 24 Nov 2009 06:25:38 +0000 Martin http://www.webaaz.com/?p=336 Photo de PSD depuis Flickr]]> Comme tout développeur vous avez besoin d’éditer souvent et rapidement des fichiers de code. Vous avez un IDE, Eclipse par exemple, mais pour certains types de fichiers, ou pour plus de rapidité, l’utilisation d’un second éditeur plus léger et rapide s’impose.

Je vous propose de découvrir Notepad++. Il ne fonctionne que sous Windows, mais apporte un véritable plus pour cette plateforme dont l’éditeur par défaut est vraiment trop simpliste.

C’est un logiciel gratuit sous licence GPL. Je le trouve idéal car très fonctionnel, simple à installer, rapide à lancer et extensible. Il est donc idéal quand on change souvent de poste et que l’on veut rapidement retrouver ses repères.

Bloc-notes
Photo de PSD depuis Flickr

Fonctionnalités

Notepad++ est un outil très complet, ces principales fonctionnalités sont :

  • Coloration syntaxique (PHP, Java, SQL, CSS, HTML, Javascript, YAML…)
  • Éditeur WYSIWYG
  • Auto-complétion
  • Affichage de fichier et édition multiple simultanée
  • Fonction de recherche avec expressions régulières
  • Auto détection de modifications de fichiers
  • Gestion de macros
  • Zoom
  • Multilingue

Vous trouverez toute la liste des fonctionnalités de Notepad++ sur le site de l’éditeur.

Plugins

Cette liste n’est pas exhaustive car en plus Notepad++ est extensible avec une très belle liste de plugins dont voici les plus intéressants à mon goût :

  • Éditeur hexadécimal
  • Édition de fichier via un explorateur FTP
  • Gestionnaire de tags HTML
  • Correcteur orthographique
  • Réducteur dans la barre de tâches
  • Édition XML (multiples outils)
  • Gestionnaire de plugins

Astuces

Cet outil s’intègre parfaitement à Windows, vous pourrez ainsi le mettre dans le menu contextuel de Windows et y accéder via le clic droit de votre souris ou tout simplement l’utiliser par défaut à la place du bloc-notes de Windows.

Ces astuces sont à voir sur la page de téléchargement de l’application.

Site de l’éditeur & téléchargement

Vous pouvez télécharger Notepad++ sur le site de l’éditeur :

Aide, forum et wiki

Si vous avez besoin d’aide pour débuter avec Notepad++, des forums multilingues et un wiki en anglais répondront probablement à toutes vos questions.

Mon avis

Personnellement, je l’utilise depuis des années sans aucun soucis. Son ergonomie est très bonne, et ses plugins très nombreux permettent de répondre à toutes les attentes. Il est simple mais fonctionnel, vous le trouverez bientôt indispensable.

Et n’oublier pas, Notepad++ est un outil gratuit, pensez à aider le projet en traduisant ou en apportant une contribution financière.

Sur le même thème

]]> http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/feed/ 5 Bien écrire HTML & XHTMLhttp://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/ http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/#comments Thu, 16 Apr 2009 12:09:51 +0000 Martin http://www.webaaz.com/?p=9 HTML et son évolution XHTML. Il est indissociable du web, la plupart des pages sur Internet utilisent ces langages ou d'autres dérivés du SGML. Crayons de couleur
Photo de ooti depuis Flickr]]> Pour un premier article « technique », commençons par l’une des bases du web, le langage de balisage HTML et son évolution XHTML. Il est indissociable du web, la plupart des pages sur Internet utilisent ces langages ou d’autres dérivés du SGML.

Crayons de couleur
Photo de ooti depuis Flickr

Je vais donc vous présenter les différentes ressources de qualité sur le sujet que l’on trouve sur Internet. Le but de cet article est de vous donner toutes les pistes. Vous n’avez plus qu’a les suivre !

Définitions

Historique

La première version de la norme date de 1991, son auteur Tim Berners-Lee préside aujourd’hui le W3C, le consortium chargé de promouvoir la compatibilité des technologies web.

La version actuelle de HTML est la 4.01, c’est une correction de la version 4.0 qui date de 1997. Depuis peu d’évolutions, la version 5 est en préparation. Le seul point marquant de ces dernières années est l’arrivée de XHTML, qui est le portage de HTML en XML. Cette évolution permet notamment de gagner en qualité du code, l’apport de XML oblige à plus de rigueur. Certaines facilité du langage HTML ne sont plus permises, le code est donc plus homogène et les navigateurs interprètent donc plus facilement un code qu’ils lisent mieux.

Les navigateurs récents tels que IE8 ou Firefox 3.x respectent de plus en plus en plus les standard et affichent d’ailleurs de mieux en mieux les pages qui respectent les normes.

A quoi ca sert ?

Le langage HTML ne permet pas de faire le rendu visuel d’un texte. En fait il ne permet que le balisage de celui ci. Ainsi un titre aura une balise de titre. En lisant la source du code, on comprendra qu’il s’agit d’un titre, mais le rendu lui sera fait par les CSS. Vous comprenez bien que sur un Iphone ou sur un écran 20 pouces, le rendu ne sera pas le même, mais notre titre sera toujours un titre.

Vous pouvez ainsi définir les éléments de votre page tels qu’un texte, une image, une vidéo, un formulaire, des liens bien sûr, mais aussi des tableaux des listes…

HTML vous permet ainsi d’afficher votre contenu, mais aussi de questionner l’internaute au travers de champs de formulaire, par des questions ouvertes avec des champs texte, par des questions fermées à réponse simple ou multiple, et même de l’enregistrement de fichier.

Comment apprendre ?

Vous trouverez de multiples cours sur HTML, mais méfiez vous, la plupart présentent un code non standard qui risque d’être mal compris par les navigateurs, et qui risque d’être obsolète dans les navigateurs futurs. Référez vous donc le plus souvent à la norme HTML ou au mémento de Raphaël Goetter par exemple.

L’utilisation du validateur vous montrera également vos erreurs en vous donnant des pistes pour les corriger.

Les normes

Les normes ne sont pas toujours faciles à lire, mais heureusement la traduction française apporte un peu plus de clarté sur certains points techniques.

Les bonnes pratiques

  • Utiliser le doctype approprié
  • Respecter la norme associée au doctype
  • Évitez l’utilisation d’éditeurs WYSIWYG, leur interprétation laisse parfois à désirer
  • Ne pas utiliser de balises HTML « propriétaires »
  • Indenter correctement son code source pour le rendre plus lisible

Outils

Il n’est pas toujours facile d’avoir en tête toutes les propriétés de chaque élément HTML, aussi n’hésitez pas à vérifier la validité de vos pages.

Bibliographie

La gamme « mémento » chez Eyrolles présente sous forme de livret plastifié et indéchirable l’essentiel d’un point technique pour seulement 5€. Un indispensable !

Quiz

Vous avez bien compris tous les éléments présentés ? Testez vos connaissances ! Attention, le premier test n’est pas aussi facile que l’on pourrais le croire.

Vous voilà je l’espère un peu plus à l’aise avec la notion de langage de balisage. N’hésitez pas à posez vos questions en commentaires.

Un des buts de ce site étant l’échange et l’apprentissage, proposez aussi vos références bibliographiques, liens ou bonnes pratiques sur le sujet.

Sur le même thème

]]> http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/feed/ 0