Vous n'êtes pas connecté.

#1 05/04/05 13:34:24

Malcolm
4d0p73z 14 1337 A7717ud3 !
Equipe Modérateurs
Lieu: unreal://Index.ut2:31337
OS: Linux Debian
Date d'inscription: 03/03/04
Messages: 3483
Site web

Quelques notions importantes pour les sites web ...

Hello  smile

mon topic est destiné un peu plus aux "débutants" qu'aux experts, mais vous pouvez tous venir y piocher des idées...
J'essaierai d'expliquer avec des mots simples certains concepts dont on voit très souvent les erreurs, et je vous engage à me contacter pour en rajouter si vous en avez d'autres à l'esprit ...


Table des matières
0- (Tout) Qui est qui ? serveur / client
1- (HTML / PHP) Erreur de noms de fichiers : Page 404 ?
2- (tout) Erreur d'upload
3- (HTML / PHP) Erreur dans les chemins
4- (HTML / PHP) Erreurs diverses (oublis) : metas, grossièretés, positionnement
5- (HTML / PHP) Scripts Java
6- (Site, Hebergeur) Bande Passante, Requête (hit) et Hébergeur


*0* Qui est qui ?
Beaucoup l'ont remarqué : lors du double clic sur un fichier dont l'extension est .htm ou .html, cela ouvre le navigateur internet et affiche une page internet.
qu'en est-il pour les autres extensions ? Vous téléchargez un script php, ou un code javascript, que faut-il en faire ?

Eh bien il faut savoir qu'il existe 2 types de langages : le langage serveur et le langage client

Concrètement, le langage serveur est une sorte de html (donc de page web classique) avec des portions de code en plus, page qui sera traduite par le serveur en html simple. Un ordinateur de visiteur ne peut pas lire le langage serveur (sauf à une condition, que je préciserai après). En comparaison, c'est comme un minerai "brut", que le "serveur" nettoie et renvoie "net", en sachant que seul le net intéresse les gens (ce qui est valable aussi dans ce topic, mais ne commençons pas les jeux de mots je vous prie biggrin)
Le langage client est un langage simple, "net" (pour reprendre ma comparaison précédente) qui passe tout de même par le serveur, si ce n'est que celui-ci n'a pas à y mettre son grain de sel.

voici un exemple typiquement schématique, pas de langage à proprement dit, mais du pseudo-code :
langage serveur :

en code : si le visiteur clique sur "FR" => alors langue = française
envoyer le fichier french.htm
sinon envoyer english.htm

le serveur renvoie : french.htm ou bien english.htm selon ce que le visiteur a choisi comme langue. Ainsi, le visiteur ne verra que 50 % des fichiers du site, mais qu'il soit anglais ou français n'aura, au point de vue du code des pages que le serveur lui enverra, presque aucune différence...


langage client:

dans le code source du site : si le visiteur clique sur l'image fleur => appeler la photo de martin
si le visiteur clique sur l'image souris => appeler pcastuces

le serveur renvoie 2 liens : l'un sur une image de fleur, l'autre sur une image de souris.

Vous l'aurez compris, le langage serveur, une fois traduit par le serveur, n'est plus qu'un langage simple ... alors que le langage client passe tout de même par le serveur mais n'est pas retraduit, puisque déjà simplifié.


Mais quel avantage de passer par un serveur ?
C'est très simple : l'avantage, ou plutôt les avantages sont la sécurité (garder un mot de passe, ou un n° de carte bancaire confidentiel par exemple), mais aussi pour un forum : en effet, si j'envoie mon message sur l'ordinateur de Untel, Bidule ne saura pas que j'ai écrit quelque chose... D'où l'idée de faire un point central... Qui permettra à Machin d'y jeter un oeil. (et accessoirement de comprendre biggrin) ou encore un compteur de visites, etc... un formulaire de vente en ligne, tout ça se traite par un serveur.


et par rapport aux extensions ?
Le langage client d'une machine est l'html. C'est un langage de mise en page simple qui est compris par le navigateur du client (le client = la personne qui visite le site). Le serveur auquel il se connecte lui envoie des fichiers, dont l'extension est html, php, abc, peu importe, mais tous ces fichiers ont été traités par le serveur pour être traduits en html. Soit le fichier "source" est déjà en html, auquel cas le serveur n'a rien à faire, soit il ne l'est pas (php, asp) et il doit le traiter pour renvoyer un fichier php qui ne contienne que du code html dedans.
Le javascript est un langage client, également : le serveur ne s'en occupe pas, c'est sur le pc du client que le javascript est exécuté.

par exemple, c'est pour cela que la commande pour imprimer une page existe en javascript et non en php : en effet, le serveur ne connait rien aux imprimantes installées sur le pc d'un client, alors que le javascript, lui, étant exécuté chez le client, peut trouver ce genre d'information


en résumé:
htm, html => directement lisibles sur un ordinateur client
js => à intégrer dans le code source d'un html, mais directement lisible aussi sur un ordinateur client
php, asp => nécessite qu'un serveur s'interpose pour recompiler le code en html.
j'ai dit plus haut qu'un ordinateur client pouvait lire des php, à une exception, que voici : il suffit sur le pc d'émuler un serveur web, et de lui faire lire les fichiers PHP. Concrètement, cela se passe avec EasyPHP par exemple (Apache est le plus connu) et vous trouverez une méthode un peu plus détaillée ici : http://gadgetip.free.fr/easy6.php




*1* Erreurs de noms de fichiers : page 404 ?
Voilà une erreur faite très facilement ... En effet, quoi de plus désolant de trouver, lors d'un clic sur un lien, une fameuse page 404 ... qui indique que le fichier n'a pas été trouvé, alors que vous êtes sûr de l'avoir mis et envoyé sur le serveur...

il existe 5 pistes à vérifier pour que les liens soient bons :

[*]1- evitez de mettre des majuscules ! en effet, la plupart des serveurs qui hébergent des pages web ne sont pas sous Windows, mais sous Linux, et, à la différence de Windows, Linux fait la différence entre un fichier nommé "Index.htm" et "index.htm". Conseil : nommez tous vos fichiers avec des lettres minuscules.
[*]2- Evitez les caractères accentués ! en effet, une page avec un caractère accentué risque de provoquer un lien "bizarre", s'il est réencodé... en effet, le "é" par exemple, en html se note & eacute; donc un lien vers une page avec un "é" dedans risque à coup presque sûr de générer une erreur, à moins que vous maniiez très bien les noms avec des caractères accentués
[*]3- Evitez les caractères que je qualifierais d'"exotiques" ! : ne mettez ni d'espace, ni de point d'exclamation, ou d'interrogation dans un nom de fichier. En effet, en html un espace se code %20, donc un lien vers page toto.html serait interprété comme page%20toto.html, ce qui peut générer des erreurs de liens. Pour éviter les espaces, privilégiez le trait d'union (-) ou le underscore (_)
[*]4- le fichier est-il uploadé ? voyez le paragraphe §2 juste après.
[*]5- une erreur de lien, tout simplement : voyez la partie §3 "chemins relatifs et absolus"


Si vous avez ces 5 pistes de liens validées, alors il ne devrait pas y avoir d'erreur de type 404 sur votre site...  A noter qu'un site dont la plupart des pages donnent accès à la fameuse 404 n'est pas franchement motivant pour une visite ultérieure...



*2* Erreurs d'upload
Qu'est-ce que l'upload ? C'est traduit en français par téléchargement. Oui, la langue française emploie ce mot "téléchargement" pour exprimer le fait qu'un fichier soit copié d'une machine à l'autre, sans plus de distinction.
L'anglais, lui, discerne 2 sens : l'upload et le download. Lorsqu'on prend une machine pour point de référence, un upload correspond à toutes les infos que cette machine envoie vers les autres. Un download exprime tout ce qu'elle reçoit des autres (par demande ou par upload des autres).
Uploader un site, c'est se connecter à un serveur par un accès, généralement le FTP (File Transfert Protocol).

On utilise un logiciel "client FTP" comme FlashFXP (payant), FTP Expert (payant), FileZilla (gratuit) ou encore LeechFTP (gratuit)
On utilise une adresse FTP : très souvent, c'est ftp.hébergeur.extension, par exemple :
--> pour Free : ftpperso.free.fr
--> pour Wanadoo : perso-ftp.wanadoo.fr
on utilise un login et un mot de passe fournis par l'hébergeur
et enfin un port, dans la plupart des cas valant 21.

Un logiciel client FTP présente en général 2 colonnes, une pour le disque dur de la machine sur laquelle vous travaillez, l'autre pour montrer le disque dur qui est attribué à votre login sur le serveur. Un upload de site correspond simplement à la copie des fichiers depuis votre disque dur vers le serveur...
Si vous oubliez un fichier, votre site fonctionnera tout de même ... Mais lorsqu'un visiteur voudra ouvrir la page présentée par ce fichier, il tombera sur unr erreur type 404 "page inexistante"

Attention : si vous oubliez de mettre un fichier index.htm dans un dossier, le visiteur verra la liste des fichiers de ce dossier.
De même, notez que les serveurs étant sous Linux (ou une des distributions), pour se balader dans les dossiers, on utilise le signe "Slash" noté "/" et non le "backslash" comme dans windows noté "\"


*3* Erreurs dans les chemins
Voilà une erreur qui arrive très fréquemment, lorsqu'on débute en sites web et qui arrive encore lorsqu'on est déjà "confirmé".

D'abord, pour les débutants, je vais définir le chemin
Un chemin est un code qui correspond à une arborescence (donc des dossiers, comme sur le disque dur) pour permettre de relier 2 objets : 2 fichiers, 1 fichier 1 image, 2 images, 1 fichier 1 musique, etc...
On parle aussi d'URL (Uniform Resource Locator)

Il existe 2 types de chemins :

[*]le chemin relatif
[*]le chemin absolu


commençons par le relatif
Pour bien définir le chemin relatif, Eric, mettons-nous en situation. biggrin
La situation, Eric, est la suivante: vous êtes dans un immeuble de plusieurs étages, chaque étage contenant des appartements qui eux mêmes contiennent des pièces.
(j'arrête là mon // avec Eric et Ramzy lol)

Vous l'aurez peut être compris, les étages de l'immeuble correspondent à des niveaux de l'arborescence (des gros dossiers), les appartements correspondent à des sous dossiers et les pièces à des fichiers.
Voilà un exemple d'arborescence de site illustrant ce propos (et avec les couleurs SVP [smile])

/  (=etage 0)
|-etage1
|   |-appartement1
|   |    |-fichier1.html
|
|-etage2
|   |-appartement2
|   |    |-fichier2.html
|
|-etage3
|   |-fichier3.html
|
|-index.html

Chaque dossier peut contenir zéro, un ou plusieurs sous dossiers, ainsi que zéro, un ou plusieurs fichiers
Il en est de même pour les sous dossiers, ceci exactement comme pour votre disque dur.
J'ai choisi ici de ne pas mettre de sous dossier dans l'étage 3. L'étage 0 contient, hormis les 3 sous dossiers "etage1","etage2","etage3" un fichier index.html


Supposons que le visiteur ait actuellement la page index.html affichée. Un lien sur lequel il a cliqué doit ouvrir le fichier1.html

le code à créer doit donc dire :

tu es dans index.html, contenu dans "etage0"
-> ouvre le dossier "etage1", sous dossier de "etage0";
-> dans "etage1" tu ouvres "appartement1" (que tu ouvriras aussi)
-> et là tu trouveras le fichier1.html

le code à créer pour ouvrir un sous dossier est de mettre "nomdudossier/"
par exemple, "etage1/" ouvrira le dossier "etage1", dossier fils direct de etageO
de même pour appartement1, et on accède au fichier1.html :

dans index.html, le code pour accéder à fichier1.html est :

etage1/appartement1/fichier1.html

le lien html sera donc : <a href="etage1/appartement1/fichier1.html">Fichier 1</a>

Là, nous avons "descendu" dans l'arborescence, en ouvrant à chaque fois des sous dossiers. Il existe bien entendu un moyen de remonter, noté "../"

Encore une fois, Eric, mettons-nous en situation :
je suis dans fichier3.html et je désire accéder à fichier2.html

il faut dire au serveur :

tu es dans fichier3.html, contenu dans etage3.
-> tu dois remonter d'un dossier (tu seras alors dans etage0, mais c'est sous entendu)
-> tu dois redescendre dans etage2
-> là tu auras le fichier2.html

le code à créer pour ouvrir un dossier dit "parent" est de mettre "../nomdudossier/"
par exemple, "../" ouvrira le dossier "etage0" qui est le parent direct de etage3
et on accède au fichier2.html :

dans fichier3.html, le code pour accéder à fichier2.html est :
../etage2/appartement2/fichier2.html

le lien html sera donc : <a href="../etage2/appartement2/fichier2.html">Fichier 2</a>


Voici donc les liens relatifs, c.à.d. des liens qui partent d'un fichier source pour aller vers un fichier cible, en remontant dans les dossiers parent et en descendant dans les dossiers enfants. Bien entendu, pour ouvrir un fichier voisin (supposons index_bis.html, voisin de index.html) il suffit de mettre <a href="index_bis.html">Index Bis</a>.





et maintenant l'absolu :
C'est beaucoup plus simple. Ce style de lien donne le chemin complet du fichier depuis la racine du serveur (que j'ai précédemment appelée etage0)
par exemple, le chemin absolu de index.html est http: //www .site.com/index.html
le chemin absolu de fichier1.html est http: //www .site.com/etage1/appartement1/fichier1.html

ici on donne tout le détail de l'arborescence. Avantage : on est sûr de ne pas se tromper en oubliant des ../ ou des /dossier/
inconvénient : si on décide de déplacer le site (changement de site.com par toto.com) tous les liens sont à rééditer...



Une erreur classique dans les liens souvent faite par ceux qui débutent est de ne pas se rendre compte que les liens dans leur site sont absolus et pointent vers le disque dur.
Ex : un lien file err//C/program%files/dossier%20web/index.html

Ce lien ne marchera pas, car le serveur n'aura pas accès à ce fichier... (heureusement sinon on aurait acès à votre disque dur n'importe comment !)
Solution : déclarer un site dans le logiciel (Fichier / Nouveau / Site Web en général) pour que le logiciel comprenne que, dans mon exemple, dossier%20web sera la racine de mon futur site (etage0)
psiiit : vous avez vu ? j'ai mis volontairement un nom avec des espaces pour vous montrer que c'est pas facilement lisible...



j'ai cité récemment un exemple de différence entre l'absolu et le relatif que j'ai jugé bon de rajouter ici... Cela vous aidera peut être mieux à cerner au cas où un doute subsisterait ...
L'exemple est le suivant. Je reprends mon immeuble, avec des étages, des portes à chaque étage.

parler de chemin absolu c'est dire le n° de la porte en partant de la toute première porte (concierge) pour point de référence...
par exemple, concierge = porte zéro, puis le rez-de-chaussée ayant 10 personnes qui y vivent, la porte n° 11 sera au premier étage.

parler de chemin relatif, c'est partir avec un point de référence local, et non global. En gros, chaque étage a sa première porte, sa 2ème porte...

Pour finaliser mon exemple, en absolu :
Thomas qui habite à la porte n°53...

...en relatif donnera :
Thomas habite au 5ème étage, 3ème porte.

dans un cas (absolu), on est sûr de ne pas se tromper. Sûr et certain. Mais le hic c'est que tous les immeubles n'ont pas forcément de 5ème étage...
dans l'autre, bien que presque tous les 5èmes étages habités aient une 3ème porte (si on suppose au minimum 3 habitants distincts), on peut transporter le raisonnement d'un immeuble à l'autre (très facile), mais il faut s'assurer que c'est bien la 3ème porte.


Voilà pour mon exemple. Plus clair ? pareil ? mieux avec le texte seul ..? je ne sais pas... ça a aidé des gens, peut être vous également.

*4* Erreurs diverses (oublis) : metas, grossièretés, positionnement - sur le fond et sur la forme
Dans ce bout de paragraphe, je vais mettre une liste non exhaustive des erreurs plus ou moins importantes pour le site, qui pourront altérer son affichage de manière plus ou moins significative.

1ere remarque : beaucoup de gens qui débutent mettent des fichiers très gros dans leur site. Une photo, une musique de fond. (Hormis les noms qui ne respectent pas toujours les règles enoncées ci dessus), ces fichiers, lourds de plusieurs mégaoctets, prennent un temps fou à télécharger. Ils ne s'en rendent pas compte car l'affichage sur leur disque dur est quasi immédiat... Mais ceux qui ont un modem 56k le sentent !
Pour donner une idée d'ordre de grandeur, les 56k téléchargent à 5 ko/sec (quand le serveur est bon)

soit une musique de 1 Mo (1 Mo = 1024 ko) prendra plus de 200 secondes, soit plus de 3 minutes, et ceci rien que pour la musique ... Après restent les textes, les images, etc...
Les photos, c'est pareil...

Solution : bien que l'idéal étant de ne pas mettre de musique du tout, essayez de ne mettre que des fichiers MIDI (extension .mid) : un fichier de 60 ko prendra 12 secondes de téléchargement.
Mettez des vignettes des photos. Comme pour une galerie photo, réduisez votre photo à l'aide d'un logiciel de retouche d'image pour générer la même, mais en plus petit. Faites un lien dessus vers la grande photo. (N'oubliez pas d'uploader tous les fichiers sur le serveur !)
attention au copyright des musiques...

2ème remarque : Mettez un titre à votre page... Le titre se situe dans le code entre les balises <title> et </title>
pour ceux qui voudront référencer leur site, je vous engage à lire mon article http://gadgetip.free.fr/referencement.php

3ème remarque : Corrigez vos fautes d'orthographe ... Actuellement, j'estime que la majorité des utilisateurs ont un correcteur d'orthographe, ce n'est pas compliqué de passer le texte dessus ... Et un site bourré de fautes d'orthographe ne sera pas vraiment visité...
Si vous avez des doutes sur l'écriture d'un mot, n'hésitez pas à lire ce topic, très complet

4ème remarque : Faites attention au code source : internet explorer, même s'il est le navigateur le plus répandu, ne respecte pas les normes du code HTML. Il les reconnait pour la plupart, mais il en reconnait beaucoup d'autres, non validées, ce qui peut paraitre bizarre...
Lisez, pour un peu plus d'infos, ce sujet : http://forum.pcastuces.com/sujet.asp?SUJET_ID=125994 dans lequel l'ami koala a qq soucis [langue]
Explication : supposons que vous mettiez dans votre page un code. par exemple <b>texte</b> vous affichera texte (en gras)
Il y a des navigateurs qui ne reconnaitront pas cette balise... (ce n'est pas le cas pour <b>, mais pour <marquee> par exemple) et l'affichage du site devient alors dépendant du navigateur du client...
Evitez les surprises en n'utilisant qu'un code source générique, qui est compatible partout ...

Pour vérifier que votre site est bien écrit au pooint de vue du code source, il existe le W3C Validator : http://validator.w3.org/
Il vous indiquera les erreurs, corrigez-les et vous serez sûr que votre site s'affichera exactement pareil quelque soit le navigateur du client (internet explorer, netscape mozilla, firefox, etc...)
Vous aurez droit à un joli petit bouton comme en bas de mon site d'anatomie ... [approuve]

5ème remarque : la mise en page. Pensez que le visiteur n'a pas forcément le même ecran que vous ... Si vous travaillez sur du 1024 x 768, alors il y a de grandes chances, mais les 3 principales résolutions sont 1024 x 768, 800 x 600 et 1280 x 1024. Toutes les 3 ont des dispositions différentes ... (forcément) aussi ne calquez pas votre site sur une photo en 1280 x 1024, sinon ceux qui iront dessus en 800 x 600 auront de longs ascenseurs, horizontaux comme verticaux.
Solution : utilisez des % qui se redimensionnent automatiquement selon la résolution d'écran, des styles CSS par exemple.





*5* Scripts Java
Qu'est-ce que c'est ?
c'est un bout de code qui s'insère dans une page html (mais aussi dans une php) qui permet d'avoir une fonction d'animation sur le pc du visiteur.

Ce code est traduit par la machine du client, donc il doit avoir la machine JAVA installée.

Voyez un exemple : www.cours-anatomie.info, en dessous de ma bannière il y a un menu. Un script java permet de faire des animations de textes, d'images de cet ordre.

Comment le mettre en place ?
La page HTML se découpe en 2 blocs principaux :

<head> ... </head> pour la tête de page
<body> ... </body> pour le corps de la page.

La tête de page est exécutée par le navigateur, le corps est ce qui est visible à l'écran pour le visiteur.

Un script java peut avoir un morceau de code à 3 endroits différents :

[*]dans le <head>
[*]dans le tag <body>
[*]dans le <body>

dans le head : copiez le morceau de code entre <head> et </head>

Exemple :

<html>
<head>
<title> titre de page</title>
<script type="text/javascript" src="javascript/fichier.js"></script>
</head>

<body>
...
</body>
</html>

dans le tag body :
souvent couplé à uine copie dans le head, il faut un morceau de code dans la balise <body> comme suit:

Exemple :

<html>
<head>
<title> titre de page</title>
<script type="text/javascript" src="javascript/fichier.js"></script>
</head>

<body onload="effet_javascript">
...
</body>
</html>

attention, ce n'est pas toujours un "onload" ... La partie à mettre dans le tag body vous est précisée par le créateur du script.

dans le body :
parfois couplé aux 2 précédentes insertions, parfois seul, parfois avec une insertion simple dans le head. Pour l'exemple suivant, je montre les 3 à la fois, mais la violette illustre ce point du paragraphe :


Exemple :

<html>
<head>
<title> titre de page</title>
<script type="text/javascript" src="javascript/fichier.js"></script>
</head>

<body onload="effet_javascript">
...
<script type="text/javascript" src="fichierbis.js"></script>
...
</body>
</html>

Attention à la compatibilité ...
Il existe de très beaux effets javascripts, qui ne sont lisibles que sous un certain navigateur, Internet explorer. Mais pensez un instant que d'une part tous vos visiteurs ne sont pas forcément sous Internet explorer, et que d'autre part, quand bien même ils le seraient, ils n'ont pas forcément la dernière version ... (la 5 étant livrée avec windows 98)
D'autre part, il n'est pas exclu que certains surfeurs désactivent chez eux le javascript, ou bien ne l'installent pas...

C'est un compromis à choisir...

Derniers points auxquels il faut penser : les ressources et l'utilité. S'il vous prend l'envie de mettre des flocons de neige qui tombent sur votre page pour Noël, pourquoi pas, mais faites attention à ce que ça ne ralentisse pas trop l'ordinateur, les scripts de ce genre étant très gourmands en ressources.

D'autre part, mettre un javascript pour voir une horloge qui suit le curseur, est-ce vraiment utile sachant que j'ai une horloge dans la barre des tâches de Windows ?
Comme disent 2 comiques, "c'est vous qui voyez ..." smile il y en a qui ont essayé, ils ont eu des problèmes, cela dit, il est très rapide pour les désireux de la citation complète
biggrin


Ressources javascripts : regardez sur Google... recherchez "javascripts", "texte défilant javascript", javascript sur un lien", etc...



*6* Bande Passante, Requête (hit) et Hébergeur

J'ai donné dans un récent topic une explication de la bande passante, des limitations de requêtes sur un serveur qu'ilme semble judicieux de rajouter dans ce topic.

Concrètement, de quoi s'agit-il dans cette partie ?
Il s'agit de définir ce que l'hébergeur vous donne comme permissions, dans la globalité.

Hébergement : l'offre
L'offre d'hébergement est de 2 types. Payante ou gratuite. (voir le topic Liste offres hebergements de Ti_Ouf)
L'offre se décline en plusieurs paramètres :

[*]1. l'espace de stockage. Il s'exprime en général en méga octets, c'est un espace qui vous est réservé. Vous pouvez y stocker ce que vous voulez comme fichiers, que ce soit des html, des mp3, des avi, des doc, des zip ... Un peu comme une clé USB, mais sur internet. La connexion à cet espace se fait par un client FTP, voir le §2 "Upload"
[*]2. Base de données ? Parfois, on vous propose une base de données. A quoi cela correspond-t-il ? Je ne vais pas trop rentrer dans les détails, puisque mon topic se veut simple... Imaginez donc un document créé avec Microsoft Excel : vous avez, par défaut, 3 feuilles, chacune étant composée de lignes et de colonnes (256 colonnes par 65 536 lignes). La base de données est exactement comme cela... Si ce n'est que c'est pas un format "excel", mais elle présente des informations, regroupées en tables (les feuilles d'excel), chaque table étant composée de champs qui sont disposés en colonnes (les colonnes d'excel). La table contient des enregistrements. Chaque enregistrement est un ensemble de valeurs qui sont enregistrées respectivement dans les champs... Prenons l'exemple d'une table "amis". A chaque "ami", je demanderai ses nom, prénom, age, adresse postale, adresse mail. La table sera donc "Amis". Les champs seront "nom, prénom, age, adresse postale, adresse mail" et un enregistrement = un ami ... Par exemple "Malcolm / 23 ans / Rouen ..." Quel est l'intérêt ? Il ne s'agit pas seulement de traiter des commandes, factures et clients, mais aussi créer des moteurs de recherches ...
[*]3. Webmail Le Webmail est un service qui se compose, pour un nom de site (URL) d'une adresse mail associée. Par exemple, "baptiste @ pcastuces.com"  Selon les offres, il y a 1, 5, 10 ... adresses mails possibles. Les hébergements gratuits n'ont pas ce genre de proposition (1 adresse au plus en général)
[*]4. Nom de domaine C'est un nom avec une extension, qui permettra d'accéder au site. Pcastuces.com est un nom de domaine. Les hébergements payants proposent en général un nom en .com, org, net, biz... info aussi... Les gratuits non : ils ont leur nom avec le login du client très souvent (exemple : http: // multimania.lycos.com / toto/ pour le nom de domaine de toto) Il est possible d'acheter un nom en .com avec un hébergement gratuit... Le nom en .com redirigera simplement le visiteur sur http:// multimania... / toto (c'est vous qui le définissez)
[*]5. Sous domaines C'est en général les grosses offres qui proposent ce genre d'option. Pour un nom de domaine, cela permet d'avoir un nom dérivé pour appeler directement une autre page du site... par exemple, forum.pcastuces.com est un sous domaine de pcastuces.com (il y a pcastuces.com en commun)
[*]6. Langages, fonctions Les hébergeurs gratuits ne   proposent pas tous la même chose. Certains ne proposent pas le php (wanadoo par exemple), d'autre oui (Free par exemple) Regardez ce qui vous est proposé dans l'offre.


L'offre stipule en outre les termes de "bande passante", de "requêtes" (ou hits). Pour ceux qui ne sont pas très familiers avec ces notions, je vais les expliquer ici :

La bande passante
en général

La bande passante, appelée également débit est la quantité maximale d'éléments passant dans une section par unité de temps. biggrin

voilà pour la définition générale. ça s'applique à l'éléctronique, mais aussi à la mer, aux voitures sur l'autoroute... bien que dans ces derniers cas on parle de débit et non de "bande passante", mais le principe reste le même.

En informatique, la bande passante s'exrime en générale en kilobits/seconde, que l'on peut aisément convertir en kilooctets/secondes : il suffit de savoir que 1 octet = 8 bits et donc la division du nombre de kilobits (noté kb) par 8 donnera l'équivalent en kilooctets (ko ou kB en anglais, B pour Byte)


en anglais, tant que j'y suis :
1 octet se dit 1 Byte, noté B (B majuscule)
1 bit se dit 1 bit biggrin noté b (b minuscule)

Après, en informatique, il existe 2 bandes passantes; la théorique et la pratique. La théorique se calcule par la puissance maximale de la ligne (réseau, internet, bus système ...) alors que la pratique est l'application concrète.

Je prends un exemple :

une connexion 56k = 56 kilobits/sec = 7 kilo octets / seconde.
en théorie.

en pratique, cette connexion donnera du 5 ou 6 kilo octets par secondes.


Pour donner un exemple plus général, il suffit de comparer la bande passante à une autoroute où les informations seraient des voitures.
L'autoroute a une largeur, exprimée en nombre de voies : 2 voies, 3 ou 4 voies. (j'ai jamais vu 5 encore tongue)
En mettant 4 voitures ensemble, elles peuvent être une sur chaque voie par exemple. Ce qui implique que chacune peut avancer à la vitesse qu'elle veut, puisque personne ne la dérange devant (tout code de la coute mis de coté)
alors que s'il n'y a qu'une voie, c'est la première des 4 voitures qui limite les 3 autres (à moins de doubler, ce que les informations électroniques ne feront jamais)

coté internet, chez soi

Elle est tributaire d'un forfait internet. Elle n'augmente ou diminue que selon sa capacité. Par exemple, l'adsl 1 mega signifie 1 mega en réception. Pour faire augmenter ou diminuer la bande passante en tant que telle, il faut changer de forfait.
maintenant concernant l'occupation de la bande passante, vis à vis d'internet, c'est tout ce qui est téléchargé qui en est responsable.
Il y a l'émission (upload) et la réception (download) qui sont traduites toutes les 2 dans un seul mot français : le téléchargement. (c'est pour ça que je préfère les termes anglais, qui distinguent un sens)
pour les upload : en général c'est l'envoi de mails, les logiciels p2p (emule, kazaa et Cie), msn, antivirus ... webcam sur chat ... jeu sur internet ...
pour les download : msn, antivirus, réception de mails, mises à jour de logiciels ... navigation sur internet ...
ceci est valable à condition que lesdits logiciels soient chargés en mémoire ... la réception de mails ne prendra rien si outlook ou aucun client messagerie n'est ouvert !

coté serveur et hébergement

la bande passante, c'est dans le cas de l'hébergement la taille totale de ce que le(s) visiteur(s) va(vont) télécharger :
visite d'une page =
--> page html
--> images de fond, des boutons...
--> bannières éventuelles
--> musiques éventuelles
--> divers : animations JAVA, flash...
--> éventuellement un fichier proposé à télécharger : pdf, zip ...


donc, pour une seule page de site, on fait l'addition des tailles en ko de tous les éléments cités ci dessus, et on obtient la taille de bande passante requise pour voir cette page. En sachant que, pour l'exemple du zip proposé à télécharger, ce n'est que lorsque le visiteur demande par un clic sur un lien, à recevoir le zip, que l'espace correspondant est demandé...

prenons un exemple :
une page html simple, avec tous les éléments cités ci dessus :
- fichier htm : 10 ko (dont le texte écrit sur la page)
- banniere.gif : 25 ko
- fond.jpg : 0.5 ko
- bouton1.gif : 2 ko
- bouton2.gif : 2 ko
- bouton3.gif : 2 ko
- pdf proposé en parallèle : 150 ko
- zip proposé en parallèle : 2 Mo

pour voir cette page, le navigateur du visiteur demande au serveur de lui uploader :
- fichier.htm
- la banniere.gif
- le fond.jpg
- les 3 boutons


le pdf et le zip ne seront uploadés que si le visiteur les demande.

Bande passante utilisée :
10 + 25 + 2*3 + 0.5 = 41.5 ko

Si jamais je clique sur le lien du ZIP, 2 Mo seront utilisés après.


Les requêtes (hits)
Elles sont parfois limitées sur certains hébergeurs.

qu'est-ce qu'une requête ? c'est une demande de truc biggrin on va aller loin avec ça.
Pour reprendre mon exemple précédent de la page, lorsque je tombe dessus, mon navigateur demande :

- fichier.htm
- la banniere.gif
- le fond.jpg
- les 3 boutons

soit 1 + 1 + 1 + 3 = 6 éléments. Cela fait 6 requêtes.

Une requête n'est pas limitée en taille, c'est simplement le fait de demander qqch au serveur. Si je clique sur le lien pour avoir le PDF, cela fera une requête en plus.




Comment réduire l'utilisation de la bande passante ?
en faisant télécharger le moins de trucs possibles au visiteur.

Par exemple, au lieu d'écrire dans le code html :
<font face="Times New Roman" size="12" color="#FF6600">Salut les amis !</font>

on peut créer un style CSS qui reprendra la police, la taille et la couleur :

.style_orange
{
color:#FF6600; font-size:12pt; font-family:"Times New Roman"
}

et l'appeler de la manière suivante :

<p class="style_orange">Salut les amis !</p>

Pour une seule fois ... c'est pas nécessaire de créer un style CSS... Mais avec un site de 300 pages, on sent vraiment la différence !!!
car je pense que vous avez un téléphone portable ... comme plus de 50% des gens lors de la rédaction d'un télémessage, le nombre de caractères est important ... Eh bien là c'est pareil.


Autre moyen d'alléger l'occupation de la bande passante : en optimisant les images.

Par exemple, une image qui n'est composée que de 5 ou 6 couleurs principales, la passer en format GIF au lieu de la garder en bmp, 24 bits.
Pas trop de fioritures... Je parlais plus haut dans ce topic d'une horloge en javascript qui suit le curseur, par exemple... ou un compteur de visites... qui, entre nous soit dit, lorsqu'il affiche "vous êtes le 3ème visiteur", n'incite pas spécialement à revenir...
Je considères les compteurs comme inutiles, car reflets de la satisfaction personnelle du webmaster. Ce genre de données statistiques ne sert qu'à lui, pourquoi chercher à le montrer ? (mais à chacun sa façon de voir les choses)


Est-ce vraiment si important ?
Cela dépend des hébergeurs... Certains mettent un quota limite, en bande passante ou en hits. Lors d'un dépassement, une facturation supplémentaire est demandée au titulaire de l'espace web. (certains hébergeurs payants, mais c'est marqué dans le détail de l'offre)

L'importance, jugez-la par vous-même... le site concurrent n'est qu'à quelques clics de souris, et une page trop grosse risque de faire fuir les visiteurs...




*7* *** Fin du topic ***
J'arrête là ce topic, pour une question d'horaire, d'une part, mais surtout parce que je pense avoir fait le tour des principales erreurs qui sont demandées dans ce forum.
Si d'autres vous viennent à l'esprit, n'hésitez pas à me les signaler, si moi même j'en ai fait, idem (mais je pense pas)
Si vous avez besoin de compléments d'infos sur un point abordé, je suis dispo par mail (mis dans mon site), ou par MP.

Matthieu

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
'.$lang_pms['PM'].'

'; } elseif($pun_config['o_pms_enabled'] && $pun_user['is_guest']) { $pid = isset($cur_post['poster_id']) ? $cur_post['poster_id'] : $cur_post['id']; $user_contacts[] = ''.$lang_pms['PM'].'

'; } ?>

#2 05/04/05 19:19:20

Ju
lemanchotvolant@jabber.fr
Equipe Admin
Lieu: Boston, Texas
OS: Linux Debian
Date d'inscription: 26/01/04
Messages: 6005
Email  Site web

Re: Quelques notions importantes pour les sites web ...

Bravo pour ce topic très ... grand ^^ !
Cependant, j'émettrais qq critiques.

Concrètement, le langage serveur est une sorte de html (donc de page web classique) avec des portions de code en plus,

Heu, je sais pas si tu as déjà codé de vrai codes PHP mais l'HTML est loin d'y être dominant wink ! Je t'invite à regarder (à tout hasard) un ou deux fichiers PHP de Signatux.

Sinon, pour les hits des débutants peuvent à la limite se demander ce que ça fait dans leurs stats mais la BP, je pense que le webmaster qui en arrive à dépasser ou commencer à penser à sa BP est un webmaster qui a un traffic suffisament gros pour en être à un stade assez avancé pour le savoir smile.

Idem pour Java, c'est rarement le premier truc qu'on utilise (en particulier côté serveur).

Je finirais en indiquant à but purement informatif également ce lien pour qq cours HTML.

Voilà, sinon bravo pr ta tâche accomplie smile



TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation

#3 05/04/05 22:43:22

Malcolm
4d0p73z 14 1337 A7717ud3 !
Equipe Modérateurs
Lieu: unreal://Index.ut2:31337
OS: Linux Debian
Date d'inscription: 03/03/04
Messages: 3483
Site web

Re: Quelques notions importantes pour les sites web ...

Mon sujet se base plus pour les "débutants", comme je l'écris en son début ...

c'est vrai que certaines pages php ne contiennent pas d'html, j' en ai moi même fait... mais ce qu'il importe de savoitr c'est que le serveur traduit en html une page php ...

concernant la Bande Passante, j'ai déjà eu ce problème plusieurs fois ... mon tout premier hébergeur m'ayant fortement incité à changer de formule sous prétexte que mon site avait consommé plus d'un ou 2 gigas en une journée ...

protestation faite, il s'est avéré que c'était une erreur de leur serveur ... (heureusement, car ce dépassement dantesque avait eu lieu un jour de juillet, à une heure creuse ... genre entre 15h et 16h (^^)

et ça s'est répété 3 fois de suite tongue


Concernant le java, je reconnais qu'il y a un abus de langage : j'ai confondu "java" et "javascript", mais le principe est presque le même : le javascript est directement envoyé au client (tout comme l'html) qui l'exécute chez lui, le java est envoyé au client également, mais ce n'est pas le navigateur qui l'interprète, c'est la machine virtuelle (comprennez-là une sorte de faux ordinateur dans la mémoire de votre ordinateur, qui ne serait chargé que de traiter le java)

Merci de ta réponse.

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
'.$lang_pms['PM'].'

'; } elseif($pun_config['o_pms_enabled'] && $pun_user['is_guest']) { $pid = isset($cur_post['poster_id']) ? $cur_post['poster_id'] : $cur_post['id']; $user_contacts[] = ''.$lang_pms['PM'].'

'; } ?>

#4 06/04/05 00:48:51

Ju
lemanchotvolant@jabber.fr
Equipe Admin
Lieu: Boston, Texas
OS: Linux Debian
Date d'inscription: 26/01/04
Messages: 6005
Email  Site web

Re: Quelques notions importantes pour les sites web ...

ok, oui java et javascript rien à voir wink !

Mais pour ce qui est de PHP qui est "traduit en html", j'avou que j'ai du mal à le lire ^^ !
C'est une façon de résumer peut-être pr un débutant, mais ça reste très superficiel, aprés tout tu peux très bien faire afficher du JavaScript, Java, Flash ou n'importe wink



TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation

#5 06/04/05 07:33:37

Malcolm
4d0p73z 14 1337 A7717ud3 !
Equipe Modérateurs
Lieu: unreal://Index.ut2:31337
OS: Linux Debian
Date d'inscription: 03/03/04
Messages: 3483
Site web

Re: Quelques notions importantes pour les sites web ...

bien sûr ... je suis entièrement d'accord... Ce que je veux sous entendre, c'est que le php regrooup des conditions, etc. ... que le serveur traduit en un étét (le plus souvent html) interprétable par le client...

C'est vrai que si tu y regardes de plus près, ce n'est pas exclusivement réservé à l'html... Mais pour quelqu'un qui commence à découvrir l'html, c'est plus simple à comprendre.

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
'.$lang_pms['PM'].'

'; } elseif($pun_config['o_pms_enabled'] && $pun_user['is_guest']) { $pid = isset($cur_post['poster_id']) ? $cur_post['poster_id'] : $cur_post['id']; $user_contacts[] = ''.$lang_pms['PM'].'

'; } ?>

#6 05/05/05 21:08:38

Ti_ouf
CtrlAltUser Actif
Lieu: Lyon
OS: Linux Knoppix
Date d'inscription: 04/05/05
Messages: 516
Email  Site web

Re: Quelques notions importantes pour les sites web ...

woaooooo j'ai tout compris moi en tout cas  aww
nan très bien malcolm, pour des débutants il faut avoir un langage adapté

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
'.$lang_pms['PM'].'

'; } elseif($pun_config['o_pms_enabled'] && $pun_user['is_guest']) { $pid = isset($cur_post['poster_id']) ? $cur_post['poster_id'] : $cur_post['id']; $user_contacts[] = ''.$lang_pms['PM'].'

'; } ?>

#7 20/11/07 19:36:34

M@x
Nouveau
Lieu: En Local
OS: Windows 2k/NT/XP
Date d'inscription: 20/11/07
Messages: 6
Email  Site web

Re: Quelques notions importantes pour les sites web ...

Moi a écrit:

Hébergement : l'offre
L'offre d'hébergement est de 2 types. Payante ou gratuite. (voir le topic Liste offres hebergements de Ti_Ouf)

Lien mort wink

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation

#8 20/11/07 22:24:19

Malcolm
4d0p73z 14 1337 A7717ud3 !
Equipe Modérateurs
Lieu: unreal://Index.ut2:31337
OS: Linux Debian
Date d'inscription: 03/03/04
Messages: 3483
Site web

Re: Quelques notions importantes pour les sites web ...

Merci, c'est corrigé.

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation

#9 28/01/08 23:06:07

loicdu84
Nouveau
Date d'inscription: 28/01/08
Messages: 1

Re: Quelques notions importantes pour les sites web ...

Bonjour !



C'est tout nouveau sur Internet cela vient d'être mis en ligne à 13h lundi !

Venez jouer sur ma nouvelle plateforme de jeux d'adresse en ligne !

- Découvrez le tout nouveau Messenger uVme ! Importez vos contacts, MSN, Yahoo Messenger, Google talk etc..
- Entrainez vous aux jeux uVme, devenez de plus en plus fort et battez tous les records !
- Défiez vos amis au billard, au sudoku, au FruitFrenzy etc...
- Participez aux tournois uVme, et gagnez des milliers d'euros grâce à votre experience aux jeux uVme !

Inscrivez vous et jouer gratuitement ici :

***

le site n'apparait pas en français cliquer sur le drapeau correspondant en haut à gauche

INSCRIPTION ENTIEREMENT GRATUITE ! PROFITEZ EN ET SURTOUT FAITES EN PROFITER VOS AMIS EN JOUANT AVEC EUX !

EDIT Malcolm : pas de pub au premier message + mauvaise catégorie. Dernier avertissement.

Dernière modification par Malcolm (29/01/08 09:08:50)

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
'.$lang_pms['PM'].'

'; } elseif($pun_config['o_pms_enabled'] && $pun_user['is_guest']) { $pid = isset($cur_post['poster_id']) ? $cur_post['poster_id'] : $cur_post['id']; $user_contacts[] = ''.$lang_pms['PM'].'

'; } ?>

#10 29/01/08 00:02:31

Jones
Modérateur
Equipe Modérateurs
Lieu: Suisse
OS: Linux [autre]
Date d'inscription: 31/05/04
Messages: 780
Email  Site web

Re: Quelques notions importantes pour les sites web ...

loicdu84 a écrit:

Bonjour !



C'est tout nouveau sur Internet cela vient d'être mis en ligne à 13h lundi !

Venez jouer sur ma nouvelle plateforme de jeux d'adresse en ligne !

- Découvrez le tout nouveau Messenger uVme ! Importez vos contacts, MSN, Yahoo Messenger, Google talk etc..
- Entrainez vous aux jeux uVme, devenez de plus en plus fort et battez tous les records !
- Défiez vos amis au billard, au sudoku, au FruitFrenzy etc...
- Participez aux tournois uVme, et gagnez des milliers d'euros grâce à votre experience aux jeux uVme !

Inscrivez vous et jouer gratuitement ici :

***

le site n'apparait pas en français cliquer sur le drapeau correspondant en haut à gauche

INSCRIPTION ENTIEREMENT GRATUITE ! PROFITEZ EN ET SURTOUT FAITES EN PROFITER VOS AMIS EN JOUANT AVEC EUX !

Premièrement, ça n'a rien à voir avec le topic dans lequel tu postes; il y a un forum prévu pour les sites.
Deuxièmement, tu n'es pas censé venir faire de la pub pour ton site mais demander conseil ou aide, suggestion.

Attends-toi donc à voir ton post censurer.

Sinon, bienvenue quand-même sur le forum !

Salutations

Dernière modification par Malcolm (29/01/08 09:09:06)

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
'.$lang_pms['PM'].'

'; } elseif($pun_config['o_pms_enabled'] && $pun_user['is_guest']) { $pid = isset($cur_post['poster_id']) ? $cur_post['poster_id'] : $cur_post['id']; $user_contacts[] = ''.$lang_pms['PM'].'

'; } ?>

#11 29/12/09 20:51:27

imarati
Exclu
Date d'inscription: 29/12/09
Messages: 2
Email

Re: Quelques notions importantes pour les sites web ...

merciiiiiiiiiiiiiiiiiiiii

EDIT Malcolm : pas de lien sponsorisé, merci.

Dernière modification par Malcolm (30/12/09 01:14:50)

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
'.$lang_pms['PM'].'

'; } elseif($pun_config['o_pms_enabled'] && $pun_user['is_guest']) { $pid = isset($cur_post['poster_id']) ? $cur_post['poster_id'] : $cur_post['id']; $user_contacts[] = ''.$lang_pms['PM'].'

'; } ?>

#12 06/09/11 11:31:19

serdj
Nouveau
Date d'inscription: 05/09/11
Messages: 3
Email

Re: Quelques notions importantes pour les sites web ...

Ah oui les anglais ont bien de la chance d'avoir deux mots "upload" et "download" alors que nous pauvres frenchies on n'a que "téléchargement".
Certains ont proposé "téléchargement descendant" (pour download) et "téléchargement montant" pour upload, mais franchement si on propose à un internaute le "téléchargement descendant" d'un fichier il va de gratter la tête...
Perso je préconise d'utiliser "téléchargement (download)" ou "teléchargement (upload)"
Qu'en pensez vous ?

TOP Hors ligne

  • Signaler
  • Citer
  • Ajouter à la citation
Actuellement aucun autre membre et 1 invité sur ce topic
Membres : [S'enregistrer]

Pied de page du Forum

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson