TD de formation

Transcription

TD de formation

Travail dirigé
Domaine B5 : Réaliser la présentation de ses travaux en présentiel et en ligne.
Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images
fixes et animées et liens internes et externes.
Attention : ce TD formatif nécessite de votre part recherches et investigations et suppose
des connaissances de base acquises en bureautique.
•
Thème : L’environnement, traitement des déchets ménagers.
•
Objectif : Pour présenter vos travaux, réaliser un mini site web sur le thème choisi.
•
Démarche : Je sais réaliser un document hypermédia en utilisant les fichiers
adéquats.
•
Remarque :Il n’est pas prévu dans ce TD de travailler directement l’image, le son
ou la vidéo ni de placer les documents en ligne (utilisation locale).
Les éditeurs HTML permettent après un apprentissage raisonnablement court la réalisation de pages Web
courantes.
Une page Web est un fichier codé HTML (Hyper Text Markup Language) qui peut être interprété par un
navigateur. Le codage HTML est supposé normalisé et universel. C’est un document au format ASCII dont les
chaînes de caractères sont encadrées de balises (ou tags) placées entre < et >. Un tel document peut être écrit
sous un éditeur HTML qui s’occupera de traduire votre page en codes HTML (vous travaillez sur le résultat
attendu et pas sur les codes).
Les éditeurs WYSIWYG (What You See Is What You Get) permettent de voir exactement la façon dont la page
sera affichée à mesure de sa création. Il n'est pas nécessaire de connaître le langage HTML, dans la mesure où
la plupart des fonctions HTML sont disponibles sous la forme de commandes des barres d'outils et des menus
(c’est le cas d’OpenOffice).
L’insertion de petits programmes en langage reconnu par les navigateurs peut augmenter les possibilités du
codage HTML comme par exemple le JavaScript ou les Applets Java.
La création des pages Web n’est donc plus le domaine réservé des spécialistes.
L’apprentissage de premier niveau n’est pas plus complexe que pour un traitement texte simple tout en intégrant
des possibilités d’éléments multimédia et en permettant une lecture par les navigateurs.
Le marché propose un bon nombre d’éditeurs html des plus simples aux plus avancés. Certains d’entres eux sont
gratuits (freeware et/ou libres) ou peu onéreux (shareware), d’autres sont chers à l’achat. Il est certain que tous
ne présentent pas les mêmes possibilités techniques mais selon les réalisations envisagées un produit gratuit
souvent téléchargeable sur le net peut totalement satisfaire l’utilisateur pour un usage courant.
Item B53 – C2I niveau 1
1/12
I- Mise en situation
Votre entreprise a la charge de réaliser une présentation globale concernant
l’environnement. Le document hypermédia, avec notamment une courte vidéo, sera lu soit
en présentiel, soit en ligne par un navigateur web. Pour répondre à cette double exigence
le choix s’est porté sur une production au format html.
Vous avez à traiter uniquement la question du tri des déchets ménagers en répondant à
une structure de présentation préétablie pour une cohérence de la production globale sur
l’environnement. Cette structure vous est imposée dans le paragraphe « Vos travaux de
réalisation ».
Environnement
Page 1
Accueil
Page 2
Tri des déchets ménagers
Votre production,
structure imposée.
Page 21
II- Travail d’analyse technique d’un site
Afin de vous proposez une présentation cohérente, votre entreprise à mis en ligne une
illustration de ce que pourrait être la structure de vos travaux concernant le tri des déchets
ménagers : http://educacom.free.fr/siteOO_web
Vous vous appuierez sur cette illustration pour créer votre propre production sans pour
autant la reproduire à la lettre ni dans la forme, ni dans les contenus.
1)
2)
3)
4)
5)
6)
De combien de pages est, selon vous, constitué ce site ?
Combien de tableaux apparents ont été tracés dans le site et de combien de cellules ?
Quels sont les liens internes au site et les externes vers d’autres sites ?
Quels sont les formats des fichiers ciblés par les liens internes ?
Identifier les trois formats d’images fixes compatibles html et utilisés dans ce site.
Identifier le format de la vidéo.
Un lien interne est un lien qui pointe vers un document (texte, image, audio, vidéo …) ou une autre page d’un
même site Web.
Un lien interne ancré est un lien cliquable normal, à cela près qu'il ne pointe pas seulement sur une page, mais
également sur un point précis de cette page appelé point d'ancrage. Ce point d'ancrage peut se trouver sur la
page courante ou sur une autre page.
Les liens externes : Un lien externe mène vers un document ou une page d’un autre site Web.
Un lien peut s’ouvrir dans la page affichée courante (généralement pour un document propre au site) ou dans
une nouvelle fenêtre (généralement pour un lien externe afin de bien identifier une provenance extérieure au site
affiché).
2/12
II-Travail de préparation à la réalisation du site
1- Créer la maquette de votre site.
Dans le cadre de cette production la structure de la maquette vous est imposée selon
l’exemple de l’illustration en ligne mais pas les contenus (textes, images, vidéo, liens
externes …). Cette étape se prépare sur papier : prévoir l’organisation de votre site et
identifier les divers contenus.
Accueil : traitement des déchets ménagers.
Vidéo
Fichier « page_video.html »
Fichier « accueil.html »
Votre site est composé de
deux pages liées entre elles.
2- Organiser les répertoires sur votre disque dur.
Sur votre disque dur, créer le répertoire et les sous répertoires qui contiendront tous les
fichiers de votre production.
Contrairement à un fichier de traitement de texte ou à un diaporama tous les fichiers liés
doivent être sauvegardés et présents pour lire correctement une page html.
3- Préparer tous les éléments de votre site.
Les contenus : images fixes et vidéo, les sons et les textes peuvent être recherchés par
vos soins sur le réseau Internet (respecter les droits d’auteurs) ou produits par vous-même
si vous en avez les compétences et le temps. Vous les placez ensuite dans le sous
répertoire adéquat.
Tous les formats d’image, de son ou de vidéo ne sont pas compatibles avec une
page html. Quelques considérations sur la question des formats des fichiers pour le
multimédia :
3/12
Formats des fichiers d’image : les fichiers graphiques (une photographie, un dessin, un logo …) sont
sauvegardés selon des formats de fichiers différents :

BMP : BitMap, format non compressé.
TIFF ou TIF : Tagged Image File Format, format compressé ou non.
JPEG ou JPG : Joint Photographic Expert Group, format compressé.
GIF : Graphic Interchange File, format compressé.
PNG : Portable Network Graphics, alternative libre au format propriétaire GIF.
GIF Animated : Image animée compressée.
Etc …
De nombreux logiciels du commerce permettent de convertir les formats graphiques. Sur le Web on utilise
généralement le format JPEG pour des photographies avec des dégradés de couleurs et les formats PNG ou GIF
pour un nombre réduit de couleurs, pour des fonds d’image transparents et pour des images animées.
Qualité et poids des images : une image pour le Web est toujours un compromis entre la qualité de l’image et son
poids informatique donc son temps de téléchargement. Le poids informatique de chaque photographie dépend de
la définition (nombre de pixels qui compose une image) et du taux de compression (plus le taux de compression est
élevé, plus la qualité est faible mais plus le poids est moindre).
Format BMP : 8cmx6cm, 114 Ko
4cmx3cm, 29 Ko
Format GIF : 8cmx6cm, 34 Ko
4cmx3cm, 11 Ko
Format TIF : 8cmx6cm, 98 Ko
4cmx3cm, 29 Ko
Format JPEG : 8cmx6cm, 15 Ko
4cmx3cm, 6 Ko
Dans le cas d’une publication en ligne on utilisera donc un format compressé PNG, GIF ou JPEG et on recadrera et
redimensionnera l’image telle qu’on souhaite l’afficher à l’écran.
Changer les dimensions de l’image à l’écran en utilisant les poignées ne modifie en rien les dimensions de
l’image enregistrée. Autrement dit une image réduite à l’écran conserve les dimensions et le poids informatique de
l’image d’origine.
Formats des fichiers vidéos : comme pour l’image numérique plusieurs formats cohabitent. Parmi les principaux :

AVI
MOV
WMV
FLV
Etc …
Pour lire ces fichiers des lecteurs spécifiques s’avèrent nécessaires sur votre ordinateur.
Pour les plus répandus :

Windows Média Player
Quick Time
Real Player
VLC, … etc
Ces lecteurs, libres d’utilisation, sont facilement téléchargeables sur le net. Dans le cas des vidéos prévues pour le
Web le compromis entre la qualité et le poids informatique est également un critère essentiel.
Formats des fichiers audio : pour les principaux :
WAV
MP3
WMA
Comparons également les poids informatiques pour une même chanson de 5:50 mn : le rapport est de 22 entre les
formats WAV et WMA ce qui impose des choix judicieux dans le cas des téléchargements.
4/12
III-Travail de réalisation du site
Vous devez suivre la structure imposée en mobilisant votre propre design et vos propres
contenus, opter pour une ergonomie simple qui permet une navigation efficace, un
graphisme convivial et une lisibilité performante sur l’ensemble de votre réalisation.
A la fin de chaque étape de votre réalisation il vous sera donné un résultat possible (fond
bleu) de la manipulation, il ne s’agit évidemment pas de reproduire ce résultat à la lettre
mais seulement de vous en inspirer pour votre propre composition.
1- Ouvrir l’application
Î « Writer » d’OpenOffice (version 2.4.1) puis le module « Document HTML »
(« Ficher » et « Nouveau »).
A – La page d’accueil (Fichier « accueil.html »)
2- Créer votre mise en page
Cette opération consiste à utiliser des tableaux (bordures apparentes ou non) qui
contiendront les éléments de votre page comme présentée ci-dessous.
Î Menu « Insertion » puis commande « Tableau » ou icône « Tableau »
Insérer tous les tableaux qui constitueront votre mise en page : nombre de lignes et
nombre de colonnes.
Î Menu « Tableau » ou menu
contextuel (clic dans le
tableau puis clic droit)
Finaliser vos tableaux selon votre propre
convenance : largeur, alignement,
bordure, arrière plan, couleurs …
De préférence afficher un tableau
en relatif % (décocher alignement
automatique) afin que les proportions de
votre tableau soient conservées quelles
que soient les dimensions de votre
écran.
5/12
Î Menu « Fichier » puis commande « Enregistrer sous … »
Enregistrer votre travail dans votre répertoire sous le nom « accueil ».
Résultat possible
1ligne, 1 colonne, bordure, arrière plan
2 lignes, 1 colonne, pas de bordure, pas d’arrière plan
1ligne, 3 colonnes, bordure, pas d’arrière plan
1ligne, 3 colonnes, pas de bordure, pas d’arrière plan
3- Créer le titre
Formater votre texte selon votre convenance dans le tableau à cellule unique avec
bordures apparentes et fond de couleur.
Î Menu :
Résultat possible
Penser à sauvegarder régulièrement vos travaux.
6/12
4- Créer le texte introductif
Formater votre texte selon votre convenance dans le tableau à 1 colonne et 2 lignes sans
bordures apparentes et sans fond.
Résultat possible
5- Visualiser dans un navigateur web
Visualiser vos premiers résultats dans un navigateur web.
Î Menu « Fichier » puis commande « Aperçu dans le navigateur Web » ou
bien ouvrir directement la page « accueil.html » dans un navigateur.
Résultat possible
6- Compléter un tableau
1
2
3
7/12
Ce tableau aux bordures apparentes constitué d’une ligne et de trois colonnes est formaté
selon votre propre convenance : type de bordures, couleurs, fond … Il contient :
Dans la cellule
1 , une image encadrée de votre choix.
Î Menu « Insertion » puis
commande « A partir d’un
fichier …. ».
Î Menu contextuel « Image »
(clic sur l’image puis clic
droit).
•
•
Dans la cellule
•
•
Ancrage « Comme caractère »
Bordures selon votre choix
2 , une image et un texte accolé de votre choix.
Ancrage « Au paragraphe »
Adaptation du texte « Après »
Dans la cellule
3 , un texte, un logo et des liens.
Placer un même lien sur une
partie de votre texte et sur le
logo pour ouvrir la même
seconde page de votre site à
savoir
le
fichier
« page_video.html ».
Résultat possible
8/12
7- Compléter un tableau
1
2
3
Ce tableau aux bordures non apparentes, également d’une ligne et de trois colonnes
contient :
Dans la cellule 1 , un autre tableau (1 ligne, 1 colonne) avec bordures apparentes et
fond selon votre choix comprenant sur le thème du tri des déchets :
•
Un lien vers un enregistrement audio soit effectué par vos soins (par exemple
avec le magnétophone Windows) soit récupéré sur le réseau Internet.
•
Un lien vers une animation ou une vidéo d’un autre site web (par exemple site
« Dailymotion » ou « You Tube »).
•
Un lien vers une page composée par vos soins au format Acrobat Reader (pdf).
Les premier et troisième
liens seront des liens
internes à votre site web, le
second sera externe. Chacun
des liens s’ouvrira dans une
nouvelle
fenêtre
(attribut
« blank ») du navigateur.
Dans la cellule
2 , une image ou un logo et son slogan associé.
Dans la cellule 3 , deux liens externes vers deux sites web de votre choix qui traitent du
thème sur l’environnement.
Résultat possible
9/12
B – La page vidéo (Fichier « page_video.html »)
Cette seconde page de votre site, dédiée à la consultation d’une vidéo, contiendra :
•
•
•
Un titre formaté selon votre convenance (police, cadre, fond, couleur …).
Un lien de retour vers la page d’accueil.
Une vidéo qui doit s’afficher automatiquement dans la page html.
La difficulté de cette page concerne l’affichage de la vidéo dans la page html.
Intégrer une vidéo au format Flash dans une page html.
Pour visionner une vidéo plusieurs solutions peuvent être envisagées dont la lecture par un lien direct ou bien
l’affichage automatique dans votre page (solution retenue ici) sans être tributaire d’un quelconque lecteur installé
ou non par ailleurs sur votre machine.
Cet affichage intégré à la page dépend également du format de votre vidéo qui conditionne l’écriture d’un code
html adapté. Dans le cadre précis de cette réalisation vous afficherez directement dans votre page une vidéo au
format flash (.flv) qui propose, pour une taille de fichier raisonnable, une bonne qualité d’image.
Avec un format vidéo différent votre ligne de codes serait également différente.
8- Intégrer la vidéo
Î Menu « Affichage » puis commande « Source HTML ».
La ligne de codes suivante est à insérer (copier-coller) dans votre
page « page_video.html » à l’emplacement où vous désirez
placer votre vidéo qui peut être, par exemple, centrée dans une
cellule de tableau formatée à votre convenance comme ci-contre.
<EMBED SRC="player.swf?file=video_recyclage.flv" TYPE="application/x-shockwaveflash" NAME="Objet1" ALIGN=BOTTOM WIDTH=320 HEIGHT=260 quality="high">
Vous pouvez repérer dans cette ligne de codes le plugin flash
intégré dans ce cas « player.swf » ainsi que le fichier vidéo
proprement dit dans ce cas « video_recyclage.flv ».
Ces deux fichiers sont obligatoirement placés dans le même
répertoire que votre page « page_video.html ».
10/12
Si votre propre vidéo est dans un format différent (avi, wmv ou autres) il vous faudra
l’encoder (des encodeurs libres sont accessibles sur l’Internet par exemple : Super ou
Riva) au format .flv ou bien utiliser une ligne de codes qui correspond au format de votre
vidéo.
Les autres attributs de la ligne sont conservés tel quels.
En cas de difficulté, vous trouverez sur la plateforme Moodle un plugin flash swf
ainsi qu’une vidéo au format flv. Vous pouvez enregistrer ces deux fichiers et
adapter la ligne de codes afin de traiter cette réalisation.
Résultat possible
9- Tester votre site
Î Ouvrir directement la page « accueil.html » dans un navigateur puis tester
votre site, vérifier que les éléments multimédias s’affichent correctement et
que les liens sont actifs.
IV- Conclusion
L’objectif de ce travail dirigé était de répondre au mieux à l’item B53 sans pour autant
former des spécialistes de l’édition de sites web statiques et dans un temps
d’apprentissage acceptable dans le cadre du C2I.
Ceci a imposé des limites aux travaux demandés, par exemple les feuilles de style (CSS)
pourtant importantes ainsi que d’autres possibilités de l’éditeur web d’OpenOffice (images
map, formulaires …), ne sont pas volontairement abordées.
Pour ceux d’entre vous qui souhaitent aller plus loin que cette simple découverte, une
documentation complète facilement accessible en ligne répondra à leurs attentes.
11/12
http://www.framasoft.net/IMG/pdf/webooohtml.pdf
avec OpenOffice.
: Tutoriel pour la création de sites web
Site web statique (le cas de ce TD) est géré par un webmaster qui place en ligne par un transfert FTP des
pages HTML créées une fois pour toutes. Le contenu des pages est fixe jusqu’à la prochaine modification.
Cette solution peut s’avérer très rapidement lourde pour le webmaster si la modification des contenus est
fréquente mais reste simple pour un auteur qui n’entre pas dans l’édition HTML. Dans ce cas il remet des
documents (écrits, images, audio ou vidéo) au webmaster qui a en charge de les adapter pour une lecture par un
navigateur. La présence du webmaster peut constituer un goulot d’étranglement pour la publication : le délai de
publication est proportionnel à sa charge de travail. Cette solution correspond à la première génération de site
web qui reste encore très présente sur le net.
Site web dynamique se construit directement par des interventions d’auteurs inscrits en sollicitant des bases de
données filtrées par des outils logiciels. Un administrateur gère la charte graphique, la configuration générale du
site et l’inscription des auteurs. Toutes ces opérations se font par un simple navigateur ainsi que la publication
par les auteurs et l’exploitation par les utilisateurs.
Répartie sur plusieurs auteurs la publication est ainsi beaucoup plus fluide et réactive. Comme l’outil intègre les
compétences en HTML de l’ancien webmaster l’auteur peut réaliser des publications sans compétences
informatiques autres que bureautiques. Cette solution correspond à la nouvelle génération de site web pour
laquelle la réactivité et la réduction des coûts de publication sont des critères essentiels.
JP Verdu, janvier 2009
12/12