meta données pour cette page
  •  

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
projets:sitevdl [28/01/2023 22:31] – [v2 = janvier-mars 2023] laureprojets:sitevdl [11/05/2023 01:06] (Version actuelle) – laure
Ligne 1: Ligne 1:
-====== ✨ 🙇 une identité et un site web pour les Vendredis du Libre ======+====== ✨ 🙇 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> <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>
Ligne 38: Ligne 38:
 <WRAP third column> <WRAP third column>
  
-Créée avec Inkscape et à partir d'une image de phare issue de Gallica... +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 ? +**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>
  
Ligne 106: Ligne 109:
 <lead>à partir des contenus actuels rédigés par l'instigateur de ces rendez-vous et en échangeant avec lui à chaque version.</lead> <lead>à partir des contenus actuels rédigés par l'instigateur de ces rendez-vous et en échangeant avec lui à chaque version.</lead>
  
-===v2 = du 4 et 5/01/23===+=== fin décembre 22 - début janvier 23 : les aventures du HTML===
 <WRAP group> <WRAP group>
 <WRAP third column> <WRAP third column>
  
-Révision du balisage httml et des contenus. Tout codé à la main dans **VSC**.+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.  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 &+  points de rupture media query, w en px : xs < 576 < 768 < 992 < 1260 < 1900 &+ 
  
  
 +{{drawio>projets:siteVdL_v1.png}}
  
  
Ligne 131: Ligne 137:
  
 <WRAP third column> <WRAP third column>
-=== Ce qui va bien : ===+capture d'écran [[https://lesvendredis.fr/libre/|du site mis en ligne]] 
 +{{ :projets:capturesite_les_vendredis.png?nolink |}} 
 +\\ 
 +\\
  
-  *   
-  *  
- 
-=== Ce qui ne va pas : === 
-  *   
-  *   
-  *   
-  *  
-=== Autres notes === 
- 
-</WRAP> 
-</WRAP> 
- 
- 
-===v1 = du 29/12 au 02/01/23=== 
-<WRAP group> 
-<WRAP third column> 
- 
- 
-tentative de mise en  page responsive, modifications mineures des contenus...  
- 
-Tout codé à la main dans **Notepadqq**. 
- 
-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 &+  
- 
-===Recherches=== 
- 
-Bonnes pratiques sur le poids des images ?  
- 
-Bonnes pratiques du "responsive" ? 
- 
-Bonnes pratiques d'accessibilité ?  
- 
- 
- 
- 
-</WRAP> 
- 
-<WRAP third column> 
-  
-balisage HTML de la v1 :  
-{{drawio>projets:siteVdL_v1.png}} 
- 
-</WRAP> 
- 
-<WRAP third column> 
-=== Ce qui va bien : === 
- 
-  * Je suis assez contente des ''variables css'' et du visuel svg qui laisse apparaître le fond ( un dégradé desdistes variables sur le body)  
-  *  
- 
-=== Ce qui ne va pas : === 
   * 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]] ?    * 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]] ? 
-  * Il va donc falloir 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.+  * 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...    * 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... 
   *    * 
-=== Autres notes === 
- 
 </WRAP> </WRAP>
 </WRAP> </WRAP>