====== ✨ 🙇 identité et site web des Vendredis du Libre ======

<lead> Créer une / des affiches et décliner sur un site fabriqué de A à Z, simple et quasi statique, idéalement en 1 page \\ </lead>

{{tag>site graphisme web projet local}}


<WRAP group>
<WRAP half column>
====Objectifs du site ====

     * un site “sobre” qui tienne le score A du greenIT
     * un site “accessible” qui satisfassent ? critères du ? testeur
     * un site simple, robuste et conforme ( W3C validator )
     * un site “joli” qui donne envie de partager (= qui mette en valeur, par son aspect, les contributions au projet)
     * un site dont il sera simple de modifier certains éléments, notamment de style (teintes…)

<callout type="primary" title="Statut"> en cours, pour un ami, pour le Libre, pour apprendre</callout>
</WRAP>

<WRAP half column> 

<callout type="danger" title="Comment?"> 
En lien avec le porteur du projet, en essayant différentes recettes, en notant [[https://md.picasoft.net/s/ufVbFH2I6|là mes étapes de travail foutraque]] et ici des bilans perso...</callout>
==== Explorations / découvertes ====

     * quel poids peut avoir une image sur le web pour être considérée comme sobre? 
     * rôle et impact du scroll vertical sur une page web
     * balises HTML5 et leurs rôles sémantiques
     * variables CSS3 sans SASS

</WRAP>
</WRAP>

===== Visuels =====
====v2 = janvier-mars 2023====
<WRAP group>
<WRAP third column>

Créée avec **Inkscape** et à partir d'une image de phare issue de Gallica... 

**Pourquoi j'ai kiffé ?** 
Pour les couleurs 'de filles' et le dégradé ! :) 

**Qu'est-ce que j'ai appris ?** 
Que les rendus imprimés sont carrément plus saturés que mon écran. 
</WRAP>

<WRAP third column>
{{ :projets:affiche2_vdl.png?nolink |}}

</WRAP>

<WRAP third column>
=== Ce qui va bien : ===

  *  
  * 

=== Ce qui ne va pas : ===
  *  
  *  
  *  
  * 
=== Autres notes ===

</WRAP>
</WRAP>

 


====v1 = octobre - décembre 2022====
<WRAP group>
<WRAP third column>

Créée avec Inkscape et à partir d'une image de phare issue de Gallica... 

Pourquoi j'ai kiffé ? Qu'est-ce que j'ai appris ? 

</WRAP>

<WRAP third column>
 
 fff

</WRAP>

<WRAP third column>
=== Ce qui va bien : ===

  *  
  * 

=== Ce qui ne va pas : ===
  *  
  *  
  *  
  * 
=== Autres notes ===

</WRAP>
</WRAP>

 

===== Site web =====

<lead>à partir des contenus actuels rédigés par l'instigateur de ces rendez-vous et en échangeant avec lui à chaque version.</lead>

=== fin décembre 22 - début janvier 23 : les aventures du HTML===
<WRAP group>
<WRAP third column>

Révision du balisage httml et des contenus. Tout codé à la main dans **Codium**.

Concernant les images j'ai séparé 2 illustrations svg : le fond et l'entête. 

Au début des mes recherches sur l'optimisation des images et les media query css j'avais 4 taille d'images de fond png ( s,m,l,xl) mais en fait j'arrive à obtenir un svg unique dont le poids est sensiblement le même que la version l et inférieur à 500 Ko. Donc je préfère servir le même fichier vectoriel... 

points de rupture media query, w en px : xs < 576 < 768 < 992 < 1260 < 1900 &+ 
points de rupture media query, w en px : xs < 576 < 768 < 992 < 1260 < 1900 &+ 


{{drawio>projets:siteVdL_v1.png}}



</WRAP>

<WRAP third column>
 
balisage HTML corrigé pour la v2 : 
{{drawio>projets:siteVdL_v2.png}}

</WRAP>

<WRAP third column>
capture d'écran [[https://lesvendredis.fr/libre/|du site mis en ligne]]
{{ :projets:capturesite_les_vendredis.png?nolink |}}
\\
\\

  * Je ne savais pas mais le contenu des blocs ''aside'' n'est pas affiché en mode "contenu brut" des navigateurs mobiles et donc j'imagine pas non plus traité par les autres logiciels de navigation spécifique. De plus, [[https://developer.mozilla.org/fr/docs/Web/HTML/Element/aside|cet élément devrait être utilisé de façon plus spécifique / contextuelle]] ? 
  * J'ai essayé de revoir le balisage HTML de façon à ce qu'il soit plus [[https://developer.mozilla.org/fr/docs/Web/HTML/Element#content_sectioning|conforme aux préco]] et donc plus accessible.
  * Le fait de vouloir afficher le visuel en entier (= le phare dans toute la hauteur de page) rend difficilement lisible les infos intégrées à l'image sur les petits écrans... 
  * 
</WRAP>
</WRAP>