page 1 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés Conception de sites Web Préparé par: Yan Bodain, M.A. Jean-Yves Fiset, ing., Ph. D.

page 2 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Cours 4 1.Éléments historiques 2.Dimensionnement automatique des pages HTML 3.Adaptation automatique à la langue (et autres information….) 4.Notions de base 1.Rappel sur les conventions de base et sur les balises HTML 2.Éléments HEAD et BODY 3.Éléments de mise en forme 4.Approches de dépannage 1.Sans outil de validation 2.Avec outil de validation 5.Exercices 1.Exercices en classe avec notepad 2.Exercices 1, 2, 3, 4. Sujets du cours 4

page 3 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éléments historiques Quand le Web est-il apparu? A)entre 0 et 15 ans? B) entre 16 et 20 ans? C) entre 21 et 30 ans?

page 4 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éléments historiques Quand le Web est-il apparu? C) entre 21 et 30 ans? -60’s contexte de la guerre froide…projet de l’armée américaine d’avoir 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 l’armée américaine. -70’s ARPANET = Mise en réseau de 4 ordis… puis…40 ordis 3 ans plus tard Les scientifiques ont décidé de s’approprier le réseau pour une toute autre fin: pour mettre les résultats des recherches à la disposition de tous les scientifiques …ancêtre d’Internet Au début, toutes sortes d’ordis et de modes de connexion (modems tél) -> protocole de communication TCP/IP: indépendant de tout système informatique Appropriation rapide par les étudiants pour leurs besoins d’échanges d’infos: petites annonces, voyages à rabais, boulots, logement, etc. Timing d’époque: premiers pas sur la lune et le mouvement des hippies

page 5 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éléments historiques Quand le Web est-il apparu? B) entre 16 et 20 ans? -80’s séparation du réseau militaire MILNET et du réseau scientifique ARPA (->fin 80’s) -NSF (National Science Foundation): initiative pour faciliter la liaison de tous les petits réseaux d’ordis via un backbone avec des gros points de relais…c’est la naissance du réseau des réseaux: Internet A)entre 0 et 15 ans? -90’s Europanet: branchement de l’Europe a backbone des USA (europe s’incline au protocole TCP/IP) -mid 90’s Fournisseurs d’accès Internet commerciaux partout dans le monde comme ici Mlink, Cam.org et plus tard sympatico et videotron : explosion commerciale mondiale du www avec les nouveaux modèles d’affaires et les nouvelles entreprises 100% Internet appelées dot com (vs brick- and-mortals) -2001: la bulle Internet éclate… -2002: le Web payant…

page 6 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 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). Mosaïc HTML 1 Netscape 2.0 HTML 2 Netscape HTML IE 3.x (Mosaïc) IE 4.x HTML & extensions MS … 1995 Commandes des éléments standards de base: titres, paragraphes, liens, etc. Tables CSS

page 7 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éléments historiques En 94, création du W3C par Berners-Lee et collègues World Total 100 millions Africa < 1 million Asia/Pacific 13 millions Europe 16 millions Middle East < 1 million Canada & USA 61 millions Latin America 7 millions millions Pénétration pas exactement la même partout sur la planète pénétration d’Internet aux É.U. surtout ensuite rééquilibre avec l’Asie, l’Europe, etc milliard 200 millions 6 millions 191 millions 5 millions 183 millions 33 millions

page 8 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éléments de base HTML=langage = lingu franca du Web = format de fichier (format de fichier le plus répandu voir la source d’une 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 d’autres textes Définition hypertexte: liaison contextuelle infinie www = world wide web = toile d’araigné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 d’emboî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)

page 9 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 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 d’air » à 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 ?

page 10 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Ajouts sur dimensionnement automatique de sites Au lieu d’optimiser pour une résolution fixe, on peut tirer avantage de la possibilité offerte en HTML d’avoir des dimensions relatives. –par exemple, tableaux…. –exemple d’un site SANS redimensionnement automatique ou toile.comwww.toile.qc.ca –exemple d’un site AVEC redimensionnement automatique quote.yahoo.com

page 11 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 3- Adaptation automatique (langue, navigateur, etc.) TCP/IP (Transmission Control Protocol/Internet Protocol) : couche de base de transmission Couche sur laquelle s’asseoit 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 Noms de domaines: correspondance en lettres avec des préfixes et suffixes: Lors de l’appel initial (lorsque l’on 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. s’affiche dans la langue de votre navigateur. navigateur Serveur Web

page 12 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 4- Notions de base Rappel sur quelques conventions et balises HTML de base –<> et : règle d’or d’ouvrir et fermer une balise systématiquement lorsque l’on 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 d’utiliser les entités caractères) : é = é –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

page 13 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 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.

page 14 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 4- Notions de base Ossature HTML type Ouverture du contenu HTML Ouverture de la partie «en-tête» Ouverture du titre Bla blaTitre du document Fermeture du titre Fermeture de la partie «en-tête» Ouverture de la partie «corps du texte» Bla blaContenu du document Fermeture de la partie «corps du texte» Fermeture du contenu HTML

page 15 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 4- Notions de base Éléments de mise en forme Titre de section de niveau 1 Titre de section de niveau 2 … itre de section de niveau 6 italique gras barré

page 16 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 4- Notions de base Paragraphes et sauts de lignes Ceci est un paragraphe. Un espace est automatiquement créé avant et après le paragraphe. Ceci est un saut de ligne. Il permet de changer de ligne sans débuter un nouveau paragraphe. Notez que le marqueur n’a pas de fermeture.

page 17 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 4- Notions de base Attributs de certaines balises Paragraphe aligné à droite Texte de taille 2 Augmentation de la taille de 2 unités Diminution de la taille de 2 unités Taille 2 et police Verdana

page 18 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 4- Notions de base Approches de dépannage Sans outil de validation (selon un problème d’apparence 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 l’hypothèse la plus plausible tester l’hypothèse en tenant compte de: nature du problème hypothétique coûts de correction et d’évaluation de résultats probabilité de l’hypothèse boucler tant que l’hypothèse n’est pas confirmée et la cause corrigée

page 19 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 5- Travail en classe Exercice de base Création de la page bonjour avec notepad Ajouter graduellement des effets de mise en forme Exercice : –En groupe de 2 personnes, –Corriger les pages d’exercice avec un simple éditeur de texte. –Les pages d’exercices sont regroupées dans un fichier ZIP sur le site Web du cours. –Ne corrigez que les 4 premiers exercices.

page 20 Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 6- Téléchargement d’un outil incluant un validateur Certaines erreurs sont plus faciles à corriger lorsqu’on 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.