Créer des mises en page

Une mise en page, c'est ce qu'affiche un écran : un arrière-plan, et tout ce qui est disposé par-dessus. Si vous avez seulement besoin d'une image ou d'une vidéo plein écran, votre première mise en page couvre cela en quelques minutes. Cet article aborde l'étape suivante, un design avec plusieurs éléments à l'écran en même temps, et le travail dans l'éditeur sans avoir à lutter contre lui.

L'éditeur est un canevas, pas une grille

Les anciens outils d'affichage dynamique vous obligeaient à découper l'écran en zones fixes dès le départ. Pas easyCMS. Vous disposez d'un canevas à la taille de votre mise en page, et vous y glissez des éléments depuis la boîte à outils, puis vous les déplacez, redimensionnez et faites pivoter librement. Les éléments peuvent être côte à côte, ou se chevaucher délibérément, un logo par-dessus une vidéo n'est jamais que deux éléments empilés.

Trois types d'éléments sortent de la boîte à outils :

• Médias de la bibliothèque, les images, vidéos et fichiers audio déjà présents dans votre bibliothèque de médias.
• Widgets, du contenu qui récupère ou génère quelque chose : horloges, météo, flux RSS défilants, pages web, tableaux pilotés par des DataSets.
• Éléments, les composants de design avec lesquels vous construisez : texte, formes et similaires.

Sélectionnez n'importe quel élément et le panneau Propriétés affiche ses paramètres. C'est dans l'onglet Avancé que vous modifiez la durée pendant laquelle cet élément occupe l'écran.

Créer un design à plusieurs éléments

Un exemple concret, un visuel principal avec un bandeau défilant en bas et un logo dans un coin :

1. Définissez la résolution de la mise en page depuis le panneau Propriétés sans rien avoir sélectionné, et définissez une couleur ou une image d'arrière-plan.
2. Faites glisser votre image ou vidéo principale, puis tirez ses poignées pour remplir la zone supérieure. Utilisez les boutons Aligner sur, en bas à droite, pour l'aligner sur les bords du canevas.
3. Faites glisser un widget de bandeau ou de texte sur la bande inférieure et ajustez-le à la pleine largeur.
4. Déposez le logo en dernier pour qu'il se retrouve au-dessus.

Pour faire alterner plusieurs éléments dans une même zone, placez-y plutôt une playlist. Positionnez-la et redimensionnez-la comme n'importe quel autre élément, puis ajoutez-y les éléments qui doivent défiler. C'est le point que l'on rate souvent : une playlist n'est pas une zone d'écran séparée que l'on définit au préalable, c'est juste un élément de plus que l'on place.

Calques, regroupement et sélection

Les éléments qui se chevauchent ont besoin d'un ordre. Le gestionnaire de calques, en bas à gauche, liste tout ce qui se trouve sur le canevas avec son calque et sa durée, et vous réorganisez par glisser-déposer. Un clic droit sur un élément du canevas donne accès aux mêmes options.

Deux habitudes qui font gagner du temps sur un design chargé :

• Tracez un cadre sur le canevas pour sélectionner plusieurs éléments à la fois et les déplacer ensemble sans perdre leur alignement.
• Maintenez Maj, cliquez sur chaque élément, puis faites un clic droit et choisissez Grouper les éléments pour garder un ensemble uni durablement.

Résolution et orientation

Faites correspondre la résolution de la mise en page à l'écran. 1920×1080 pour la plupart des écrans en paysage, 1080×1920 pour un écran monté verticalement, auquel cas le canevas lui-même devient haut et vous concevez directement dans ce format.

Une mise en page lue sur un écran d'un format différent est mise à l'échelle pour s'adapter, ce qui signifie des bandes noires. Créez des versions portrait et paysage séparées pour tout ce qui est important. Résolution et orientation de l'écran traite les cas délicats.

Aperçu avant que cela n'atteigne un écran

Le bouton lecture, en bas à gauche, exécute la mise en page dans votre navigateur. Il révèle ce qui est évident sur un vrai écran mais invisible pendant la conception : un texte trop petit pour être lu à travers une pièce, un élément qui en chevauche un autre, une vidéo au mauvais format. Bien moins coûteux que de le découvrir sur le lieu de vente.

Publier, et modifier quelque chose déjà en ligne

Une mise en page a deux états, et un seul des deux est jamais diffusé.

Un brouillon peut être modifié librement et n'apparaît sur aucun écran. Une mise en page publiée est celle que les écrans diffusent. La publication se trouve dans le menu à trois lignes, en haut à droite.

Lorsque vous modifiez une mise en page déjà publiée, easyCMS crée une copie brouillon et laisse la version en ligne diffuser sans y toucher. Vos modifications n'atteignent les écrans que lorsque vous republiez, retravailler une mise en page en direct en pleine journée de travail est donc sans risque.

Attention Une modification que personne ne voit à l'écran est très souvent une mise en page qui a été modifiée mais jamais republiée.

Le rendre lisible

• Le texte est lu à plusieurs mètres de distance. Optez pour une taille nettement plus grande que ce qui semble correct sur votre écran d'ordinateur.
• Un contraste élevé l'emporte, surtout dans un magasin lumineux ou près d'une fenêtre.
• Un message par mise en page. Faites alterner plusieurs mises en page plutôt que d'en surcharger une seule.

Articles liés : Votre première mise en page, Playlists et la bibliothèque de médias, Planifier le contenu, Résolution d'écran, orientation et dimensionnement de la mise en page