Outils pour le concepteur de site personnel (et plus)

Une petite liste d'outils pratiques pour le concepteur de site personnel !

1. Standards et documentation #

• Recommandation HTML 4.01
• Recommandation HTML 5
• W3C : Differences from HTML4
• Recommandation CSS 2.1
• Recommandation CSS Selector Level 3
• Recommandation Media Queries
• W3C Process Document : pour connaitre la signification des niveaux des recommandations W3C (working draft, etc)
• Can I use.com : référence le support navigateur HTML, CSS, etc. Indispensable !
• Un tutoriel de la mise en cache : document de référence sur le sujet !
• Si vous êtes hébergé chez Free : Les Pages Perso Chez Free

2. Editeurs #

PSPad

http://www.pspad.com/
Editeur gratuit et extremmement fonctionnel sur Windows !

DroidEdit

http://www.droidedit.com/
Heureux pocesseur d'une tablette Android avec clavier physique, j'ai utilisé plusieurs ce très bon éditeur Androïd pour rédiger du HTML, PHP, JavaScript, CSS, ...

Emmet

http://emmet.io/
Permet d'écrire très très vite du HTML, en rédigeant des racourcis qui sont transformés en HTML par l'outil.
Disponible sur de très nombreux éditeurs et IDE, en particulier PSPad via un plugin, et nativement sur DroidEdit !

3. Graphisme #

Paint.net

http://www.getpaint.net/
A une époque lointaine, c'était Paint Shop Pro qui était utilisé par tous les non graphistes sur Windows... Paint.Net est gratuit et bourré de fonctionnalités !

Plugin optiPNG pour Paint.net

http://forums.getpaint.net/index.php?showtopic=22841
Pour enregistrer des PNG optimisés.

Générateurs de sprites CSS

Permet de regrouper des images pour utiliser la technique des CSS Sprites.
De très nombreux sites proposent ce service, pour ma part j'apprécie beaucoup Stitches.

Sites optimisations PNG

Il en existe une multitude... Citons en particulier http://compresspng.com/

RealFavicons

http://realfavicongenerator.net/
Génère quasiment l'ensemble des icones possibles (navigateurs desktop, iOS, Android, Windows 8)

Web Fonts

L'excellente librairie Google Fonts !

4. Synchronisation FTP #

Après plusieurs années d'essai d'outils divers, j'utilise maintenant sur Windows le logiciel GoodSync. C'est un shareware mais avec une version gratuite limitée - cf la page décrivant ces limitations : GoodSync Free vs. Pro.

5. Outils de test #

Pour Microsoft Internet Explorer, le site indispensable : Test : interopérabilité, navigateur & multiplateforme | Modern.IE (bravo Microsoft !).

Le responsive design peut être testé sur son pc directement avec par exemple :

• Dans Firefox, la vue adaptive (Ctrl + Maj + M, ou développement / vue adaptive)
• Dans Chrome avec l'émulation : Device Mode & Mobile Emulation - Google Chrome. Assez complet avec le support de la résolution, du pixel ratio, du user agent, de l'événement touch, etc

Lire ce bon article de Alsacréations sur le sujet : Comment tester un site responsive? (partie 1) - Alsacreations.

Création le 13/08/2014
Dernière mise à jour le 24/08/2014

Un oubli, une erreur, une suggestion ? Rendez-vous sur le dépôt GitHub !