TD de formation

Licence Creative Commons
Jean-Philippe Verdu
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.
Nvu est un logiciel libre WYSIWYG de création de pages web.
Annexe : Informations générales et Webographie (téléchargement et
documentations sélectionnées)
Travail dirigé
Attention : ce TD formatif nécessite une part de recherches et d’investigations et
suppose des connaissances de base acquises en bureautique.
Thème : L’environnement, traitement des déchets.
Objectif : Réaliser un mini site html sur le thème choisi (une page d’accueil et une
page liée)
Démarche : Je sais réaliser un document hypermédia en utilisant les fichiers
adéquats fournis (Application : Je sais faire)
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).
Bien comprendre l’esprit du TD : Il s’agit de modifier deux pages simples html en partie construites
sur le thème du traitement des déchets afin d’obtenir un résultat attendu qui est consultable en ligne à
l’adresse : http://c2i.n1.free.fr/site-TD_nvu/ .
Pour cela vous devez décompresser un dossier zip fourni (TD_nvu.zip) qui contient ces deux pages
incomplètes et l’ensemble des documents nécessaires à leurs réalisations.
L’objectif est de répondre au mieux à l’item B53 sans pour autant former des spécialistes de l’édition de
sites et dans un temps d’apprentissage acceptable dans le cadre du C2I. Ceci impose des limites aux
travaux demandés, par exemple les feuilles de style (CSS), pourtant importantes, ne sont pas abordées.
Pour ceux d’entre vous qui souhaitent aller plus loin que cette simple découverte de Nvu, la
documentation de la webographie répondra à leurs attentes.
TD Nvu pour le C2I - Page 1 sur 11
1 – de l’état initial des pages au résultat attendu
Tester avec les pages attendues qui contiennent des textes, des images, des liens,
des tableaux, une vidéo directement à l’adresse http://c2i.n1.free.fr/site-TD_nvu/.
Constater que les pages initiales en provenance du dossier compressé
« TD_nvu.zip » ne répondent pas aux attentes et les modifier selon les instructions
du TD.
1.1 - Page Accueil
Page d’accueil dans l’état initial en
provenance du dossier « TD_nvu »
décompressé fourni.
TD
Page d’accueil attendue après les
travaux
et
consultable
sur
« http://c2i.n1.free.fr/site-TD_nvu/».
TD Nvu pour le C2I - Page 2 sur 11
1.2 - Page liée (vidéo)
Page liée dans l’état initial en
provenance du dossier « TD_nvu »
décompressé fourni.
TD
Page liée attendue après les travaux
et
consultable
sur
« http://c2i.n1.free.fr/site-TD_nvu/».
2 – Remarques préliminaires importantes
•
Utiliser obligatoirement le navigateur Mozilla Firefox pour consulter les pages
que ce soit en ligne ou en local.
•
Les pages contiennent notamment des liens ou des affichages concernant
des documents audio et vidéo, une animation Flash, un fichier pdf … votre
ordinateur et le navigateur doivent être correctement configurés pour
permettre la lecture de ces supports numériques.
•
Une connexion à l’Internet est nécessaire pour consulter le travail final attendu
(http://c2i.n1.free.fr/site-TD_nvu/ )
TD Nvu pour le C2I - Page 3 sur 11
•
Décompresser avec 7-zip le dossier TD_nvu.zip pour accéder aux fichiers de
travail .
•
La page liée contient une vidéo. Dans le cadre de ce TD aucun travail ne sera
fait sur la vidéo elle même et sur son mode d’affichage.
•
De la même façon aucun travaux sur les photographies elles mêmes ou le
fichier audio.
Navigateur
Page d’accueil
Nvu
Liens
Page liée
Zip
Image, vidéo,
son …
Liens
3 – Travail demandé
3.1 - Ouvrir Nvu Version 1.0 (soit une version installée soit une version portable)
Menus
Boutons de commande
Formatage texte
et paragraphe
Zone de travail
Vous constaterez que l’interface
utilisateur est très proche de celle
d’un logiciel de traitement de texte.
Modes d’édition
TD Nvu pour le C2I - Page 4 sur 11
3.2 - Travailler la page d’accueil
a - Ouvrir dans Nvu le fichier « index.html » du dossier décompressé TD_nvu
1
Première partie de la page d’accueil
2
3
Tab1
4 Tab2
b – Réaliser le titre
1
Le titre est réalisé à partir d’un tableau
à cellule unique.
Tableau : consulter les propriétés
données ci-contre et les appliquer.
Texte : utiliser la barre de menu
concernant le formatage du texte ou
bien le menu « Format » pour
reproduire le résultat attendu ci-contre.
[Police, Taille, Style de Texte, Couleur
du Texte]
TD Nvu pour le C2I - Page 5 sur 11
c – Entrer le texte d’introduction
2
Texte : saisir et formater un texte de votre choix sur le thème. Dans l’exemple cidessus le texte est en Arial, centré, les styles gras et italique, la taille moyenne et la
couleur noire sont utilisés.
d – Travailler le tableau
3 Tab1
Des images sont proposées dans le dossier décompressé TD_nvu.
Tableau : appliquer les propriétés
ci-contre.
Cellule1 : saisir un texte de votre
choix
avec
une
vignette
incorporée et un titre en gras.
[Formatage du texte, Insertion
Image et Propriétés Image]
Consulter attentivement les 4 onglets.
Cellule 2 : insérer une image encadrée d’un liseré noir de votre choix. [Insertion
Image et Propriétés Image ]
Cellule 3 : insérer un logo et un lien sur ce logo vers la seconde page
«video_recyclage.html». [Insertion Image, Propriétés Image ]
TD Nvu pour le C2I - Page 6 sur 11
e – Travailler le tableau 4 Tab2
Tableau : appliquer les propriétés
ci-contre.
Cellule1 : insérer une image et
une légende surlignée. [Bouton
de la barre de formatage du
texte]
Cellule 2 : insérer la vignette
manquante et les trois liens vers :
enregistrement audio mp3
(dossier TD_nvu)
animation flash (http://www.syctom-paris.fr/popup/strip_1.swf)
document pdf (dossier TD_nvu)
Cellule 3 : insérer un lien vers le Conseil Général 13 (http://www.cg13.fr/modes-devie/environnement/plan-departemental-dechets-selectif.html)
Attention :
Les liens « Animation »,
« Véolia » et « Conseil
général
13 »
doivent
s’ouvrir
dans
une
nouvelle fenêtre,
Le lien « document pdf »
dans la même page,
Peu importe pour le lien
« audio ».
TD Nvu pour le C2I - Page 7 sur 11
Les liens internes : 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é).
3.2 - Travailler la page liée (vidéo)
a - Ouvrir dans Nvu le fichier « video_recyclage.html» du dossier décompressé
TD_nvu.
Cette page contient tout simplement
l’affichage d’une vidéo et de son bandeau de
commande.
Remarque sur la vidéo : la vidéo est au format Flash (flv)
encapsulée
dans
une
page
html
(répertoire :
video_recyclage).
En accédant à la source de la page video_recyclage.html
sous Nvu vous pouvez constater la présence d’un
programme JavaScript qui conditionne l’affichage de la vidéo.
Le travail sur la vidéo que se soit la prise de vue, le montage
ou l’affichage en ligne sort du cadre de ce TD
Comme vu précédemment :
b – Ajouter un titre à la page
c – Ajouter un lien de retour vers la page
d’accueil
4 – Tester vos pages
Utiliser le navigateur Mozilla Firefox pour
tester en mode local les deux pages
réalisées.
TD Nvu pour le C2I - Page 8 sur 11
Annexe
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.
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) 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.
Nvu est un logiciel libre WYSIWYG de création de pages web basé sur le Composer de Mozilla
développé par Daniel Glazman, ancien employé de Netscape.
Il a été
Nvu se veut simple et utilisable par un débutant sans connaissance des langages HTML ou CSS. Le code HTML
produit par Nvu se veut propre et respectueux des recommandations du W3C.
Remarque : Mozilla Composer est l'
éditeur HTML graphique, libre et gratuit de Mozilla. Aujourd'
hui, la suite Mozilla
est séparé en trois parties indépendantes: Firefox pour le navigateur Web, Thunderbird pour le client de
messagerie et Composer pour l'
éditeur HTML.
Mozilla Composer n'
est pas à confondre avec le logiciel open source KompoZer qui est un projet issu de NVU
Le site 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.
Le site 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.
TD Nvu pour le C2I - Page 9 sur 11
Webographie (avec la participation de Martine Langlois) :
Les sites officiels : http://www.nvu.com/ et http://www.kompozer.net/
La documentation Nvu sur le net est très abondante.
Les trois premières sélections couvrent de manière très précise la maîtrise de Nvu.
La première dans le cadre précis de ce TD, les deux autres pour ceux qui veulent
asseoir leurs connaissances et aller plus loin dans la maîtrise (des CSS notamment).
Les autres sélections ne sont données qu’a titre indicatif. Vous pouvez cependant
remarquer un site intéressant qui propose une suite de TD en ligne (université de
Brest) et les utiliser selon vos besoins.
1- http://promethee.aquitaine.iufm.fr/formiufm/IMG/pdf/Tutoriel_NVU_0_6.pdf
Manuel de 11 pages au format « .pdf » de Manuel Borrego. Le contenu correspond
tout particulièrement au contenu de ce TD.
2 - http://www.framasoft.net/article2656.html
Sur le site Framasoft, des liens vers une documentation très complète sur Nvu :
Nvu Standard qui se consacre à l’interface standard sans extension (pdf ou
OOo, 106 pages).
Nvu Modulaire qui présente des modules ou extensions de Nvu. (pdf ou OOo,
54 pages)
Foire Aux Questions Nvu (pdf ou OOo, 55 pages)
3 - http://www.gtalbot.org/NvuSection/GuideUtilisateurNvu/GuideNvuSection1.html
Guide d’utilisation en ligne très complet, rubriques bien détaillées et mise à jour
récente.
TD Nvu pour le C2I - Page 10 sur 11
http://infolettres.univ-brest.fr/~cardot/m2lea/
Une suite de TD proposée par l’université de Brest (Master LEA)
http://aboudet.chez-alice.fr/EditionWeb/EditionWeb-initiation01.html
Un cours en 10 leçons, très fourni d’Alain Boudet. Les leçons 1, 8 et 9 correspondent
à ce TD. Les CSS sont aussi traités.
http://1site1stit.free.fr/
32 leçons sur Nvu ... on peut y piocher à la demande car chaque leçon traite d’un
sujet précis. Par exemple L16 : insérer une vidéo.
http://doc.mabulle.com/e/et/et-si.mabulle.com/tuto-nvu.pdf
7 pages, c’est très court mais traite du format du texte et de l’insertion d’image
comme ce TD.
http://info.sio2.be/kpz/1/1.php
Une formation sur Kompozer, éditeur html issu de nvu et qui tend à le remplacer.
Jean-Philippe Verdu, mars 2008
TD Nvu pour le C2I - Page 11 sur 11