Méthodologie et exercices d'internet et du multimédia acohen@ulb.ac.be 1
Introduction Statut du cours Projet Organisation du cours Environnement du travail Mode d'évaluation 2
Statut du cours Année(s) d'études concernée(s) : COMM3 BA3 en INFORMATION ET COMMUNICATION(cours obligatoire) COMM3P ANNEE PREPARATOIRE au MASTER en INFORMATION & COMMUNICATION(cours obligatoire) MIGEST3 MINEURE (BA3) en GESTION 3
But du cours initier les étudiants aux principes de la publication multimédia formater un contenu en fonction des exigences spécifiques du Web, adopter un style qui convient à la lecture en ligne rédiger des hyperliens efficaces exploiter l'image, le son, la vidéo et l'interactivité en fonction des besoins communicationnels. 4
Comment y parvenir? manipuler certains outils et techniques de publication multimédia. exercices dirigés mini projet à réaliser Réaliser différentes tâches permettant d'aboutir à la réalisation d'un site Web 5
Organisation du cours COURS THEORIQUES 3 séances les jeudis de 10h à 12h GROUPE 1 14h à 15h50 TRAVAUX PRATIQUES 9 séances de 2 heures les mercredis GROUPE 2 (*) GROUPE 3 16 h à 17h50 18h à 19h50 (*) Le 14/10, 21/10 et le 4/11 Le TP aura lieu de 12h à 13h50 8/10/2009-15/10/2009-22/10/2009 Les travaux pratiques se dérouleront dans les salles PC1 et PC2 de INFOCOM (11ème étage du bâtiment D) 6
Horaire des travaux pratiques Les mercredis : TP1 : 14 /10/2009 TP2 : 21/10/2009 TP3 : 28/10/2009 TP4 : 4/11/2009 TP5 : 18/11/2009 TP6 : 25/11/2009 TP7 : 2/12/2009 TP8 : 9/12/2009 TP9 : 16/12/2009 Permanence les mercredis de 12h à 13h50 28/10/2009 18/11/2009 25/11/2009 2/12/2009 9/12/2009 16/12/2009 7
Encadrement des travaux pratiques Sven CARNEL Haldjia CHEIKH Gil DURAND Les étudiants sont priés de se rendre à leur propre groupe 8
Méthode pour les travaux pratiques Exercices pilotés Inscription obligatoire au groupe pour le mardi 13 octobre au plus tard http://dev.ulb.ac.be/~journal/stic/index.php?page=inscripti on2010 Pas de compte attribué cette année Stockage sur un des compte du binôme Dépôt partiel sur le serveur L'ensemble des exercices conduit à un projet pris en compte dans la note de l'examen final 9
http://dev.ulb.ac.be/~journal/stic/index.php?page=inscription2010 10
Environnement Logiciels : Internet Explorer, Mozilla Firefox, Bloc Notes, Note Tab Light, Word 2003, Adobe Photoshop, Macromédia Dreamweaver 8 Utilitaires de compression, de transfert de fichiers, Salles informatiques de la section INFOCOM 11
Logiciels disponibles sur les PC Suite bureautique Les navigateurs (Internet Explorer, Mozilla FireFox) Utilitaires (antivirus, winzip, adobe reader, antidote, etc ) Mise en page Retouche d images Réalisation de sites Web 12
Parc informatique Montage virtuel Audio Vidéo PC pour Applications diverses 6 PowerMac G4, 5Ghz, 256Mb Ram, HD 20GB Serveur de fichiers et d impression 42 PC Pentium 4 1Ghz, 512 Mb Ram HD80GB ProLiant ML350G2, 18,2 512 Mb Ram RAID, DDS cart., LCD, Stack 13
Mise en réseau Partage des ressources Allocation d espace disque individuel Allocation d espace pour le partage des informations Dépôt consignes données énoncés Dépôt des travaux Mais attention lors du dépôt de votre travail.. 14
Serveur de fichiers Dépôt des travaux 15
Comment accéder à l'espace de partage? 16
Pour récupérer les fichiers Pour déposer vos travaux. \\SIC\commb304_enonce \\SIC\commb304_depot 17
Exemple de page à déposer sur le serveur De quoi est formée cette page? 18
Mauvaise surprise La page est composée de plusieurs fichiers : 19
Mauvaise surprise Si tous n'est pas transféré sur le serveur??? 20
Organisation des TP 21
Organisation des TP suite 22
Evaluation 23
Examen Projet à remettre pour le 18 décembre 2009 mais des remises partielles sont obligatoires aux dates indiquées dans le syllabus UN SEUL examen pratique 24
Qu allez vous apprendre 1 Partie 1 : Analyse de site Web Avoir un regard critique par rapport à un site Web avoir une idée des critères de jugement d un bon site internet analyser la cohérence du site web : couleur, polices de caractères, disposition des éléments, présentation du contenu, sa pertinence, 25
Qu allez vous apprendre 2 Partie 2 : Traitement des images Manipuler une image Transformer des images et les redimensionner Comprendre le concept de couche dans un logiciel de traitement d'image Fichier PSD Fichier GIF / JPEG / PNG 26
Qu allez vous apprendre Partie 3 : Création de page Web et de site Web Apprendre les rudiments du langage HTML Apprendre les fonctions de base de Dreamweaver Apprendre comment agencer les éléments multimédia et les mettre en valeurs, Apprendre à réaliser une page Web Comprendre le système de navigation d'un site Web Comprendre la structure d'un site Web Réaliser un site Web 27
Quelques termes à connaître FLASH PLUG IN DPI RTF numériser PDF OCR UNICODE PIXEL hypertexte FRAME Page Web CSS typographie transparence streaming WAV 28
Evaluation de sites Web Etapes du projet Retouche d image et réalisation de quelques images Initiation à HTML et réalisation de votre première page Web Initiation à Dreamweaver et réalisation d'un site web statique : pages entièrement élaborées et affichées lorsqu'un navigateur les appelle Rédaction d un article orienté pour consultation en ligne 29
Support du cours Un seul syllabus : Théorie + Pratique La partie pratique décrit l'ensemble des tâches à réaliser durant les travaux pratiques. Elle est organisée en trois parties. Pour chaque partie, des travaux sont à remettre (date de remise rappelée dans le syllabus) Le syllabus est indispensable pour les TP!!! Lire attentivement les parties relatives à chaque séance avant de venir!!! Le site http://uv.ulb.ac.be comporte des compléments et surtout un forum de discussion (??) 30
Que contient le syllabus? Les notes des TP renferment des éclaircissements sur des aspects liés au cours (exemple: quels critères pour évaluer un site Web?) Un tutoriel du logiciel Adobe Photoshop Initiation à HTML Un tutoriel du logiciel Macromedia Dreamweaver 8 des instructions sur le projet des consignes à respecter (exemples : où stocker les fichiers, quel arborescence de fichiers, ) les tâches à réaliser L'ensemble des notes comportent tout ce dont vous aurez besoin pour la réalisation du projet. Des informations supplémentaires sont également disponibles via les valves électroniques Il y a surtout des dates de remises des travaux à respecter!! 31
Quels outils pour le projet? Pour la manipulation des images Adobe Photoshop Pour l'html éditeur de texte Macromedia Dreamweaver Pour le transfert sur un serveur FTP Exemples de travaux 32
Quels langages pour les pages Web? Langages utilisés : X(HTML) : (HyperText Markup Language) CSS : (Cascading Style Sheet ou feuille de style en cascade) pour traduire la charte graphique et préciser les caractéristiques de la mise en forme des pages Garantit une séparation nette entre la structure et la présentation Différence entre Word / HTML? 33
Cas de Word Word Production papier Utilise des styles titre1, titre 2,.. Uniformité de la présentation des différents chapitres Il y a un style par défaut Possibilité de personnaliser les styles 34
Langage HTML Non maîtrise du support de sortie Diversité des tailles des écrans, des navigateurs 35
Volet théorique I Introduction générale Définition d'un site Web Organisation des éléments d'un site Web II Outils pour réaliser un site Web Le logiciel Dreamweaver Les Navigateurs et le serveur II Architecture et navigation dans un site Web Architecture d'un site Web Comment concevoir un site Web? Structure d'un site Web Navigation dans un site Web Exemples de travaux 36
Volet théorique suite III Contenu possible d'un site Web Contenu d'un site Web, d'une page Web Formats des fichiers IV Les images Généralités et utilisation Représentation des images Format des fichiers images pour le Web V Le texte Polices de caractères Typographie VI Le son et vidéo 37
Fin de l'exposé introductif 38