La trousse à outils du webmaster

Vous trouverez dans cet article une sélection de ressources utiles pour faciliter la création de sites internet. Ces outils et services en ligne permettront aux webdesigners et webmasters de gagner en productivité et en confort.

Pour créer vos wireframes et maquettes

1. Quelques collections de ressources pour créer des wireframes

• A Collection of Useful Web Design Wireframing Resources.
• 10 Completely Free Wireframe and Mockup Applications.
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files.
• Free Wireframing, Sketching & Design Resources for Designers.

Rappel : En webdesign, le wireframe consiste à réaliser un schéma définissant les zones d’un site Web, ou d’une page Web. C’est une sorte de croquis, une vue de votre futur site. Également appelé mindmapping, le wireframing permet d’optimiser l’ergonomie, la navigation avant même d’avoir écrit une ligne de code.

2. Générer du texte de simulation dans vos maquettes

HTMLIPSUM est un service proposant du faux texte structurés grâce aux balises HTML les plus employées : paragraphe p, listes ordonnées ol ou non-ordonnée ul, liste de définition dl, mélange de plusieurs balises pour simuler un texte structuré ainsi qu’un exemple de formulaire form.

Rappel : Le faux-texte (également appelé lorem ipsum, lipsum ou bolo bolo) est un texte sans valeur sémantique, permettant de remplir des pages lors d’une mise en forme afin d’en calibrer le contenu en l’absence du texte définitif. Ce texte en faux latin est repérable au premier coup d’œil : de ce fait l’attention n’est pas accaparée par le contenu, ce qui permet de se concentrer exclusivement sur l’aspect graphique.

3. Générer des images de placements dans vos maquettes

Dynamic Dummy Image Generator est un outil en ligne qui génère des images de placement à la taille souhaitée pour vos maquettes de sites web.

Pour nettoyer et générer du code

1. Nettoyer le code HTML de vos pages Web

WordOff : grâce à ce service en ligne, vous pourrez supprimer les balises vides de votre code source HTML. Par ailleurs très utile pour nettoyer un code généré automatiquement par un logiciel de bureautique comme Word ou Excel.

2. Formater, optimiser, compresser et valider vos feuilles de style

Les feuilles de styles peuvent rapidement devenir des ressources volumineuses puisqu’elles contiennent énormément de caractères inutiles : espaces, sauts de lignes, commentaires. Afin d’économiser de la bande passante et de réduire le temps de téléchargement de vos pages Web, il est conseillé de formater, optimiser et compresser vos feuilles de styles.

De nombreux services Web dont disponibles gratuitement : CSS Optimize, Icey’s CSS Compressor, Flumpcake CSS Optimizer, CssCompressor.com. À noter deux services français : Clean CSS et Code Beautifier (en français).

Vous pouvez également valider vos feuilles de style grâce au validateur CSS du W3C (multilingue).

3. Générer les méta-tags

Le service en ligne Outils-Web propose un générateur de Méta-tags qui reprend l’essentiel des marqueurs de vos pages à faire figurer entre les balises head de vos pages Web : Title, Description, Keywords, Author, Robots, Revisit-after… Vous pouvez également vérifier vos balises sur ce même site Outils-Web grâce au vérificateur MetaTags.

4. Générer des coins arrondis en (X)html/css

RoundCorner met à disposition un formulaire en ligne permettant de générer des cadres avec des coins arrondis. Cet outil génère l’HTML et le CSS nécessaire pour l’installer sur votre site internet. Cerise sur le gâteau, il permet aussi de générer des dégradés de couleurs.

5. Générer des fenêtres popup

Il existe bon nombre de services en ligne permettant de générer le code de vos fenêtres popup. Il suffit de définir les paramètres souhaités : largeur, hauteur, marges, barres d’outils, barres de défilement, etc… Styw Web Site, Outils-Web. À utiliser judicieusement.

6. Générer des formulaires PHP

PHPForm vous permet — en seulement trois étapes — de générer un formulaire PHP. Vous choisissez l’habillage de votre formulaire, vous ajoutez et paramétrez les champs qui vous intéressent (très nombreuses options) et vous téléchargez le pack. Un modèle d’efficacité !

7. Convertir du texte en entités HTML

Postable permet d’encoder les caractères spéciaux (accentués, cédille, &lt, > , & …) en leurs équivalents HTML. Il suffit de coller ou d’écrire le texte dans sa forme « normale » et naturelle, et de cliquer sur le bouton Make It friendly. Vous obtenez alors le texte contenant les entités HTML.

Pour gérer les couleurs

1. Générer un code couleur hexadécimal

Un générateur hexadécimal RGB est proposé sur le site Jokconcept. Un color Picker façon PhotoShop est également disponible sur cette même page.

Rappel : En informatique, les couleurs sont exprimées en codes hexadécimaux. Pour coder la couleur d’un pixel on utilise trois octets qui définissent chacun la luminosité des couleurs Rouge Verte Bleu ; on utilise un nombre hexadecimal à 6 chiffres : les 2 premiers correspondent à la luminosité du rouge, les 2 suivants à la luminosité du vert et les 2 derniers à la luminosité bleu…

2. Créer un nuancier

Plusieurs services en ligne proposent la création de nuanciers (ou palette de couleurs) selon des approches parfois très différentes :

• ColorToy 2.0 : La création d’un nuancier se fait à partir d’une valeur RGB ou hexadécimale d’une couleur
• Color Scheme Designer : Vous créez votre nuancier à partir d’un, deux trois ou quatre tons de couleur.
• Color Combos est doté d’une grosse base de données de nuanciers parmi lesquels il faut chercher.
• Colour Lover : En plus d’une base de données conséquente de nuanciers, ce service est doté d’une base de données de couleurs et de motifs. Autre fonctionnalité proposée : la recherche de couleurs en fonction d’une plage de couleurs et d’une plage de luminosité.
• Kuler est un nuancier proposé par Adobe basé sur le web collaboratif puisque ce sont les internautes qui proposent leurs nuanciers. Différents types de classement permettent d’obtenir les nouveaux nuanciers, les plus populaires, les mieux notés ou d’en afficher plusieurs au hasard.

3. Extraire la palette de couleurs d’un site, d’une image, d’une photo

• Color Hunter compose un nuancier de couleurs en fonction d’une image que vous pouvez uploader.
• ColorSuckr permet d’extraire la palette de couleurs d’une image à partir de son URL. Ce service propose également une extension Firefox : il suffit alors de faire un clic droit et de cliquer sur Extract Image Colors.
• Palette Generator fonctionne sur le même principe que Color Hunter, tout en proposant des nuanciers plus complets… ce qui n’est pas forcément un avantage. Il est parfois préférable de disposer de peu de couleurs.

Pour gérer les images

1. Optimiser les images

Smush.It est un outil en ligne qui optimise vos images sans en altérer la qualité. En effet, Smush.it ne cherche pas à gagner de la place en dégradant les images, mais en supprimant tout ce qui n’est pas nécessaire : métadonnées, indications de formats, réduction du nombre de couleurs si possible, passage de GIF à PNG optionnel, etc… Smush.it existe également sous forme d’une extension pour Firefox, et d’un plugin Wordpress.

2. Générer une favicon

FavIcon from Pics : Vous uploadez une image de votre choix (peu importe sa taille) et le site se charge de vous restituer une favicon static ou animé de 256 couleurs. Deux formats sont générés : 16×16 et 32×32 pixels.

3. Illustrer vos pages Web

Free Icons! propose une collection de packs d’icônes gratuits pour un usage commercial.

IconLook : Moteur de recherche d’icônes pour vos applications, sites et blogs.

Pour convertir des fichiers dans tous les formats imaginables

Il existe de très nombreux services gratuits de conversions de fichiers ne nécessitant aucune installation particulière ni inscription. Nous en avons retenu quatre :

Media-convert.com : Ce site, accessible en 16 langues dont le français, propose de très nombreux formats et combinaisons de conversion. Le poids maximum accepté est de 150 Mo. Pour la conversion de photos, à signaler les fonctions redimensionnement et découpage. Pour la conversion de vidéo, ce service permet de ne convertir qu’un extrait ou encore ajouter une nouvelle bande son. Autre particularité : vous pouvez héberger gratuitement votre fichier sur le site pour une durée de 6 jours.

Docspal.com : Ce service ne convertit pas tous les fichiers, mais il propose un traitement par lots (jusqu’à 5 fichiers en une seule fois). L’autre particularité intéressante réside dans son “visualisateur” de document : vous pouvez ainsi visualiser un document sans pour autant posséder son logiciel source.

Zamzar : ce service propose une très longue liste de formats de conversion pour les textes, images, vidéos, sons. Les fichiers CAD et compressés sont également supportés.

Cometdocs.com : Ce service propose dans sa version gratuite plus de 50 types de conversion. Il permet également de comparer des versions de fichier et d’en connaître les propriétés.

Pour tester et monitorer votre site

1. Tester l’affichage des pages de votre site internet

ViewLike.us est un service web permettant de comparer différentes résolutions d’écran, de celle d’un iPhone à celle d’une Wii, puis de 800×600 à 1920×1200. Indispensable pour visualiser un site dans une résolution inférieure à celle de son propre moniteur. Malheureusement, ce service ne fonctionne pas en sens inverse car il ne redimensionne pas l’image de rendu : si vous avez une résolution de 1024×780 et que vous voulez voir à quoi ressemblerait un site en 1400×900, ViewLike.us ne vous sera d’aucun secours.

BrowserShots permet néanmoins de remédier à ce problème puisqu’il propose des captures écran. Vous pouvez ainsi voir le rendu de votre site dans une multitude de navigateur (pas moins de 90 !) afin d’en vérifier la compatibilité sous différents systèmes d’exploitation : Linux, Windows, MacOS et BSD.

IE Net Renderer vous propose de tester vos pages dans Internet Explorer 5.5, 6.0 et 7.0, avec une fonction originale de comparaison du rendu de plusieurs versions en surimpression sur une même capture.

2. Être alerté par mail lorsque votre site internet tombe en panne

AreMySiteUp.com : Simple et efficace, ce service vous permettra de garder un oeil ouvert sur vos sites web en ligne et vous avertira si l’un d’eux venait à passer hors ligne. Il vous donnera un taux de réactivité sans précédent en renvoyant à vos clients une images des plus sérieuse.

Howsthe.com est un service gratuit permettant de configurer très rapidement une alerte qui vous préviendra si votre site internet est en panne. Une fois l’inscription effectuée, ajoutez les sites (au maximum 3) pour lesquels vous souhaitez être alerté en cas de souci. Pour chacun d’entre eux, vous pouvez déterminer la fréquence à laquelle Howsthe va le contrôler : toutes les 5, 10, 15, 20, 30 ou 60 minutes. La mise en place d’une notification par e-mail (plusieurs adresses peuvent être utilisées) est également facile à paramétrer. Malheureusement, le site étant anglophone, il n’est pas possible d’être alerté par SMS.

——

Pour tous renseignements complémentaires, contactez-nous : www.maccimum.fr (communication globale, tous supports, tous médias).

——