Sur le chemin qui mène au développement web, il y a des outils à avoir. Amis choisi les bons outils

Pour ce premier billet sur creatiq, avant de faire des articles plus évolués, on va commencer par la base de la base. Les outils dont chaque développeur doit disposer sur son PC pour bosser. Étant sous Windows (oui je souffre chaque jour vous pouvez me croire)… je vais présenter essentiellement des outils pour cet environnement.

Cela dit, libre à vous de voir si certains sont disponible sur Mac ou GNU/Linux. (En général les meilleurs le sont).

Etape 1 : Un serveur, à jour SVP

Quand on fait du développement web on arrive à faire du PHP, pas le choix ou alors on nettoie le sol avec de l’AJAX. Dans les 2 cas il nous faut un serveur de développement. Sous GNU/Linux et Mac c'est presque un jeu d'enfant. Windows n’étant pas un dérivé d’Unix mais, un OS issu du monde parallèle du bug (il faut troller chaque jour, pour une meilleure santé), il lui faut quelques outils avant de pouvoir vous permettre de développer (et encore pas du tout dans les meilleures conditions possible).

            XAMPP

Très connu et multiplateforme, c’est la référence. Il est très complet et très avancé (à jour aussi). Par contre pour aller plus loin avec… il faudra faire un peu de configuration. Il possède un GUI simple et efficace (avec des boutons, Allumer Serveur, Éteindre Serveur).

Niveau Intermédiaire/Avancé

            WAMP

La référence sous Windows, très efficace et simple à prendre en main. Seulement il est mis à jour aussi rapidement que le bon sens arrive à la tête de la Hadopi (je suis méchant, eux ont mis 2 ans, Wampserveur est bien plus rapide).  Il possède aussi un deamon, qui permet d’activer au clic droit des modules. Léger, peu intrusif et simple à prendre en main.

Niveau débutant

            UWAMP

Un petit serveur portable, léger aussi performant que Wamp mais, avec un GUI simple et plus efficace. Il existe aussi en version portable pour le mettre sur une clé USB par exemple, très pratique.

On peut démarrer Apache ou MySQL ou les deux. Choisir une version de PHP…

Niveau Débutant

On peut aussi citer comme serveur Xoops Mini-Serveur qui est très actif et tout aussi complet qu’uWamp.

Les liens des outils :

• Xoops Mini-Serveur
• uWamp
• Wamp Serveur
• Xampp

Le serveur ultime, la VM

Il fut un temps ou le commun des mortels ne connaissait pas la virtualisation, puis le monde a changé et ça c’est démocratisé (par contre ils n’ont pas le droit de vote). Avec des outils comme VmWare ou mieux VirtualBox c’est simple, non super simple. Et vous savez quoi ? On peut se faire très simplement un bon petit serveur dans une VM, comme si vous en louez un chez OVH(pas de promo juste que c'est un nom que j'entends très souvent) par exemple sauf que là… il est sur votre PC sur un VHD.

 Ça nous permet de faire un serveur, un vrai pas un outil comme Wamp&co. Je vous ai fait un tutoriel complet ici : Créer un serveur Virtuel dans Virtualbox avec TurnKey Linux .

L’avantage est de pouvoir débusquer certains bug impossible à refaire dans Wamp&co (testé sur du rooting avec CodeIgniter il y a peu)

Etape 2 : Un bon outil nous fait avancer vite

            Notepad++

La référence ultime sous Windows, il fait tout et le fait bien. Il est léger etc… Bref il a tout pour lui sauf, sauf qu’il ne scanne pas nos projets (qu’il ne gère pas) pour trouver nos fonctions et faire de l’auto complétion intelligente. En gros c’est comme un mouton, il fait tout ce que l’on lui demande sauf une chose : l’essentiel à savoir réfléchir.

Hormis ça, il est parfait. Et pour avoir les bons plugins lisez cet article Notepad ++: Comment le rendre encore plus performant

            Sublime Text 2

Ok cet éditeur est censé être payant mais, la béta est gratuite. Franchement je ne sais pas quoi dire, il est génial ! Auto complétion intelligente, gestion de projet, vue, légèreté il a tout pour lui. Sauf une non gestion du FTP (personne n’est parfait). J’avais prévu de l’utiliser une semaine pour tester fin juillet. Depuis je l’utilise tous les jours.

Il possède par contre un gros défaut, il est naze pour écrire du CSS… (le meilleur dans ça étant Komodo).

Voilà un exemple de ce que ça peut donner, personnellement je fais F11 sur mon écran et je bosse avec toute la journée il est parfait. Et un CTRL + P me permet sans souris en 1 seconde d’ouvrir n’importe quel fichier de mon projet (j’en ai des milliers dans le projet).

Pour aller plus loin avec, regardez ce tuto vidéo : Présentation Sublime Text 2

Et un PDF a imprimer et coller au mur devant soi (je l’ai fait au boulot) Sublime-Text-Cheat-Sheet

            Komodo Edit

Version gratuite de son grand frère Komodo IDE, il est aussi très bien. IL gère les projets, l’auto complétion intelligente et est l’éditeur parfait pour faire du CSS. Il est beaucoup plus lourd que les 2 autres par contre (juste au démarrage rassurez-vous), il est basé sur le moteur Gecko (de Firefox). Son seul défaut c’est de démarrer aussi vite que Firefox, donc n'hésitez pas à faire un expresso pendant qu’il se lance. Ah oui aussi il gère le FTP… oui si on vivait dans un monde parallèle, là c’est juste naze.

Avec tout ça on peut se dire, qu’il est moyen… Pas du tout, il existe beaucoup d’extensions pour le rendre encore plus complet (et lourd). Puis il est multiplateforme. 

Je pourrais aussi y mettre PsPad, mais il n’évolue plus puis manque de pêche comparé, aux autres. Après coté IDE je n’en parle pas il y a de tout et aucun n’est vraiment satisfaisant car tous (ou presque) sont en Java et donc lourd lourd lourd…

Puis avec Sublime text je peux vous certifier que l’on s’en passe. Je suis plus rapide qu’avec Netbeans ! Et encore si j’étais sous Mac ou Linux ce serait encore mieux (oui Windows ralentis les choses on verra ça plus tard).

• Notepad++ http://notepad-plus-plus.org/
• SublimeText2 http://www.sublimetext.com/2
• Komodo Edit http://www.activestate.com/komodo-edit

Étape 3 : Les bonnes adresses

Quand on developpe on aime bien gagner du temps, maintenant qu’on a un bon éditeur (SublimeText2, non je ne cherche pas à influencer), on a besoin des outils qui facilitent le boulot. Et là on a internet (votre fonds de commerce quoi).

Les indispensables :

• JSON Lint http://jsonlint.com/

Un site indispensable quand on travaille avec des JSON. Il permet de vérifier ses structures. Ce n’est pas grand-chose mais croyez moi c’est super pratique des fois.

• Schema Creator http://schema-creator.org/

Très utile si vous connaissez un peu cette spec, si vous faites de l’HTML et de l’accessibilité.

• Tables des caractères spéciaux http://courshtml.free.fr/donnees/charset.htm

Quand on fait du code on y revient souvent, autant l’avoir sous la main.

• stackOverflow http://stackoverflow.com/

Parce que quand vous avez un problème vous pouvez être sûr que 500 000 devs avant vous l’ont eu, et la réponse se trouve souvent ici.

• Sprite Cow http://www.spritecow.com/

Pour générer des sprites (avec vos images hein ;) )

• MicroJS http://microjs.com/

Vous avez un besoin spécifique en JavaScript, il est possible de trouver ici une micro librairie qui fasse ce que vous souhaitez.

• HTML5 Snippets http://html5snippets.com/

Enfin HTML5 hein, on a aussi beaucoup de snippets CSS.

• Code Snippets http://css-tricks.com/snippets/

Du CSS, HTML, JavaScript, PHP, jQuery, WordPress, HTAccess ? Il y a de quoi faire ici.

• WP-Snippets http://wp-snippets.com

Des Snippets pour WordPress, en pagaille. Elle n’est pas belle la vie non ?

• HTAccess Tester http://htaccess.madewithlove.be/

Toujours pratique d’avoir un outil comme ça sous la main.

• .htaccess tools http://www.htaccesstools.com/

Rien que le nom suffit, il génère plein de truc à votre place, vraiment utile.

• Compatibilité CSS et Internet Explorer http://msdn.microsoft.com/fr-fr/library/cc351024%28VS.85%29.aspx

Une fois que vous avez ça, vous pouvez commencer à faire de l’intégration.

Les autres adresses, sympathiques mais, on peut s’en passer

• TypeTest http://www.typetester.org/

Pour comparer le rendu des différentes typographies.

• The Web Font Combinator http://font-combinator.com/

Pour faire votre soupe entre typo. C’est pratique pour avoir une idée du rendu.

• Google WebFonts http://www.google.com/webfonts

Pour choisir une des très nombreuses typo que propose gratuitement Google.  Il y a tout pour la mettre facilement sur votre site.

• Flickr CC http://www.flickr.com/creativecommons

Pour trouver des images libres de droits sans soucis.

• ResizeMyBrowser http://resizemybrowser.com/

Redimensionner la fenêtre de votre navigateur. Un plugin existe pour chrome.

• CSS3 Generator http://css3generator.com/

Pour générer du CSS3 (que vous mettez plus de temps à générer qu’avec un bon éditeur)

• CSS3 Gradient Générator http://gradients.glrzad.com/

Comme son nom l’indique, on fait des dégradé avec.

Etape 4 : Faire de la veille

On ne va pas s’attarder dessus, mais la veille c’est la vie si souhaite rester au niveau, et surtout être à jour. Bien sûr il faut parler anglais. Bosser dans le web et faire de la veille sans parler anglais… j’ai tendance à dire que c’est incompatible. C'est ce que je constate en regardant ma veille. Elle est composée à 90% de blogs anglophone.

Quelques twittos à suivre pour faire sa veille en dev web/inté/webdesign 

• http://twitter.com/#!/guerrier Frédéric Guerrier
• http://twitter.com/#!/LaFermeDuWeb La Ferme Du Web
• https://twitter.com/#!/lecolibrilibre Dhoko (moi-même oui)

Et comme site web, je pense que si vous ne devriez en suivre qu’un seul, c’est celui de la ferme du web, http://www.lafermeduweb.net/ prenez le flux RSS et vous avez de quoi vivre. (Même si des fois ils ont des informations passées quelques jours avant sur mon twitter, joke inside ;) )

Étape 5 : On vous lâche dans la nature ?

Voilou, vous avez tout pour commencer le développement web, et évoluer. Reste plus qu’à se concentrer, se motiver et let’s go. N’hésitez pas à lire de la doc (Celle de PHP est cool, celle de jQuery aussi, par contre celle HTML/CSS est chiante).  On a de tout dedans, même de quoi rire.

Après peut être faudrat il se lancer sur un Framework (jQuery pour JavaScript par exemple), en PHP je vous conseille, CodeIgniter. Il est très simple à comprendre et à prendre en main, de plus il a sans doute le meilleur guide utilisateur qui soit. Il y a aussi CakePHP, j’ai cru comprendre qu’ici on avait quelques tutoriels dessus ;)

Hors PHP il y a Ruby avec le très connu RoR. Il paraitrait que même un Zombie arriverait à utiliser RoR s’il passait par là : http://railsforzombies.org/ …