Introduction 3 octobre 2012 Grégory Petit

Un peu sur le prof  Etudiant au doctorat à Polytechnique Montréal  Accessibilité des nouvelles technologies  Aussi consultant en expérience utilisateur pour divers clients

Infos en vrac   Courriel :  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???

 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

 HyperText Markup Language  Donc c’est un langage! (langage informatique certes)  Langage composé de balises  Il génère de l’hypertexte  Hypertexte : texte qui contient des liens vers d’autres textes (Ted Nelson, 1965)

HTML HTML 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 :ça Ceci est un titre Bonjour HTML, c’est bien!

Les éléments HTML  Les é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 de fermeture

Les éléments HTML 2 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 HTML  HTML 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 HTML Alors 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!

HTML  Voyez 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 Ceci est un titre Bonjour HTML, c’est bien!

HTML Voici donc les 3 éléments racines d’un document HTML  … Délimite le document HTML. C’est aussi là où est défini le langage primaire du document. C’est le gros tronc!  … Entête du document. Il contient toutes les métadonnées de la page Web (titre, mots-clés, styles, etc.)  … Contenu de la page Web. C’est la grosse branche principale de l’arbre.

XHTML  X : 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 source Aperç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!