Cliquez-ici pour comprendre comment ce site a été

Garet Anita
06/05/2014
L3 EM STAPS
Site de Calais
Informatique
Sous la direction de Monsieur Jean-Marc Pilliere
Année universitaire 2013-2014
Sommaire
1. Installation de Kompozer et familiarisation avec le logiciel
2. Création des différentes pages du site
3. Faire des liens sur Kompozer
4. Intégrer une vidéo sur Kompozer
5. Intégrer un questionnaire et une carte sur Kompozer
6. Pied de page de kompozer
7. Insertion d'une image mapping
8. Mettre en ligne le site avec fillezila
Annexes
Introduction
L'informatique est le domaine d'activité scientifique, technique et industriel concernant
le traitement automatique de l'information via l’exécution de programmes informatiques par
des machines : des systèmes embarqués, des ordinateurs, des robots, des automates, etc.
Ces champs d'application peuvent être séparés en deux branches, l'une, de nature théorique,
qui concerne la définition de concepts et modèles, et l'autre, de nature pratique, qui s'intéresse
aux techniques concrètes d'implantation et de mise en œuvre sur le terrain. Certains domaines
de l'informatique peuvent être très abstraits.
Cependant, de nos jours, même le néophyte peut créer son site personnel.
Effectivement, grâce à Kompozer, nous avons créer notre propre site Internet sans pour autant
être un professionnel. Kompozer est un éditeur HTML WYSIWYG basé sur Nvu, c'est-à-dire
un logiciel permettant de créer des pages web (utilisant le code HTML) où nous pouvons
visualiser le résultat final (navigateur). Il a été mis en téléchargement en mars 2007. Il
remplace avantageusement Nvu et apporte de nombreuses améliorations.
1. Installation de Kompozer et familiarisation avec le logiciel
J’ai installé Kompozer grâce à la page indiquée sur Sakkai (Staps L3 site
web>ressources>cours>apprendre à utiliser Kompozer). J’ai ensuite enregistré ce dossier sur
mon bureau puis j’ai ouvert ce logiciel.
J’ai eu du mal à me familiariser avec ce logiciel, j’ai regardé tous les tutoriels sur le
site « Youtube » en français mais malheureusement beaucoup de tutoriels intéressants étaient
en anglais (en annexe, les URL des vidéos consultés sur le site « Youtube »).
2. Création des différentes pages du site sur Kompozer
Pour créer une nouvelle page, j’ai cliqué dans la barre d’outils « ouvrir document dans un
nouvelle onglet ». J’ai pu donc accéder à une première page. J’ai commencé par mettre un
fond d’écran en rapport au site que je voulais créer. J’étais partie pour créer un site sur mon
sport favori (la natation) mais j’ai préféré créer un site pour mieux gérer et faire découvrir le
gîte rural de mes parents (site plus utilitaire).
J’ai donc été créé un fond de page dans « menu, format, couleur et fond de page ,
parcourir ». J’ai alors sélectionné le fond de page (au préalable, je suis allée sur Google pour
trouver un fond pour ma page que j’ai enregistré sur mon bureau). Après le fond de page, j’ai
commencé à construire ma page mais en version papier pour avoir une certaine forme. J’ai
réalisé que je voulais un menu où je puisse accéder à différentes pages (et retrouver mes pages
dans le menu). J’ai regardé un tutoriel sur Youtube qui expliquait parfaitement comment
appliquer cette idée.
3. Faire des liens
Les liens de mon menu ont été relativement assez difficiles pour moi à réaliser (j'ai
crée beaucoup de pages). J'ai sélectionné chaque thème (par exemple, « Accueil », lien vers
présentation, lien vers les photos...) de mon menu et j'ai intégré un lien (« créer un lien,
parcourir et insérer le lien vers l'autre page »). Pour éviter de refaire la même action plusieurs
fois, j'ai enregistré mes liens (à chaque action) puis j'ai remplacé les neufs autres pages par la
page d'accueil où j'avais mis mes liens. Cette action m'a fait gagné du temps, j'ai pu éviter de
refaire la même chose neuf fois. Les liens ont donc bien été enregistrés pour chacune des
neufs pages. J'ai ainsi pu le vérifier dans le navigateur. J'ai après réouvert chacune de mes
pages dans l'ordre en faisant « ouvrir, nouvelle onglet, parcourir ». Dans un tutoriel, je me suis
aperçue que je devais rapidement éditer la liste de mon site (et donc de mes pages) dans le
gestionnaire de site. J'ai donc été dans « éditer la liste de mon site, nouveau dossier » et j'ai
nommé le dossier « gitedefrance ».
Puis j'ai inséré chacune de mes pages dans le gestionnaire de site et j'ai également
actualisé le gestionnaire. J'ai également crée un nouveau dossier pour mettre toutes mes
images dedans. J'ai donc mis sur mon site des photos en faisant « insertion image » ou
directement dans la barre d'outils, puis « parcouri »r, bureau>monpremiersiteweb>images
(j'ai placé mes images au préalable dans le dossier « image », également visible dans le
gestionnaire).
4. Intégrer une vidéo sur Kompozer.
Pour intégrer une vidéo sur ma page « Activités du gîte » j'ai du choisir une vidéo sur
Youtube. Puis je suis allée dans « intégrer » (code HTML toujours). J'ai fait un copier-coller
et j'ai collé dans « source « (et non conception) mon texte <object ….. object>. Cependant je
n'ai pas réussi tout de suite. Je suis allée regarder sur des tutoriels et je suis allée dans le menu
« insertion », code HTML (mon curseur était placé là où je voulais intégrer ma vidéo
Youtube). Dans les activités, j'ai donc réussi à intégrer une vidéo sur Boulogne-sur-mer,
présentant les principaux monuments à visiter.
5. Intégrer un questionnaire, une carte et la météo sur Kompozer
Pour intégrer un questionnaire dans l'onglet « livre d'or » concernant la qualité des
précédentes prestations, je suis allée dans « Google drive ». Je me suis connectée avec mon
compte Google (adresse gmail). J'ai alors moi-même composé mes questions sur la prestation
reçue telles que « êtes vous satisfait de votre séjour ? etc » où les internautes peuvent ajouter
des commentaires. J'ai également crée des questions avec des réponses en échelle de notation
et des questionnaires à choix multiples. « Google » m'a alors donné un code source que j'ai
replacé dans le code source de ma page.
6. Pied de page de kompozer
Je suis allée dans le menu « insertion », autre insertion et créer avec Kompozer. Quand
on fait référencer le site, ils veulent savoir à qui ils ont affaire. Puis je suis allée dans le code
source, j'ai cliqué et j'ai écrit <meta auteur= « anita Garet, créatrice de site avec
Kompozer »>. J'ai également indiqué dans le pied de page le site des Gîtes de France et
l'adresse de mon propre site.
7. Insertion d'une image mapping
J'ai eu ici des difficultés considérables car je n'ai pas réussi à le faire avec Open office
(même en ouvrant après avec le bloc note pour pouvoir voir le code source). J'ai regardé des
tutoriels et j'ai téléchargé un logiciel du nom de Gimp (2,6). Puis j'ai alors ouvert la photo, je
voulais que quand on clique sur un endroit de l'image, on nous envoit sur d'autres photos.
Une fois ma photo ouverte, j'ai été dans « filtre, web, image cliquables web ». J'ai alors
sélectionné le petit rectangle sur le coté gauche, j'ai sélectionné une zone sur la photo et j'ai
effectué un double clic. J'ai pu intégré le lien en faisant un copier-coller de l'URL
correspondant à l'image. J'ai refait cette action quatre fois pour pouvoir mettre mes quatre
liens par rapport à la photo (coordonnées indiquées dans le code source). J'ai alors enregistré
puis réouvert dans un bloc note pour pouvoir voir le code source (je ne me suis rendue compte
qu’après, que je pouvais aller dans propriété de l'image). J'ai alors copier-collé le texte puis je
suis allée sur Kompozer, insertion et code HTML. J'ai intégré le code en remplaçant « alt »
par « title ».
8.
Mettre en ligne le site avec Fillezila
Pour mettre ce site en ligne, il a fallu d'abord trouver un hébergeur. J'ai donc du créer
un compte sur « chez.com » avec une adresse « Gmail ». J'ai alors ouvert une page
personnelle pour y déposer mon site. Sur Fillezila j'ai du rentrer toutes mes données pour
accéder à mon compte (hôte, identifiant, mot de passe, etc).
Puis je suis allée sur Sakkai, Staps Ulco et je me suis connectée grâce à mes identifiants, j'ai
changé le nom de mon site « natationamateur » et je l'ai remplacé par « gitedefrance ».
Annexes
Tutoriels :
•
http://apprendre-kompozer.free-h.net/
•
https://www.youtube.com/watch?v=cUEcru2rYWQ
•
https://www.youtube.com/watch?v=5vvtYqw_I98
•
https://www.youtube.com/watch?v=aSUraq8-wxk
•
https://www.youtube.com/watch?v=nzjQo7K13fc
Forums :
•
http://www.forumdesados.net/mettre-une-video-sur-kompozer-t28331.html
•
http://forums.mozfr.org/viewforum.php?f=20
•
http://forum.macbidouille.com/index.php?showtopic=379085