Atika Cohen

Méthodologie et exercices d'internet et

du multimédiaAtika Cohen

acohen@ulb.ac.be

1

Introduction

• Statut du cours

• Projet 

• Organisation du cours

• Environnement du travail

• Mode d'évaluation

Atika Cohen2

Statut du coursAnné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 

Atika Cohen3

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. 

Atika Cohen4

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 

Atika Cohen5

Les travaux pratiques se dérouleront dans les salles  PC1 et PC2  de INFOCOM (11ème étage du bâtiment D) 

8/10/2009 - 15/10/2009 - 22/10/2009

COURS THEORIQUES3 séances

les jeudis de 10h à 12h

GROUPE 114h à 15h50

GROUPE 2 (*)16 h à 17h50 18h à 19h50

TRAVAUX PRATIQUES9 séances de 2 heuresles mercredis

GROUPE 3

Organisation du cours(*)Le 14/10, 21/10 et le 4/11Le TP aura lieu de 12h à 13h50

6

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

Horaire des travaux pratiques

Atika Cohen

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

Les étudiants sont priés de se rendre à leur propre groupe 

Sven CARNEL

Haldjia CHEIKH

GilDURAND

Atika Cohen8

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=inscription2010

• 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 finalAtika Cohen 9

Atika Cohen 10

http://dev.ulb.ac.be/~journal/stic/index.php?page=inscription2010

Atika Cohen

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

Atika Cohen

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 

Web12

Parc informatique

PC pourApplicationsdiverses

42 PC Pentium 41Ghz, 512 Mb RamHD80GB

6 PowerMac G4, 5Ghz, 256Mb Ram, HD 20GB

ProLiant ML350G2, 18,2 512 Mb RamRAID, DDS cart., LCD, Stack

Montage virtuelAudioVidéo

Serveur de fichiers et d’impression

Atika Cohen13

Partage des ressourcesAllocation d’espace disque individuelAllocation d’espace pour le partage des informations

Mise en réseau

Dépôt ‐ consignes‐ données ‐ énoncés

Dépôt des travaux

Mais attention lors du dépôt de votre travail …..Atika Cohen

14

Atika Cohen

Dépôt des travauxServeur

de fichiers

15

Comment accéder à l'espace de partage ? 

Atika Cohen16

Pour récupérer les fichiers 

\\SIC\commb304_enonce

Pour déposer vos travaux ….

\\SIC\commb304_depot

Atika Cohen 17

Atika Cohen

Exemple de page à déposer sur le serveur

De quoi est formée cette page ?

18

Atika Cohen

Mauvaise surprise

• La page est composée de plusieurs fichiers : 

19

Atika Cohen

Mauvaise surprise

• Si tous n'est pas transféré sur le serveur ???

20

Atika Cohen

Organisation des TP

21

Atika Cohen

Organisation des TP ‐ suite

22

Atika Cohen

Evaluation

23

Atika Cohen

Examen

UN SEUL examen pratique

Projet à remettre pour le 18 décembre 2009 mais des remises partielles sont obligatoires aux dates indiquées dans le syllabus

24

Atika Cohen

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

Atika Cohen

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

Atika Cohen

Qu’allez‐vous apprendrePartie 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

Atika Cohen

Quelques termes à connaître

OCRnumériser

PIXEL

FRAMEPage Web

WAV

CSS

transparence

DPIFLASH

PDF

streaming

hypertexte

UNICODE

PLUG IN

typographie

RTF

28

Atika Cohen

Etapes du projet

• Evaluation de sites Web

• 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

Atika Cohen

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

Atika Cohen

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

Atika Cohen

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

Atika Cohen

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

Atika Cohen34

Langage HTML

• Non maîtrise du support de sortie

• Diversité des tailles des écrans, des navigateurs

Atika Cohen35

Volet théoriqueI ‐ 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

Atika Cohen36

Volet théorique ‐ suiteIII ‐ 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

Atika Cohen37

Atika Cohen

Fin de l'exposé introductif

38