30-771-01 Conception de sites Web

1
30-771-01 Conception de sites Web

• Préparé par
• Yan Bodain, M.A.
• Jean-Yves Fiset, ing., Ph. D.

2
Cours 4
Sujets du cours 4

• Éléments historiques
• Dimensionnement automatique des pages HTML
• Adaptation automatique à la langue (et autres
  information.)
• Notions de base
• Rappel sur les conventions de base et sur les
  balises HTML
• Éléments HEAD et BODY
• Éléments de mise en forme
• Approches de dépannage
• Sans outil de validation
• Avec outil de validation
• Exercices
• Exercices en classe avec notepad
• Exercices 1, 2, 3, 4.

3
1- Éléments historiques

• Quand le Web est-il apparu?
• entre 0 et 15 ans?
• B) entre 16 et 20 ans?
• C) entre 21 et 30 ans?

4
1- Éléments historiques

• Quand le Web est-il apparu?
• C) entre 21 et 30 ans?
• -60s contexte de la guerre froideprojet de
  larmée américaine davoir un réseau décentralisé
  de données électroniques stocker sur plusieurs
  ordis très éloignés mais avec m.à.j rapide pour
  que si un ordi ou une liaison était brisé(e), les
  données soient toujours accessibles.
• Advanced Research Project Agency Organisation
  scientifique dont les résultats de recherche
  servaient larmée américaine.
• -70s ARPANET Mise en réseau de 4 ordis
  puis40 ordis 3 ans plus tard
• Les scientifiques ont décidé de sapproprier le
  réseau pour une toute autre fin pour mettre les
  résultats des recherches à la disposition de tous
  les scientifiques
• ancêtre dInternet
• Au début, toutes sortes dordis et de modes de
  connexion (modems tél) -gt protocole de
  communication TCP/IP indépendant de tout système
  informatique
• Appropriation rapide par les étudiants pour
  leurs besoins déchanges dinfos petites
  annonces, voyages à rabais, boulots, logement,
  etc.
• Timing dépoque premiers pas sur la lune et le
  mouvement des hippies

5
1- Éléments historiques

• Quand le Web est-il apparu?
• B) entre 16 et 20 ans?
• -80s séparation du réseau militaire MILNET et
  du réseau scientifique ARPA (-gtfin 80s)
• -NSF (National Science Foundation) initiative
  pour faciliter la liaison de tous les petits
  réseaux dordis via un backbone avec des gros
  points de relaiscest la naissance du réseau des
  réseaux Internet
• entre 0 et 15 ans?
• -90s Europanet branchement de lEurope a
  backbone des USA (europe sincline au protocole
  TCP/IP)
• -mid 90s Fournisseurs daccès Internet
  commerciaux partout dans le monde comme ici
  Mlink, Cam.org et plus tard sympatico et
  videotron
• -1999-2000 explosion commerciale mondiale du
  www avec les nouveaux modèles daffaires et les
  nouvelles entreprises 100 Internet appelées dot
  com (vs brick-and-mortals)
• -2001 la bulle Internet éclate
• -2002 le Web payant

6
1- Éléments historiques

• Vers 89, Tim Berners-Lee (au CERN-Centre Européen
  de Recherche Nucléaire) invente le concept.
• En 1990, Berners-Lee produit le premier logiciel
  pour le Web.
• En 93, Marc Andreessen (U. of Illinois) étudiant
  au bac, invente un outil de visualisation
  Mosaic qui est par la suite distribué par le NCSA
  (National Center for Super Computing Application).

Commandes des éléments standards de base titres,
paragraphes, liens, etc.
Mosaïc HTML 1
Netscape 2.0 HTML 2
1995
Tables
1997
Netscape HTML 3
IE 3.x (Mosaïc)
CSS
IE 4.x
HTML extensions MS
7
1- Éléments historiques

• En 94, création du W3C par Berners-Lee et
  collègues

1997
2005
2002
618 millions
1 milliard
6 millions
200 millions
191 millions
5 millions
183 millions
33 millions
Pénétration pas exactement la même partout sur la
planète. 95-96-97 pénétration dInternet aux É.U.
surtout ensuite rééquilibre avec lAsie,
lEurope, etc.
8
1- Éléments de base

• HTMLlangage lingu franca du Web format de
  fichier (format de fichier le plus répandu voir
  la source dune page)
• Hypertext Mark-up Language langage de marquage
  pour structurer les textes (titres, paragraphes,
  listes, tableaux,)
• Incorporer des graphiques et autres contenus
  multimédia par références intégrées dans le texte
• Interfaçage avec des langages ou scripts
  complémentaires
• ex CSS, jsp, XML, CGI,
• Hyperlien référence dans le texte vers des
  parties précises (ancres) ou vers dautres textes
• Définition hypertexte liaison contextuelle
  infinie
• www world wide web toile daraignée géante de
  connexions
• Navigateur interprète le code HTML (lecture des
  balises ou commandes de marquage) et représente
  le texte brut sous forme visuelle pour être vue à
  lécran
• Structure hiérarchique logique demboîtement
  (poupées russes, tupperwares)
• Propriétés globales (titre de page, fond, )
• Propriétés locales ( titres de paragraphes,
  tableaux,)
• Propriétés micro (graphiques, mise en forme du
  texte comme le caractère gras ou italique)

9
2- Dimensionnement automatique de sites

• On voit souvent des sites optimisés pour la
  lecture en résolution 800 600
• Peut être intéressant dans certains cas, mais
  peut aussi causer certains problèmes, par exemple
•  trou dair  à la droite si
• la résolution est plus élevée
• barres de défilements requises
• si la résolution est moins bonne
• résultats souvent imprévisibles
• sur les nouveaux dispositifs (p. ex.,
• ardoises, palms, etc)
• Importance de tester pages sous différents
  navigateurs

?
10
2- Ajouts sur dimensionnement automatique de sites

• Au lieu doptimiser pour une résolution fixe, on
  peut tirer avantage de la possibilité offerte en
  HTML davoir des dimensions relatives.
• par exemple, tableaux.
• exemple dun site SANS redimensionnement
  automatique
• www.toile.qc.ca ou toile.com
• exemple dun site AVEC redimensionnement
  automatique
• www.amazon.com
• quote.yahoo.com

11
3- Adaptation automatique (langue, navigateur,
etc.)

• TCP/IP (Transmission Control Protocol/Internet
  Protocol) couche de base de transmission
• Couche sur laquelle sasseoit les autres
  protocoles spécialisés comme http hypertext
  transfer protocol, ftp file transfer protocol,
  smtp, etc.)
• Adresse IP série de chiffres difficiles à
  retenir http//216.239.57.99Noms de domaines
  correspondance en lettres avec des préfixes et
  suffixes http//www.google.com
• Lors de lappel initial (lorsque lon tape
  www..), un message HTTP est envoyé avec des
  informations sur la configuration de votre
  navigateur (langue utilisée, version du
  navigateur, type MIME supporté, etc.).
• Ces informations peuvent être récupérées par le
  serveur pour adapter certains éléments de la
  réponse HTML.
• e.g. www.google.ca saffiche dans la langue de
  votre navigateur.

12
4- Notions de base

• Rappel sur quelques conventions et balises HTML
  de base
• ltgt et lt/gt règle dor douvrir et fermer une
  balise systématiquement lorsque lon apprend à
  écrire du code
• Lettre minuscules
• Entités caractère pour les caractères spéciaux
  et espaces
• (navigateurs lisent bien les accents en général
  mais plus sûr dutiliser les entités caractères)
  é eacute
• Images
• tailles et téléchargement
• utilité  objective  des images
• Images et couleurs de fonds ( backgrounds )
• plus recommandées par le W3C
• remplacement éventuel par les feuilles de style

13
4- Notions de base

• Éléments Head et Body
• Head informations non visibles.
• Body informations visibles qui possèdent un
  effet apparent.
• Analogie possible avec le corps humain.

14
4- Notions de base

• Ossature HTML type
• lthtmlgt Ouverture du contenu HTML
• ltheadgt Ouverture de la partie en-tête
• lttitlegt Ouverture du titre
• Bla bla Titre du document
• lt/titlegt Fermeture du titre
• lt/headgt Fermeture de la partie en-tête
• ltbodygt Ouverture de la partie corps du texte
• Bla bla Contenu du document
• lt/bodygt Fermeture de la partie corps du texte
• lt/htmlgt Fermeture du contenu HTML

15
4- Notions de base

• Éléments de mise en forme
• lth1gtTitre de section de niveau 1lt/h1gt
• lth2gtTitre de section de niveau 2lt/h2gt
• lth6gtitre de section de niveau 6lt/h6gt
• ltigtitaliquelt/igt
• ltbgtgraslt/bgt
• ltdelgtbarrélt/delgt

16
4- Notions de base

• Paragraphes et sauts de lignes
• ltpgt
• Ceci est un paragraphe. Un espace est
  automatiquement
• créé avant et après le paragraphe.
• lt/pgt
• Ceci est un saut de ligne.ltbrgt
• Il permet de changer de ligne sans débuter un
  nouveau
• paragraphe.
• Notez que le marqueur ltbrgt na pas de fermeture.

17
4- Notions de base

• Attributs de certaines balises
• ltp align"right"gtParagraphe aligné à droitelt/pgt
• ltfont size"2"gtTexte de taille 2lt/fontgt
• ltfont size"2"gtAugmentation de la taille de 2
  unitéslt/fontgt
• ltfont size"-2"gtDiminution de la taille de 2
  unitéslt/fontgt
• ltfont size"2" face"verdana"gtTaille 2 et police
  Verdanalt/fontgt
• ltbody bgcolor"green"gt

18
4- Notions de base

• Approches de dépannage
• Sans outil de validation (selon un problème
  dapparence dans une page)
• Examiner le(s) symptôme(s)
• Si des causes sont connues pour le symptôme(s),
  corriger les causes
• Si aucune cause connue,
• formuler lhypothèse la plus plausible
• tester lhypothèse en tenant compte de
• nature du problème hypothétique
• coûts de correction et dévaluation de résultats
• probabilité de lhypothèse
• boucler tant que lhypothèse nest pas confirmée
  et la cause corrigée

19
5- Travail en classe

• Exercice de base
• Création de la page bonjour avec notepad
• Ajouter graduellement des effets de mise en
  forme
• Exercice 1-2-3-4
• En groupe de 2 personnes,
• Corriger les pages dexercice avec un simple
  éditeur de texte.
• Les pages dexercices sont regroupées dans un
  fichier ZIP sur le site Web du cours.
• Ne corrigez que les 4 premiers exercices.

20
6- Téléchargement dun outil incluant un
validateur

• Certaines erreurs sont plus faciles à corriger
  lorsquon possède un outil de correction
  approprié.
• FrontPage, HotMetal et WebExpert possèdent des
  éditeurs en couleur qui simplifient la lecture du
  code.
• WebExpert intègre toutefois un outil de
  validation plus perfectionné que la moyenne.
• http//www.visic.com/webexpert/