Algorithmes et structures de donnes avances Partie Conception de Sites Web dynamiques

1
Algorithmes et structures de données avancées
Partie Conception de Sites Web dynamiques

• Cours 7
• Patrick Reuter

2
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

3
Conception de Site Webs Interactifs

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

4
Web lt--gt 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.

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

6
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

7
(No Transcript)
8
Soit 45,6 des foyers
9
Foyers avec Internet
10
(No Transcript)
11
(No Transcript)
12
Navigateurs en France

• Internet Explorer 72,0
• Mozilla / Firefox 21,6
• Safari 1,8
• Opera 0,4
• Netscape 0,3
• Autres 3,9

13

• 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

14
(No Transcript)
15
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

16
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 dacceuil (Homepage)

17
Conception de Site Webs Interactifs

• Processus de création de site Web
• simple page statique (HTML/XHTML, CSS)
• ou page dynamique (p.ex. PHP)
• éventuellement avec connexion à une base de
  données (p.ex. MySQL)
• Il faut distinguer entre la programmation côté
  client ou côté serveur (architecture client
  serveur)

18
Client-serveur
19
(No Transcript)
20
Transmission par réseau
21
Transmission par réseau
22
Modem acoustique
23
Modems
24
Modem intern
25
Modems

• 14,4K, 28,8K, 33,6K,
• Maintenant 56 K Kbit/s
• K Kbit/seconde

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

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

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

29
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/816 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 ?

30
ADSL - Exemple

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

31
Exemple

• Une ligne ADSL de type
• 1 024 kbit/s (descendant)
• 128 kbit/s (montant)
• 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 ?

32
Exemple

• Une ligne ADSL de type
• 1 024 kbit/s (descendant)
• 128 kbit/s (montant)
• 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é.

33
COMMENCONS !
34
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)

35
Conception de Site Webs Interactifs

• Déroulement
• Pages web statiques (HTML/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)

36
HTML

• Langage de structuration de documents
  ( Hyper-Text Markup Language )
• HTML permet de
• Publier des documents en lignes contentant du
  texte, des tableaux, des listes,
• Lier des pages par des liens hypertextes
• Concevoir des formulaires permettant deffectuer
  des traitements dinformations
• Insérer des documents dans dautres formats
  video, images,
• HTML définit le contenu et la structuration des
  informations au sein du document
• HTML ne définit pas lapparence du document

37
HTML

• Exemple

Fichier html
interprété
brut
lthtmlgt ltheadgt lttitlegtma premiere
pagelt/titlegt lt/headgt ltbodygt lth1gtPage
Weblt/h1gt ltpgtMa premiegravere
page.lt/pgt lt/bodygt lt/htmlgt
38
XHTML du "HTML propre"

• XHTML 1.0 (Second Edition)
• une reformulation de HTML 4 in XML 1.0
• Premières différences de XHTML
• mettre un doctype en haut du fichier
• fermer toutes les balises ltbgt lt/bgt
• pour les balises simples, les fermer "de
  l'intérieur" (comme ltbr /gt ou ltimg /gt),
• toutes les balises en minuscules,
• les arguments entre guillemets,
• on définit ses propres balises

(!) Vision un peu réductrice
39
XHTML

• XHTML est le successeur de HTML
• XHTML se base sur la syntaxe définie par XML
• Le X dans XHTML signifie extensible
• Devenu standard pour assurer la compatibilité
  entre navigateurs (Firefox, Internet Explorer,
  Mozilla, )
• Pour vérifier la validité d'une page, le W3C a
  mis en place un validateur qui comptabilise les
  erreurs et donne les moyens de les corriger
• http//validator.w3.org/

40
XHTML le successeur de HTML

• XHTML eXtensible HyperText Markup Language
• XHTML est le successeur de HTML
• XHTML se base sur la syntaxe définie par XML
• Le X dans XHTML signifie extensible
• Devenu standard pour assurer la compatibilité
  entre navigateurs (Firefox, Internet Explorer,
  Mozilla, )
• Pour vérifier la validité d'une page, le W3C a
  mis en place un validateur qui comptabilise les
  erreurs et donne les moyens de les corriger
• XHTML n'est pas un langage sémantiquement figé
  mais au contraire un langage ouvert (métalangage)
• Lauteur d'un document XHTML peut créer ses
  propres balises.

http//validator.w3.org/
41
XML langage à balises

• Une balise est un mot clef, encadré par
• les caractères lt et gt
• exemple
• la balise ltinstrumentgt peut être définie pour
  désigner un instrument de musique.
• ltinstrumentgt
• Guitare
• lt/instrumentgt

42
XHTML structuration

• ltvehiculegt
• lttypeminegt . lt/typeminegt
• ltchassisgt lt/chassisgt
• ltmoteurgt
• ltpuissancegt lt/puissancegt
• ltcylindreegt lt/cylindreegt
• ltnbsoupapesgt lt/nbsoupapesW
• lt/moteurgt
• ltcouleurgt lt/couleurgt
• etc
• lt/vehiculegt

43
XML

• lt?xml version"1.0" encoding"ISO-8859-1"?gt
• ltmabibliothequegt
• ltlivre type"roman"gt
• ltauteurgtG. Orwelllt/auteurgt
• ltnationalitegtuklt/nationalitegt
• lttitregt1984lt/titregt
• ltnb_tomesgt1lt/nb_tomesgt   
• lt/livregt   
• ltlivre type"pratique"gt
• ltauteurgtMarco Elliottlt/auteurgt
•    lttitregtSecrets de la carte à gratterlt/titregt
• lt/livregt   
• ltlivre lang"en"gt
•     ltauteurgtBig Billlt/auteurgt
•     lttitregtXML languagelt/titregt
• ltcatégoriegtW3Clt/catégoriegt
•  lt/livregt
• lt/mabibliothequegt

44
Format dun document HTML

• Tout document HTML commence par la balise lthtmlgt
  et finit par la balise lt/htmlgt
• Tout document HTML contient
• Un en-tête, délimité par les balises ltheadgt et
  lt/headgt
• Un corps, délimité par les balises ltbodygt et
  lt/bodygt

lthtmlgt ltheadgt lttitlegtma premiere
pagelt/titlegt lt/headgt ltbodygt lth1gtMa
Pagelt/h1gt ltpgtma premiegravere page weblt/pgt
lt/bodygt lt/htmlgt
45
HTML/XHTML Hello World

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"fr"gt
• ltheadgt
• lttitlegtVotre titrelt/titlegt
• ltmeta http-equiv"Content-Type"
  content"text/HTML charsetiso-8859-1" /gt
• lt/headgt
• ltbodygt
• ltpgtBonjour tout le monde!lt/pgt
• lt/bodygt
• lt/htmlgt

46
Commentaires

• Tout texte commençant par lt!-- et se
  terminant par  --gt est considéré comme étant
  un commentaire
• Non interprété par le navigateur
• Non affiché

lthtmlgt ltheadgt lttitlegtma premiere
pagelt/titlegt lt/headgt ltbodygt lth1gtMa
Pagelt/h1gt ltpgtma premiegravere page weblt/pgt lt!--
ne pas afficher cette partie --gt lt/bodygt lt/htmlgt
47
1. En-tête ltheadgt

• Délimité par les balises ltheadgt et lt/headgt
• Contient des informations générales sur le
  document, toujours chargées avant le corps
• Titre du document lttitlegt
• Informations sur le contenu du document ltmetagt
• Variables et fonctions des scripts JavaScript
  ltscriptgt
• Les références aux feuilles de style ltlinkgt
• Les balises utilisées sont spécifiques à lentête
• Pas daffichage dans le navigateur (en théorie)

48
Balise lttitlegt

• Contenue dans len-tête du document
• Définit le titre du document, terminé par la
  balise lt/titlegt
• Le titre doit être court et explicite car il
  apparaît
• Comme titre de la fenêtre du navigateur
• Dans la liste des signets ( bookmarks )
• Utilisé par les moteurs de recherche

lthtmlgt ltheadgt lttitlegtma premiere
pagelt/titlegt lt/headgt ltbodygt ...
49
2. Corps ltbodygt

• Délimité par les balises ltbodygt et lt/bodygt
• Contient les informations affichables du document
• Texte du document
• Instructions

50
Titrage

• Les balises h1, h2, h6 permettent de baliser
  un paragraphe comme étant un titre dun certain
  niveau

lthtmlgt ltheadgt lttitlegtma premiere
pagelt/titlegt lt/headgt ltbodygt lth1gtMa
Pagelt/h1gt lth2gtTitre1lt/h2gt lth3gtTitre2lt/h3gt ltpgtDu
texte normallt/pgt lt/bodygt lt/htmlgt
51
Balise ltpgt

• Débute un paragraphe, terminé par lt/pgt
• Un début de paragraphe provoque
• Un passage à la ligne
• Un décalage dune hauteur denviron une ligne

52
Balise ltbr/gt

• Provoque un retour à la ligne dans la fenêtre
  daffichage
• En labsence des balises ltbr/gt, le texte nest
  mis à la ligne que lorsque le bord de la fenêtre
  courante est atteint

Les sanglots longsltbr/gt Des violonsltbr/gt De
lautomneltbr/gt ltbr/gt Blessent mon cur...ltbr/gt
53
Encore plus de balises

• Paragraphes
• ltpgtParagraphe.lt/pgt
• Listes
• ltulgt
• ltligt1er élémentlt/ligt
• ltligt2ème élémentlt/ligt
• ltligt3ème élémentlt/ligt
• lt/ulgt

54
Autres éléments de mise en forme

• Italique ltigtlt/igt ou ltemgtlt/emgt
• Gras ltstronggtlt/stronggt ou ltbgtlt/bgt
• Indice et exposant ltsubgtlt/subgt et ltsupgtlt/supgt

ltbodygt ltpgttexte en ltbgtgraslt/bgtlt/pgt ltpgtencore en
ltstronggtgraslt/stronggtlt/pgt ltpgttexte en
ltigtitaliquelt/igtlt/pgt ltpgtExposant
Mltsupgtrlt/supgtlt/pgt lt/bodygt
55
Hyperliens

• Tout l'intérêt du HTML
• Balise ltagtlt/agt
• Attribut principal
• href

ltbodygt ltpgtlien vers une autre page lta
href"autrepage.htm"gticilt/agtlt/pgt lt/bodygt lt/htmlgt
56
Tableaux
ligne
ltbodygt lttable width"75" border"1"gt lttrgt
lttdgtcel1lt/tdgt lttdgtcel2lt/tdgt lt/trgt lttrgt
lttdgtcel3lt/tdgt lttdgtcel4lt/tdgt
lt/trgt lt/tablegt lt/bodygt
colonnes
57
Tables

• lttablegt
• lttrgt
• ltthgtligne 1, colonne 1 (en-tête)lt/thgt
• ltthgtligne 1, colonne 2 (en-tête)lt/thgt
• ltthgtligne 1, colonne 3 (en-tête)lt/thgt
• lt/trgt
• lttrgt
• lttdgtligne 2, colonne 1lt/tdgt
• lttdgtligne 2, colonne 2lt/tdgt
• lttdgtligne 2, colonne 3lt/tdgt
• lt/trgt
• lttrgt
• lttdgtligne 3, colonne 1lt/tdgt
• lttdgtligne 3, colonne 2lt/tdgt
• lttdgtligne 3, colonne 3lt/tdgt
• lt/trgt
• lt/tablegt

58
Images

• La balise ltimg/gt permet de placer une image sur
  le document
• Attributs
• src url de l'image
• width largeur
• height hauteur

ltbodygt ltpgtune image lt/pgt ltpgtltimg src"Shaun.jpg"
width"100" height"113" /gt lt/pgt lt/bodygt
59
Images

• ltimg src"image.jpg" /gt
• ltimg src"image.gif" /gt
• ltimg src"image.png" /gt
• JPEG avec perte, pour les photos
• GIF sans perte, compression LZW, pour les
  illustrations
• PNG sans perte, plus de couleurs, mais pas
  supporté par tous le navugateurs

60
Images

• ltimg src"image.png" /gt
• ltimg src"image.jpg" width"50" /gt
• ltimg src"image.gif" width"20" height"40" /gt
• JPEG avec perte, pour les photos
• GIF sans perte, compression LZW, pour les
  illustrations
• PNG sans perte, plus de couleurs, mais pas
  supporté par tous le navigateurs

61
Images

• ltimg src"image.png" /gt
• ltimg src"image.jpg" width"50" /gt
• ltimg src"image.gif" width"20" height"40" /gt
• JPEG avec perte, pour les photos
• GIF sans perte, compression LZW, pour les
  illustrations
• PNG sans perte, plus de couleurs, mais pas
  supporté par tous le navigateurs

62
Images

• Pour le référencement
• ltimg src"image.png" alt "Photo de Zidane" title
  " zidane" /gt

63
Images

• Lien relative
• ltimg src"image.png" alt "Photo de Zidane" /gt
• ltimg src"images/image.png" alt "Photo de
  Zidane" /gt
• ltimg src"../image.png" alt "Photo de Zidane" /gt
  
• Lien absolu
• ltimg src"http//127.0.0.1/image.png" alt "Photo
  de Zidane" /gt
• ltimg src"z\_App\Php\www\tp1\image.png" alt
  "Photo de Zidane" /gt
• ltimg src"http//www.google.fr" alt "Photo de
  Zidane" /gt

64
Quelques balises

• Balise Effet Résultat
• Balises avec fermeture
• ltbgttexte en garslt/bgt Texte en gras
• ltigttexte en italiquelt/igt Texte en italique
• ltugttexte soulignélt/ugt Texte souligné
• lth1gtTitre importantlt/h1gt Titre 1
• lth2gtTitre moins importantlt/h2gt Titre 2
• lta href"lien.html"gttextelt/agt Lien hypertexte
• Balises sans fermeture

65
Plus déléments

• http//openweb.eu.org/articles/xhtml_une_heure/
• http//www.w3schools.com/tags/default.asp
• Chercher sur le web
• Pages sources