Vous êtes sur la page 1sur 40

Conception de Sites Web dynamiques

Cours 1+2

Patrick Reuter

Rgles du jeu
Contrle continu :
Prsentation dun 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, Tlphone

Un metteur, plusieurs destinataire (mdia de masses) :


unidirectionnel : Ordre, expos, livre, la presse, radio, tlvision bidirectionnel : Site Internet dynamiques

Beaucoup dmetteurs, un destinataire:


unidirectionnel : TED

Beaucoup dmetteurs, beaucoup de destinataires :


polydirectionnel : Table de discussion, Forum de discussion

Conception de Site Webs Interactifs

Quest-ce que cest le Web ? - World Wide Web, WWW, W3, - Toile, ( toile (d'araigne) mondiale )

Web <--> Internet


Le Web est une application d'Internet, comme
courrier lectronique, la messagerie instantane,

Le Web a t invent plusieurs annes aprs Internet, mais c'est le Web qui a rendu les mdias 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 systme 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 hyperlies 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 Mozilla / Firefox Safari Opera Netscape Autres 72,0% 21,6% 1,8% 0,4% 0,3% 3,9%

Taux d'utilisation des langages Web dans le monde en janvier 2007 Langage ASP PHP Autres janvier 2007 21,37% 33,83% 44,54% dcembre 2006 Evolution 21,41% - 0,04 % 34,02% - 0,19 % 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 lments multimdias et interactifs. Une page Web peut tre tlcharge et consulte l'aide d'un logiciel appel navigateur Web. Page Web particulire : Page dacceuil (Homepage)

Conception de Site Webs Interactifs


Processus de cration de site Web simple page statique (HTML/XHTML, CSS) ou page dynamique ventuellement avec connexion une base de donnes.
Il faut distinguer entre la programmation ct client ou ct serveur (architecture client serveur)

Client-serveur

Transmission par rseau

Transmission par rseau

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 frquences 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'attnuation et de perturbation.

ADSL
Afin d'optimiser le dbit disponible pour une utilisation courante, le dbit est asymtrique :
le dbit descendant (tlchargement) est plus lev que le dbit montant (upload).

ADSL
En France,
le dbit montant est typiquement compris entre 128 kbit/s et 1024 kbit/s, le dbit descendant peut atteindre 25 Mbit/s sur de courtes distances, et un dbit 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 rseau
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 rseau
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 rseau qui est derrire n'est pas satur en un point du chemin que prendront ces donnes) au mieux 5120/128 = 40 secondes tre reu et 5120/16 = 320 secondes = 5 mn 20 s tre envoy.

Conception de Site Webs Interactifs


Droulement Pages web statiques (XHTML) Mise en forme avec feuilles de styles (CSS) Programmation ct serveur
Pages web dynamiques (PHP) avec connexion une base de donnes (MySQL)

Programmation ct client
Javascript

Rfrencement Internet (moteur de recherche)

CSWD - Plan de cours


----------------------------------------------------Cours 1+2 Cours 3 Cours 4 Cours 5 Cours 6 Cours 7 Cours 8 Cours 9 Cours 10 Cours 11 Cours 12 10 Septembre 18 Septembre 25 Septembre 2 Octobre 9 Octobre 16 Octobre 23 Octobre 6 Novembre 13 Novembre 20 Novembre 27 Novembre Introduction, Histoire, XHTML XHTML feuilles de style (CSS) programmation ct serveur (PHP) I programmation ct serveur (PHP) II Base de donnes (MySQL) I Base de donnes (MySQL) II Rfrencement mouteur de recherche JavaScript Javascript AJAX

HTML
L'Hypertext Markup Language, gnralement abrg HTML, est le langage informatique cr et utilis pour crire les pages Web. HTML permet en particulier d'insrer des hyperliens dans du texte, donc de crer 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 dcrire le rendu visuel des pages Web (contrairement la PAO), mais plutt le sens des diffrentes parties du texte : titre, liste, mise en vidence... Ces valeurs ont t de moins en moins respectes au cours du dveloppement du langage.

Quelques balises
Balise : <b>texte</b> <i>texte</i> <u>texte</u> <img src="lien.jpg /> <a href="lien.htm">texte</a> Effet : Texte en gras Texte en italique Texte soulign Insre une image Insre un lien hypertexte Rsultat : texte texte texte

<font>texte</font> Font agit sur le texte (pas seul) <font color="#cc0000">texte</font> Couleur Rsultat <font size="2">texte</font> Taille du texte Rsultat <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>premire</b> page <i>Internet</i>. <br /> <br /> Deuxime ligne de ma premire 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">