pluriTAL – BLOG Master pluriTAL [ParisX, ParisIII, INALCO]

AB-CJ-PED14-13: La fin approche.

Posted in Projet 2006-2007 by pluritaluser on 7 décembre 2006

Bonjour à tous, la pression monte, le stress, le rush, l’adrénaline que c’est bon !!

Nous Arianna et Christian avons mis en place quelque chose de plutôt bien du point de vue de la présentation.

Pour notre site/rapport de projet nous avons utilisé des CSS, ce qui nous a permis de séparer la logique du document de sa présentation.

En effet nous avons nos pages html qui incluent un fichier .css

Pour dire vrai ce fichier .css on l’a pris sur un site qui offrait un tutorial :

<a href= »http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css »&gt; http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css</a&gt;

Nous avons modifier un peu la mise en page en créant nos propres images, en changeant les couleurs, …

Passons sur les détails de mise en pages mais ce que cela nous a permis c’est de ne n’avor à s’occuoer que de la structure de notre document.

C’est à dire écrire un plan avec des menus sous formes de listes et des titres reflétant ce menu <h1> <h2> <h3>, nos avons exclu tout tableau de notre mis en page hormis un seul tableau dont je vous laisse deviner lequel.

La feuille de style est appelé dans le fichier html de la manière suivante :

<head>
   <title>Projet Encadré : Barrage réalisé par CJ & AB</title>
   <meta name="author" content="Christian Jean et Arianna Bisazza" />
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <meta http-equiv="Content-Language" content="fr" />
   <meta name="keywords" lang="fr" content="tal taln barrage INALCO ILPGA" />
   <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

c’est la balise link qui indique la feuille de style à insérer.

Votre formatage est donc dans le fichier styles.css

C’est vraiment pratique car vous pouver répartir le travail avec votre binôme si vous penser le document logiquement ensemble préalablement. Chacun écrit sa page web, remplissant les parties avec le niveau titre déterminé à l’avance, la mise en forme : couleur, font, … sera géré automatiquement par la css.

Par exemple il suffira de metrte vos extraits de code à l’intérieur de la balise <pre> </pre>

Et si jamais à l’intérieur de votre code vous voulez colorer vos commentaires il suffira d’ajouter les balises <span> </span>

<pre>

<span>#Ceci est un commentaire </span>

echo « toto »;

</pre>

Dans la css il y aura des choses comme cela :

pre
{
overflow: auto ;

background: #c3c3e0 ;
border: 2px solid #1f1ff6 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}

pre span
{
color: #560 ;
}
/* Couleur de texte des éléments compris dans des span eux mêmes compris dans un
pre */

Si vous voulez voir un site étonnat avec les css il faut visiter la référence qui est

http://www.csszengarden.com/ c’est la même page html, mais on peut choisir d’appliquer des css différentes.

Pour ceux qui auraient l’idée d’utiliser les cadres (frame) voici un petit article :

http://www.openweb.eu.org/articles/finir_cadres/

C’est une liste des inconvénients des cadres.

Quelques petits autres trucs :

– Avez vous pensez à faire des liens sur les pages des bloggueurs ? Il s’intègre comme n’importe quel autre lien.

– Et aussi il y a des pages de manuel de commande en ligne et en français. Donc il est tout à fait possible de faire un lien de wget par ex vers sa page de manuel en ligne. Il existe aussi l’outil man2html qui permet de convertir une page de manuel en html que vous pourrez mettre dans l’arborescence de votre site.

Voilà c’était juste quelques idées qui, nous pensons peuvent améliorer le site rapport. Nous avions peu d’expérience dans le web, mais en réutilisant des choses bien faîtes on arrive à des résultats agréables.

CJ et AB.

Publicités

Une Réponse

Subscribe to comments with RSS.

  1. pluritaluser said, on 8 décembre 2006 at 12:11

    Après réflexion, je pense que l’idée de links vers un manuel est tres bonne. Dans un soucis de clarté, il me semble qu’il n’est pas nécessaire d’expliquer tout dans le détail dans nos rapports. Par exemple, je ne vais pas m’amuser à expliquer chaque fonctions de perl, mais plutot rester dans la généralité pour éviter un déballage incompréhensible et indigeste.
    Donc placer un lien vers un content plus détaillé sur certains sujets restent pour moi la meilleur manière. Cela permet à ceux que ca interesse d’approfondir leur connaissance, et ca nous permet à nous, les redacteurs, de ne pas omettre des choses.

    J’ai également abandonné l’idée d’inclure le plan dans chacune de mes parties à la wikipédia. C’est facile à faire certes, et cela peut aider le lecteur, mais je trouve que c’est un ajout superflu si on considère le problème irrésolvable de la navigation lorsqu’on scroll down de plus de deux fois la résolutions verticales.
    Apres avoir méditer dessus, je vais prendre partie pour la clarté et la sobriété, plutot qu’a une efficacité contestable. Donc pas d’images dans le layout, juste de quoi marquer des titres, une police pour le codes, quelques styles différents et ca s’arretera la pour moi. Par contre je suis content du résultat de mon layout général a dominance noire. J’ai bcp bossé avec les couleurs claires comme le blanc/bleu avant, mais le noir a aussi ses qualité esthétiques je trouve.

    Joli boulot en tout cas, ca m’a motivé et guéri de ma paresse:) bonne continuation


Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :