L’essentiel des ressources pour bien débuter en intégration web

Je ne compte plus le nombre de fois où un collègue de classe m’a demandé conseil sur des outils à utiliser en intégration ou des ressources en ligne. Tout comme, force est de constater que la forme traditionnelle de plusieurs cours informatiques nous laisse souvent en pan au niveau des ressources disponibles sur les web, et des outils utiles à la profession.

Sans vouloir prétendre être exhaustif, ou que les références qui suivent sont les meilleures, je crois néanmoins que c’est une bonne base si vous débuter en intégration web. (Et puis, ça me fera une liste à laquelle référer par le futur !)

L’Outillage

Si l’on imagine mal l’auteur sans sa plume, et le fossoyeur sans sa pelle; vous imaginerez mal un intégrateur sans ordinateur. Mais au-delà, un outillage décent, performant et gratuit, semble absolument nécessaire.

Et comme nous parlons de web, commençons par parler navigateur.

Navigateur Web

Il est absolument impensable qu’un intégrateur web ne possède sur son ordinateur qu’un seul navigateur internet ! À tout le moins ici (au Canada), chaque programmeur devrait posséder sur sa machine une version d’Internet Explorer, de Google Chrome, de Safari et de Firefox (dernier navigateur que vous risquez d’utiliser fréquemment). À cela, il pourrait être intéressant de rajouter le navigateur Opéra, bien qu’il ne soit pas fréquemment utilisé de ce côté de l’Atlantique (pensez donc au public cible du site que vous créez; si le site est international, une vérification sur Opéra est à conseiller).

À cela, il faut également penser aux anciennes versions d’Internet Explorer (version 6 et 7) qui sont encore utilisées (IE6 est presque disparut, mais un débogage mineur est sans doute souhaitable). Installer ces anciennes versions directement sur votre machine ne fonctionnera pas, vous n’aurez pas le même rendu. À date, la solution la plus simple que je connaisse est le programme IEtester, qui n’est pas encore disponible aujourd’hui en version stable; mais avec lequel je n’ai jamais eu de problème majeur. Cela dit, bien qu'il permette un débogage de surface, vous ne pourrez tester complètement sans passer par l'utilisation de plusieurs machines virtuelles.

Maintenant, pour développer vos sites, ma suggestion est évidemment Firefox (Google Chrome possède aussi de bonnes extensions à ce qu’on en dit; mais j’ai une préférence personnelle pour Firefox). Et évidemment, quelques add-on incontournables :

Firebug : Firebug est une extension ayant de multiples utilités. En gros, il est très utile pour déboguer une page; et totalement incontournable pour la création de template pour CMS. (Possède aussi entre-autre une utile console Javascript)

Web Developer toolbar : Un peu moins utile que Firebug, mais cette extension vaut vraiment la peine. Notamment pour la facilité d’accès aux options de désactivation de cache et de Javascript.

Colorzilla : Petite extension bien utile permettant de saisir une couleur sur une page web (type pipette), ainsi que d’offrir une palette de couleur vous donnant le code hexadécimal que vous recherchez. Pour moi, c’est un incontournable.

YSlow et Page Speed : Deux extensions (une de Yahoo, et l’autre de Google) permettant d’étudier la performance d’une page web. Ils ne sont pas très utiles aux débutants, mais méritaient d’être citée.

Évidemment, plusieurs autres extensions existent et peuvent être utilisé pour tous les langages de programmation, ou presque.

Editeur de texte

Évidemment, un programme sur lequel taper son code (ainsi que quelques options d’auto-complétion) est un inévitable.

Je crois que tous connaissent Adobe Dreamweaver, le fameux éditeur de code. C’est une solution, mais elle est onéreuse, et bien franchement ses outils de feuille de style par une feuille d’option produisent un code peu optimisé. Et son mode « création » offre un rendu moyen, parfois éloigné du rendu réel sur le web. Alors, personnellement, je le déconseille, à moins de réellement savoir ce que l’on fait; mais à ce moment, il est un peu cher pour le peu d’avantages offert. (Toutefois, je dois admettre que son client FTP intégré est très sympathique d’utilisation. Mais, FileZilla fait bien le boulot au niveau FTP)

Alors, ma suggestion va pour Komodo edit (programme fait par ActiveState). Personnellement, je trouve cet éditeur simple et léger, et j’aime beaucoup son auto-complétion non intrusive et complète (surtout au niveau des CSS). La programme est offert en version gratuite et met à disposition plusieurs extensions facilitant énormément la vie de l’intégrateur, dont Zen Coding et HTML Toolkit.

Ressources Web

Maintenant que vous êtes équipé et en mesure de coder. Certaines références sur le web vous seront toujours utiles en cas de doute sur votre structure, pour vous former à un langage de programmation peu ou pas connu, ou pour aller plus loin que vos cours magistraux.

W3schools (anglais) : Site par excellence pour apprendre la base d’un langage. Mais est aussi une excellente référence, notamment HTML, CSS, Jquery puisqu’il offre un index des balises/styles/commandes de chaque langage.

Alsacréations.com (français) : Mon coup de cœur personnel ! Ce site est une mine d’or pour tous ceux souhaitant réellement produire un code de qualité et conforme aux standards du W3C. La qualité des tutoriaux et la spécificité des explications en fait une référence incontournable à quiconque souhaite transcender la formation ordinaire qui trop souvent saute des thèmes tellement important et essentiel au sein du web.

Ce dernier se concentre surtout sur HTML/CSS, mais il touche aussi à la programmation client et serveur.

Tout Javascript (Français) : J’ai hésité à mettre ce site en tant que référence, car il n’est pas à jour (donc attention) ! Mais, je trouve sa référence Javascript tellement utile que je me retrouve toujours à l’utiliser. Cela dit, fiez-y vous avec une certaine distanciation professionnel, ce n’est plus un site à jour.