1 / 40

Conception de Sites Web dynamiques

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.

bisa
Download Presentation

Conception de Sites Web dynamiques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Conception de Sites Web dynamiques Cours 1+2 Patrick Reuter

  2. 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

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

  4. 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

  5. Conception de Site Webs Interactifs • Qu’est-ce que c’est le Web ? - World Wide Web, WWW, W3, - Toile, (« toile (d'araignée) mondiale »)

  6. 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.

  7. 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é)

  8. Conception de Site Webs Interactifs • Site Web : (aussi appelé site Internet) • ensemble de pages Webhyperlié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

  9. Soit 45,6% des foyers

  10. Foyers avec Internet

  11. Navigateurs en France • Internet Explorer 72,0% • Mozilla / Firefox 21,6% • Safari 1,8% • Opera 0,4% • Netscape 0,3% • Autres 3,9%

  12. 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 %

  13. 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

  14. 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)

  15. 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)

  16. Client-serveur

  17. Transmission par réseau

  18. Transmission par réseau

  19. Modem acoustique

  20. Modems

  21. Modem intern

  22. Modems • 14,4K, 28,8K, 33,6K, • Maintenant 56 K = Kbit/s • K = Kbit/seconde

  23. 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.

  24. 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).

  25. 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.

  26. 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 ?

  27. 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é.

  28. Conception de Site WebsInteractifs 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)

  29. 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

  30. 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 balisageSGML (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.

  31. 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

  32. 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>

More Related