Les bons outils pour commencer à intégrer votre site web
Vous venez de concevoir votre maquette graphique (en étant passé, on vous le souhaite, par les étapes de Zoning et de Grille) ou devez intégrer celle de votre client et vous ne savez pas par quoi commencer ?
Vous trouverez dans cet article une introduction schématique reprenant le cheminement de l'intégration et l'interprétation d'un site web, une définition des langages HTML et CSS, ainsi que les outils pour bien développer, et un descriptif des différents navigateurs web présents sur le marché.
Article par Okko (Graphiste webdesigneuse, Strasbourg)
Introduction
Pour débuter dans la création de pages web, vous aurez besoin de mettre en oeuvre deux langages : HTML et CSS, qui seront rédigés à l'aide d'un logiciel nommé éditeur de code source et sauvegardés sous forme de fichiers possédant les extensions .html et .css. Ceux-ci seront envoyés via un logiciel FTP qui permet de publier les fichiers depuis votre ordinateur vers le serveur web où ils seront stockés et mis à disposition des visiteurs. Et enfin pour consulter votre site il vous suffira d'utiliser l'autre logiciel qu'est le navigateur web qui interprète les codes sources et fait le lien entre vos deux fichiers HTML et CSS.
Les langages HTML et CSS
Ces deux langages se complètent, l'un pose le squelette du site alors que l'autre le met en forme.
HTML
HyperText Markup Language (ou Langage de balisage hypertexte)
HTML, né en 1994, est le langage du Web par excellence. C'est lui qui indique au navigateur de quoi est constituée la page web qu'il est en train de consulter, tant au niveau de la langue de prononciation, de son titre et contenu, mais aussi et surtout de la structure et de la fonction de l'ensemble des éléments qui la composent : paragraphes, citations, titres, listes, liens hypertextes, images. La fonction (sémantique) de ces éléments est déterminante pour les navigateurs, mais aussi pour d'autres outils tels que les moteurs de recherche, les plages Braille, les imprimantes, etc.
Les médias (images, sons, vidéos, fichiers téléchargeables) ne sont pas intégrés directement au sein de la page HTML, mais sont "appelés" par celle-ci. Ils doivent figurer sur le serveur web afin d'être disponibles aux visiteurs.
- Les bases du langage XHTML (tutoriel SiteDuZéro)
- Ecrire une page Web (ENS)
- Les langages de balisage HTML et XHTML (tutoriels Mediabox)
- Cours de XHTML conforme et accessible (Normand Lamoureux)
CSS
Cascading Style Sheets (ou Feuilles de styles en cascades)
Le langage CSS (né en 1996) met en forme le HTML mais ne structure pas la page web. Il va décorer les différents éléments de la page, en définissant une couleur de fond pour un bloc ou encore une taille de police pour un titre. Il permettra également de dimensionner et positionner tous les éléments comme on le souhaite sur la page, et de gérer la diffusion des informations sur un grand nombre de supports : écran d'ordinateur, mais aussi smartphone, imprimante, télévision, e-mail, etc.
Pour bien comprendre le langage CSS, voici des pistes utiles :
- C'est plus joli avec du CSS (tutoriels SiteDuZéro)
- Les feuilles de style (ENS)
- Les CSS : feuilles de style en cascade (tutoriels Mediabox)
- CSS débutant (MammouthLand)
- Apprendre les standards Web et les CSS (tutoriels Alsacréations)
Les outils pour bien coder
Avant de commencer à intégrer votre maquette, il faudra vous munir de bons outils pour développer au mieux votre page web. Deux logiciels vous seront alors indispensables : un éditeur HTML afin de coder de manière propre et lisible et un navigateur web pour afficher et tester votre page web.
Éditeurs de code source
Les WYSIWYG (What you see is what you get)
Ce sont des logiciels générant automatiquement le code (HTML, CSS et Javascript) lors de la manipulation d'objets graphiques au sein de l'interface du programme permettant ainsi à l'utilisateur de composer le résultat final (visuel) de sa page web, tel qu'il le ferait à l'aide d'un logiciel graphique comme Photoshop ou Gimp.
Ces logiciels sont à manier avec prudence car bien que simple d'utilisation et intuitifs, ils ne proposent qu'une version purement visuelle du document et génèrent parfois un code peu accessible et brouillon (balises employées pour leur aspect et non leur fonction). Il faudra donc généralement utiliser ce type de logiciel avec précaution.
- Dreamweaver : Logiciel célèbre d'Adobe aux multiples fonctionnalités (PHP, serveur FTP...) mais coûteux.
- Blue Griffon : Développé par Daniel Glazman (membre du groupe de travail CSS du W3C), il est léger et performant (et gratuit aussi !)
Les éditeurs HTML textuels
Ces logiciels mettent en couleur les différentes parties du code (couleurs syntaxiques) pour une meilleure lisibilité contrairement à un éditeur de texte basique tel Notepad (PC) ou TextEdit (Mac) avec lesquels il est tout à fait possible de coder. Ils proposent un aide à la saisie proposant différents termes à l'utilisateur (auto-complémentation) et ajoutent une tabulation en début de ligne afin de garantir clarté et lisibilité au code (auto indentation).
Sous Windows :
- Notepad ++ est un logiciel complet et efficace.
- E-Texteditor, éditeur plébiscité par Raphaël Goetter dans son livre "CSS avancées - Vers HTML5 et CSS3".
Sous Mac :
- Smultron, très simple d'utilisation.
- Coda (éditeur de texte, styles CSS et client FTP), alternative à Dreamweaver sans l'édition WYSIWYG.
- Textmate, Coda, etc.
Sous GNU/Linux :
VIM, jEdit (disponible également sous Windows et Mac) et eMacs font partie des plus connus.
Il en existe bien d'autres (payants ou gratuits), à vous de trouver celui qui vous conviendra le mieux.
Les navigateurs web
Qu'est-ce qu'un navigateur ?
Un navigateur est un logiciel de consultation du World Wide Web.
Le moteur de rendu du navigateur traite l'adresse web que tape l'utilisateur, charge la ressource (page HTML, feuille de style CSS, images...) et l'affiche. Les navigateurs ont un moteur de rendu différent, ce qui peut-être gênant par rapport à la compatibilité et le bon affichage d'une page web entre tous ces navigateurs, même si tous tendent actuellement à se rapprocher des Standards du W3C.
Découvrez dans cette vidéo (1 minute) en quoi consiste un navigateur internet : www.whatbrowser.org
| Navigateur | Environnements | Moteur | Description |
|---|---|---|---|
 Internet Explorer |
Windows | Trident | Développé par Microsoft (1995), il est installé d’office avec le système d’exploitation Windows. |
 Opera |
Linux, Mac OS X, Windows, BSD, Solaris, Nintendo Wii et DS, Symbian, iOS, Android | Presto | Développé par l'éditeur de logiciel norvégien Opera Software (1995) et est très populaire pour sa version mobile. |
 Firefox |
Windows, Mac OS X et GNU/Linux | Gecko | Navigateur open-source, développé et distribué par la Mozilla Foundation (2002). |
 Safari |
Mac OS X, iOS et Windows | HTML WebKit | Installé par défaut pour Mac OS X (Apple) depuis qu'Internet Explorer n'est plus développé par Microsoft sur Mac (2003). |
 Chrome |
Windows, Mac OS X et GNU/Linux | HTML WebKit | Produit par Google, Chrome est le dernier navigateur né (septembre 2008). |
Extensions indispensables pour le développement
Une extension est un programme ajouté au navigateur pour le compléter. Ces logiciels sont dépendants du navigateur auquel il s'ajoute. La plupart des navigateurs récents sont dotés d'Outils de développement intégrés.
Firefox
- Firebug : un simple clic droit sur l'élément à inspecter et vous pourrez observer le code source de celui-ci (ou de la page) ainsi que ses styles CSS et les modifier en temps réel, cette extension possède également une console JavaScript et donne des informations sur les performances générales du site. Lire l'article "Firebug et le débogage d’une page web".
- Web Developer : permet de désactiver/masquer le JavaScript, les CSS, les images..., de redimensionner votre fenêtre, d'afficher une règle pour mesurer la taille des éléments d’une page, nettoyer le cache, valider le code HTML ou les CSS et bien d'autres choses.
Si vous en voulez plus, je vous invite à lire l'article "Les 20 meilleures extensions Firefox pour développeurs web"
Chrome
Chrome dispose de son "Firebug" interne, pas besoin d'extension pour celui-ci. Même manipulation que pour précédemment afin d'inspecter le code. Vous pouvez également y accéder via le menu Outils > Outils de développement (raccourci : Ctrl+Maj+I). Sinon vous pouvez également télécharger l'extension Firebug pour Chrome.
L'extension Web Developper existe aussi pour Chrome.
Safari
Activez le menu de développement, en allant dans Réglages > Préférences… > Avancées, et cocher la case "Afficher le menu de développement dans la barre de menu". Vous pourrez alors accédez aux outils de développement de la même manière que pour Firebug ou Chrome (raccourci : Ctrl+Option+I).
Internet Explorer
A partir d'IE 8.0, vous trouverez dans le menu Outils > Outils de développement (raccourci : F12), celui-ci comprend les fonctionnalités de "Firebug" et de "Webdevelopper", avec un basculement de l'affichage vers IE 7.0 (et 8.0 pour la version 9.0), très utile pour tester et débugger votre site dans les versions précédentes et actuelles.
Opera
De même que pour les précédents navigateurs, Opera intègre ses propres outils de développement que vous pouvez activer/désactiver dans Menu > Page > Outils de développeur et cocher ou décocher "Opera Dragonfly" (raccourci : Ctrl+Maj+I)
Vous avez maintenant les bons outils pour commencer à coder !
doc mcfly a dit le
Merci, je vais pouvoir développer mes sites plus facilement en sachant maintenant où trouver les outils de développement selon le navigateur (quand je suis en déplacement, et que je squatte un PC) !