\~~~ Bienvenue ~~~/

Enseignements / C2I / TP2

TP2 : Outils collaboratifs (1/2)

I) Système de messagerie

Lorsque vous envoyez un mail, il n'arrive pas directement sur l'ordinateur de votre destinataire ! En réalité vous envoyer votre mail sur un serveur. Lorsque votre destinataire se connecte à sa boite mail, un protocole de récupération des emails depuis le serveur est lancé. Les différents protocoles sont les suivants :
SMTP : Simple Mail Transfer Protocol
C'est le protocole qui permet l'acheminement du mail expédié vers le serveur.
POP3 : Post Office Protocol (version 3)
C'est un protocole qui permet la récupération des emails depuis le serveur. Les emails sont téléchargés sur votre ordinateur, et vous gérez donc tout en local.
Avantage : Simple et efficace.
Inconvénient : L'utilisateur doit gérer lui-même la sauvegarde de ses mails.
IMAP : Internet Message Access Protocol
C'est un autre protocole de récupération des emails. Contrairement à POP3, l'ensemble de vos mails reste sur le serveur. L'ensemble de la gestion des mails est entièrement déportée.
Avantages : - Gestion simplifiée en cas de connexion à votre boîte mail depuis différents ordinateurs (utilisateur mobile par exemple)
- Plus facile de changer de client de messagerie.
Inconvénients : - Il faut gérer son espace disque sur le serveur.
- Plus lent que POP3 puisque chaque opération (recherche dans les mails ou gestion de gros dossiers par exemple) requiert une interraction avec le serveur.
Maintenant que nous avons vu les différents protocoles, voyons les 2 manières que nous avons de consulter nos mails :
Webmail : (Ex : Horde, Zimbra, ...)
C'est une application web (une interface entre votre navigateur web et le serveur de messagerie) qui permet la gestion et la consulation des courriels.
Avantages : - Rien à installer et aucune configuration à faire.
- Déport de la responsabilité de la sécurité de l'installation vers le serveur.
- Permet de retrouver sa boîte mail sur tout ordinateur connecté à internet (permet la mobilité de l'utilisateur).
Inconvénients : - Il faut gérer son espace disque sur le serveur.
- On ne peut pas consulter ses mails (déja reçus) sans connexion internet.
- Plus de risque de piratage ou de perte de confidentialité qu'avec un client de messagerie.
Client de messagerie : (Ex : Outlook Express, Thunderbird, Icedove, ...)
C'est un logiciel qui lui aussi permet la gestion et la consulation des courriels.
Avantages : - Consultation de votre boîte mail possible sans connexion internet.
- Permet de gérer plusieurs boîte mail en même temps.
- Plus rapide qu'un webmail lors de la manipulation de message (tri, recherche, etc ...), plus ergonomique.
- Pas de publicité.
Inconvénients : - Demande une installation (logiciel) et une configuration.
- Ne permet pas la mobilité de l'utilisateur.

II) Les moteurs de recherche

Chaque moteur de recherche dispose de robots (Googlebot pour Google) qui 24H/24H explorent le web en visitant tous les liens possibles et inimaginables de la toile. Leur but : indexer le plus de page internet possible. Cependant il y a des pages qui ne sont pas indexable; on appelle cela le web caché. Une page peut ne pas être indexable pour plusieurs raisons : page sans liens entrant (non liée), page à accès limité, contenu dynamique, etc ...

Les robots ne s'arrêtent pas là : en plus d'indexer, il vont aussi juger la valeur de la page. Ils vont établir un classement entre les pages : le PageRank. Le PageRank dépend notamment du trafic que génère la page, de sa popularité, du nombre de lien entrant et sortant, du PageRank des pages surlesquels il y a les liens entrants, du nom de domaine, de l'hébergement de la page, etc ...

Remarque : Ne pas confondre les moteurs de recherche et les métamoteurs. Un métamoteur ne fait aucune indexation. Lors d'une recherche, il se contente d'interroger plusieurs moteurs de recherche et il restitue une synthèse de l'ensemble des résultats fournis par les moteurs. Sans moteurs donc, pas de métamoteur !

III) Initiation au langage HTML

Le langage HTML est un des langages qui permet de créer une page web. C'est un langage de balisage. Tout page web HTML doit contenir au moins ceci :

Code sourceRésultat (cliquer pour agrandir)
<html>
    <head>
    </head>
    <body>
    	Ceci est ma page
    </body>
</html>
Guillaume Lefebvre - HTML_Test1
Les balises vont en général par 2 : une balise ouvrante (ex : <p>) et une balise fermante (ex : </p>). L'exemple ci-dessus nous montre donc qu'il y a 3 balises indispensables pour commencer :
  • <html> </html> : Balise entre lesquelles tout votre code est englobé qui stipule au navigateur web que le code est en HTML.
  • <head> </head> : Balise qui définie l'entête d'un fichier HTML. Dans l'exemple ci-dessus, l'entête ne contient rien mais on va voir ce que l'on peut y mettre juste après.
  • <body> </body> : Balise qui définie le corps de la page web.
Dans cet exemple, j'ai tapé du texte tout simple, mais il est bien évidemment possible de le mettre en forme. Pour cela voici quelques balises usuelles (pour alléger les notations je ne précise plus quelle est la balise de fin qui, vous l'aurez compris, est identique à la balise de début avec un / en plus) :
  • <p> : Défini un paragraphe.
  • <b> : Défini un texte en gras.
  • <i> : Met en italique.
  • <a> : Défini un lien.
  • <h1>, <h2>, ..., <h6> : Défini un titre plus ou moins important
  • <ul> : Défini une liste.
  • <li> : Défini un item dans une liste.
  • <title> : Défini pour les navigateur web un titre à la page web (titre qui apparaît généralement dans la barre de menu du navigateur et/ou sur l'onglet). Cette balise doit être mise dans l'entête.
La liste n'est bien sûr pas exhaustive.
Certaines balises admettent également des options. Les options doivent être mises dans la balise ouvrante de la manière suivante :
<ma_balise mes_options> bla </ma_balise>
Je vous met tout ceci dans un exemple plus complet :
<html>
<head>
	<title>Ma page test</title>
</head>

<body>
	<h1> Ceci est un test </h1>

	<h4>Intro</h4>
	<p>Ceci est ma page, sur laquelle
	j'essaie les balises html.</p>

	<h4> Partie 1 : Essais </h4>

	<p>Dans ce premier paragraphe, 
	j'essaie par exemple les listes :
	<ul>
		<li> En 1 </li>
		<li> En 2 </li>
		<li> Etc ... </li>
	</ul>
	</p>

	<p>Dans ce second paragraphe, j'essaie un  <a href="www.google.fr">lien</a> 
	vers google par exemple. </p>

	<p style="color: green; margin-left: 30px;">
	Ici je met de la couleur en ajoutant une option au paragraphe et je met une marge 
	(de 30 pixels) sur la gauche. </p>

	<p>Dans cet-avant dernier <i>paragraphe</i>, je m'amuse avec la 
	<b>mise en forme</b> et j'ajoute en option un peu de couleur. </p>

	<p style="color: purple">
	<i>Enfin</i>, pour finir, on peut tout <b>mixer</b>, avec un 
	<a href="www.google.fr">lien</a> aussi par exemple. </p>
	
</body>
</html>
Guillaume Lefebvre - HTML_Test1 Voilà, j'en ai terminé pour cette petite initiation au HTML. Je vous invite vivement à manipuler cet exemple ainsi que l'exemple vu en TP pour vous familiariser avec ce langage.

Les notions à connaître et les savoir-faire à maîtriser pour le TP2

  • Protocole d'envoi et réception de mail : SMTP/POP3/IMAP
  • Client de messagerie / Webmail
  • Etre capable de paramétrer un client de messagerie
  • Notion de PageRank et principe de fonctionnement des moteurs de recherches - Notion de web caché
  • Etre capable de faire une recherche avancée
  • Savoir créer une page html très simple
  • Etre capable de mettre une signature automatiquement à la fin de ses emails
  • Etre capable d'administrer un doodle
  • Savoir utiliser framapad
 Dernière mise à jour : Le
  Page personnelle de Guillaume LEFEBVRE