L'intégration

Création du code sources des pages types

Sachez qu'il y a deux principes de réalisation. Vous pouvez coder à la main mais, pour cela, vous devez apprendre le codage de description.
La seconde solution est d'utiliser un logiciel d'édition WYSIWYG, comme Dreamweaver ou Bluegriffon, ou un éditeur de code comme Notepad++ ou PSPad.
Si les editeurs WYSIWYG permettent de travailler sur un visuel de page, en générant arrière plan le code, il est quand meme préferable de maitriser ce language car vous serez amenez à "debugger" ou modifier des points important dans le code ou encore réaliser vous meme l'insertion de code tel que du PHP ou du Javascript.
Les éditeurs de code, quant à eux, intègrent des vérifications syntaxique mais demande une certaine connaissance des language de dévelloppement web.

Un peu d'infos sur les 4 logiciels présentés:

• Dreamweaver : surement le plus connu, il vous permet de travailler sur un double visuel (code/aperçu page) et intègre un très grand nombre de fonctionnalité pour l'intégration des différentes composantes d'une page web (flash, image, tableau, formulaire, menu, etc ... ). S'ajoute une fonctionnalité de synchronisation avec votre serveur permettant le transfert FTP sans passer par un logiciel tiers, en temps réel ou ponctuelle. Si je trouve ce logiciel extremement complet, il n'est malheuresement pas accessible à toute les bourses. Néanmoins disponible en version d'essai de 30 jours sur le site http://www.adobe.com/fr/.
  
  
• BlueGriffon : Peu connu, cet éditeur WYSIWYG s'avère pourtant très performant. Reprenant le moteur Gecko, utilisé par Firefox, il intègre jQuery, un éditeur CSS compatible CSS3, un assistant de création de documents intuitif, Bespin pour l'édition des fichiers sources ainsi qu'un éditeur de script. Enfin, l'interface utilisateur permet de travailler en mode plein écran afin d'avoir une meilleure vision du projet.
  Développé sous licence GNU, disponible multilingue, ce logiciel est entièrement gratuit.
  Vivement conseillé à tous ceux qui débutent dans le codage Web et disponible à cette adresse http://bluegriffon.org/.
  
  
• Notepad++ : Editeur de code source supportant plusieurs languages, utilisant la composante Scintilla, il présente l'avantage d'etre relativement peu gourmand en ressources. Son interface est complète et intuitive et le logiciel autorise une modification des couleurs de codage. Développé sous licence GPL, ce logiciel est entièrement gratuit et disponible, en français, sur le site de l'éditeur à cette adresse http://notepad-plus-plus.org/fr/.
  
  
• PSPad : Editeur de texte et de code, qui permet de gérer plusieurs projets, pour différentes plateformes. Cette application comporte des outils nécessaires dans la réalisation de scripts, dans le traitement des lignes, dans les conversions, compilations et compressions, ... . Un éditeur Hexadécimal, un moteur de recherche et des filtres font partie des nombreuses options du programme, ainsi que l'insertion de caractères spéciaux, l'auto-correction, la comparaison de textes, ... .
  Comme dreamweaver, il dispose d'une fonction client FTP vous permettant d'éditer les fichiers directement à partir du Web.
  Uniquement pour les ordinateurs fonctionnant sous Windows.
  Ce logiciel lui aussi développé sous licence GPL, donc gratuit, est disponible à cette adresse http://www.pspad.com/fr/.

Insertion du contenu

Gardez toujours à l'esprit qu'il est important de bien coder l'insertion des images et des textes, non seulement pour une bonne lisibilité de la page mais auusi pour l'accessibilité et le référencement.

Une image s'insère facilement mais coté code il y a des impératifs, vous devez en indiquer les dimensions par les attributs "width" et "height" mais aussi proposer un texte alternatif déterminé par l'attribut "alt". Le texte alternatif est en général le nom sous lequel vous avez enregistrez l'image mais sans l'extension de fichier, par exemple l'image "paysage_sauvage.png" sera intégrée de la manière suivante :

Vous remarquerez l'attribut "name" resté vide, vous le rencontrerez surement si vous utilisez un éditeur WYSIWYG mais sachez pour information que cet attribut est devenu obsolète pour les images.
L'attribut "alt", quand à lui, permettra, si le visiteur de votre site ne peut visualiser l'image, d'afficher le texte correspondant à celle-ci.

En ce qui concerne l'intégration du texte, vous aurez surement déjà remarqué, au travers de votre expérience sur le Web, que certaines polices de caractères ont la possibilité de produire certains effets selon le message à faire passer.

Afin de vous permettre une utilisation simplifiée, voici une petite astuce qui va vous permettre de choisir les polices voulues sans limitation de choix : Google web fonts !
Ce service de Google vous permettra de choisir dans une liste de près de 500 polices de caractères celle vous convenant et de l'utiliser très simplement dans votre page HTML.
L'intégration se fait grace à une simple ligne de code dans le <head> de votre page puis l'appel de la police choisie dans votre feuille de style. En exemple :

Adobe propose un service similaire, nommé Adobe Edge Fonts, fonctionnant avec le meme type d'intégration, à vous de déterminer celui qui vous conviendra le mieux. Pour accéder au service de police de caractère, c'est par ici :

• Google Web Fonts à l'adresse http://www.google.com/webfonts
• Adobe Edge Fonts à l'adresse http://www.edgefonts.com/

Création des feuilles de styles

Quelle est la fonction d'une feuille de style ?
Tous les éléments d'une page HTML peuvent etre positionnés, dimensionnés, colorés grace aus feuilles de styles. Si vous décidez de redimensionner votre texte dans vos pages, pour allez plus vite (beaucoup plus vite), vous ouvrez votre feuille de style et faites votre modification ; en un coup de rafraichissement de page vous découvrez que tout votre texte (dumoins celui modifié) s'est redimensionné comme indiqué dans votre feuille de styles.
Elle vous permettra un gain de temps exceptionnel, il vous faut juste la penser en amont (couleur, taille de texte, couleur des liens et de leur rollover, placement des balises, ...).
L'autre avantage est de séparer le fond (structure) et la forme (mise en page) afin de vous permettre de réduire significativement le nombre de ligne de code de vos pages et vous faciliter leur lecture en cas de recherche d'erreur.

Vérification de la conformité W3C

Pourquoi est il important de vérifier la conformité de votre site ? Vous etes en train de créer un site Web, autant le faire dans les normes. S'il n'est pas normé, il sera surement difficile de le faire évoluer et compliqué d'obtenir un bon référencement.

Pour effectuer cette vérification, utilisez le W3C validator disponible à cette adresse http://validator.w3.org/.

Une fois la vérification faire, il vous appartient de mettre votre site en totale conformité avec les standards du W3C (ou pas).

Le role du W3C est de donner des recommandations afin que votre site soit conforme à l'ensemble des navigateurs, ce qui n'est pas chose facile. L'arrivée du HTML5 et du CSS3 est une avancée certaine, mais il ne sont pas supportés par tous les navigateurs, problème qui s'améliore au fur et à mesure des mises à niveau de ces derniers.