Portfolio
PREMIERS PAS SUR LE WEB
Stéphanie Dansereau, novembre 2000

SOMMAIRE

1. Créer     2. Illustrer     3. Publier     4. Référencer

1. CRÉER
Composer ses premières pages web pour créer son portfolio en ligne.
- STRUCTURER son portfolio à partir d'une représentation graphique en étoile, en cadran, en cercle, en arbre, etc.
Voici l'architecture de base d'un portfolio à double entrée (deux volets).
 

        - IDENTIFIER toutes vos pages-écrans.
Symbolisez-les dans des cadres distincts et tracez tous les liens qui les relieront.
N'oubliez pas de représenter également les liens qui pointeront vers des ressources extérieures à votre portfolio.
Rappel
Concevez votre portfolio à partir de sa page d'entrée/accueil. Dans les faits, elle représente l'index principal de votre espace (site) de travail, avec ses différentes pages ou rubriques.
Un bouton de navigation  (pictogramme)  telle une flèche  devra toujours proposer un lien vers le haut de la page ou vers votre page d'accueil comme c'est le cas ici sur la page en haut  qui renvoie à la page d'accueil du dossier Portfolio à double entrée.
 
    - Le HTML est un langage de MISE EN FORME du texte .
    Il  vous aide aussi à insérer divers objets (images, liens...) à l'intérieur de ce même texte.
    Il existe des logiciels de création/édition de pages Web tels que le programme Composer, intégré
    au fureteur Netscape Communicator(très simple) ou Dreamweaver de Macromedia, plus complexe mais
    performant.

    Allez consulter la liste des Éditeurs HTML et un tableau comparatif des différents programmes offerts sur le
    marché vous permettra d'en connaître les forces et les faiblesses. Le seul hic du site , c'est sa mise à jour qui
    date de 1998 !
 
 
 

Qu'est ce que le HTML ?
Découvrir le HTML...
Le logiciel de traitement de texte WORD de microsoft (Office 98 pour Mac ou Office 2000 pour Windows) convertit vos textes en langage html (extension.html)  pour en faire des pages Web.
Mais attention aux BALISES qui sont de deux ordres car ce sont ELLES qui définissent une mise en forme ou un objet dans vos pages.

Ces balises se reconnaissent facilement, elles sont toujours entourées par les signes < et >.

Par exemple, pour qu'un texte soit en italique, on utilise la balise <I> .
Ce texte est en <I> Italique</I> :  ce texte est en Italique.

Pour insérer une image,on utilise la balise <IMG>

 <img="desert.gif"> :

DONC...
• Les balisesde mise en forme (gras, italique, souligné...) entourent le texte concerné par la mise en forme. Il y a donc une balise d'ouverture et une balise de fermeture, repérable par le signe /. C'est  le cas de notre balise italique : <I>Italique</I>.

• Les balises ponctuelles servent à insérer un objet (image, animation, ligne de séparation) à l'intérieur d'une page. Elles sont simplement écrites entre deux signes < >. C'est le cas de notre balise image=symbole du desert : <img="desert.gif">

Pour en savoir davantage, allez  sur le site de L'ABC du multimédia de formation  à : HTML

Structure d'accueil d'une page Web:
l'en tête avecle titre et le corps de la page

Vos pages Web doivent avoir une structure bien précises pour être comprises par tous les navigateurs.
Voici la STRUCTURE DE BASE d'une page HTML.

Elle doit se retrouver pour chaque page de votre site et ce sont les logiciels de création de pages Web qui  l'assume automatiquement.

 1) <HTML> et </HTML> indiquent au navigateur qu'on se trouve bien dans un document utilisant le langage HTML.
 <HEAD> et </HEAD> délimitent l'EN-TÊTE de la page. Cet en-tête contient des informations servant, entre autres, à se faire connaître sur les moteurs de recherche et annuaires. Le <TITLE>  indique leTITRE de la page que vous créez. Ce titre s'affiche dans la barre de titre de votre navigateur et non dans le corps de la page. (n'est pas visible par l'internaute). Cette balise </TITLE> la fin du titre.

2) Le <BODY> délimite le CORPS de la page, c'est-à-dire tout ce qui apparaîtra dans la fenêtre du navigateur.  C'est ici que vous allez placer vos images, animations et, bien sûr, les textes. Cette balise et </BODY> indique la fin du corps de la page.

* NE PAS OUBLIER d'indiquer LA MISE À JOUR de vos pages, en bas de page .

Premiers liens 
Si vos pages sont définies, il reste à les relier entre elles. Pour cela, on utilise des... LIENS !

Tout comme pour les mises en forme de texte, les liens sont définis par une BALISE : celle-ci est toutefois légèrement plus complexe que les balises précédentes.

Mais les programmes  pour créer/éditer des pages Web vous facilitent la vie grâce aux fonctions qui établissent des liens selon différents modes : 
• lien hypertexte avec adresse URL de la page à lier (link) ; 
• lien dossier image (jpg ou gif)  ;
• lien porte d'entrée ou paragraphe à cibler ( ancre=target) ; c'est le cas du sommaire dont les  titres sont liées à ceux du corps du texte.

Dans Composerde Netscape, ces  trois types de liens se retrouvent. Procédure pour créer-monter des pages web à partir de Composer.

2. ILLUSTRER

       Trouver une métaphore pour symboliser votre projet/ portfolio

Votre portfolio  commence à prendre forme grâce au HTML. Mais il lui manque encore une chose essentielle :
des images. En effet, difficile d'imaginer un site  sans aucune illustration !

Les logiciels de navigation ne peuvent afficher que deux  types d'images :

Les GIF, en général utilisés pour les dessins, cliparts et textes graphiques.
Ces fichiers ne possèdent que 256 couleurs et sont enregistrés avec l'extension .gif. (216 couleurs pour le web)

Les JPG (JPEG), plus souvent utilisés pour les photos et les dessins hauts en couleurs. Ils peuvent contenir des milliers de couleurs et sont enregistrés avec l'extension .jpg.

Ces deux types de fichiers s'insèrent de manière identique à l'intérieur de vos pages.
Pour insérer une image dans une page Web, on utilise la balise <img> .

Mais bien des programmes de création de pages web permettent d'intégrer des images sans connaître ce type de codage.
ll suffit de connaître l'adresse de l'image à insérer si elle se trouve sur le Web , sinon il faut la numériser et la ranger
dans un dossier avant de la publier.

Reste à trouver les photos et les icônes qui colleront au thème ou couleurs de votre site. Pour  en trouver, bien des adresses existent, entre autres celles sur le site d'IKON , le site Image Paradise ou celui de la banque d'images de MultiMania.


3. PUBLIER

Envoyer vos pages sur un serveur, un espace d'hébergement
Pour transférer vos pages sur un serveur , tel celui de la CSPI , il faut un logiciel de transport FTP,
soit:   - WS-FTP PRO pour PC
           - Fetch ou Transmit pour Mac.

Voici les informations que ce logiciel FTP va vous demander :
Profil name: DESS
Host name : ftp.cspi.qc.ca
User ID: votre pseudonyme
Password: pseudonyme2001

Les autres informations demandées ne sont pas nécessaires.

Donnez un  nom à l'extension de la page d'entrée du dossier portfolio dans lequel se retrouvera tous vos fichiers intégrés (textes, images ...) : et nommez votre page racine ou accueil : index.html

MAIS ATTENTION:
Pas d'espaces, de caractères accentués ou spéciaux pour nommer vos pages
(é,è,ô,*,&,?,%,",+, etc.)

Et Publier...
Voici l'adresse de votre serveur pour lire éentuellement vos pages sur le web: http://www.cspi.qc.ca/DESS/pseudonyme/portfolio/index.html
 

Dernière recommandation
Respectez obligatoirement la «casse» des caractères (minuscules ou majuscules) lorsque vous créez un lien vers un document. Le fichier index.html n'est pas le même que celui intitulé INDEX.HTML
Il en va de même pour les noms d'image (photo.gif et photo.GIF ne représentent pas le même fichier).
4. RÉFÉRENCER
Pour faire connaître éventuellement vos productions  sur le web.
(volet 2 du portfolio)

Excite
www.excite.fr/info/add_url
moteur de recherche et annuaire
portée mondiale

Lycos
www.lycos.fr/service/addasite.html
moteur de recherche et annuaire
portée mondiale

Nomade
www.nomade.fr
Annuaire
Portée mondiale

Snap
www.snap.com
Annuaire
Portée: mondiale
Ouvrez la page de la rubrique dans laquelle vous voulez référencer votre site (comme pour une recherche), cliquez sur le lien «Submit your site to Snap OR  to this category».

Voilà
www.voila.fr/Submit
Annuaire et moteur de recherche
Portée mondiale

Yahoo!
www.yahoo.fr
Annuaire
Portée: France
Ouvrez la page de la rubrique dans laquelle vous voulez référencer votre site (comme pour une recherche), cliquez sur le lien «Proposer un site».