Outils pour utilisateurs

Outils du site


siteooo

Faire un site simple

Le but est d'expérimenter la publication sur le WEB.

Le sujet d'application est la mise en place de page sur votre espace personnel.

  • L'organiser
  • Réalisez des pages « d'accueil » destinées à guider un visiteur
  • Mettre en place des liens pour naviguer entre les pages

Objectifs

Ce qui sera mis en place ne sera en aucun cas définitif. Le but est de découvrir les concepts :

  • URL
  • Liens hypertextes
  • Arborescences

Pour ce faire, on se limitera à des pages simplistes dont le contenu pourra être remis en forme ultérieurement :

  • Le contenu des pages sera rédigé avec OpenOffice Writer en mode WEB. (Fichier / Nouveau / Document HTML)
  • On se limitera à l'utilisation des « Styles HTML »
  • Toute mise en forme sera faite par le biais des Styles.
  • On restera minimaliste (ex : ne pas fixer la police)
  • Si vous maîtrisez déjà le sujet, demander à l'enseignant, ce qui peut-être fait pour amélioré la présentation. (utilisation d'un autre logiciel et des styles CSS)

Pour conclure, ne vous inquiétez pas de l'aspect pauvre des pages, ce n'est pas l'objectif. Contentez-vous de mettre en place un canevas clair pour vos futurs travaux.

Travail

Si vous êtes deux par poste, placez les pages réalisées sur le site de chacun.

Éviter de de vous mettre avec quelqu'un de niveau différent de vous, le but est de maîtriser, pas de laisser un autre faire.

Répondre aux questions dans un document que vous joindrez au mail en fin de séance.

URL : Uniform Resource Locator

URL absolue

Donnez et expliquez l'URL permettant d'aller à votre site ?
https://src-projet.pu-pm.univ-fcomte.fr/src200?/votre_login
Rq: on est dans quelle année 200? et quel est votre_nom ?
Vous avez besoin des renseignements suivants :

  • Votre login (université) : ?????
  • Votre mot de passe (université) : ????

Dans une URL, quels sont les caractères admis ?

Placer des fichiers sur votre site

Utiliser un client FTP : FileZilla
Vous avez besoin des renseignements suivants :

  • Adresse du site : src-projet.pu-pm.univ-fcomte.fr
  • Votre login (src) : ?????
  • Votre mot de passe (src) : ????

Son usage est identique à celui d'un navigateur de fichier

Sur votre compte FTP, vous disposez d'un dossier web. Tout ce qui est placé dans ce dossier est visible sur le WEB (http) à l'adresse de votre site (https://src-projet.pu-pm.univ-fcomte.fr/src200?/votre_login).

Si vous placez des fichiers ou dossier à la racine de votre compte FTP (c-a-d pas dans le dossier 'web'), ils ne sont visibles qu’en utilisant un client FTP et votre login/pass. C'est un moyen pratique pour transférer des fichiers depuis chez vous.

Faire un sous-dossier (dans le dossier web de votre comte FTP), y placer un fichier nommé « index.html » Expliquez ce qui se passe ?

Chemin relatif

Si l'on fait un lien sans spécifier le protocole, le serveur, le chemin complet, le navigateur utilise le chemin de la page d'origine du lien (cad : sans le nom de fichier) pour déterminer le chemin de la cible du lien.

Pour comprendre cela, faites les manipulations suivantes et expliquez ce qu’elles font :

  • Menu démarrer / Executer / « cmd » [Enter]
  • cd z:
  • mkdir test
  • cd test
  • mkdir dir1
  • mkdir dir2
  • cd dir1
  • mkdir dir1_1
  • cd dir1_1
  • cd ..
  • cd ..
  • cd dir1\dir1_1
  • cd ..\..
  • cd dir1
  • cd ..\dir2
  • cd ..\dir1\dir1_1

Rq : le séparateur de chemin de fichier et « \ » sous Windows, alors que c'est « / » sous les autres systèmes (sur le WEB).

Le but de faire des chemins relatifs est qu'ils sont toujours valides si l'on déplace les pages ensemble. Vous pouvez par exemple tester les liens sur votre machine avant de publier les pages.

Arborescences

Introduction

De la même façon que vous organiser vos fichiers en créant des répertoires, vous devez organiser les pages d'un site en créant des sous-répertoires pour ses différentes parties. Exemple :

Informatique
  |-index.html
  |-definition.html
  |-cours
  | |-index.html
  | |-cours1.html
  |  \cours2.html
  |-TP
  | |-index.html
  | |-TP1.html
  |  \TP2.html
   \images
    |-toto.gif
     \logo.png

Exercices : écrire les chemins relatifs permettant de naviguer entre les chemins suivants

Exemple :

de  :   /Informatique/index.html
à   :   /Informatique/definition.html
chemin  :             definition.html

A votre tour :

de  :   /Informatique/index.html
à   :   /Informatique/cours/index.html
chemin  :

de  :   /Informatique/cours/index.html
à   :   /Informatique/cours/cours1.html
chemin  :   

de  :   /Informatique/cours/index.html
à   :   /Informatique/index.html
chemin  :   

de  :   /Informatique/cours/cours1.html
à   :   /Informatique/TP/TP1.hhtml
chemin  :

de  :   /Informatique/index.html
à   :   /Informatique/images/toto.gif
chemin  :

de  :   /Informatique/TP/TP1.hhtml
à   :   /Informatique/images/logo.png
chemin  :   

Savoir faire des liens c'est bien, mais reste à déterminer ce à quoi ils serviront. Pour cela c'est une bonne idée de prévoir les liens qui devront figurer sur chacune des pages.

Rq: Rien compris !!!

Exemple :

Application

Réfléchissez aux différents enseignements et activités, puis proposez une arborescence. Faire le travail au préalable sur papier, faire valider, puis le mettre au propre :

Fichiers Liens Chemins

Pages HTML

Utiliser OpenOffice Writer en mode WEB. (Fichier / Nouveau / Document HTML)

Contentez-vous de pages simples.

  • Le graphisme sera vu en temps et en heures.
  • L'usage des tableaux et autres « cadres » et proscrit
  • Le texte doit être structuré avec des titres hiérarchiques.
  • Se limiter aux « Styles HTML ».
  • Utiliser uniquement les styles pour la mise en forme.
  • Une suite de liens (eg. Menu), sera formaté comme une liste.

Si vous voulez aller plus loin, demandez à l'enseignant, comment améliorer la présentation. (utilisation d'un autre logiciel et des styles CSS)

Travail à rendre

Envoyer par mail à [email protected]

En pièces jointes : Le document réponse.

Dans le corps du message : lien vers votre page d'accueil (les deux, si TP fait à deux)

Rédiger l'objet du mail de la façon suivante : [TP bureautique 2] groupe : Nom1 prénom1, Nom2 prénom2

siteooo.txt · Dernière modification: 2008/11/17 23:00 (modification externe)