Embed Size (px)
DESCRIPTION
Applications Internet (COM2580). Introduction 3 octobre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/. Un peu sur le prof. Etudiant au doctorat à Polytechnique Montréal Accessibilité des nouvelles technologies Aussi consultant en expérience utilisateur pour divers clients. - PowerPoint PPT Presentation
Citation preview
Applications Internet(COM2580)
Introduction3 octobre 2012
Grégory Petithttp://lrcm.com.umontreal.ca/greg/COM2580/
Un peu sur le profEtudiant au doctorat à Polytechnique
Montréal
Accessibilité des nouvelles technologies
Aussi consultant en expérience utilisateur pour divers clients
Infos en vrachttp://lrcm.com.umontreal.ca/greg/COM2580/
Courriel : [email protected]
Mercredi de 8h30 à 11h30 en B-340 (Marie-Victorin)
3 crédits
2 travaux individuels + 1 travail en binôme
Avant de commencer… Que veux dire « Applications Internet » pour vous?
Qu’est ce que vous attendez de ce cours?
Et donc on fait quoi aujourd’hui?
Pourquoi ce cours???
Que va-t-on voir dans ce cours?
HTML
Adobe Dreamweaver CS5
Atelier
Pourquoi ce cours???
Pourquoi ce cours???Job en communication = contact quasi-
obligatoire avec le monde de l’Internet.Probabilité que vous ayez affaire à la gestion
d’un site Web dans votre carrière = 98,25%.Si cela peut vous rassurer, ce cours ne va pas
faire de vous des programmeurs!Le système doit s’adapter à l’utilisateur et
pas le contraire! (voir COM2571)
Y’aura quoi dans ce cours?
Regardons un peu le plan de cours
Y’aura quoi dans ce cours?Beaucoup de pratique :Vous n’êtes pas dans ce cours pour
apprendre divers théories sur l’Internet,Vous allez apprendre à faire un site Web
basique sans forcément écrire une seule ligne de code,
Mais vous allez apprendre à comprendre le code derrière une page Web.
Du boulot :Premier travail : conception d’une page Web
basique,Second travail : petit site Internet de 3 pages,Travail en binôme : maquettage et conception
d’un site Web.
Y’aura quoi dans ce cours?Apprentissage de méthodes de conception :Utilisation des éléments HTML,Mise en page à l’aide de fichiers CSS,Via Adobe Dreamweaver CS5.
Tout en utilisant vos connaissances sur :L’ergonomie,La communication (parait qu’on est dans un
département de communication …),Le multimédia.
HTML
HTMLHyperText Markup Language
Donc c’est un langage! (langage informatique certes)
Langage composé de balises
Il génère de l’hypertexteHypertexte : texte qui contient des liens vers
d’autres textes (Ted Nelson, 1965)
HTMLHTML permet de :De structurer sémantiquement et de mettre
en page le contenu des pages Web, D’inclure des ressources multimédias dont
des images, des formulaires de saisie, des vidéos, des applets, etc.
Il est souvent utilisé avec d’autres langage de programmation comme le PHP et le javascript qui permettent de rendre les pages Web plus dynamiques.
HTMLÇa ressemble à ça :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><HTML>
<HEAD><TITLE>Ceci est un titre</TITLE></HEAD><BODY><H1>Bonjour</H1><P>HTML, c’est bien!</P></BODY>
</HTML>
Les éléments HTMLLes éléments HTML correspondent au divers
éléments composant une page Web.
On va souvent parler d’éléments, de balises ou de tags HTML : c’est plus ou moins la même chose.
Un élément HTML est normalement composé de 2 balises:Balise d’ouverture <balise>Balise de fermeture </balise>
Les éléments HTML2 types de niveau pour les éléments HTML :
Niveau bloc (block) : grandes structures qui peuvent contenir d’autres blocs ou textes. Les titres, paragraphes, les listes ou les tableaux en font parti.
Niveau texte (inline) : « petites » structure qui représentent ou décrivent des morceaux de textes ou de données. Ils ne contiennent normalement pas d’autres éléments. Les hyperliens, les citations ou les images en font parti.
Les éléments HTMLHTML 4 contient 91 éléments.
On ne va pas apprendre à tous les utiliser.
HTML 4 est encore le standard mais HTML 5 est déjà supporté par la majorité des fureteurs.
La majorité des éléments HTML possède des attributs et un contenu.
Les éléments HTMLAlors en gros on a :des textes,des hyperliens,des entêtes,des listes,des tableaux,des images,des formulaires,des éléments de regroupements,et d’autres trucs!
HTMLVoyez l’HTML comme un gros arbre mélangé avec des
poupées russes.
Poupées russes : Un éléments HTML peut contenir un plusieurs sous-éléments HTML Ex : un paragraphe peut contenir un autre paragraphe, un
lien, une image, etc.
C’est le fait qu’un élément HTML puisse contenir plusieurs éléments HTML qui fait penser à un arbre On a un éléments principal qui est le tronc, qui possède
des branches, qui possèdent elle-même des branches, etc.
HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><HTML>
<HEAD><TITLE>Ceci est un titre</TITLE>
</HEAD><BODY>
<H1>Bonjour</H1><P>
HTML, c’est bien!</P>
</BODY></HTML>
HTMLVoici donc les 3 éléments racines d’un document HTML<html> … </html>
Délimite le document HTML. C’est aussi là où est défini le langage primaire du document. C’est le gros tronc!
<head> … </head>Entête du document. Il contient toutes les métadonnées de la page Web (titre, mots-clés, styles, etc.)
<body> … </body>Contenu de la page Web. C’est la grosse branche principale de l’arbre.
XHTMLX : eXtended
Pareil qu’HTML 4 sauf qu’il est moins permissible
Le document doit obligatoirement être bien formé Chaque balise ouverte doit être fermée La syntaxe est sensible à la casse (majuscule/minuscule)
Amené à disparaître avec la sortie de HTML 5 en fin 2014
Les documents créés par Dreamweaver sont en XHTML donc vous n’avez pas vraiment à vous en soucier.
Adobe Dreamweaver CS5
Pourquoi Dreamweaver?Pour créer une page Web :
Vous devez écrire du code!Ça peut se faire avec une éditeur de texte tout bidon comme bloc-note ou textedit!
Vous avez besoin d’un fureteur Web pour tester vos pages Web.
Vous n’avez pas besoin d’être connecté à Internet!
Pourquoi Dreamweaver?
Ou alors vous utilisez un logiciel qui génèrera ce code pour vous!
Mais attention!Il est quand même important de connaître à quoi correspond le code car :Vous n’aurez pas toujours un outil comme
Dreamweaver sous la main,Les outils comme Dreamweaver ne sont pas
parfaits,Dreamweaver utilise un vocabulaire spécifique se
rapportant au code HTML,Le code source de chaque page du Web est
accessible et libre de droit, donc vous pouvez toujours vous en inspirer. Mais pour cela, vous devez comprendre le code.
Dreamweaver
Code sourceAperçu du rendu
De la page
Propriétés de l’élément sélectionné
Boitesà outils
Atelier
On va créer notre première page Web
On va le faire ensemble sous forme de démo assistée
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2580/
