TUTORIEL
Back office des sites régionaux
Drupal
FTVEN Régions septembre 2012
PRINCIPES DE BASE
Le fleuve d’actualité
-‐ Tout article d’information publié se retrouve automatiquement en première position du fleuve d’actualité, à la Une du site. Il est possible de réordonner les articles du fleuve. -‐ Un article ne doit pas obligatoirement être illustré par une photo. Des pictos permettent de signaler des formats spécifiques à un article : diaporama, vidéo, son, live… -‐ Des articles associés à une émission peuvent être mis en avant dans le fleuve d’actualité via l’onglet Gestion de la Une du CMS. -‐ Des articles publiés par d’autres régions du réseau peuvent également être mis en avant dans le fleuve à la Une. Un clic ouvre l’article dans le site de la région d’origine.
Les tags
-‐ Tout article est associé à un ou plusieurs tags (6 max.) qui permettent une navigation dynamique dans tous les contenus du site. Le clic sur un tag affiche le fil de tous les articles associés à ce tag, par ordre ante-‐chronologique. -‐ Une liste de tags dans l’actu du jour, sélectionnés par l’équipe éditoriale, est affichée en haut de la page d’accueil. -‐ La base des tags est partagée par toutes les régions ; une région peut créer des tags propres.
Les assets média vidéos, diaporamas, …
-‐ En plus des illustrations, un article peut contenir tout type de média : diaporama, vidéo, son, embed HTML libre... -‐ Un média peut être directement associé à un article sans passer par une création préalable dans la médiathèque. Tout média créé dans les assets se retrouve dans la médiathèque, partagée entre toutes les régions.
L’alerte info (« urgent »)
L’alerte info s’affiche sur un bandeau rouge en haut de toutes les pages du site. L’alerte peut être viralisée sur les réseaux sociaux. Elle doit être dépubliée dès que l’info a été traitée dans un article.
La Une événementielle
La Une du site peut être affichée sous forme de Une événementielle. Un bloc événementiel s’ajoute alors au-‐dessus du fleuve d’actualité. Il peut contenir le player vidéo d’un direct événementiel, d’une prise d’antenne exceptionnelle, accompagnés d’un CoveritLive ou d’un flux Twitter. La Une événementielle peut être programmée pour s’ouvrir et fermer à une heure précise.
1
LES ACTIONS DE BASE -‐ CREER DES CONTENUS Avant de commencer : la connexion
Le backoffice vous permet de :
Vous pouvez vous connecter au back-‐office directement depuis la page d’accueil de votre site régional.*
http://bo-‐regions-‐pays-‐de-‐la-‐loire.francetelevisions.tv/user/ Renseignez vos login / mot de passe pour accéder à la gestion du site.
* Attention, cette URL vous permet de voir le site sans cache, si vous souhaitez partager des pages de votre site sur Facebook, il faut bien passer par l’URL classique du front-‐ office qui ne change pas : nomdelaregion.france3.fr
1. 2. 3. 4. 5.
Créer des articles Gérer le fleuve d’actualités de la Une Mettre à jour les tags dans l’actu Créer des questions du jour (sondages) Créer des revues de web
6. Créer et mettre à jour des pages émission 7. Créer tout type de média (image, diaporama, son, document…) 8. Créer des tags 9. Créer des blocs de colonne de droite
Cliquez sur les différents onglets du menu du back office pour créer ces types de contenu
1 -‐ CREER UN ARTICLE
Un article actu appartient à une région et une URL. Il se publie automatiquement à la Une du fleuve d’actualité. Il peut
être mis en avant sur le site d’une autre région ; le clic sur l’article l’ouvrira dans son site d’origine. Un article peut être mis à jour au cours de la journée, enrichi avec des photos, vidéos ou diaporamas. Lors de la re-‐publication, l’article garde sa place à la Une du site. L’URL de l’article ne change jamais. Les 10 derniers articles du fleuve d’actualité sont repris chaque jour dans la newsletter, envoyée automatiquement à 13h. Positionnez-‐vous dans l’onglet Article et cliquez sur le bouton « Créer un article »
Dans cette page, vous retrouvez la liste des derniers articles créés dans votre région. Cette liste peut être filtrée par ID, Titre, Tag, Auteur, Statut (publié ou non), date de publication. Vous pouvez modifier ou supprimer les articles de votre région à ce niveau.
2
Le clic sur « Créer un article » ouvre la fiche à remplir pour créer un article. Un nouvel article est par défaut offline. En front, on affiche la date de publication et la date de dernière mise à jour
Champs de la page de création d’un article :
Titre : Titre de l’article, limité à 180 caractères Titre court : 100 caractères. C’est le titre affiché pour mise en avant à la Une ou dans les newsletters Chapô : Pour mise en avant à la Une, 300 caractères e Illustration : Illustration de l’article, automatiquement recadrée au format 16/9 – Taille : 640 x 360 pixels Corps de texte : peut contenir tout asset – image, diaporama, vidéo (Dailymotion, INA, Youtube, France 3), son, document, embed html libre… Encadré : un paragraphe, encadré par des filets, qui s’affiche après le corps de texte Signature : renseigne le nom de l’auteur de l’article automatiquement. On peut ajouter une signature libre. Pour aller plus loin : pour ajouter des liens vers d’autres articles de la même région ou d’une autre région. Vous pouvez rechercher les articles par titre ou expression-‐clé (auto-‐complétion), sur le dernier mois . Blocs : vous pouvez ajouter à votre article des blocs manuels créés dans l’onglet blocs (recherche avec auto-‐complétion sur le titre ou par liste) Contextualisation : sélectionner un tag principal dans la liste des tags existants (auto-‐complétion) Tag secondaire : sélectionner jusqu’à 5 autres tags, en les séparant par virgule Picto : sélectionner un élément dans le menu déroulant pour signaler à la Une un contenu spécifique (vidéo, audio, diaporama, exclusivité, à l’antenne) Paramètres de commentaires : Ouvert par défaut = les internautes inscrits peuvent commenter, Fermé = l’article ne peut pas /plus être commenté Options de publication : si vous ne sélectionnez rien, l’article se publie immédiatement, si vous sélectionnez une date, il se publiera à la date sélectionnée. Boutons Enregistrer / Enregistrer et publier / Aperçu (après un premier enregistrement) ou Enregistrer et publier / Aperçu / Dépublication pour les articles déjà publiés
L’article publié s’ajoute automatiquement à la Une de votre site. Vous pouvez réordonner les articles du fleuve comme suit :
3
2 -‐ REORDONNER LES ARTICLES DU FLEUVE D’ACTUALITE
Dans l’onglet « La Une / Gérez le fleuve d’actualité » vous pouvez réordonner / modifier / ajouter des articles au fleuve d’actualité. Réordonner : simple glisser / déposer Modifier : clic sur modifier ouvre la fiche de l’article Ajouter : un moteur de recherche par auto-‐complétion permet de chercher des articles que vous souhaitez ajouter à votre Une dans la base d’articles de votre région et des autres régions. Vous pouvez également ajouter à la Une un article lié à une page émission. La recherche est limitée sur les 7 derniers jours. Astuce pour ajouter un article plus ancien que 7 jours : Renseigner dans la case « Ajouter » [Région]: Titre, ID: idarticle Après avoir modifié votre Une, il faut enregistrer les modifications.
3 -‐ MODIFIER UN ARTICLE
Vous avez plusieurs possibilités pour modifier un article. 1. Depuis le front-‐office en cliquant sur le bouton Editer, ou 2. Depuis le back-‐office en cliquant sur le bouton Modifier. Après modification, il faut republier votre article, sinon, les modifications ne seront pas prises en compte. En revanche, l’article garde sa position dans le fleuve ère d’actualité, il ne se repositionne pas en 1 position.
4 -‐ LES ASSETS MEDIA – images, diaporamas, vidéos, sons, documents, embed
La médiathèque des assets média est partagée entre toutes les régions, par défaut, on vous propose les médias créés
dans votre région. Vous pouvez ajouter des médias d’autres régions. Vous pouvez modifier les médias de votre région. Seul l’administrateur a la possibilité de supprimer un média. Tout type de contenu ajouté à votre article est dans un asset média : vidéo (Dailymotion, Youtube, Cappuccino, direct, DMCloud), son, document, image et même code embed. Vous pouvez ainsi utiliser un même asset dans différents articles. Vous pouvez créer un asset média dans la médiathèque ou directement depuis l’article dans lequel vous souhaitez insérer un contenu média. Les types d’assets média et les formats attendus : Image : png, jpg, jpeg – taille de l’illustration d’un article 640 x 360 pixels Diaporama : plusieurs images Vidéo : Dailymotion, Youtube, INA, Cappuccino (coller ID), France 3 (DM Cloud) ou mms pour un direct Document : pdf, doc, excel Son : mp3 HTML libre : code embed, iframe,… (CoveritLive, Storify, Dipity…) Attention, la largeur maxi pour insertion dans un article est de 540 pixels. La largeur maxi pour insertion dans une Une événementielle ou dans un bloc de colonne de droite est de 320 pixels Vous pouvez créer les différents médias directement depuis le corps de texte d’un article ou aller chercher un média déjà créé depuis l’article avec le bouton « Rechercher et ajouter un média ».
Pictos de création d’un média : Image, Vidéo, Son, Document, html libre, Diaporama
4
Exemple création d’une image : Titre : 180 caractères Légende : 300 caractères (s’affiche sous l’illustration) Image : parcourir votre poste de travail pour sélectionner une image, l’image peut être croppée ensuite dans le CMS L’illustration est obligatoirement en 16/9e, une image dans le corps de texte peut être croppée librement (cocher la case Free cropping)
Crédit : auteur de l’image Copyright : France 3 ou autre Enregistrer : ajoute l’image dans la médiathèque et dans le corps de texte
Exemple création d’une vidéo : Titre : 180 caractères (n’apparaît pas en ligne) Description : 300 caractères (s’affiche sous le player vidéo) Vidéo – vous pouvez : 1. Coller l’URL d’une vidéo Youtube, Dailymotion ou INA 2. Coller l’identifiant d’une vidéo Cappuccino ou le lien MMS pour un Direct 3. Cliquer sur ajouter une vidéo France 3, vous avez alors accès à toutes les vidéos de votre région disponibles sur DMCloud :
Clic sur ajouter + Enregistrer, ajoute le média vidéo à la médiathèque.
Exemple création d’un diaporama : Titre : 180 caractères Images (minimum 4 images pour un diaporama) : créer ou ajouter un média image. Vous pouvez intégrer dans un diaporama des images en format paysage ou portrait. Attention, pour le format portrait, il faut cocher la case free cropping dans le formulaire de création de l’image. Les images sont redimensionnées automatiquement dans le diaporama. La légende de l’image s’affiche dans le diaporama. Pour ajouter des images supplémentaires, cliquez sur « Ajouter un autre élément ». Vous pouvez réordonner les images de votre diaporama par drag and drop. Enregistrer : enregistre le diaporama dans la médiathèque et l’ajoute dans le corps de texte de l’article.
5
Mes notes :
6
5 -‐ LES FORMATS A LA UNE L’alerte info (« urgent »)
Une alerte contient un texte (180 caractères maximum), et éventuellement un lien. Pour publier l’alerte à la Une de votre site, il suffit de cocher la case « Afficher l’alerte ». (Décochez la case pour dépublier l’alerte). L’alerte doit être dépubliée dès que l’événement n’est plus une actu chaude et qu’un article a été créé à ce sujet. Pour créer une alerte, positionnez-‐vous dans l’onglet « La Une / Alertes »
Il ne peut y avoir qu’une seule alerte à la fois sur votre site. L’alerte s’affiche sur toutes les pages du site, y compris les pages émission.
Les tags dans l’actualité – les thématiques dans l’actualité du jour Positionnez-‐vous dans l’onglet « La Une / Dans l’actu » et cliquez sur le bouton « Ajouter un lien ». Pour créer le menu des tags dans l’actualité à la Une, sélectionnez les tags que vous souhaitez mettre en avant. Il suffit ensuite d’enregistrer la configuration.
Dans la liste des tags chauds, vous pouvez activer / désactiver des tags pour les thèmes d’actualité susceptibles de revenir régulièrement et réordonner les tags par glisser-‐déposer.
Vous pouvez également y ajouter un lien externe (http://…) vers un blog France 3 ou une page émission
7
La Une événementielle – la mise en avant en Une d’un événement avec un player vidéo et des blocs Twitter / Facebook / CoveritLive,
Positionnez-‐vous dans l’onglet « La Une / Une événementielle » et cliquez sur le bouton « Créer une Une événementielle »
Champs de la Une Evénementielle :
320 pixels
Titre : Titre de l’événement (180 caractères) Chapô : accroche de l’événement (300 caractères, peut contenir des liens hypertexte) Média : média asset avec une Illustration, vidéo, direct live ou diaporama HTML libre : média asset html libre avec le code d’un flux Twitter, CoveritLive, Facebook comment… Image de fond : une image de fond peut habiller toute la page (vous pouvez demander la mise en place de cette image à l’administrateur à Paris ftvicontactregions@francetv.fr en fournissant un visuel d’au moins 1400x1700 pixels) Page d’accueil : cocher la case pour afficher l’événement sur la page d’accueil du site Publié : cocher la case pour publier l’événement Options de programmation : vous pouvez programmer une date et heure de début et de fin de cette fenêtre
La Une événementielle peut aussi être ajoutée en haut de la page d’un tag événementiel. Il suffit d’ouvrir la page de tag
de votre événement et de sélectionner la Une événementielle que vous souhaitez afficher dans cette page. Cela vous permet par exemple de retransmettre un événement en direct à la fois à la Une de votre site et sur la page de l’événement :
8
La revue du web – le best-‐of de du web régional sélectionné par France 3 (sites institutionnels, associatifs, clubs sportifs, blogs, …)
Champs de la Revue du web :
Titre : l’intitulé de l’information que vous souhaitez relayer dans votre revue du web Crédit : le nom du site cité Lien : le lien vers la page citée Cocher la case « publié » pour afficher la revue du web à la Une Les différents éléments de la revue du web peuvent être réordonnés, dépubliés…
Le sondage / la question du jour – interroger les publics pour créer de l’interactivité
Les champs du Sondage :
Question : la question du jour dans l’actualité Options : les options de réponse (le nombre de votes s’affiche à côté de chaque option, ce chiffre est non modifiable) Statut : fermé, pour uniquement afficher les résultats, actif pour ouvrir les votes Indiquer la durée du sondage Cocher la case « publié » pour mettre en ligne le sondage Vous pouvez sélectionner une date de début et de fin de publication du sondage
9
6 -‐ OPTIONS AVANCEES
Le tag – la contextualisation de tous les contenus info du site, pour optimiser la navigation et le référencement
La base des tags est partagée entre les régions. Chaque région peut disposer de tags spécifiques concernant son
actualité ou les dossiers régionaux particuliers. Plusieurs tags sur le même thème peuvent être fusionnés en un seul tag. Tous les articles contenant un tag sont affichés dans la page de tag par ordre ante-‐chronologique. Sur votre site, seuls les articles de votre région s’affichent dans votre page de tag.
Champs du Tag :
Nom : nom du tag, 180 caractères, peut contenir plusieurs mots Description : accroche (300 caractères), s’affiche sur la page de liste des articles associés au tag Liens : des liens en rapport avec la thématique du tag, exemple, tag Présidentielle, lien vers le site 2012 Info : information interne, ne s’affiche pas en ligne Type : tag simple, topic (avec une gestion des blocs de colonne de droite) ou page événement (avec un habillage et la possibilité d’y insérer une Une événementielle) Tags proches : les tags proches de cette thématique, sélectionnés dans la base de tags. Il est important de sélectionner des tags proches pour augmenter le référencement de vos pages
Les options « Topic » et « Page événement »
Le topic Un tag de base génère une page de tag simple avec tous les articles associés à ce tag affichés par ordre ante-‐chronologique. Il existe une dizaine de « super-‐tags », les topics. Il s’agit de thèmes plus généraux (culture, sport, économie, …). La page de topic peut être habillée avec un bandeau et des blocs de colonne de droite contextualisés par rapport au sujet (exemple : résultats sportifs pour le topic Sport). La page événement permet de contextualiser les flux d’actualité liés à un événement régional. Elle a les mêmes fonctionnalités que la page de topic. Elle affiche un fleuve d’actualité avec les articles, une colonne de droite personnalisée, un bandeau et une image de fond. Elle peut en plus accueillir le player de la Une événementielle. Bandeau : 1000 x 134 pixels Image de fond : mini 1500 x 1700 pixels
10
Les blocs manuels – personnaliser la colonne de droite d’un article, d’un topic, d’un événement ou d’une page émission
La base des blocs est partagée entre les régions. Il existe des blocs automatiques, sur lesquels vous n’avez pas la main et qui s’alimentent automatiquement avec des flux, comme « Voir et revoir », la publicité, vos émissions… A côté de ces blocs, vous avez également la possibilité de créer vous-‐même des blocs qui pourront être affiché aux endroits prévus dans la colonne de droite d’un certain nombre de pages.
Positionnez-‐vous dans l’onglet « Blocs » et cliquez sur le bouton Il existe 4 types de blocs manuels : Bloc Asset libre = un bloc où vous pouvez intégrer n’importe quel asset html Bloc Texte = un bloc qui contient un texte sans limite de caractères avec une mise en forme en html simple Bloc Liste = un bloc qui vous permet d’afficher une liste avec des liens + vignette Bloc Carrousel = un bloc qui affiche des images qui défilent automatiquement Exemple : Créer un bloc Liste Titre : Titre du bloc pour la recherche dans le back-‐office Titre fin : Partie du titre qui s’affiche en fin sur le front Titre gras : Partie du titre qui s’affiche en gras sur le front Lien Titre : Titre du premier élément de la liste URL : http://… Illustration : image non obligatoire Description : 300 caractères Après avoir créé votre bloc, il suffit tout simplement de l’associer à la page topic / événement ou à l’article :
Recherche par auto-‐complétion sur le titre du bloc ou dans la fenêtre de recherche.
La page statique Les pages statiques sont les pages qui peuvent être mises en avant dans le footer de votre site, par exemple la page Contact, la page de Podcast ou toute autre page qui ne doit pas apparaître dans le fleuve d’actualité de votre région.
Ingrédients pour créer une page statique:
Titre : le titre de votre page, 180 caractères Corps de texte : corps de texte avec tous les assets média
11
7 -‐ LA PAGE EMISSION Vous avez le choix entre 4 types d’affichage de la page émission : 1. Une émission unitaire, qui ne fait pas partie d’une collection – page émission unitaire 2. Une émission avec du contenu associé – page émission simple 3. Une émission phare avec une multitude de contenus associés – page émission phare avec un menu thématique 4. Une émission avec un site hors Drupal – page émission mini-‐site (mise en avant d’un site externe) Le bloc Toutes les émissions affiche dans un carrousel toutes les émissions disponibles dans une région. Exemple d’une page émission phare :
12
Champs de la page émission
Les champs affichés dans le formulaire de création d’une page Emission dépendent du type d’affichage sélectionné au départ. Titre : Titre du programme Logo : Logo du programme (pour mise en avant sur la page Toutes les émissions) 340 x 191 pixels Type : Unitaire, Simple, Phare, Mini site
Prochaine diffusion : date et titre de la prochaine diffusion Diffusion : Exemple -‐ Tous les jeudis à 12h Concept : le pitch de l’émission (texte de 1 à 2 paras) Menu (réservé à l’émission phare) : vous pouvez créer plusieurs entrées de menu, vous attachez ensuite une actu à une des entrées de menu de cette émission. Titre = apparaît dans le menu, URL = URL externe ou création d’un métatag auquel on ajoute ensuite les actus
Habillage : bandeau et image de fond
Bandeau : 1000 x 160 Image de fond : minimum 1500 px de large Bloc Animateurs : lien vers la fiche de un ou plusieurs animateurs de l’émission (voir création d’un animateur)
Lien PDM : code PDM pour afficher la catchup du programme sur la page (le lien est fourni par FTVEN et le bloc Revoir avec Pluzz est géré de façon entièrement automatisée. Après diffusion, la dernière émission est disponible dans le bloc. Les émissions précédentes sont disponibles dans un bloc sous le player) Blocs : vous pouvez ici associer des blocs manuels créés dans l’onglet Blocs En cours : émission diffusée à l’antenne ou non (si la case est cochée, l’émission s’affiche dans la page Toutes les émissions, et le bloc Toutes les émissions de la région) Options de programmation : date de début et de fin de l’affichage de la page émission Emissions à voir aussi : 9 liens libres vers des programmes sur le même thème
13
Facebook URL : vous pouvez renseigner une URL Facebook de l’émission. Associé à chaque émission, vous pouvez créer des actualités. Les articles d’actualité d’une émission s’affichent à la Une sur la page de l’émission avec l’habillage de l’émission. Une actu d’émission peut être mise en avant dans le fleuve d’actualités à la Une du site régional. Une émission peut également être accompagnée d’un bloc animateur. Vous pouvez créer autant de fiches animateur que vous souhaitez. Le bloc se transforme alors en bloc de type carrousel.
Modifier / Animer une émission
Modifier une émission – le lien pour retourner dans le formulaire avec les informations génériques d’une émission Gérer une émission – le lien pour accéder au mini-‐dashboard d’une émission qui permet de créer et modifier les actualités et animateurs associés à l’émission
Gérer une émission – le mini-‐dashboard :
14
• • • • • • •
Lien retour « Toutes les émissions » pour revenir vers la page d’accueil avec la liste de vos émissions Logo et lien « Voir la page émission » -‐ voir la page en ligne Créer une actu -‐ ajouter l’actualité d’une émission Créer un animateur -‐ ajouter un animateur à cette émission Modifier cette émission – revenir dans le formulaire avec les métadonnées génériques de l’émission Voir les actus et filtrer la liste Voir les animateurs et filtrer la liste
Créer une actu d’émission
Pour communiquer sur l’actu d’une émission (contenu de la prochaine émission, diaporama du tournage, infos pratiques d’une émission…) vous allez créer une actu de l’émission. Cette actu de l’émission peut être mise en avant dans le fleuve d’actualité de votre site régional. Dans l’onglet Emission, vous cliquez sur « Gérer l’émission ». Vous arrivez dans le mini-‐ dashboard associé à votre émission. Cliquez sur « Créer une actu » Titre : 180 caractères Accroche : 300 caractères e Illustration : Image 16/9 , 640 x 360 pixels Corps de texte : libre, peut contenir tout média = corps de texte de l’article actu Méta sélection (pour émission phare) : associer l’actu à un des onglets du menu L’actu s’ajoute en première position du fleuve d’actualité de la page émission. Elle se retrouve également dans la page « Toute l’actu » de cette émission. Sur l’accueil de votre émission s’affichent les 3 dernières actus de l’émission. Le type de contenu émission unitaire affiche directement le contenu d’une seule actu.
15
Créer une fiche animateur
A une émission peuvent être associés un ou plusieurs animateurs. Pour créer un animateur, cliquez sur « Gérer l’émission ». Dans le mini-‐dashboard, vous avez accès à la création d’un animateur. L’animateur s’affiche dans un bloc de colonne de droite.
Titre : Nom de l’animateur Accroche : texte d’accroche dans le bloc Image bloc : 111 x 135 pixels En savoir plus : possibilité d’afficher une page animateur avec du texte supplémentaire. Vous pouvez afficher une image différente du bloc dans cette page (Image principale)
16
Récapitulatif des formats d’image Article actu Elément Illustration de l’article (resizée si utilisée dans le corps de texte) Iframe dans le corps de texte Bandeau tag événement Page Emission Logo de l’émission Bandeau Image de fond Animateur Autres Logo quiz
Taille en pixels 640 x 360 540 de large 1000 x 134 340 x 191 1000 x 160 Mini 1500 de large 111 x 135 340 x 191
A tout moment, vous pouvez cliquer sur le Dashboard pour retrouver :
Les contacts de l ‘équipe FTVEN
Le lien vers le tutoriel à télécharger
17