Création d’un spectacle – Luc Petit – Partie 1 : introduction

La création d’un spectacle sur le site lucpetit.com passe par plusieurs petites étapes en vue de préparer les différents éléments nécessaires à sa création.

Nous aurons donc et dans l’ordre besoin de : #

• Les images.
• Les vidéos
• Le texte
• Les logos de presse
• Les logos des Awards ou partenaires.

Il convient de préparer les différents éléments dans l’ordre afin que le site reste rapide et bien optimisé.

Les images #

Celle-ci sont éditées sous Photoshop ou un autre éditeur, elles ne sont jamais postées tels quelles sur le site.

Voyons en vidéo comment éditer la photo : #

Note explicative sur les images : #

• Vos images ne doivent pas dépasser 1200px de large, il s’agit ici du maximum, concernant la hauteur essayez de garder vos images dans la même fourchette.
  Dans la vidéo ci-dessus je ne change que la largeur, mais pour une photo verticale tel qu’ici il aurait fallu changer la hauteur en 1200px.
• La résolution de l’image ne doit pas faire plus de 72DPI, il s’agit de la résolution maximale sur le web. Avoir des images de plus de 72DPI ne sert à rien sur le web et alourdit inutilement le site web.
• Lorsque dans la vidéo j’exporte pour le web l’image celle-ci sera toujours exportée au format « JPEG », le « PNG » sera réservé à des images qui doivent comporter une transparence : totalement inutile pour une galerie.
• Le poids de l’image ne dépassera pas les 300Ko, si celle-ci fait plus n’hésitez pas à diminuer la qualité de l’image de élevée à moyenne voir faible.
  Il faut bien comprendre que si vous avez 10 images sur la page de chacune 300Ko, cela fera déjà 3MB à charger pour le visiteur.
• Lorsque vous nommez votre image pour être ajoutée sur le site web, vous devez lui donner un nom qui va permettre à Google d’associer l’image à une recherche sur le sujet.
  Exemple dans la vidéo, l’image a été renommée en « Les-routes-de-la-liberte-luc-petit-1.jpg »
  Nous associons ici le nom du spectacle à son organisateur, le chiffre à la fin ne sert que pour éviter les doublons.
  Nous aurions pu également ajouter l’année du spectacle et le lieu de la sorte : « Les-routes-de-la-liberte-luc-petit-Bastogne-2020-1.jpg ».

Les vidéos #

Pour gérer les vidéos sur le site web, nous utilisons Vimeo, votre abonnement doit impérativement être au minimum un « Vimeo Business » pour disposer des fonctionnalités nécessaires.

Partons du principe que nos vidéos ont déjà été ajoutée sur Vimeo (pour ne pas patienter pendant l’envoi des fichiers).
Nous avons donc la vidéo qui sera utilisée dans le header et donc en version courte : maximum 10 secondes, et la vidéo version longue qui sera ajoutée dans le popup.

Voyons comment ajouter vos vidéos et les paramétrer sur Vimeo dans la vidéo ci-dessous : #

Les textes #

La remarque ci-dessous est extrêmement importante !

De manière générale, lorsque les textes sont intégrés sur le site il ne faut jamais faire de copier/coller depuis Word vers le site.
Le problème vient du fait que Word utilise le format XML et que donc la mise en page établie sous Word sera copiée vers le site également risquant de perturber l’affichage du contenu voir parfois rendre la page totalement inaccessible…
Si vraiment vous deviez effectuer des copier/coller, effectuez-les depuis le bloc note de Windows.

Les logos de la presse #

Vous trouverez ci-dessous un fichier PSD (Presse.psd) vous permettant de créer les logos de la presse de manière à harmoniser leur taille. En règle générale, redimensionnez le logo pour avoir une hauteur de 18px.

En vidéo #

Comme vous pouvez le voir sur la vidéo l’export au format web se fera ici au format PNG car la transparence autour du logo est importante pour s’intégrer au design du site.
Il est d’ailleurs préférable de contacter la presse afin d’obtenir le fichier source du logo au format illustrator ou Photoshop.

Les logos des Awards ou partenaires #

Identiquement aux logos de la presse, vous trouverez ci-dessous le fichier PSD pour les Awards ou partenaires.