CSWD (Conception de Site Web Dynamique)

Conception de Sites Web dynamiques

Cours 1+2

Patrick Reuter

Règles du jeu

• Contrôle continu :– Présentation d’un site web (2-3 personnes)– Projet de sites web (2-3 personnes)

• Examen final 1h30 sur papier

Ressources

• http://www.labri.fr/~preuter/cswd2007

Formes de communications

• Un émetteur, un destinataire (communication interpersonelle): – unidirectionnel : Ordre, Lettre, email, SMS, « TamTam »

bidirectionnel : Dialogue, Téléphone

• Un émetteur, plusieurs destinataire (média de masses) : – unidirectionnel : Ordre, exposé, livre, la presse, radio, télévision– bidirectionnel : Site Internet dynamiques

• Beaucoup d’émetteurs, un destinataire: – unidirectionnel : TED

• Beaucoup d’émetteurs, beaucoup de destinataires : – polydirectionnel : Table de discussion, Forum de discussion

Conception de Site Webs Interactifs

• Qu’est-ce que c’est le Web ?

- World Wide Web, WWW, W3,

- Toile, (« toile (d'araignée) mondiale »)

Web <--> Internet

• Le Web est une application d'Internet, comme – courrier électronique, – la messagerie instantanée, – …

• Le Web a été inventé plusieurs années après Internet, mais c'est le Web qui a rendu les médias grand public attentifs à Internet.

Le Web

Le Web est – fonctionne sur Internet – permet de consulter, avec un navigateur Web, des

pages Web mises en ligne dans des sites Web– L'image de la toile vient des hyperliens qui lient les

pages Web entre elles.un système hypertexte (c-à-d contient des

hyperliens) public (hyperlien : permet de passer automatiquement d'un document

consultéà un document lié)

Conception de Site Webs Interactifs

• Site Web : (aussi appelé site Internet)

– ensemble de pages Web hyperliées entre elles et mises en ligne à une adresse Web.

– Nombre de sites Webs : • 199519 000• 19971 000 000• 200010 000 000• 200457 000 000• 200574 000 000• 2006101 000 000

Soit 45,6% des foyers

Foyers avec Internet

Navigateurs en France

• Internet Explorer 72,0%

• Mozilla / Firefox 21,6%

• Safari 1,8%

• Opera 0,4%

• Netscape 0,3%

• Autres 3,9%

• Taux d'utilisation des langages Web dans le monde en janvier 2007

• Langage janvier 2007 décembre 2006 Evolution• ASP 21,37% 21,41% - 0,04 %• PHP 33,83% 34,02% - 0,19 %• Autres 44,54% 44,35% + 0,19 %

Adresse Web :ou URL (Uniform Resource Locator)http://www.example.com/une/page.extension

protocole de communication HTTP nom de domaine chemin

Exemples :• http://www.example.com/index.html 

– La ressource est un document HTML accessible par le protocole HTTP

• ftp://www.example.com/page.html – La ressource est un document HTML accessible par le protocole

FTP• http://www.example.com/image.jpg 

– La ressource est une image JPEG accessible par le protocole HTTP

Page Web

• unité de consultation du WWW• document informatique qui peut contenir du

texte, des images, des formulaires à remplir et divers autres éléments multimédias et interactifs.

• Une page Web peut être téléchargée et consultée à l'aide d'un logiciel appelé navigateur Web.

• Page Web particulière : Page d’acceuil (Homepage)

Conception de Site Webs Interactifs

Processus de création de site Web• simple page statique (HTML/XHTML, CSS)• ou page dynamique• éventuellement avec connexion à une

base de données.

Il faut distinguer entre la programmation côté client ou côté serveur (architecture client serveur)

Client-serveur

Transmission par réseau

Transmission par réseau

Modem acoustique

Modems

Modem intern

Modems

• 14,4K, 28,8K, 33,6K,

• Maintenant 56 K = Kbit/s

• K = Kbit/seconde

ADSL

• Asymmetric Digital Subscriber Line

• ADSL 1– L'ADSL utilise la bande passante de la paire de cuivre

jusqu'à 1 MHz.

• ADSL 2– L'ADSL 2+ utilise, en plus, les fréquences de 1 à

2 MHz. Sa bande passante est d'environ 2 MHz et atteint une capacité de 25 Mbit/s dans de bonnes conditions d'atténuation et de perturbation.

ADSL

• Afin d'optimiser le débit disponible pour une utilisation courante, le débit est asymétrique :– le débit descendant (téléchargement) est

plus élevé que le débit montant (upload).

ADSL

• En France, – le débit montant est typiquement compris

entre 128 kbit/s et 1024 kbit/s, – le débit descendant peut atteindre 25 Mbit/s

sur de courtes distances, et un débit de 2 ou 5,5 Mbit/s est courant.

– Le volume n'est pas facturé, l'utilisateur dispose alors d'une connexion permanente forfaitaire pour 20 à 35 Euros.

ADSL - Exemple

• Une ligne ADSL de type 1 024 (1MBit/s) (descendant) / 128 Kbit/s (montant) pourra transporter de l'abonné vers le réseau – 128 kilobits par seconde soit 128/8=16 kilooctets par

seconde– pendant qu'elle recevra 1 024  kilobits par seconde

soit 1024/8 = 128 kilooctets par seconde.

– Exemple : Un fichier de 5  Mo (soit 5 * 1024 Ko = 5120 Ko)

• Combien de temps ca prends pour recevoir ?• Combien de temps ca prends pour envoyer ?

ADSL - Exemple

• Une ligne ADSL de type 1 024 (descendant) / 128 (montant) pourra transporter de l'abonné vers le réseau – 128 kilobits par seconde soit 128/8=16 kilooctets par seconde– pendant qu'elle recevra 1 024  kilobits par seconde soit 1024/8 =

128 kilooctets par seconde.

– Exemple : Un fichier de 5  Mo (soit 5 * 1024 Ko = 5120 Ko) prendra (si le réseau qui est derrière n'est pas saturé en un point du chemin que prendront ces données) au mieux 5120/128 = 40 secondes à être reçu et 5120/16 = 320 secondes = 5 mn 20 s à être envoyé.

Conception de Site Webs Interactifs

Déroulement• Pages web statiques (XHTML)• Mise en forme avec feuilles de styles (CSS)• Programmation côté serveur

– Pages web dynamiques (PHP)– avec connexion à une base de données (MySQL)

• Programmation côté client– Javascript

• Référencement Internet (moteur de recherche)

CSWD - Plan de cours

• ---------------------------• ---------------------------

• Cours 1+2 10 Septembre Introduction, Histoire, XHTML• Cours 3 18 Septembre XHTML • Cours 4 25 Septembre feuilles de style (CSS)• Cours 5 2 Octobre programmation côté serveur (PHP) I• Cours 6 9 Octobre programmation côté serveur (PHP) II• Cours 7 16 Octobre Base de données (MySQL) I• Cours 8 23 Octobre Base de données (MySQL) II• Cours 9 6 Novembre Référencement mouteur de recherche• Cours 10 13 Novembre JavaScript• Cours 11 20 Novembre Javascript• Cours 12 27 Novembre AJAX

HTML• L'Hypertext Markup Language, généralement abrégé HTML, est le

langage informatique créé et utilisé pour écrire les pages Web.

• HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.

• HTML est un langage de description de documents. C'est une application du langage de balisage SGML (Standard Generalized Markup Language).

• Pour expliquer les balises HTML, voici un exemple :

– <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

• Tel qu'il a été pensé à ses origines par Tim Berners-Lee, le HTML ne sert pas à décrire le rendu visuel des pages Web (contrairement à la PAO), mais plutôt le sens des différentes parties du texte : titre, liste, mise en évidence... Ces valeurs ont été de moins en moins respectées au cours du développement du langage.

Quelques balises

• Balise : Effet : Résultat :

• <b>texte</b> Texte en gras texte• <i>texte</i> Texte en italique texte • <u>texte</u> Texte souligné texte

• <img src="lien.jpg«  /> Insère une image

• <a href="lien.htm">texte</a> Insère un lien hypertexte

• <font>texte</font> Font agit sur le texte (pas seul) • <font color="#cc0000">texte</font> Couleur Résultat • <font size="2">texte</font> Taille du texte Résultat • <br /> Saut de ligne

HTML/XHTML : Premiere page<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head><meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />

<title>La page du 10 septembre</title>

</head>

<body>Ceci est la <b>première</b> page <i>Internet</i>.<br /><br />Deuxième ligne de ma première page.

<table> <tr> <th>jour</th><th>mois</th><th>annee</th></tr> <tr> <td>1</td><td>Decembre</td><td>2006</td></tr> <tr><td>2</td><td>Janvier </td><td>2007</td></tr>

</table>

<img src="im1.png" width="200px">

</body>

</html>