Capisanomanon

J'avais dans l'intention de ce cours de changer mes habitudes de création, d'approcher des logiciels que je ne connais pas. Je voulais plus précisément travailler autour de la typographie, et de la mise en page.

J'ai alors commencé par manuellement. A partir de poèmes, j'ai chercher une manière de lire différemment, de changer la mise en page, en modifiant le texte avec des espaces, en jouant avec la ponctuation. Je voulais avec cette nouvelle lecture, mettre en avant, modifier la compréhension du texte.

Voilà quelques essais que j'ai pu faire

L'attente est si longue
, le froid raidit
, enlaidit
. Et puis une vague
, de feu
, détend
, touche
, adoucit
. Les membres reprennent leurs fonctions
, les moteurs repartent
, c'est le déclenchement des mecanismes.

L'attente est si longue,      le froid raidit      ,      enlaidit      .      Et puis une vague
      ,      de feu    ,      détend         ,      adoucit
      .      Les membres reprennent leurs fonctions,    les moteurs repartent
      ,      c'est le déclenchement des mecanismes .

L'attente est longue,,.,,,.,.le froid raidit,,.,,,.,.enlaidit,,.,,,.,.et puis une vague,,.,,,.,.de feu,,.,,,.,.détend,,.,,,.,.adoucit,,.,,,.,.Les membres reprennent leurs fonctions,,.,,,.,.les moteurs repartent,,.,,,.,.c'est le déclenchement des macanismes,,.,,,.,.

L'attente est si longue, 
, le froid raidit,
, enlaidit, 
. Et puis une vague, 
, de feu, 
, détend, 
, touche, 
, adoucit.
. Les membres reprennent leurs fonctions,
, les moteurs repartent, 
, c'est le déclenchement des mécanismes.

L'attente         est   si  longue,       le   froid     raidit.       Et  puis    une   vague,      de  feu,    détend,       touche,        adoucit.        Les   membres       reprennent          leurs     fonctions,          les   moteurs       repartent,          c'est     le  déclenchement             des   mécanismes.

Je n'avais alors pas réfléchis à une application possible, je n'arrivas alors pas à faire évoluer cette idée au stade supérieur. Dans une idée similaire je me suis basée sur des livrets de poèmes astrologiques pour répondeur automatique. J'ai alors voulue les rééditer en html to print. N'ayant aucune connaissance en html je voulais approcher de plus près cette manière de créer et c'était un bon moyen de travailler de la mise en page autrement. Au fur et a mesure de l'avancement de mon projet Stephanie me lance l'idée de travailler sous forme de calendrier. Un calendrier par signe astrologique et non par mois avec un poème par jour.

J'ai choisi d'utiliser Brackets, car je pouvais l'utiliser depuis mon mac (la machine victuelle étant beaaaaucoup trop lourde pour mon ordinateur), en plus c'est bien fait, ya des jolies couleurs. Pour commencer, j'ai créé un doc html et j'y ai inséré une commande pour y lier mon doc css, vu que je vais utiliser les deux.

< link href= "css/style.css" rel="stylesheet" media='all'/ >

Dans l'idée d'imprimer ensuite j'ai donné une taille à mon document html. je suis partie sur l'idée d'un immense poster, mais finalement j'ai décidé de faire ça sur un A3 dans l'idée du calendrier. J'ai donc fait une div qui contiendrait touuuut le reste.

< div class = "contener" > pour le html
.contener{ width: 420mm ; } pour le css

(comme cette plateforme m'en veux personnellement, je suis obligée de rentrer les codes via des images, enjoy)

Ensuite j'ai décidé de diviser mon espace de travail en fonction de mes poèmes, j'ai alors créé 31 div plus une div pour une bannière.

< div class = "banniere" > 
.banniere 
 { width: 372mm; 
   height: 83.5mm;
   color: black; }

Je voulais que toutes mes div aient les mêmes dimensions ainsi que la même structure j'ai donc créé une class pour les regrouper

< div class = "page V1" > 
< div class = "page V2" > 
< div class = "page V3" > ...
.page 
 { float:left;
   width: 62mm; 
   height: 92.5mm;
   padding: 0 0 0 1mm; }

J'ai donc décidé d'une démension identique pour chaque div ainsi que d'une marge très légère à gauche

J'ai aussi décidé d'attribuer une couleur différente pour chaque div, de jouer sur le dégradé, l'évolution de la couleur comme l'évolution du temps. Donc j'ai du personnaliser chaque div avec un petit nom V1, V2, V3, ...

.V1
 { background: #009570; }
.V2
 { background: #009070; }
.V4{
 { background: #008570; }

J'ai choisi d'utiliser la balise #RRVVBB, car je trouve qu'elle permet d'être hyper précis et de pouvoir gérer les couleurs hyper bien, c'est plus simple pour essayer le dégradé.

Pour ce qui est du texte, on a essayé en premier lieu de d'utiliser la balise "région" ou quelque chose comme ça, j'ai jamais bien compris. Pour faire couler le texte d'une div a l'autre, finalement ça a plus compliqué les choses pour moi qui suis trèès novice. Alors j'ai laissé tomber et j'ai écrit chaque texte dans la balise qui lui appartient. De plus j'ai utilisé les balises de titre (à la base), que j'ai modifié ensuite.

< div class = "page V1">   
< dl >< dt >< h4 > 
23 août 
< /h4 >< /dt >
< dd >
Mon orée du jour,< br >
vignoble de mes nuits< br >
au baisers de soleil,< br >
tu veilles sur mes heures< br >
chassant brumes soucieuse< br >
toi ma Vierge,< br >
ma fidèle.  
< /dd >< /dl >< /div >

Comme on peut le voir sur les codes suivant j'ai utilisé des balises de mise en page comme < br > pour aller à la ligne, ou encore < dl >< dt >< /dt >< dd >< /dd >< /dt > pour installer une alinéa.

pour ce qui est du texte j'ai téléchargé une typographie sur google font, que j'ai appliqué de manières différentes. Je l'ai téléchargé en plus gras et en normal (je sais pas si ça a de l'importance)

< link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css' >
< link href='https://fonts.googleapis.com/css?family=Open+Sans:;' rel='stylesheet' type='text/css' >

pour ce qui est du css j'ai joué sur du style italic ou normal, puis sur des tailles et des graisses différentes J'ai utilisé les balises des titres pour hiérarchiser les typographies et ce que je veux en faire

body 
  { font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-size: 3mm; }
h4 
  {font-family: 'Open Sans', sans-serif;
   font-weight: 800;
   font-style: normal;
   font-size: 4mm; }
h3 
 { font-family: 'Open Sans', sans-serif;
   font-weight: 800;
   font-style: normal;
   font-size: 7mm; }
h2 
 { font-family: 'Open Sans', sans-serif;
   font-weight: 800;
   font-style: normal;
   font-size: 5mm; }
h1 
 { font-family: 'Open Sans', sans-serif;
   font-weight: 800;
   font-style: italic;
   font-size: 15mm; }

J'ai choisi de mettre ma typographie en couleur blanc, sauf pour le texte dans la bannière qui est en noir

.colortext{ color: white; }

Il ne me reste qu'à faire la même chose pour tous les autres signes astrologiques et à l'imprimer.

)