Développement des sites web :

    Introduction :

La première étape dans la conception d'un site Web est la définition des objectifs que vous poursuivez dans la création d'un site. Ces objectifs formeront la "colonne vertébrale" de votre communication qui apportera la cohérence indispensable à votre site.

Avant de se lancer dans la réalisation d'un site Web, il faut prendre le temps d'une réflexion préalable dont voici les lignes de force.

Public visé

L'étape suivante dans le processus d'élaboration d'un site sera d'identifier les utilisateurs potentiels de votre site afin d’adapter votre communication à leurs besoins et leurs attentes.

Un site Web est donc trois composantes qui s'adressent chacune à une fraction de votre public. Ceux qui n'ont jamais visité votre site, les passants, apprécieront sa clarté et sa présentation visuelle harmonieuse. Ceux qui y reviennent une ou deux fois, les curieux, seront convaincus par la qualité du contenu. Enfin les habitués des lieux, les fidèles, vous témoigneront une infinie gratitude si, en plus, le téléchargement de vos pages est rapide.

 Voici quelques regles qu’elles sont généralement respectées en matière de publication sur le Web :

Page d’acceil :

Votre première page (page d'accueil, home page, ...) doit se nommer index.htm ou index.html. Il est de plus préférable que les noms de vos pages ne dépassent pas 8 caractères.

Lorsque l'internaute clique sur votre site à partir d'un moteur de recherche ou encode directement votre adresse au clavier, c'est sur cette page qu'il aboutit. Il vous reste alors 30 secondes pour le convaincre de parcourir les pages de votre œuvre et vous récompenser ainsi de toutes vos heures de travail. C'est dire toute l'importance que l'on accordera à la conception et à réalisation de cette première page.

Cette page d'entrée de votre site prend le nom de page d'index (en référence à l'adresse index.htm), de "homepage" ou de page d'accueil. Pour les sites à structure hiérarchisée, cette page est tout naturellement celle qui est au sommet de la hiérarchie et vers laquelle on pourra revenir à partir de toutes les pages du site.

Les usages (ou le bon sens) dictent les éléments constitutifs de celle-ci :

• le nom ou le titre de votre site qui en reprendra l'objet.
• un sommaire (détaillé ou synthétique) qui donnera une vue d'ensemble du contenu et amorcera les outils de navigation.
• un élément visuel (logo, image, icône symbolique) pour l'aspect attractif.
• un court texte qui reprend le descriptif fourni aux moteurs de recherche (excellent pour le référencement et le classement).
• le nom de l'auteur et un lien vers l'adresse électronique de celui-ci.
• la date de réalisation ou de la dernière mise à jour.
• etc.

Avec quel logiciel faire votre page?

Les débutants pourront utiliser un logiciel de création de page web. Netscape (front page) en propose un. Pour y acceder, lancez une fenetre Netscape, allez dans le menu File, New, Blank page. Une nouvelle fenêtre apparait, où vous pouvez taper directement votre texte, insérer des images, comme dans un traitement de textes.

    Le langage Html :

 Definition :

HyperText Markup Langage,un langage contenant des instructions dans des balises (tags) délimitées entre crochets. Ces instructions sont interprétées par les différents navigateurs et apparaissent sur votre écran. 

Toutes les pages Web sont en fait des fichiers textes (extension .htm ou .html.) comprenant des balises HTML.
Le langage qui les composent (langage HTML) est basé sur l'existence de balises HTML. Ces balises sont "interprétées" par les logiciels de navigation (type Netscape ou Microsoft) pour assurer une visualisation "compréhensible" et structurée de chaque page Web.
Chaque balise comporte une marque de début (à partir de laquelle elle est active) et une marque de fin (à partir de laquelle elle n'est plus active) et a une signification bien particulière..
Un exemple: pour faire apparaître un mot en gras dans une page HTML, le mot en question doit être précédé de la balise <B> et suivi de </B>.
<B> est la balise qui indique que les caractères qui la suivent doivent être affichés en gras. </B> indique la fin de cette commande.
Les délimiteurs de balises HTML sont les caractères < et >. Il faut cependant noter que la marque de fin est optionnelle pour certaines balises.
Une balise permet donc de créer un élément de page Web (tableaux, liens..) ou de générer une mise en page particulière.
Certaines balises peuvent avoir des attributs qui permet de spécifier les caractéristiques de cette balise.
Un autre exemple: si l'on souhaite qu'un tableau (balise <TABLE>) ait une bordure, il va falloir lui "attribuer" cette caractéristique. Il faut pour cela ajouter l'attribut BORDER à la balise TABLE comme suit: <TABLE BORDER>.
Dans la plupart des cas, il est possible d'assigner une valeur à ces attributs:
<TABLE BORDER=10> provoque l'affichage d'un tableau avec une bordure de 10 pixels.
Pour insérer un commentaire qui n'apparaisse pas dans la page HTML visualisée par un navigateur, il faut que le commentaire en question soit précédé de <!-- et suivi de -->.
Une dernière remarque, le langage HTML ne fait pas la différence entre les caractères minuscules et majuscules (contrairement au langage C ). Cependant, il est généralement admis (pour des raisons de lisibilité) que les balises HTML doivent être écrites en majuscules.

Architecture HTML

1. Règles HTML et balises
Toutes les instructions HTML sont exprimées dans des balises (ou "tags"), délimitées par des crochets (signe inférieur < et signe supérieur >). Cette structure est toujours la même. Cependant, chaque balise doit être ouverte et fermée (sauf rares exceptions). Notez que la balise de fermeture est toujours identique à la balise d'ouverture sauf qu'elle comporte une barre oblique après le signe <.

Exemple : <table> et </table>

Les majuscules et les minuscules dans les instructions n'ont aucune importance, même s'il vaut mieux écrire toutes ses balises en minuscules afin de faciliter le futur transfert en XHTML de votre code HTML. De même, veillez à bien respecter les ordres d'ouverture et de fermeture sinon vous risquez de perdre en lisibilité.

2. Schéma des relations conteneur - contenu entre les éléments d'un document HTML




 

 vous devez entrer la balise <html> qui indique le début de votre fichier, puis la balise <head> dans laquelle sont résumées des informations générales, c'est à dire le titre de votre page (c'est aussi le titre qui apparaîtra dans les favoris du visiteur, s'il vous ajoute à sa liste de favoris) et les balises qui permettent d'indexer (référencer) votre site (ces balises seront étudiées dans la rubrique suivante).

5. Le corps du document (<body>)
Il est à noter que, pour l'instant, le navigateur ne visualisera rien, car les véritables données qu'il va afficher vont se trouver dans la balise <body>. Cette balise détermine le corps du document : c'est ici que vous allez intégrer titres, textes, images, tableaux, liens...

<html>
<head>
<title> Ma première page</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="green" alink="red">
Voici votre première page
</body>
</html>

Premier code HTML

1. Définition
Le code HTML est un langage de description. A l'aide d'instructions que vous insérez, vous allez définir la forme de votre texte (gras, italique, polices, ...), inclure des images, du son, implanter des liens vers d'autres pages...

Exemple
Une balise (ou tag) est facilement identifiable, elle est constituée d'un mot (ou plusieurs dans certain cas) encadrée par les signes inférieur (<) et supérieur (>).

1. Balise d'ouverture
2. Votre texte
3. Balise de Fermeture


2. Les premières balises (ou tags)
La balise : Elle apparaît en premier et signale aux différents navigateurs que c'est une page Web, le tag indique la fin de la page.

La balise <head> : Elle indique les informations propres à votre page. Elle inclut les balise title et body ainsi que les balises meta qui permettront aux moteurs de recherche d'indexer votre site Web.

La balise <title> : Elle définit le titre de votre site (ou page). Ce titre se loge dans la barre supérieure de votre navigateur, ainsi que lors d'un ajout dans les favoris (ou bookmark) d'un navigateur.

La balise <body> : Elle va contenir toutes les informations qui s'afficheront dans la fenêtre du navigateur : Textes, liens, images...

3. Les balises indispensables
Tableau des balises les plus rencontrées

4. Première page avec le bloc-notes
Avant de commencer à écrire votre première page, il vous faut un éditeur html, mais le plus simple et le plus économique pour débuter reste le bloc-notes de Windows. Malheureusement son plus gros désavantage que vous devez "tout faire à la main" mais c'est une excellente façon de progresser.
a ) Ouvrir le Bloc-notes
(sous Windows : Démarrer, programmes, accessoires et bloc-notes)
b ) Tapez votre code (le retour chariot n'est pas obligatoire, et il n'a aucun effet ou presque sur le html, il permet juste d'avoir une meilleure visibilité de la syntaxe html)

Conclusion :

    Les pages HTML sont des pages Hyper Texte, pouvant inclure des images, des sons, et des liens vers d'autres pages HTML, elles doivent être visualisées avec un Navigateur (comme Netscape ou Micro$oft Explorer).
    Le but de cette rubrique est que vous puissiez vous aussi créer ce type de page.

    Les documents HTML sont en format texte et peuvent être créés par n'importe quel éditeur de texte (comme Notepad sous Windows, Vi ou Emacs sous Unix). Bien qu'il existe des éditeurs de pages HTML très performants en mode graphique (comme Netscape Gold, WebEdit ...), il est conseillé d'avoir quelques connaissances minimales dans ce domaine.

    Le  langage PHP :

1.Definition :

Hypertext PreProcessor. Langage de script multi-plateformes qui est, avant tout, un langage de script (scripting). Possédant une syntaxe claire et très proche du langage C, le PHP reste une solution qui conviendra pour interfacer un site Web avec une base de données.

Php est un langage exécuté coté serveur, à la différence de javascript et html, donc vôtre code n' apparaît pas dans la source de vôtre page web, seule les informations que vous souhaitez afficher seront visible par les visiteurs.

 

2. Principe du PHP
Le langage est avant tout un langage de script (scripting). Le code inseré dans les pages HTML, est alors exécuter par le serveur sous réserve que vos pages portent l'extention .php3 (ou encore .php ou .php4).Ce principe est par exemple différent de JavaScript ou les scripts sont exécutés par le navigateur (client), mais il est identique à la technologie ASP de Microsoft.
Très simple à appréhender car possédant une syntaxe claire et très proche du langage C, le PHP reste une solution qui conviendra aux débutant comme aux professionnels, pour dynamiser un site Web ou l'interfacer avec une Base de données.

3. Positionnement face aux autres langages
Le PHP comme vu ci-dessus utilise une syntaxe très simple car elle reste très proche du C, langage maîtrisé par la plupart des développeurs. A l'heure actuelle les "concurrents" de PHP sont :
- ASP : Technologie de Microsoft très similaire, utilisant un langage de script, généralement VBScript (Version allégée de Visual Basic)
- PERL : Langage de script puissant, adapté à Internet mais très difficile à maîtriser
- CGI : Composants exécutables, rapide mais spécifiques à la plate forme-serveur

Schéma récapitulatif

2°/ Les balises
Lorsque vous créez un code, vous devez le placer entre deux balises php pour que celui-ci soit interprété, comme ceci :
<?
print 'bonjour';
?>

ou encore

<?php
print 'bonjour';
?>

Ce qui affichera à l' écran : bonjour

Ne posez pas encore vos questions sur le print etc.., tout est expliqué dans les cours suivant ;-)

Si vous souhaitez tester vos scripts en local sur vôtre PC, téléchargez Apache, PHP4 (voir dans la rubrique installer)

 

    Comparatif PHP/Javascript

    FTP :

Intro :

Pour être accessibles au monde entier, les pages WEB doivent être déposées sur un serveur spécialisé (serveur HTTP) qui répondra aux demandes des browsers, afin qu'elles puissent être visualisées. Cette page décrit comment on les pose sur le serveur, à l'aide du protocole FTP (FTP= manière de correspondre entre deux ordinateurs pour passer des fichiers).

DEFINITION :

FTP signifie File Transfer Protocol (protocole de transfert de fichiers) et consiste en un ensemble de conventions (un "protocole") permettant à deux ordinateurs de transférer des fichiers à travers un réseau. FTP a été développé dans les années 70 et est devenu le protocole officiel de transfert de fichiers de l'Internet et dès lors est utilisé par des centaines de milliers de machines dans le monde.

Le FTP est un protocole qui permet de transférer des fichiers entre votre ordinateur et un ordinateur distant dont vous connaissez l'adresse. Plusieurs informations sont nécessaires pour se connecter à un site:

• l'adresse du site: elle est généralement donnée sous forme d'adresse IP, par exemple 194.56.212.32
• le port: c'est un nombre qui permet de différencier les données qui arrivent par votre connexion, il s'agit généralement du nombre 21 par défaut, c'est-à-dire si aucun numéro de port n'est précisé
• le nom d'utilisateur (login) et le mot de passe (passwd) qui permettent d'identifier l'utilisateur. Si aucun nom d'utilisateur est donné il s'agit alors d'une connexion anonyme, le login sera alors anonymous et la coutume veut que le mot de passe d'une session anonyme soit son adresse e-mail

avant tous comment préparer les fichiers :

Les fichiers doivent avoir des noms sans espaces.

Evitez les caractères accentués.
Limitez-vous à l'alphabet strict, au soulignement et au tiret.
Evitez (ou en tous cas respectez) les majuscules.
Donc évitez

ça c'est la fête !
nOm> /délirant : image!?

Choisissez plutôt :

la_fete.html
fou.gif

Poser sur le serveur web (à distance)

Avant d'essayer de poser vos fichiers, il faut rassembler les informations suivantes :

• votre Identification (nom Login)
• votre Mot de passe (Password)
• le nom du serveur (ou exceptionellement son numéro IP).

Quelques commandes FTP   sous dos :

Voici les quelques commandes les plus utilisées:

?

Vous donne la liste des commandes FTP.

help [ commande ]

Vous fournit une aide en ligne sur les commandes disponibles ou sur les paramètres d'une commande particulière.

open serveur

Etablit une connexion avec le serveur FTP spécifié; ce peut être une adresse IP (déconseillé) ou un un nom logique. Si l'option auto-login est active (c'est la valeur par défaut), FTP va directement vous demander votre "nom de login" (voir la commande user).

close

Ferme la connexion active avec le serveur distant et retourne à l'interpréteur de commandes.

user nom [ mot_de_passe ]

Vous identifie au serveur FTP distant sur lequel vous êtes connecté. Si le mot de passe n'est pas spécifié et que le serveur en a besoin, FTP va le demander en masquant l'écho de la frappe-clavier.

dir [ répertoire ] [ fichier_local ]

Affiche une liste du répertoire courant (ou du répertoire donné comme paramètre). Si fichier_local est présent, le résultat est également placé dans ce fichier.

cd répertoire

Change le répertoire courant.

ascii

Prépare le type de représentation pour le(s) transfert(s) de fichier(s) suivant(s). ASCII est le type par défaut. Ce type de transfert est utilisé pour des fichiers contenant du "texte".

binary

Prépare le type de représentation pour le(s) transfert(s) de fichier(s) suivant(s). Ce type de transfert binaire est utilisé pour des fichiers qui doivent être transférés "tels quels", par exemple des programmes (.COM, .EXE, .ZIP) ou des fichiers encodés par des programmes particuliers, comme un fichier Word, par exemple.

get fichier_distant [ fichier_local ]

Demande le fichier dont le nom sur le serveur est fichier_distant, le transfère vers votre ordinateur et le stocke sous le nom fichier_local.. Si le nom du fichier local est omis, FTP prend alors le même que celui du fichier original.

Le nom du fichier distant doit suivre les règles du serveur; lorsque vous utilisez la commande dir, la liste vous montre comment sont encodés les fichiers sur le serveur. Les noms sont une suite de mots, séparés par des points.

Le nom du fichier local doit suivre les règles du MS-DOS.

Exemples:

get test

get /pub/info/readme.txt

get telnet.com c:\telnet.com

get test.read.me read.me

put fichier_local [ fichier_distant ]

Ceci ne fonctionne évidemment que sur un serveur sur lequel vous avez un accès en écriture (jamais par exemple en FTP "anonyme").

Transfère le fichier DOS dont le nom est fichier_local vers le serveur et le stocke sous le nom fichier_distant.

Les mêmes règles d'utilisation de noms sont d'application.

recv

Identique à get.

send

Identique à put.

bye

Termine la session FTP et quitte le programme.

quit

Identique à bye.