Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes et externes.

Transcription

1 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 : 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

2 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 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 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 « TD Nvu pour le C2I - Page 2 sur 11

3 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 « 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 ( ) TD Nvu pour le C2I - Page 3 sur 11

4 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 Liens Nvu Page liée Zip Image, vidéo, son Liens 3 Travail demandé 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

5 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

6 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

7 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 ( document pdf (dossier TD_nvu) Cellule 3 : insérer un lien vers le Conseil Général 13 ( 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

8 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é) 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

9 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 Il a été développé par Daniel Glazman, ancien employé de Netscape. 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

10 Webographie (avec la participation de Martine Langlois) : Les sites officiels : et 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 Manuel de 11 pages au format «.pdf» de Manuel Borrego. Le contenu correspond tout particulièrement au contenu de ce TD 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) 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

11 Une suite de TD proposée par l université de Brest (Master LEA) 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 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. 7 pages, c est très court mais traite du format du texte et de l insertion d image comme ce TD. 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