Je veux créer mon site, et je ne sais pas comment procéder ... Logiciel ? pages ...? mise en ligne ...? Pas de panique, ce petit tuto est là à nouveau. Au vu des nombreuses questions récurrentes, j'ai décidé de tout rassembler dans un même sujet. Table des matières * 1 : Créer son site : la définition * 2 : Les langages, les éditeurs * 3 : Les logiciels * 4 : Accessibilité et notions d'ergonomie * 5 : Mise en ligne * 6 : Publicité et référencement *1* Créer son site : la définition Beaucoup commettent l'erreur de créer un site en ouvrant leur logiciel, puis en disant "bon, et maintenant, que vais-je faiiiireuuu ..." [bigsmile] Non, un site, ça se pense, ça se réfléchit, ça s'écrit. Il faut définir le site, c.à.d. définir son but, mais aussi le contenu ... Cette étape bien faite, cela évite de trouver 3 milliards de sites "astuces pc" qui se copient tous les uns sur les autres ... En effet, faire un site est une chose, mais le but ne sera réellement atteint que lorsqu'il sera capable d'offrir au visiteur un contenu original, c.à.d. un contenu qu'il n'est pas censé trouver ailleurs. J'ai vu beaucoup de sites (même ici, présentés par leurs créateurs sur PCA) dans lesquels des pages entières étaient des news comme celles de 01.net, celles de PresencePC, etc ... Si une page incluant ces news est envisageable, il n'en demeure pas moins que ce n'est pas du tout un contenu qui fidélisera le visiteur ... En effet, lorsque l'on voit "News de Presence PC", on est vite tenté d'aller sur présencePC pour lire la suite, et on en oublie vite le site initial ... Et si, pour ces sites cités, on vire les news (un simple javascript que l'on désactive dans la plupart des cas), alors il ne reste plus rien ... Plus rien d'autre que la petite croix rouge en haut à droite... [triste] C'est pour ça qu'il est très important de définir correctement tout le site, tout le contenu qui lui est propre. Il faut donc définir le grand axe (thème du site), en trouver un si possible quasi inexistant (ainsi le site aura de meilleures chances d'être vu), et trouver toutes les parties qui vont composer le site. Il faut aussi cerner le public visé, pour un site de jeu en ligne, je partirai du principe que les visiteurs ont tous une bonne connexion, si je ne veux qu'y mettre des fichiers en téléchargement pour ce jeu. En outre, pour un site plus informatif, le §4 sera à mettre en valeur. Une fois le thème trouvé, on pense aux idées qui vont remplir le site. Ce thème comporte-t-il plusieurs éléments constructifs ? Dans quelles conditions pouvoir l'utiliser (s'il s'agit d'un objet), etc .. En pensant à tout ça, on en arrive à penser indirectement à leur présentation, les pages .... *2* Les langages Trop de gens veulent tout, tout de suite. Ils veulent un site hyper dynamique en un clin d'oeil et finissent par ne plus savoir où donner de la tête. Evidemment, le monde de ces langages (au sens global du terme) est assez vaste, et je vais expliciter les principaux afin d'aider les utilisateurs dans leur choix. Je vais commettre un ou plusieurs abus de langage, volontairement, mais je prends le sens global du mot. => langages s'exécutant chez le visiteur <= =================================== - HTML : c'est un langage statique, qui ne sert que pour baliser le texte. (Ce morceau là sera en gras, celui là en italique ... celui là en gros titre, etc ...). L'HTML est un langage formé de balises écrites sous la forme <balise>texte balisé</balise> (pour celles qui ont une fermeture) - je ne fais pas de différence ici entre HTML et xHTML, ça fait partie de mon autre topic "aide sites web", je reste en html simple ici - liens : http://www.allhtml.com - http://www.w3schools.com - CSS : c'est un langage de mise en page (pas vraiment un "langage", mais dans le fil de mon idée, cette définition peut suffire) qui va permettre de définir tout l'aspect visuel des balises HTML. liens : http://www.w3schools.com - http://css.alsacreations.com - Javascript : c'est un langage dynamique qui va permettre de programmer certains comportements sur le navigateur du client. Ce n'est pas un moyen sécurisé de vérifier des données, car le client peut à tout moment désactiver le javascript. En outre, il présente des problèmes d'accessibilité que nous verrons plus loin. => langages s'exécutant sur le serveur <= ================================== Ces langages ne seront PAS vus par le client, ils seront interprétés par le serveur qui, au final, enverra un document au client en langage client. (souvent en html simple) - ASP, PHP : les 2 équivalents, si ce n'est que l'ASP est propriétaire Microsoft. PHP est issu du libre. - JSP : pages sur un serveur en Java (Java n'est pas un diminutif de Javascript ! C'est un autre langage à part entière) - SQL : langage d'interrogation de base de données. Quel langage faut-il pour mon site ? Pour que le client puisse voir le site, il faut un langage que le client (j'entends par "client" l'ordinateur du visiteur) puisse comprendre... Il faut donc de l'HTML, du CSS et du Javascript. On peut très bien ne faire que de l'HTML, le CSS n'est *pas* obligatoire... Mais pour donner un aspect à couleur et une présentation plus jolie à un texte, il est bien mieux de séparer le contenant (HTML) de la mise en forme (CSS)... La raison est très simple, en cas d'évolution du site (aujourd'hui, je le veux rouge, demain je le voudrai vert) il n'y aura qu'une CSS à refaire, et non 500 pages à rééditer sur le site... D'autres considérations peuvent entrer en jeu que je n'aborderai pas ici. En conclusion, pour commencer à faire un site, le mieux est d'apprendre l'HTML ... Mettre en page ses données ? => jeter un oeil aux CSS ... (voir les liens plus haut) Quel éditeur dois-je prendre ? Il existe 2 styles d'éditeurs. Les éditeur en mode "graphique" et ceux en mode "texte". Certains font les 2 modes. Les éditeurs sont des logiciels gratuits ou payants qui s'installent sans souci sur un ordinateur. Graphique ... texte ... Quid ? Je veux taper un texte sous mon traitement de texte préféré ... Si je veux le mettre en rouge, je le surligne de la souris, puis clique sur la case "couleur" et choisis "rouge" ... Cette action a été faite purement graphiquement. Les éditeurs en mode graphique permettent de taper une page HTML comme sur un traitement de texte, on voit directement le tableau, les cellules, les couleurs de fond de page et/ou de police... => Avantage : pour ceux qui ont un esprit créatif, voir un projet avancer au fur et à mesure peut les aider à mieux cerner leurs besoins => Inconvénient : une page HTML, c'est avant tout du code source ... Du texte, en réalité. Donc lorsque je clique sur "tableau" dans mon éditeur HTML, c'est le logiciel qui s'occupe à ma place de générer le code source HTML correspondant au tableau que je vois. Certains logiciels génèrent un code simple, d'autres le remplissent de tas de fioritures... Maintenant si je suis plus axé sur l'écriture du code source de ma page, alors je peux taper en mode texte... Et le code correspondra exactement à ce que j'ai fait. Pour ceux qui passent par le mode graphique, il y a toujours moyen d'aller dans le code source pour modifier quelques éléments. On parle souvent de What You See Is What You Get (ou WYSIWYG), littéralement "Ce que vous voyez est ce que vous obtenez {au final}" pour désigner les logiciels éditeurs HTML qui sont en mode graphique. Voici une liste des principaux éditeurs ainsi que leur mode de travail. Légende : G = graphique, T = Texte (G,T = les 2) Les gratuits : T => Bloc notes (intégré à Wndows) et tous ses frères (Wordpad, Word, etc) T => [url="http://www.context.cx"]ConText[/url] il colore syntaxiquement pas mal de langages G,T => [url="http://notepad-plus.sourceforge.net/fr/site.htm"]NotePad ++[/url] T => FrontPage Express (Microsoft) T => [url="http://www.matizha.com/sublime/"]Matizha Sublime[/url] T => [url="http://frenchmozilla.sourceforge.net/nvu/"]NVU[/url] Les payants : G,T => FrontPage (Microsoft) inclus dans Microsoft Office (depuis 95) G,T => [url="http://www.wska.com/web/index.php?a=product&code_prod=fr-namowe6&nav=0&country=fr&monnaie=E"]Namo Web Editor[/url] G,T => [url="http://www.macromedia.com/fr/software/dreamweaver/"]Dreamweaver[/url] Au final, qu'est-ce que je peux prendre, je ne suis pas décidé ... Je conseillerais alors de commencer par un graphique, et si vous voulez affiner le code, ne pas hésiter à Switcher entre le mode aperçu et le mode code source ... *4* Accessibilité et notions d'ergonomie Derrière ces termes triviaux se cachent des notions importantes ... en effet, qui n'a jamais râlé parce qu'il fallait 15 clics pour trouver une information simpe dans un site ? Ce paragraphe se base sur 2 aspects, l'accessibilité (que je pourrais traduire en termes simples par la facilité d'accès à tout le contenu textuel de la page) et l'ergonomie (que je traduirais de manière très globale par la facilité d'accès à l'information). Accessibilité ========= Le web est un espace pour tout le monde ... Seulement tout internaute n'est pas un homme en pleine forme et à 100% "valide" ... J'entends par là que des gens atteints d'handicaps surfent également sur le web, et ce serait comme une forme de "racisme" à mon avis que de ne faire un site rempli d'image pour des aveugles... (Vous voyez la connotation ?!?) L'accessibilité se traduit en plusieurs niveaux (3 par le WAI, organisme dépendant du W3C) et chaque niveau impose une certaine quantité de règles qui se traduisent par une grande rigueur dans le code source et dans la sémantique utilisée. En effet, on peut très bien écrire : pour produire l'effet d'un gros titre... C'est à la limite de l'abérration, point de vue accessibilité et sémantique : en effet, la balise <p> sert pour un paragraphe, et toute personne ayant déjà lu/vu un livre quel qu'il soit est en mesure de discerner les titres des paragraphes... Il est bien plus juste d'écrire : la balise h (pour "header") permet de reproduire plusieurs niveaux de titres : h1 à h6. Mais je ne suis pas là pour faire un cours de sémantique HTML... L'accessibilité est donc un moyen redoutable pour vérifier la bonne écriture d'un site ... Est-ce que si je navigue en mode texte seul, je suis capable, moi, visiteur, de : - trouver le titre de page, - distinguer les titres des paragraphes, - distinguer les menus des paragraphes, - distinguer les menus entre eux, alors déjà un grand pas sera fait. Mais j'ai bien dit en mode texte ... Pas "graphique" ... ça veut dire que je fais totalement abstraction de la couleur, de la forme (ou plus globalement de l'aspect) de ce texte... Voyez un exemple de votre site en mode texte seul avec Lynx, le navigateur mode texte : http://www.delorie.com/web/lynxview.html Vous comprendrez aussi que les images doivent avoir un texte alternatif, et que le flash n'est pas le meilleur format pour l'accessibilité ... (vu qu'il ne produit aucun code source) et que le javascript n'est pas l'idéal non plus. plus d'infos : http://forum.pcastuces.com/sujet.asp?SUJET_ID=264543 Ergonomie ======== Là encore, il y a une question pratique qui se cache derrière. L'ergonomie d'un site se doit d'être pensée, l'oeil du visiteur lisant en général du coin en haut à gauche au coin en bas à droite, il va de soi qu'on ne met pas un titre principal en bas de page ... On dit souvent que l'information doit être accessible en 3 clics ... ça veut dire que je suis sur l'index, 3 clics me suffisent, n'importe où, pour accéder à n'importe quelle information du site. J'ai défini l'ergonomie comme la facilité d'accès à l'information, c'est pareil, l'ergonomie est un peu au graphisme ce que l'accessibilité est au code source, à savoir une compréhension intuitive de la page, toutes les pages respectant une même charte graphique, etc ... Les notions d'accessibilité doivent également s'y appliquer. *5* Mise en ligne La mise en ligne d'un site est la copie des fichiers depuis un ordinateur sur un serveur accessible à tout le monde. ça se passe la plupart du temps par FTP, un "langage" de transfert de fichiers, qui est rendu possible par l'utilisation d'un logiciel. Plusieurs logiciels FTP existent, certains gratuits, d'autres payants. Les gratuits : => [url="http://www.clubic.com/telecharger-fiche11141-filezilla.html"]FileZilla[/url] => [url="http://www.clubic.com/telecharger-fiche9631-cute-ftp-home.html"]CuteFTP[/url] Les payants : => [url="http://www.clubic.com/telecharger-fiche9660-ftp-expert.html"]FTP Expert[/url] => [url="http://www.clubic.com/telecharger-fiche9700-flashfxp.html"]FlashFXP[/url] Il faut se connecter avec une adresse ip (ou un nom de domaine), un login et un password. Puis copier les fichiers en général dans le dossier www/ sur la partie droite du logiciel. Attention à ce que tous les fichiers ne contiennent pas d'adresse du type file:///c/documents%20and%20settings/... car c'est une url absolue vers le disque dur (C:) et le serveur n'aura pas de lecteur C: (sauf s'il est sous windows) et encore moins accès à votre C: Voyez mon sujet "aide sites web" pour plus de détails sur les url absolues. *6* Publicité et référencement Une question que bien des gens se posent ... Et beaucoup s'en sortent déçus, "mon site n'est pas dans google". "Comment l'y mettre ?" Le référencement d'un site est une très longue étape, ça ne se fait pas en 3j... Il faut déjà avoir un site bien écrit, sémantiquement, afin de faciliter l'indexation par les moteurs de recherche. La technique la plus répandue est celle de l'échange de bannières, une autre consiste à s'inscrire sur des annuaires. Il existe bien des référenceurs gratuits, mais la plupart du temps, quand bien même ils annoncent vous référencer dans 400 moteurs de recherche, c'est pour être chez "tartempion.com" dont personne ne connait ni l'url ni la couleur du site, alors quel intérêt ? Le moteur de Google, pour ne citer que lui, se base sur l'importance des sites (PageRank, PR) : plus il y a de liens qui pointent sur une page, plus cette page est importante, donc plus son PR augmentera. Bien entendu, pour ajouter un peu de fun à tout ça, le "vote" des pages sources vers une cible sera d'autant plus pondéré que les pages sources ont un PR important ... Pour bien référencer son site, il faut déjà l'écrire proprement ... Ensuite,il faut avoir un réel contenu pour les visiteurs (je rappelle que les moteurs ne voient pas les images). Et puis participer à des fora, permet de placer un lien ou 2 ... [clindoeil] J'arrête là pour auhjourd'hui ce topic, je le complèterai au fur et à mesure des réactions. Il est principalement destiné à des nouveaux arrivants et débutants en tout domaine du web ... Donc les plus "pros" ne soyez pas choqués par mes quelques abus de langage volontairement commis.

Merci Malcolm! [smack] Mais combien consulteront ton guide avant de poser la sempiternelle question : "comment faire un site ?" [triste] La section Guides pratiques gagnerait à être mise en évidence...

oui, mais lorsqu'on poste un sujet, elle n'est pas présente...