Conception de Sites Web dynamiques Cours 1 2 Patrick

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 1 h 30 sur papier

Ressources • http: //www. labri. fr/~preuter/cswd 2007

Formes de communications • Un émetteur, un destinataire (communication interpersonelle): – unidirectionnel : Ordre, Lettre, email, SMS, « Tam » 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, W 3, - 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 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 200010 000 200457 000 200574 000 2006101 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% décembre 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 é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

Modem acoustique

Modems

Modem intern

Modems • 14, 4 K, 28, 8 K, 33, 6 K, • 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 (1 MBit/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 (My. SQL) • Programmation côté client – Javascript • Référencement 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 Introduction, Histoire, XHTML 18 Septembre XHTML 25 Septembre feuilles de style (CSS) 2 Octobre programmation côté serveur (PHP) I 9 Octobre programmation côté serveur (PHP) II 16 Octobre Base de données (My. SQL) I 23 Octobre Base de données (My. SQL) II 6 Novembre Référencement mouteur de recherche 13 Novembre Java. Script 20 Novembre Javascript 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 : – Lorem ipsum dolor sit amet, consectetuer adipiscing elit. • 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 : • • • texte texte texte Texte en gras Texte en italique Texte souligné texte • <img src="lien. jpg « /> Insère une image • <a href="lien. htm">texte</a> Insère un lien hypertexte • • texte Font agit sur le texte (pas seul) texte Couleur Résultat texte Taille du texte Résultat Saut de ligne

HTML/XHTML : Premiere page <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. 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 première page Internet. Deuxième ligne de ma première page. <table> <tr> <th>jour</th> <th>mois</th> <th>annee</th> </tr> <td>1</td> <td>Decembre</td> <td>2006</td> </tr> <td>2</td> <td>Janvier </td> <td>2007</td> </tr> </table> <img src="im 1. png" width="200 px">