Closed TopicStart new topic
> [Tuto] Faire un site web
Selphie
posté Aug 29 2004, 07:21 PM
Message #1


Why is the rum always gone?


Groupe : Admin
Messages : 4 184
Inscrit : 29-October 03
Lieu : Bruxelles
Membre no 2



Faire un site web


Vous avez envie de faire un site web?
Ce petit tutorial est là pour vous aider à concrétiser ce projet! ^^

Attention, ces explications vous aideront à vous lancer dans le webmastering. Pour tout ce qui n'est pas expliqué ici, vous trouverez des tutoriaux en abondance sur le web, à vous de faire une petite recherche ^^

Avant de commencer :

Il existe plusieurs façons de faire un site web.
Nous n'aborderons pas ici les hébergeurs qui proposent des sites "tout-faits" car en utilisant ce procédé, vous ne créez pas vraiment votre site.

Sur le réseau internet, les pages circulent sous forme codée.
Par exemple (pour le début de l'index de SF) :

Code
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<title>::. Suba Furuba .::</title>
<meta name="description" content="Site dédié au manga Fruits Basket, images, traductions, résumés, fanfics, fanarts, avatars, gifs, tchat, forum et bien d'autres choses encore">
<meta name="keywords" content="suba furuba, fruits basket, natsuki takaya, yuki, kyo, tohru, delcourt, akata, manga, furuba, bd">
<link rel="stylesheet" type="text/css" href="new.css">
<STYLE type="text/css">
<!--
BODY
{
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #D9D9F3;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #D9D9F3;
scrollbar-track-color: #FFFFFF;
}
-->
</STYLE>
</head>


Pour faire les pages :

- Les éditeurs de sites : Dreamweaver, Golive ... Il s'agit de logiciels qui génèrent à votre place la page de codes. Bien entendu il faut apprendre l'utilisation du logiciel (pour Dreamweaver ça prend entre 2 et 3 jours), mais c'est encore le plus simple ^^
Et puis c'est une très bonne façon de se familiariser avec le html (en basculant du mode création au mode code pour voir qu'est-ce qui correspond à quoi et faire des expériences *-*)

Pour les télécharger, les versions d'essai * sont disponibles sur le site officiel de la société qui les fabrique :

Macromedia pour Dreamweaver
Adobe pour Golive

- La programmation pure: ici il faut connaitre le HTML, un peu le javascript (et puis bien sûr, si vous voulez faire un site dynamique, PHP, perl, ASP, qui demandent une base de données MySQL).
Tout se fait par le bloc note, vous écrivez toutes les lignes de codes "à la main". Hum, d'habitude cette façon de faire est uniquement employée par ceux qui sont déjà des boss de la programmation. Inutile donc d'ouvrir votre bloc-note si vous n'avez jamais fais de html ^^

Pour le design :

- Pas de design (juste la couleur de fond de la page, du texte et des tableaux)
- Un kit graphique : ici vous téléchargez un design tout fait, vous n'avez plus qu'à le remplir.

Free Gaia
Free site template

Pour en trouver d'autres, faites une simple recherche sur le web :
Google: Kit graphique gratuit
Google: Free template

- Faire un design soi-même : c'est possible si vous disposez du sens de l'esthétique et d'un logiciel de création graphique tel que Photoshop, Paint Shop pro etc...

Adobe pour Photoshop
Jasc pour Paint Shop pro

Pour l'hébergement :

- Hébergeurs gratuits : Il est encore facile de trouver un hébergeur gratuit. Le plus difficile vient après, quand vous vous apperçevez qu'il bugge, qu'il tombe souvent en panne, ou alors qu'il devient payant du jour au lendemain ^^,
Sans compter que les hébergeurs gratuits le sont car ils insérent quantité de pop-up de pub sur les pages des sites qu'ils hébergent (dont le vôtre). Mais bon, ils sont gratuits ^^

- Hébergeurs payants : Plus dignes de confiance. Il ne faut cependant pas prendre un hébergeur qui n'a pas déjà fait ses preuves (nouveau sur le marché).
Il est assez fréquent que des personnes payent un nouvel hébergement "pro" pour s'aperçevoir un beau matin que leur hébergeur s'est fait la malle.

Les hébergeurs gratuits/payants changent souvent, je vous conseille donc de regarder ici (attention tout de même, certains hébergeurs font leur auto-promotion dans cette rubrique, ne tombez pas dans le piège ^^)

Pour le contenu : (*mode marketing on* lol)

A moins que vous ne vouliez faire un site juste pour voir comment ça marche, il vous faudra trouver une idée de contenu, un thème, un titre etc...
Tout d'abord, ne choisissez pas un sujet qui est déjà celui d'une quantité de site web (Final Fantasy par ex), si vous le faites, vous allez galérer pour vous faire une place et pour attirer les internautes.
Mieux vaut mettre l'accent sur la différenciation, c'est à dire, proposer de l'inédit (contenu, thème, peu n'importe, du moment que vous êtes le premier).

Très important aussi, le choix du titre, il doit être facile à retenir (donc pas trop long) et fun (bonne sonorité).

Au niveau du contenu, essayez de faire des rubriques originales.
Surtout, ne piquez rien sur les autres sites (ni layout, ni images) sans demander une autorisation.

Les crédits sont très importants, même s'il s'agit d'un site perso, vous devez mettre tous les crédits (par exemple Hakusensha, Delcourt pour FB). Les sites dont vous avez obtenu l'autorisation de prendre des images doivent absolument figurer dans vos liens.

La team :

Inutile de constituer une team si vous n'avez pas encore de site web ^^,
Très souvent je vois des "webmasters" qui engagent des personnes pour faire le site à leur place. Dans ce cas, c'est la personne qui travaille sur Dreamweaver qui mérite le nom de webmaster, et pas la personne qui l'emploie (donner des ordres, c'est vraiment ce qu'il y a de plus facile lol).

Donc faites votre site web, et quand plusieurs rubriques seront remplies et le site online, là vous pourrez commencer à engager du monde ^^

Essayez de prendre des personnes réellement motivées. Il va de soit que vous devez l'être aussi. Rien ne sert de constituer une team si c'est pour fermer le site quelques mois plus tard ^^,

La mise online :

Sur votre ordinateur, vous aurez au préalable constitué un répertoire "site" dans lequel vous mettrez vos pages, vos images etc...
Tout ça devra être mis online sur l'hébergeur que vous avez choisi par un petit programme d'upload tel que Cute FTP. Son utilisation est assez simple, deux écrans s'ouvrent, à gauche les répertoires sur votre ordi, à droite, les répertoires (que vous créez vous-même) sur l'hébergeur. Pour uploader un fichier, il faut glisser ce dernier de votre ordi vers l'hébergeur (donc de gauche à droite).

Les scripts :

Un script est un morceau de codes (souvent en javascript ou en dhtml pour tout ce qui est menu déroulant, effets dynamiques).
Bien entendu, 90 % des webmasteurs téléchargent des scripts tout fait (par des programmeurs expérimentés) sur un site tel que Script-masters.

Autres outils pour webmasteurs :

Certains sites offrent des services internet aux webmasters.
Même s'ils sont dit gratuits, sachez que ces sociétés font leur chiffre d'affaire sur la pub qu'elles afficheront sur les services qu'elles vous offrent.
Et bien évidement, pour enlever cette pub, vous devrez payer (c'est toujours comme ça que ça marche ^^).

Les plus connus :

Internet Services (liste des services)
Hit-parade (statistiques, livre d'or)
Bravenet (liste des services)
Aceboard (forums)

La pub :

Pour le peu que vous ayez un hébergeur gratuit et que vous vous inscriviez à quelques services internet, votre site affichera des fenêtres de pub très agaçantes pour vos visiteurs.
Voici ce qu'il faut faire pour en avoir le moins possible :

- ne jamais faire de partenariat avec des sites qui proposent des classements et autres référencement, car ils vous obligeront de mettre un logo sur votre index qui déclenchera pas des fenêtres de pub (bien entendu, ils vous le disent après votre inscription).

- ne jamais tomber dans le piège des sites qui vous proposent de l'argent si vous encouragez vos internautes à cliquer sur des bannières.
D'un point de vue ethique, ce n'est déjà pas terrible de vouloir gagner de l'argent avec vos visiteurs, mais en plus, ce genre de "contrat" n'est rentable que si votre site génère un trafic très important (c'est à dire + de 1000 visiteurs par jour, peu de sites perso y arrivent lol).

Vocabulaire :

URL : (Uniform Ressource Locator) Adresse d'une page/d'un fichier sur le web.
ex : https://forums.subafuruba.com (pour l'url du forum)

Balise : Une balise sert à délimiter des ensembles de données contenues dans un document afin de permettre la structuration de ce document à l'aide d'un langage spécialisé (un langage de balisage).
par ex. <head> est une balise html

HTML : (HyperText Markup Language). Créé par le CERN au début des années 90, c'est un langage de balisage qui permet une présentation agréable des textes et la navigation dans le texte et en dehors du texte par des liens (hyperliens ou liens hypertexte).

Ip ou Tcp : Transmission Control Protocol ou Internet Protocol. Chaque ordinateur connecté au net a besoin d'une adresse pour être reconnu (et pour que les pages web lui arrivent), cette adresse est l'adresse IP.
A chaque connexion, le fournisseur d'accès attribue donc à votre ordinateur une adresse IP valable pour toute la session.
ex addresse ip : 80.210.248.207

Cookie : Un cookie est l'enregistrement par le serveur d'un information dans un fichier texte situé sur votre ordi.
ex de cookie : quand vous cochez la case "Se connecter automatiquement à chaque visite" sur le forum.

FTP : (File Transfer Protocol) Protocole de transfert de fichiers.

Serveur/Hébergeur : c'est un super ordinateur qui héberge des informations. Ces dernières peuvent être consultées par d'autres ordinateurs quand ils se branchent au serveur.
ex d'hébergeur : Infomaniak (où se trouve le site/ forum)

CSS : (Cascading Style Sheets). Pour expliquer en très simple, le CSS sert à uniformiser vos pages web. Au lieu de mettre sur chaque page quelle est la couleur du texte, sa grandeur, la couleur des bordures etc... vous mettez ces information sur une page CSS et vous liez toutes vos pages web à cette page.
Le CSS est très facile quand vous voulez changer quelque chose sur votre site (par exemple la couleur de fond), vous modifiez la page CSS et tout le site change ^^

Scrollbars : barres grises (couleur par défaut) à droite de l'écran que vous montez et descendez lors de la visite d'une page web.

Codes couleurs : sur le web, les couleurs sont définies par des codes (par ex #00008B pour le code couleur de ce texte).
Pour voir toutes les couleurs web disponibles et leurs codes, regardez sur cette page.

Bon j'arrête là parce que ça doit vous saoûler ^^


Je finirai ce tuto en insistant sur la motivation dont vous devez faire preuve pour la création d'un site web.
Le webmastering est un hobby vraiment sympa, mais où l'on se prend la tête assez souvent (surtout au début et pour des trucs bêtes).
Il ne faut jamais s'énerver. Si vous n'y arrivez pas, effaçez et recommencez (c'est comme ça qu'on apprend).
Avec le temps vous verrez, la victoire sur la machine est une source de joie ^^

Si vous vous sentez près à franchir le cap, bonne chance et bon courage ^^

Liens tutoriaux :

Site du Zéro (lien soumis par Saphira)
Tutoriaux YoRiC

* Version d'essai = version complète mais limitée à une période d'essai (15 jours à un mois). Il serait hypocrite de dire que tout le monde achète ces logiciels (qui sont très très chers), beaucoup d'utilisateurs occasionnels préfèrent trouver sur le net un programme type "crack" pour que leur période d'essai "saute".

Nota : soyez gentils, ne nous demandez pas de vous expliquez le fonctionnement complet de tel ou tel programme.
Ce n'est pas notre rôle et nous avons une vie à vivre en plus d'un site à administrer.
De plus, un tutorial c'est toujours plus clair qu'un webmaster fatigué.
Merci pour votre compréhension. ^^
Go to the top of the page
 
+Quote Post

Closed TopicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 

Version bas débit Nous sommes le : 25th October 2007 - 05:22 PM

Arctic 3 (Beta 2) - More IP.Board Skins from InvisionCube