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

ME@HOME rapport

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

EZZAT Mani

iop, j’étais parti sur un layout de site très graphique, avec photoshop et consort, et j’ai finalement abandonné. Ce n’est pas forcément plus clair, surtout pour un rapport, et pas très maléable non plus. Cela reste plus technique certes, mais pour un résultat mitigé. Par expérience, quand on fait un site, je sais que trop en faire ne mene a rien au final.

J’ai adopté le format des casacading sheet style comme Ivan et Christian-Arianna, et décidé de ne mettre aucune image dans le layout, d’avoir un outil que je pourrai utiliser plus tard (pour dautres rapports par exemple), et donc de finalement rester le plus sobre possible, en gardant une certaine esthétique, mais de maniere a ce que le tout reste soit succint et efficace.

http://sandalettes.free.fr/DOCUMENTATION/Index.html

Voici ce que ca donne (jai pas tout rempli évidemment)

Vous pouvez tout pompé si ca vous chante, j’ai moi-meme pompé a droite et a gauche pour les styles (je ne saurais vous donner l’adresse des sources, j’ai juste navigué aléatoirement et pris des élement provenant de plusieurs sites). La seule partie technique ici est le descriptif qui apparait sur un rollover de la souris sur le menu a gauche. Il est possible de réaliser en html pur, avec un petit truc dans le CSS (a priori, on pourrait croire que c’est réalisable uniquement avec du javascript, mais non). Autre remarque, jme fais un peu plaisir dans la rédaction là, mais bon, c’est peut etre plus amusant à lire, et ca se cantonnera surment a l’intro, le reste étant purement descriptif finalement

leave a comment

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.

1 comment