Prise en main de Xibo - Podcast - Accueilartoistv.univ-artois.fr/.../tuto_xibo.pdf · Université...

Université d’Artois - Service TICe �

Prise en main de Xibo

Ver 0.1 09/2016 � sur �1 27


Table des matières :

Présentation de l’interface 3 ....................................................................................................Création de votre première mise en page 7 ...........................................................................

Affecter la mise en page 15 ...............................................................................................................

Campagnes 20 ...................................................................................................................................

Modèles 21 .........................................................................................................................................

Utilisation de la Médiathèque 23 .....................................................................................................

Jeux de données 24 ............................................................................................................................

De l’usage des Permissions 25..........................................................................................................

Ver 0.1 09/2016 � sur �2 27


Présentation de l’interface 1. Lancez votre navigateur Internet et rendez-vous sur http://xibo.univ-artois.fr

2. La page de connexion s'affiche. Rentrez votre identifiant « Utilisateur : » et votre mot de passe « Mot de passe ». Ces derniers vous ont été fournis préalablement.

3. Une fois correctement authentifié, vous accédez à la fenêtre principale : 4. Pour votre première connexion, Xibo affiche une présentation d'introduction. Pour la quitter, vous

pouvez cliquer sur un élément du menu à gauche, par exemple « Panneau de contrôle » qui vous affiche alors votre page d’accueil.

Ver 0.1 09/2016 � sur �3 27

http://xibo.univ-artois.fr/


5. La page d'accueil peut se décomposer en trois parties : ▪ le menu principal à gauche

▪ le menu dashboard avec icônes dans la partie centrale – il reprend quelques rubriques du menu principal

▪ le module utilisateur en haut à droite (en cliquant) – utile pour se déconnecter / changer son mot de passe/ revoir la présentation d'introduction

Ver 0.1 09/2016 � sur �4 27


6. Le menu se découpe en 4 catégories : Planification / Concevoir / Médiathèque /Afficheurs

▪ Planification vous permet de gérer le calendrier de diffusion, dans le cas d'une diffusion planifiée. ▪ Concevoir Contient 3 rubriques : Campagnes / Mises en page / Modèles. Il s’agit du module le plus important pour votre conception. Campagnes vous permet de créer des enchaînements de Mises en page. Mises en page est le module central pour la conception de vos affichages. Modèles vous permet d’importer des modèles de mises en page pour les utiliser ensuite comme base pour votre conception. ▪ Médiathèque Contient 2 rubriques : Objet Multimédia / Jeux de données. Elle permet de gérer les médias utilisés dans vos mises en page et stockés sur le serveur. Jeux de données est un média spécifique puisqu’il s’agit de données tabulaires, utile pour des utilisations un peu plus avancées. ▪ Afficheurs Contient la rubrique « Afficheurs » qui vous permet de gérer vos écrans de diffusions et permet notamment d’assigner une Mise en page par défaut à l’afficheur - elle s’exécutera en l’absence d’affichage planifié.

Ver 0.1 09/2016 � sur �5 27

Université d’Artois - Service TICe � 7. De manière générale, l’interface de Xibo se présente sous forme de grilles :

Fonctions :

L’ensemble des actions s’effectue ensuite via des formulaires dans des fenêtres :

Ver 0.1 09/2016 � sur �6 27


Création de votre première mise en page

Dans le menu, cliquer sur « Mises en page ». Dans la page vous avez le choix d’ « Importer » un modèle de mise en page existant ou d’ « Ajouter une mise en page » en la créant depuis le début. Pour l’instant nous allons découvrir les fonctions de base en créant une Mise en page. Un formulaire s’affiche :

Donnez un Nom à votre mise en page. Les Marqueurs sont optionnels, Template est utile si vous disposez déjà d’un modèle que vous souhaitez utiliser, Résolution de base 1080p HD Landscape est le format utilisé sur nos afficheurs et donc il ne faut pas y toucher outre mesure. En cliquant sur Description vous avez l’occasion de rentrer quelques informations qui vous permettraient ultérieurement de savoir quelle est l’utilité de cette mise en page (facultatif). Cliquez sur le bouton en bas à droite Enregistrer pour créer la mise en page.

Ver 0.1 09/2016 � sur �7 27


Vous êtes redirigé automatiquement vers le concepteur graphique :

Le menu Options propose certains réglages :

Ver 0.1 09/2016 � sur �8 27

Université d’Artois - Service TICe �Lors du survol de la zone visuelle - plus particulièrement le survol d’une région - des options apparaissent :

Un clic sur le bouton en haut à droite vous permet de faire apparaitre un menu pour avoir accès aux options de la région.

Le bouton bleu en bas à gauche vous permet de faire défiler les différents éléments qui se succèdent dans votre région pour avoir un aperçu. Celle-ci étant actuellement vide, cela explique le message de « Région Vide ».

Pour ajouter un élément à notre région, nous pouvons double-cliquer sur celle-ci ou utiliser le bouton en haut à droite et sélectionner « Modifier la ligne du temps ». Cela a pour

conséquence de faire apparaitre un formulaire qui va nous permettre de sélectionner le ou les éléments que nous souhaitons ajouter.

Ver 0.1 09/2016 � sur �9 27


Nous avons donc le choix sur l’élément que nous souhaitons ajouter dans cette région.

Médiathèque : permet de choisir un élément déjà présent dans la Médiathèque (un fichier déjà présent sur le serveur) Clock : module d’affichage d’une horloger - avec quelques options Data Set : Permet de sélectionner et d’afficher des données tabulaires. Embedded : permet d’afficher un élément en provenance du Web : page ou portion de page, widget,… Finance : module d’affichage de données en finance Animation Flash : pour les animations Flash - déconseillé Forecast IO : module de météo Image : insertion d’une image (formats recommandés : jpg, jpeg, png, bmp, gif) Local Video : pour lancer la lecture d’une vidéo présente sur le poste client (donc en local) Powerpoint : Permet d’utiliser une présentation powerpoint (PPT ou PPTX) - nécessite la présence et la configuration de Microsoft Powerpoint sur le poste client - ce qui est le cas pour l’Université. Shell Command : Usage avancé - exécution de code commande avancé - déconseillé Text : module de texte Ticker : Module de Flux - permet d’afficher un flux RSS ou des données tabulaires (Data Set) sous forme de flux. Twitter : Module Twitter - avec différents paramètres Video : Pour insérer un fichier vidéo (formats acceptés : wmv, avi, mpg, mpeg, webm, mp4 - le mp4 est recommandé) Webpage : Pour afficher une page web - moins de paramètres qu’en passant par l’option « Embedded »

Ver 0.1 09/2016 � sur �10 27

Université d’Artois - Service TICe �Commençons donc avec une donnée texte : Cliquons sur Text - le formulaire apparait :

Rentrons un message, par exemple « Université d’Artois ». Comme vous pouvez le constater, le texte s’affiche en blanc sur fond noir. cela est dû à l‘adaptation automatique en fonction de la couleur d’arrière plan - définie par défaut sur noir. Avec les options de l’éditeur intégré nous pouvons changer la mise en forme du texte. Une fois votre texte établi, allez dans l’onglet Options pour donner un nom à votre média (optionnel) et surtout lui spécifier une durée d’affichage (obligatoire - exprimée en seconde). Une fois cela effectuée, on clique sur « Enregistrer ». Nous sommes revenu dans le formulaire « Espace de la ligne de temps » et nous voyons que notre texte est présent :

Nous pouvons ajouter d’autres éléments dans la ligne de temps, qui se succéderaient, ou nous pouvons fermer la fenêtre du formulaire en bas à droite « Fermer ».

Ver 0.1 09/2016 � sur �11 27

Université d’Artois - Service TICe �Dans le cas où nous souhaiterions changer l’arrière plan, pour modifier la couleur ou utiliser une image, il nous faut nous rendre dans « Options », puis « Arrière plan »

Une nouvelle fenêtre s’ouvre et nous permet de modifier l’arrière plan, en changeant la couleur de fond ou en utilisant une image de fond. Le choix d’une couleur de fond peut s’effectuer à partir d’un code couleur ou à l’aide du nuancier qui s’affiche. Pour utiliser une image de fond, il faut que celle-ci soit présente dans votre bibliothèque ou alors il faut utiliser le bouton « ajouter une image » pour en télécharger une. De base la résolution doit rester en 1080p HD Landscape pour les affichages au sein de l’Université. Layer est également réservé à une utilisation avancée et n’est pas nécessaire dans le cas présent. Une fois votre fond défini,par exemple ici un fond blanc, cliquez sur « Enregistrer »

Dans le cas du fond blanc, il nous faudra revenir sur notre texte pour en changer la couleur, en effet un texte blanc sur fond blanc est pour le moins invisible. Dans le cas présent, on change la couleur du texte en noir.

Ver 0.1 09/2016 � sur �12 27

Université d’Artois - Service TICe �Un affichage peut se composer d’une ou plusieurs régions. Actuellement la région remplit toute la zone d’affichage, mais il nous est possible de la redimensionner. Pour se faire, il y a deux possibilités : par le menu dans Options ou directement sur l’éditeur visuel en changeant de manière dynamique la zone de la région, à l’aide de la petite encoche en bas à droite.

Le réglage par le menu offre une possibilité de réglage plus fine en spécifiant le point de départ de la zone et sa taille en pixel, permettant un réglage précis.

ATTENTION : Pour chaque changement de taille et de déplacement, un enregistrement est nécessaire par l’intermédiaire du message qui apparait dans ce cas là dans l’affichage visuel - afin de conserver son réglage.

Nous redimensionnons donc notre région actuelle.

Nous allons maintenant ajouter une nouvelle région. Pour se faire, aller dans le menu « Options » (en haut à gauche) et cliquer sur « Ajouter une Région ». Une nouvelle région est automatiquement créée. A vous de lui donner son emplacement et sa taille. N’oubliez pas d’enregistrer sa position.

ATTENTION : Deux régions ne peuvent se chevaucher sous peine de conduire à des défauts d’affichage. Dans Xibo il n’y a pas de superposition de régions actuellement.

Ver 0.1 09/2016 � sur �13 27

Université d’Artois - Service TICe �Nous allons cette fois-ci assigner une image. En accédant à l’espace de la ligne de temps nous choisissons « Image », un nouveau formulaire s’affiche :

Nous pouvons ajouter un fichier image depuis notre ordinateur avec la fonction « +Add files » ou Voir Médiathèque pour sélectionner une image qui serait déjà présente dans nos éléments. Il nous faut lui spécifier une durée (modifiable ultérieurement si besoin) et effectuer le téléchargement par la commande « Lancer l’upload » ou par le bouton Démarrer qui sera apparu. « Annuler l’upload » ou Abandon vous permet d’annuler la tâche. Il nous reste ensuite à l’affecter à la mise en page, pour revenir à l’espace de la ligne de temps.

Voilà, vous disposez maintenant d’une mise en page avec deux régions d’affichage.

Un point important à comprendre maintenant est que votre mise en page dispose d’une durée d’affichage. Cette dernière est définie par la durée donnée à vos éléments dans les régions, plus spécifiquement par la durée de la région ayant le temps le plus élevé :

Dans notre exemple, le texte de la région 1 dispose d’une durée définie à 60 secondes et l’image de la région 2 dispose d’une durée définie à 10 secondes. La région ayant le temps le plus élevée est donc la région 1 avec un temps de 60 secondes. Par conséquent la mise en page dispose actuellement d’une durée de 60 secondes. Imaginons que dans la région 2 nous ayons désormais différents éléments qui se succèdent,par exemple 8 images avec une durée de 10 secondes, dépassant donc 60 secondes pour aller à un total cumulé de 80 secondes. La durée de la mise en page deviendrait alors 80 secondes.

La notion de temps est importante dans le cas où vous souhaiteriez passer à un usage plus avancé avec la possibilité d’enchainer plusieurs mises en pages, ce qui est possible avec la fonction Campagnes . Nous verrons cela plus tard.

Ver 0.1 09/2016 � sur �14 27

Université d’Artois - Service TICe �Affecter la mise en page

Nous allons maintenant affecter cette mise en page à notre afficheur. Pour se faire, plusieurs possibilités s’offrent à nous.

La première manière est de définir la mise en page comme étant la mise en page par défaut de l’afficheur, c’est à dire que c’est elle qui s’affichera en priorité dans le cas où aucune autre mise en page n’est programmée. Afin d’effectuer ce choix, il faut sélectionner son afficheur dans le menu Afficheurs et utiliser le menu sur la page qui s’est affichée.

À partir de là, deux possibilités : soit utiliser Mise en page par défaut permet de lancer un formulaire et de choisir une mise en page dans le formulaire avec menu déroulant qui vient de s’afficher :

Ver 0.1 09/2016 � sur �15 27


L’autre possibilité est de passer par le menu Editer qui permet là aussi d’effectuer ce choix dans un formulaire :

Ver 0.1 09/2016 � sur �16 27

Université d’Artois - Service TICe �Il est également possible de ne pas passer par une mise en page par défaut mais d’utiliser une planification. Là encore différentes possibilités :

Soit dans Mises en page avec l’onglet Planifier Maintenant , qui ouvre un formulaire

Il suffit alors de sélectionner la mise en page souhaitée, la durée et l’afficheur concerné.

Ver 0.1 09/2016 � sur �17 27


L’autre possibilité est de passer par le menu Planification, qui affiche un calendrier :

Pour ajouter un évènement, cliquez sur Add Event pour ouvrir un formulaire :

Ver 0.1 09/2016 � sur �18 27


Afficheur vous permet de sélectionner votre affichage. Start Time vous permet de définir le début de de la programmation, à l’aide d’un calendrier qui vous permet de s sélectionner le jour et l’heure de début. End Time utilise le même principe pour définir la fin de la programmation. Layout/Campaign vous permet de choisir la mise en page ou la campagne à utiliser dans cette planification. Display Order permet de une priorité à l’affichage si plusieurs planifications se superposent. Priority joue le même rôle, en donnant à l’évènement la priorité sur toute autre diffusion en cours sur cet affichage. Il suffit de cocher la case.

Il est possible de définir une fréquence de répétition en allant dans l’onglet Repeats et en choisissant une fréquence. De base une mise en page ou une campagne se répète en boucle en fonction de sa durée sans qu’il y ai besoin de définir une répétition.

Il suffit ensuite d’enregistrer pour valider la planification.

Ver 0.1 09/2016 � sur �19 27

Université d’Artois - Service TICe �Campagnes

Intéressons-nous maintenant à la conception de Campagnes. Comme nous l’avons déjà évoqué, sous le nom Campagnes se trouve en réalité la succession de mises en page que nous pourrions souhaiter. Son fonctionnement est relativement sommaire :

Tout d’abord il faut créer une Campagne avec Ajouter une campagne

Une fenêtre se lance pour vous inviter à nommer cette Campagne

Il est ensuite possible d’organiser la campagne en choisissant les mises en pages à utiliser grâce à Mises en page :

Une fenêtre s’ouvre avec vos mises en pages, il vous est alors possible de les ajouter dans la campagne grâce au symbole « + ». Vous pouvez ainsi alterner les mises en pages et même définir un schéma de répétition. Votre sélection s’ajoute dans la partie grise inférieure et il vous est possible d’enlever une mise en page de la campagne en utilisant le symbole « -» : Une fois votre sélection établie, il suffit de l’Enregistrer.

Ver 0.1 09/2016 � sur �20 27


Maintenant que nous avons vu le fonctionnement de Xibo dans les grandes lignes, intéressons-nous à quelques fonctions plus avancées - mais pas forcément plus compliquées.

Modèles

Commençons avec l’usage de Modèles (dans le menu Concevoir )

Comme son nom l’indique, il permet de disposer d’un catalogue de modèle pour vos mises en pages. De base le menu est vide, avec la possibilité d’importer un modèle depuis Importer.

Comme vous commencez à en avoir l’habitude, une fenêtre s’ouvre pour vous permettre de choisir le fichier à télécharger, lui donner un nouveau nom si besoin et avec l’option de remplacer les médias existants par ceux du modèle s’ils ont le même nom.

Une fois l’importation effectuée, c’est dans l’onglet Mises en page que le modèle pourra être utilisé. Au moment d’Ajouter une mise en page , il est possible de choisir un Template dans la fenêtre : c’est ce qui correspond à votre modèle. Modèle vous permet donc de gagner du temps lorsque vous utilisez plusieurs mises en page avec le même agencement.

Ver 0.1 09/2016 � sur �21 27


Reste à savoir comment réaliser un modèle. L’opération est assez simple : Il suffit d’utiliser l’option Exporter présente dans le menu contextuel, Xibo vous propose alors de télécharger le fichier au format Zip. Ce fichier sera alors importable en tant que Mise en page (onglet Importer du menu Mises en page) ou en tant que modèle (onglet Importer du menu Modèles)

Ver 0.1 09/2016 � sur �22 27

Université d’Artois - Service TICe �Utilisation de la Médiathèque

La Médiathèque dispose de deux sous menus, Objet Multimédia et Jeux de données.

Objet Multimédia contient tout les éléments que vous avez téléchargez pour les utiliser sur vos mises en page. Si au départ elle va vous sembler vide, sur le long terme elle pourrait devenir très chargée. C’est pour cela qu’il y a une option de nettoyage « Bibliothèque Tidy » qui détecte les fichiers non utilisés et vous propose de les supprimer. Vous pouvez également « Ajouter un Média » directement dans la Médiathèque pour l’utiliser ultérieurement dans vos mises en page. Une fenêtre s’ouvre pour vous permettre de sélectionner le type de fichier, avant de vous proposer le formulaire de téléchargement tel que vous l’avez déjà utilisé précédemment.

Ver 0.1 09/2016 � sur �23 27

Université d’Artois - Service TICe �Jeux de données

Jeux de données est une peu à part. Il s’agit de de gérer des données tableaux, utile pour certains usages avancés : au sein de l’Université d’Artois son usage est principalement lié au bandeau défilant sur le modèle fourni de base.

Pour créer un Jeux de données, on commence par Ajouter GroupeDeDonnées.

Une fenêtre s’ouvre pour créer le groupe, il suffit de lui donner un nom, et si besoin une description.

Une fois le groupe créé, on peut commencer l’édition grâce au menu :

Voir les données vous permet de voir et modifier les données Afficher les colonnes vous permet de voir, organiser et modifier les colonnes Editer permet de changer le nom du groupe et sa description Importation CSV permet de créer les données depuis l’importation d’un fichier CSV ( fichier type Excel / OpenOffice / Libre Office ) Supprimer permet de supprimer le groupe. La suppression est possible uniquement lorsque le groupe n’est pas utilisé sur une mise en page. Permissions à le même rôle que dans les autres menus, et vise à définir les autorisations d’interaction (Voir/Editer/Supprimer) des différents utilisateurs avec les données

Son usage étant plus ardu, il est recommandé de s’en tenir à un fonctionnement de base une fois le système correctement configuré et de privilégier une intervention uniquement sur les données (depuis Voir les données) ou à partir d’un import de fichier CSV (Importation CSV - après précautions pour ne pas rendre les données caduques ) Ver 0.1 09/2016 � sur �24 27

Université d’Artois - Service TICe �De l’usage des Permissions

Beaucoup d’éléments dans Xibo peuvent nécessiter une autorisation préalable pour y accéder, c’est notamment le cas pour accéder aux ressources créées par un autre usager ou pour rendre les siennes disponibles à un ou plusieurs usager(s). On retrouve cette option dans les onglets Campagnes, Mises en page, Modèles et pour Objet MultiMédia et Jeux de données. De même, cette option se retrouve à l’intérieur d’une mise en page où chaque région peut être autorisé ou non. Et de manière encore plus approfondie, dans l’espace de la ligne de temps il est possible de donner son autorisation pour chaque élément présent à l’intérieur de la région.

Il existe différents niveaux d’autorisations (Voir/Editer/Supprimer). Voir permet de visualiser l’élément - en son absence l’élément est invisible pour l’usager. Editer permet d’agir sur l’élément et d’accéder…aux fonctions d’éditions Supprimer permet comme son nom l’indique de supprimer l’élément : à réserver aux usagers plus avancés Voici la fenêtre qui se lance lorsqu’on sélectionne l’onglet Permissions :

Ver 0.1 09/2016 � sur �25 27

Université d’Artois - Service TICe �L’option « Update these permissions on all layouts, regions and media » permet d’appliquer l’autorisation sur les éléments internes, ce qui peut être pratique si vous voulez réaliser une sorte d’autorisation globale sans avoir à effectuer une permission pour chaque élément, ce qui peut devenir long et fastidieux.

Il est également possible de changer le propriétaire d’une Campagne ou d’une Mise en page. L’intérêt du propriétaire est qu’il est en quelque sorte administrateur, il n’est pas soumis au système de permissions dans les éléments pour lesquels il est propriétaire. Il est également responsable de la gestion des permissions pour les autres usagers sur les éléments dont il est propriétaire.

Vous comprendrez donc que Permissions est un outil pratique et puissant mais qui peut être à double tranchant : un mauvais paramétrage peut conduire à quelques déconvenues.

Notion de groupe : Afin de faciliter la gestion, Xibo permet la constitution de groupes : Groupe d’utilisateurs et groupe d’afficheurs. Cela permet notamment d’accélérer la gestion des permissions envers d’autres utilisateurs. L’utilisation des groupes pour les afficheurs est utile à un autre niveau : on peut ainsi assigner une mise en page donnée ou une campagne à un groupe d’afficheurs plutôt que de devoir procéder pour chaque écran.

Ver 0.1 09/2016 � sur �26 27

Université d’Artois - Service TICe �Nous en avons fini avec la prise en main de Xibo. Il existe bien évidemment des options que nous n’avons pas abordé, mais vous disposez dorénavant de suffisamment de connaissances pour comprendre la manière dont fonctionne Xibo. Vous voilà donc capable de gérer l’affichage dynamique pour le ou les écran(s) dont vous avez la charge.

Ver 0.1 09/2016 � sur �27 27

Prise en main de Xibo - Podcast - Accueilartoistv.univ-artois.fr/.../tuto_xibo.pdf · Université...

Documents

Transcript of Prise en main de Xibo - Podcast - Accueilartoistv.univ-artois.fr/.../tuto_xibo.pdf · Université...