Mes outils en ligne préférés pour l’optimisation de sites web

 Article modifié dernièrement le 28 Oct 2015 @ 20 h 40 min

Présentation

Pourquoi installer des logiciels (voire des usines à gaz) lorsqu’il est possible d’utiliser des applications en ligne accessible simplement par un navigateur web ?

Parce qu’elles sont plus performantes et permettent plus d’options ? mauvaise réponse.
Voici une liste d’applications en ligne, gratuites, que j’utilise régulièrement lors du développement de mes applications web, elles sont simples d’utilisation, efficaces et surtout me permettent de gagner un temps précieux.

© http://www.warwick.ac.uk

© http://www.warwick.ac.uk

Par catégories

  • Feuilles de Styles

Pour l’optimisation du temps de chargement des images en utilisant la technique de CSS Sprites : CssSprites ou SpriteGen.

Pour la génération du code CSS3 à coller directement dans nos pages web : Css3Generator ou CSS 3.0 Maker

Pour compresser et minifier vos fichiers CSS (réduction du poids mais illisible ensuite) : CSS Compressor.

  • JavaScript

Pour manipuler le DOM ou créer des éléments en JavaScript depuis du code HTML : HTMLtoDOM ou htmlTOdom.

Pour compresser la taille de vos fichiers JavaScript (réduction du poids mais illisible ensuite) : JSCompress ou Packer.

Pour formater votre code JavaScript rapidement (à la Ctrl + Shift + F sous Eclipse) : Jsbeautifier.

  • Images

Pour l’optimisation de la taille des images à afficher sur nos pages : SmushIt ou PunyPNG.

Pour retoucher en direct les images en s’affranchissant d’installer Photoshop et compagnie : SumoPaint ou Photo Editor d’Aviary sur mobile.

Pour la génération à la volée d’image, de logo au format Png : Harmony.

Pour la génération d’une image de type favicon (image au niveau de l’onglet du navigateur) : FaviconGenerator.

  • Couleurs

Pour choisir comme il le convient les couleurs des différents thèmes de votre site : Toucan ou ColorJack.

  • SQL

Pour formater vos longues requêtes SQL afin qu’elles deviennent tout d’un coup compréhensible et lisible : Instant SQL Formatter.

Conclusion

L’idée même de trouver tous les outils que l’on a besoin sur la toile, « on the cloud », est vraiment géniale, petit clin d’oeil à l’article sur jolicloud de Greg 🙂

Cette liste devrait s’agrandir de découvertes en découvertes, si vous utilisez un outil en ligne que vous aimez particulièrement dans le développement d’applications web, je suis preneur et je le rajouterai à la liste.

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 16 mai 2010, 12 12

    Merci pour l’article qui, à mon avis, va rendre service à plus d’un.

    1/ Le premier lien « CssSprites » ne fonctionne pas chez moi

    2/ En espérant ne pas faire hors sujet, j’aime bien les sites suivants :
    http://www.2createawebsite.com/build/hex-colors.html
    et
    http://vrx.net/sys/gradient?capbut=&wd=&ht=&step=8&r1=ff&g1=6d&b1=6d&r2=ff&g2=73&b2=73

    pour me repérer dans les codes couleurs

    3/ http://www.graphitoo.com/poids_page.php
    vraiment bien fichu pour connaître précisément le poids d’une page web 🙂

  • Mimie 16 mai 2010, 19 07

    Merci Greg pour tes liens, le dernier peut-être intéressant, pour les codes couleurs je préfère ceux que j’ai mentionné.
    En tout cas le lien vers « CssSprites » fonctionne bien chez moi … bizarre

  • Pandoon 20 mai 2010, 14 02

    Interessant! Merci de votre partage!
    Je testerais tout ça quand j’aurais le temps^^

  • Greg 20 mai 2010, 17 05

    np Pandoon, je vois que ton site est une véritable boîte à outils aussi 😀 N ‘hésite pas à passer de temps en temps +

  • Tyrode 22 mai 2010, 23 11

    Bonsoir,
    Pour optimiser tes images PNG, je te propose le logiciel GIMP pour réduire la taille: http://geekastuces.blogspot.com/2010/05/optimiser-la-taille-des-images-png-pour.html

  • Mimie 23 mai 2010, 0 12

    @Tyrode : ce n’est pas les logiciels open-source qui manquent pour manipuler les images telles les .png, cependant l’article révèle les outils « en ligne » qui permettent de faire certaines choses sans devoir installer quoique ce soit sur son ordinateur, GIMP est un logiciel qui s’installe, ce n’est donc pas un logiciel qui rentre dans cette liste. Néanmoins merci de ton passage, ++

  • Greg 1 juin 2010, 18 06

    Je viens de tomber sur ce site :

    http://www.easy-micro.org/index.php?id_page=48

    qui m’a bien aidé pour trouver comment programmer l’accent aigu « é » (*blush* je sais je suis nul en programmation 🙁 )

  • Mimie 2 juin 2010, 8 08

    Pour formater votre code JavaScript rapidement et le rendre plus lisible : Jsbeautifier.

  • Mimie 4 janvier 2011, 22 10

    Pour formater vos longues requêtes SQL afin qu’elles deviennent tout d’un coup compréhensible et lisible : Instant SQL Formatter.

  • Marie-Micheline 28 février 2011, 4 04

    J’aime beaucoup les « boîtes à outils » et les trucs qu’elles contiennent…utile

  • Mimie 3 août 2011, 18 06

    Pratique pour ne plus à se soucier des préfixes propriétaires CSS3 des navigateurs : http://prefixr.com.

  • Mimie 28 décembre 2011, 16 04

    Un générateur de logo, pas mal foutu tout compte fait ^^ logotypemaker.

  • Greg 2 janvier 2013, 12 12

    Lut,
    Les liens « Toucan » //aviary.com/tools/image-editor et « Phenix » //aviary.com/tools/color-swatches sont cassés.

  • Mimie 2 janvier 2013, 20 08

    Wala

Article suivant:

Article précédent:

Share This