Interfaces et Scénarisation (COM2571) 17 septembre 2013 Grégory Petit
10 octobre 2012 Grégory Petit
-
Upload
therese-duchesne -
Category
Documents
-
view
114 -
download
1
Transcript of 10 octobre 2012 Grégory Petit
![Page 1: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/1.jpg)
Introduction à la production de site Web
10 octobre 2012Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2580/
![Page 2: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/2.jpg)
La semaine dernière…On a fixé les dates importantes :
31 octobre : premier travail à rendre
28 novembre : second travail à rendre
16 janvier : présentation et remise du travail de session
![Page 3: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/3.jpg)
La semaine dernièreSinon, on a vu :
Pourquoi ce cours est pertinent,
une courte introduction au HTML,
une courte introduction à Dreamweaver.
![Page 4: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/4.jpg)
Et donc on fait quoi aujourd’hui?
Pourquoi fait-on des sites Web?
Entête des pages Web
Organisation des fichiers d’un site Web
La structure des pages Web
Atelier
![Page 5: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/5.jpg)
Pourquoi fait-ondes sites Web?
![Page 6: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/6.jpg)
Alors pourquoi?Pour promouvoir quelque chose :
Un produitUne entrepriseUne personne
Pour présenter des informations
Pour le plaisir?
![Page 7: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/7.jpg)
Pour communiquer avec le monde!
![Page 8: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/8.jpg)
Noms de domaineVoir http://www.ic.gc.ca/epic/site/dir-ect.nsf/fr/h_uw00890f.html
Votre produit, votre nom (accès intuitif) chocolats.miam-miam.ca
Éviter d’inclure le fournisseur d’accès (Bell, Videotron, etc.)
Les noms de domaines sont payant et réglementé.
Généralement .com ou .ca
![Page 9: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/9.jpg)
Noms de domaines.com - Destiné à être utilisé par les domaines commerciaux. .org - Destiné à être utilisé par les organismes
non-commerciaux. .biz - Destiné aux entreprises. .info - Destiné aux organismes fournissant de l’information. .name - Limité aux noms des particuliers. .net - Principalement utilisé par les entreprises et les organismes
disposant d’un réseau. .edu - Limité aux établissements d’enseignement qui sont des
collèges ou universités offrant un programme de quatre ans. .mil - Limité au secteur militaire des États-Unis. .gov - Limité au gouvernement des États-Unis. .int - Limité aux organismes dont l’existence résulte d’un traité
international. .museum - Limité aux musées. .coop - Limité aux coopératives.
![Page 10: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/10.jpg)
Entête des pages Web(Racine invisible de notre arbre)
![Page 11: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/11.jpg)
Entête des pages Web <head>Les entêtes de pages doivent contenir les
éléments :
Titre (<title>)
Description
Mot-clé
Il faut penser à ces données pour toutes les pages du site.
![Page 12: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/12.jpg)
Titre de la Page <title>
Utilisez un titre pertinent, court et expressif.
N’écrivez pas un paragraphe.
N’écrivez pas une suite de mots descriptifs.
Généralement, le nom du site suivi par le nom de la page. (ex : COM2580 Applications Web – Evaluation)
![Page 13: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/13.jpg)
Description
Assurez-vous de connaître parfaitement le contenu du site.
Énoncez de manière claire et concise les fonctions ou services décrits dans votre site.
Rédigez le texte comme s’il s’agissait d’un texte publicitaire.
Employez des mots susceptibles d’attirer la clientèle.Incorporez le plus de mots-clés possibles.Assurez-vous d’inclure les méta-références dans le
code source.Employez entre 100 et 200 caractères.<meta name="description" content="… truc
…" />
![Page 14: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/14.jpg)
Mots-Clés
Prévoyez les mots-clés que votre clientèle cible utilisera pour chercher ce que vous offrez.
Considérez les mots-clés comme un moyen d’attirer l’attention sur votre site.
Choisissez le singulier ou le pluriel, de faire des phrases.
Ne répétez pas les mots-clés plus de 3 fois car vous serez pénalisé.
N’inscrivez pas des mots qui sont sans rapport avec le contenu de votre page.
N’utilisez pas plus de 20 mots-clés.<meta name="keywords" content="mot1 mot2 …"
/>
![Page 15: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/15.jpg)
Dans DreamweaverDescription et Mots-clé Titre
![Page 16: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/16.jpg)
HTML
<head><meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" /><meta name="keywords" content="communication
com2580 tutorial udem" /> <meta name="description" content="C'est ici qu'on indique la description qui apparaitra dans les résultats de recherche Google." />
<title>Tutorial COM2571</title></head>
![Page 17: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/17.jpg)
Organisation des fichiersd’un site Web
![Page 18: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/18.jpg)
Création d’un nouveau site avec Dreamweaver
Dreamweaver permet de créer un nouveau site et son infrastructure.
Il est aussi possible de gérer ses sites à distance avec Dreamweaver (voir cours Intégration Web)
![Page 19: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/19.jpg)
Création d’un nouveau site avec Dreamweaver
![Page 20: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/20.jpg)
Création d’un nouveau site avec Dreamweaver
![Page 21: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/21.jpg)
Organisation des fichiersCréer des répertoires pour :
Les images
Les styles
Éventuellement pour l’arborescence du site si celui-ci est massif
![Page 22: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/22.jpg)
Arborescence des fichiers
![Page 23: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/23.jpg)
Concrètement ça donne quoi?
![Page 24: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/24.jpg)
Concrètement ça donne quoi? Il est important de laisser le chemin relatif au
document.
<img src="images/image1.png" width="267" height="345" alt="Image" />
![Page 25: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/25.jpg)
Et pour les hyperliens?
![Page 26: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/26.jpg)
Et pour les hyperliens?Comme pour les images, il est important de
laisser le chemin relatif au document.
<a href="menu1.html">Menu1</a>
![Page 27: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/27.jpg)
Les structures de page Web
![Page 28: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/28.jpg)
On va apprendre un nouvel élément HTML!
![Page 29: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/29.jpg)
La division <div>L’élément div permet de séparer sa page Web
en plusieurs parties.
C’est utile pour la mise en page.
C’est utile aussi pour regrouper les éléments ensembles.
![Page 30: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/30.jpg)
La division <div>
![Page 31: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/31.jpg)
La division <div>Vous êtes obligés de remplir l’attribut id.
Plusieurs div peuvent avoir la même valeur pour l’attribut id.
Pour l’attribut class, on verra ça plus tard avec les feuilles de style.
![Page 32: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/32.jpg)
HTML
<div id="contenu"><p>Bienvenue! </p><p>
<img src="images/image1.png" width="267" height="345" alt="Image" />
<img src="images/image2.png" width="395" height="59" alt="image2" />
</p></div>
![Page 33: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/33.jpg)
Atelier
![Page 34: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/34.jpg)
AtelierCréez un nouveau site Web avec Dreamweaver.
Vous devez concevoir une page Web avec plusieurs divisions.
Il doit y avoir au moins : Une division d’entête où vous mettrez plusieurs
liens pour faire une sorte de menu,Une division pour le contenu,Uns division pour le pied de page.
La division d’entête doit contenir des liens vers d’autres pages que vous aurez créés.
![Page 35: 10 octobre 2012 Grégory Petit](https://reader035.fdocuments.net/reader035/viewer/2022062417/551d9da3497959293b8d30bc/html5/thumbnails/35.jpg)
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2580/