guide d'utilisation de l'application 'gestion éditoriale'€¦ · la création...

Alkante Guide d'utilisation de l'application "gestion éditoriale"

Guide d'utilisation de l'application"gestion éditoriale"

Alkante /28


Table des matièresPrésentation...................................................................................................................................................... 3La création de l'arborescence........................................................................................................................... 3

Création d'une page fille ............................................................................................................................. 4Droits sur la page ................................................................................................................................... 5Onglet propriétés.................................................................................................................................... 5Onglet droits........................................................................................................................................... 6Onglet référencement............................................................................................................................. 7Onglet contenus...................................................................................................................................... 8Détails de la présentation des blocs d'une page de gestion éditoriale..................................................10

Les blocs......................................................................................................................................................... 11Ajout d'un bloc de type « Information éditoriale », « géolocalisation » ou « forum »..................................11Ajout d'un bloc de type « formulaire/sondage ».........................................................................................13Ajout d'un bloc de type « Flux RSS ».........................................................................................................14Ajout d'un bloc éditorial (dans le corps de la page ou en colonne)............................................................14

la palette d'outils de CK editor.........................................................................................................15Chargement d'un document ou image..................................................................................................26Ajout d'une image et sa visualisation en plus grand (lightbox)..............................................................27

Déroulement général : Comment ajouter une nouvelle page éditoriale..........................................................28

Alkante /28


PrésentationUne application de type gestion éditoriale permet de créer et de publier des pages de contenu web organisées dans une arborescence.

Chaque page de contenu est un ensemble de blocs éditoriaux (contenu éditorial, documents, liens, informations éditoriales, …....).

Grâce à des styles prédéfinis et à des outils intuitifs de gestion de l'arborescence, un utilisateur peut créer et publier du contenu immédiatement disponible en ligne.

La création de l'arborescencePar défaut, la page racine de l'arborescence est la page d'accueil du site.

Cette page est généralement définie par la charte graphique. Son organisation ne peut être modifiée par l'utilisateur. Elle comprend un ensemble de blocs dont le contenu est modifiable par d'autre applications.

Par exemple : une page d'accueil du site peut contenir les 3 dernières actualités. Si l'utilisateur met à jour ces actualités, elles seront directement mises à jour sur cette page.

En cliquant sur le picto à coté du titre d'une page, il est possible de créer une page fille de celle-ci. De cette façon, l'utilisateur peut générer toute l'arborescence des pages.

Une page fille n'est visible que si sa mère est visible

Il est possible de déplacer une page en passant par un glisser / déposer sur le picto à gauche du titre

Alkante /28

Illustration 1: Arborescence des pages

Page racine Cliquer sur ce picto pour créer une page fille à cette page.


Création d'une page fille

Alkante /28

Illustration 2: Formulaire de création d'une page fille


Champs Description

Titre Titre de la page

Début de publication Date de début de publication de la page sur le site (jj/mm/aaaa)

Fin de publication Date de fin de publication de la page sur le site

Page publiée Si non cochée et quelque soit les dates de début publication ou de fin de publication, la page n'apparaitra pas dans le menu du site. Une page n'est visible que si sa mère est visible

Rang Le rang de la page dans l'arborescence par rapport à la page mère

Visible dans le menu Visible dans l'arborescence des pages côté site (menu et plan du site)

Url de redirection et cible de la redirection

A utiliser si une page doit rediriger vers une autre page du site ou un site externe,Si l'url de redirection est renseignée : - le contenu de la page éditoriale, s'il a été mis a jour, sera ignoré - les pages filles de la page ne seront pas accessiblesL'ouverture de la page de redirection peut se faire dans la même fenêtre ou dans une nouvelle fenêtre

Droits de l'application Si cette case est cochée, les droits sur la page sont les mêmes que ceux del'application.

Droits spécifiques par profil Si la case du dessus n'est pas cochée alors il est possible de personnaliser les droits de la page pour chaque profil

Droits sur la page

On distingue 4 types de privilèges coté administration (que les droits sur la page soient ceux de l'application ou définis pour chaque profil) :

• Aucun : La page n'est pas visible dans le menu de gauche

• Consultation : le droit de consulter la page sans la modifier

• Administration : le droit de modifier le contenu et les propriétés de la page et le droit de créer des pages filles

• Publication : le droit de publier la page.

Les droits retenus sont ceux les plus forts c'est à dire que les droits de publication incluent les droits de consultation et d'administration.

Onglet propriétés

Cet onglet reprend les informations définies lors de la création d'une pages filles. Tous les champs peuvent être complétés ou modifiés

Alkante /28


Des champs supplémentaires associés à l'application commentaire (si elle est disponible) sont ajoutés

• Autoriser les commentaires : si cette case est cochée les internautes peuvent déposer des commentaires sur la page (après inscription),

• Activer la modération : si cette case est cochée et si les commentaires sont autorisés, alors les commentaires ne seront visibles que si l'administrateur l'autorise.

Onglet droits

On y retrouve les différents champs du bloc gestion des droits décrit plus haut.

Alkante /28

Illustration 3: Propriété de la page


Onglet référencement

Alkante /28

Illustration 4: Référencement de la page


Onglet contenus

On y retrouve les différents champs du bloc gestion des droits décrit plus haut.

Une page de gestion éditoriale est définie par un ensemble de propriétés. Son contenu peut être composé d'un ensemble de bloc comme décrit ci-dessous :

Champs Description

Adresse Internet Le titre qui apparaît sur le navigateur. Il est fonction de ce qui est renseigné comme intitulé url dans l'onglet Référencement et permet l'accès à la page (si elle est publiée) en faisant précéder cette adresse du nom de domaine du site.

Ex:http://www.domaine.xxx/titre_page_meremere/titre_page_mere/titre_page

Aperçu Lien vers l'aperçu de la page (mode brouillon)

Type de page associée Permet de choisir le type de la page. Par exemple, une page de type actualitépermettra de classer les actualités par thématique, ...

Information associée Permet d'associer une application à la page (si le type le nécessite)

Modèle de page Définit le modèle de la page. En adéquation avec le graphisme du site et les informations à y afficher.

Ajouter un bloc de type

Éditorial

Permet d'ajouter un bloc de type contenu éditorial et de gérer son contenu et sa mise en forme

Éditorial en colonne Permet d'insérer un contenu éditorial en colonne. Cela suppose qu'unecolonne soit prévue dans le gabarit de la page

Formulaire permet d'insérer un formulaire de recueil de données à partir de l'application formulaire.

Alkante /28

http://www.domaine.xxx/titre_page_meremere/titre_page_mere/titre_page


Information éditoriale Permet de sélectionner une ou plusieurs informations éditoriales et de l'insérer dans la page.

Flux rss Permet de sélectionner un flux rss externe ou interne au site et l'ajouter à la page

Glossaire Permet de sélectionner des informations issues d'une application de type Glossaire

Questions / réponses (FAQ) Permet de sélectionner des informations issues d'une application de type FAQ

Liens Permet de sélectionner des liens issus d'une application de type Lien

Géolocalisation Permet d'insérer un bloc cartographique permettant de géolocaliser uneinformation éditoriale.

Forum Permet d'insérer un lien vers une discussion de l'application forum

Document Permet d'insérer un ou plusieurs documents issus d'une application fonds documentaire

Abonnement newsletter Permet d'insérer un formulaire d'abonnement à une newsletter en choisissant la classification de destination de l'abonné

Publier Si une page ou si les dernières modifications ne sont pas encore publiées

alors cette page sera marquée dans le menu avec ce picto . Pour qu'une page soit publiée coté site il faut impérativement que la case « visible dans le menu » soit cochée

Restaurer Restaurer la page dans son dernier état de publication (permet d'annuler des modifications en attente de publication)

Valider Valider les modifications (ne permet pas la publication)

Annuler Annuler les modifications

Supprimer Permet de supprimer la page après confirmation ainsi que toutes ses pages filles si elle en possède

Alkante /28


Détails de la présentation des blocs d'une page de gestion éditoriale

Les différents blocs qui constituent la page se présentent comme suit :

Alkante /28

Ordre des blocs

Suppression d'un bloc Modification d'un bloc


Les blocs

Ajout d'un bloc de type « Information éditoriale », « géolocalisation » ou « forum »Il est possible d'associer des informations d'une application de type information éditoriale à une page de gestion éditoriale (dans le corps de la page ou en colonne). L'application propose un ensemble de filtres et de critères qui permettent de définir par l'utilisateur l'ordonnancement des informations au sein de la page.

Champs Description

Filtre de publication Permet de filtrer les informations en fonction de leur état de publication : à la une, publié, archivé ou syndiqué.

Filtre calendaire Permet de filtrer les informations en précisant la date de début et de fin de publication, la date de l'événement ou la date de mise à jour. Il est aussi possible de filtrer les informations dont les dates de publication, de l'information ou de mise à jour sont comprises dans les 30 derniers jours. La disponibilité des critères de filtre dépend du type d'informations à associer.

Ordre de publication Permet d'ordonner les informations selon les critères suivants : Rang d'affichage, Date de publication, Date de l'information, Date de mise à jour, Information à la une, Intitulé de la thématique,Intitulé information. L'application offre la possibilité de préciser l'ordre de prise en compte des critères (le critère

Alkante /28

Illustration 7: Définition des critères ordonnancement des informations


le plus en haut est celui à prendre en compte en premier) et définir le type d'ordonnancement (croissant ou décroissant) pour le rang d'affichage et les dates de publication, d'information et de mise à jour. Si, selon l'illustration ci-dessus, deux informations ont un rang identique alors le système prendra en compte la date de publication. La disponibilité de tous les critères dépend du type de l'information à associer ( par exemple pour associer un forum, le critère« rang d'affichage » ou « date de publication » n'est pas présent dans la liste.

Affichage en colonne Permet de placer les informations associées à la page en colonne. Cela implique que le contenu des informations choisies ne doit pas être trop volumineux.

Champs Description

Espace Dans le cas où plusieurs espaces sont accessibles, ce champ permet de choisir l'espace qui contient l'information à associer.

Application Permet de choisir l'application qui contient l'information à associer.

Thématique Permet de filtrer sur une thématique de l'application.

Alkante /28


Ajout d'un bloc de type « formulaire/sondage »

Comme pour l'ajout d'une information éditoriale, il est possible d'ajouter un bloc de type formulaire ou sondage (en choisissant l'espace, l'application et les formulaires ou sondages à ajouter). Pour cela, il est nécessaire que l'élément à ajouter soit publié.

Les sondages (un formulaire généralement très court comme une question et une réponse à choix unique) peuvent se positionner en colonne.

Alkante /28


Ajout d'un bloc de type « Flux RSS »

Il est possible d'ajouter un bloc de type flux RSS dans une page. Le flux peut provenir d'un site externe (renseigner le champ adresse externe) ou provenir d'une application du site ( remontée des actualités par exemple).

L'utilisateur pourra spécifier le nombre d'éléments à afficher, l'affichage ou non de la date et un affichage détaillée ou non de l'information.

Ajout d'un bloc éditorial (dans le corps de la page ou en colonne)La gestion de ce type de bloc éditoriaux se fait via un éditeur offrant des fonctionnalités de traitement de texte.

Les blocs qui doivent se mettre en colonne doivent être court et ne doivent pas comporter de grandes images.

la palette d'outils de CK editor

• Des outils d'édition

Alkante /28

Illustration 11: Éditeur de texte


couper

copier

Coller

coller comme texte. Ouvre une fenêtre de collage spécial dans laquelle l'utilisateur colle son texte (formats rtf, OpenOffice...)

Coller à partir de Word. Ouvre une fenêtre de collage spécial dans laquelle l'utilisateur colle son texte (format .doc)

Annuler dernière action

Refaire dernière action

rechercher des caractères

✔ entrer les caractères recherchés

✔ utiliser les cases à cocher pour spécifier les critères de recherche :

Rechercher et remplacer

Alkante /28


✔ entrer l'expression à rechercher et remplacer,

✔ entrer les caractères de substitution

✔ utiliser les boutons "remplacer" ou "tout remplacer" pour effectuer l'opération

✔ utiliser les cases à cocher pour spécifier les critères de recherche.

Tout sélectionner

Gomme: "supprimer format" (supprime les styles appliqués au contenu).

Pour changer le style d'un contenu (texte, image, liens...) il est souhaitable de supprimer le style existant grâce à ce bouton avant de définir un nouveau style.

Pour supprimer le style d'un contenu, sélectionner le contenu et cliquer sur le bouton la gomme.

Le bouton «Media» permet :

– d'ajouter un élément venant d'un site externe (youtube, issu, …) en insérant le code de l'élément (Embed Media Code).

Alkante /28


– d'intégrer une vidéo directement sur une page en y associant un lecteur media (onglet Single Media File).

Champ « Movie Media File » : permet de pointer vers une vidéo (au format FLV ou MP4) préalablement chargée sur le serveur

Champ « Préview Image » : permet de désigner une image de prévisualisation (une image qui sera visible avant la video)

Champs « Width et Height » : permettent de donner la largeur et hauteur de la fenêtre de visualisation de la video.

Champ « Duration » : permet de définir la durée de lecture d'une video.

Champ « Start » : permet de préciser le moment de début de lecture (par exp : à partir de la 1ére minute).

Par défaut si les champs duration et start ne sont pas renseignés alors la video pourra être lue en entier.

Les champs « Author, Description et Title » donnent des éléments d'informations.

Si l'utilisateur souhaite modifier les paramètres d'une vidéo (par exemple la hauteur ou largeur), il devra soit le faire via le code source soit supprimer et réintégrer la vidéo. En effet, cet outil n'offre pas de fonction de modification.

L'utilisation de RIVA flv encoder pour l'encodage des vidéos au format flv est conseillé.

permet d'imprimer le contenu éditoriale

Permet de vérifier l'orthographe dans le contenu éditoriale

Alkante /28


Permet de vérifier l'orthographe lors de la saisie

✔ des outils de mise en forme et de mise en page

caractères gras

caractères en italique

caractères soulignés

caractères barrés

caractères en indice

caractères en exposant

numérotation automatique

insertion automatique de puces

diminuer le retrait

augmenter le retrait

aligner à gauche

centré

aligner à droite

justifié

aligner le texte à droite

aligner le texte à gauche

appliquer un style ou un format prédéfini (menu déroulant). Il est préférable d'utiliser les styles et le formats prédéfinis. Cela garantit une homogénéité des pages du site.

A l'ajout d'un bloc il suffit de désélectionner le style précédent pour qu'il ne soit pas appliqué.

appliquer une police prédéfinie (menu déroulant)

taille des caractères (choisir dans la liste déroulante)

Alkante /28


permet d'insérer un modèle de paragraphe prédéfini

couleur des caractères (choisir dans la liste déroulante)

couleur d'arrière plan (choisir dans la liste déroulante)

✔ des outils d'insertion (tableaux images, de liens etc...)

Insérer/modifier un lien

Pour insérer/modifier un lien, sélectionner les caractères (mots, phrase) qui doivent servir de lien et cliquer sur le bouton "insérer/modifier lien",

pour modifier un lien existant, reprendre la procédure décrite ci-dessus ou alors,

sélectionner le lien et faire un clic droit en choisissant l'option "modifierlien"

Les liens sont gérés à travers une fenêtre popup qui présente trois onglets:

✔ Informations sur le lien

cet onglet permet de choisir un type de lien dans la liste déroulante (url, ancre, e-mail...):

S'il s'agit d'une URL, choisir le protocole dans la liste déroulante (http, https, ftp...) et entrer l'adresse de l'url dans la zone de texte marquée "url".

Si le lien pointe sur un document, cliquer sur le bouton "explorer

Alkante /28


le serveur" pour charger le document.

S'il s'agit d'une ancre de page, l'utilisateur est invité à sélectionner l'ancre (qu'il aura au préalable inséré dans sa page grâce au bouton ajouter/modifier une ancre).

S'il s'agit d'un lien sur une autre page éditoriale contenue dans la même application, l'utilisateur est invité à choisir cette page dans l'arborescence.

S'il s'agit d'un e-mail, la fenêtre de configuration permet à l'utilisateur de préciser l'adresse mail, le sujet ainsi que le corps du mail. Cela implique que coté internet l'utilisateur, en cliquant sur ce lien, peut envoyer un mail à l'adresse spécifié avec le contenu prédéfini.

Alkante /28


✔ Cible

Pour des liens de type url, l'onglet destination permet de spécifier la fenêtre de destination du lien (ouverture du lien dans la même fenêtre,dans la fenêtre mère, dans une nouvelle fenêtre...).

✔ Avancé

L'onglet "avancé" permet d'appliquer un style particulier au lien (nom, texte en info bulle, type de mise en forme...)

Supprimer lien

ajouter/modifier une ancre.

Positionner le curseur à l'endroit où l'ancre doit être insérée. Insérer une ancre permettra de créer un lien dans la page qui se positionnera au niveau de l'ancre.

Une fenêtre popup permet d'entrer le nom de l'ancre (doit être unique dans la page).

Alkante /28


Ajouter/modifier une image

Les images sont gérées à travers une fenêtre popup qui présente troisonglets :

✔ Information sur l'image: c'est l'onglet principal qui propose les rubriques suivantes:

- URL: pour saisir l'url de l'image (ou la rentrer automatiquement en cliquant sur "Explorer le serveur" et en chargeant l'image)

- Texte de remplacement au cas où l'image ne s'affiche pas dans le navigateur, saisir dans cette case le texte qui apparaîtra.

- Largeur/hauteur de l'image en pixels : l'utilisateur peut conserver les proportions de l'image (en cliquant sur ) ou garder la taille de

l'image d'origine (en cliquant sur )

- Bordure pour associer une bordure à l'image.

- Espacement vertical et horizontal (en pixels) entre l'image et letexte.

- Alignement : propose un type d'alignement de l'image dans le paragraphe (à gauche ou à droite)

Une fenêtre de prévisualisation permet de générer l'aperçu.

✔ Lien: Cet onglet permet d'associer un lien à une image en entrant une URL ou en pointant vers un élément sur le serveur. Il est possible de préciser le mode d'ouverture (mêmefenêtre, nouvelle fenêtre) du lien (liste déroulante "target")

Alkante /28


✔ Avancé: cet onglet "avancé" permet d'appliquer un style particulier à l'image (nom, texte en info bulle, type de mise en forme...)

Insérer un tableau: Cet onglet permet d'insérer des tableaux à la mise en forme.

• Onglet « Propriétés du tableau » :

Alkante /28


– Lignes/colonnes pour préciser le nombre de lignes et de colonnes du tableau

– Largeur/hauteur pour préciser les largeur et hauteur du tableau (en pixels par défaut ou choisir l'unité à partir de la liste déroulante. En pourcentage, permet de donner une taille relative par rapport à la page)

– En-tête : permet d'insérer une ligne et/ou colonne de titre

– Taille de la bordure permet de définir la taille du trait de la bordure du tableau. Pour garder une homogénéité des pages webs, ce paramètre peut être ignoré afin d'avoir un même style pour tous les tableau

– Alignement du contenu (gauche, droite, centré)

– Espacement des cellules entre elles et par rapport aux bordures du tableau

– Marge interne des cellules par rapport à leur contenu

– Titre/résumé: descriptif du tableau

• Onglet « Avancé » : permet de définir le style du tableau par des balises html ainsi que le sens de l'écriture dans les cellules.

Un clic droit sur un tableau ouvre un menu donnant accès à des fonctionnalités de gestion du tableau (suppression, modification, propriétés, gestion des lignes et des colonnes, …).

Permet d'insérer une ligne horizontale comme séparateur de texte

Permet d'accéder à une bibliothèque « émoticône »

Insérer un caractère spécial: une fenêtre popup permet de sélectionner le caractère à insérer par simple clic

Alkante /28


la possibilité d'accéder au code source.

Ce bouton ouvre une page contenant le code html de la page en active.

Des modifications peuvent être apportées à la page directement àpartir de cette fenêtre. Cliquer sur "OK" pour prendre en compte les modifications ou sur "Annuler" sinon.

Chargement d'un document ou image

Des outils de téléchargement permettent de charger des fichiers sur un serveur pour ensuite les associer sous forme de lien au contenu de la page.

Illustration 12: Organisation des dossiers sur le serveur

Alkante /28


• Le bouton « Nouveau dossier » permet de créer un nouveau dossier dans l'arborescence qui est visible à gauche de la fenêtre.

• Après avoir sélectionné un document (image, vidéo, document pdf, ….), il est possible de la sélectionner (pour l'insérer dans une page éditriale par exemple), de la télécharger sur son poste, dela renommer, de la supprimer ou d'accéder à au dossier parent.

• Pour ajouter un nouveau document sur le serveur , il suffit de le chercher sur son poste avec le bouton « Parcourir » et de cliquer ensuite sur « Télécharger » pour le transférer vers le serveur. Si ledocument téléchargé est une image alors elle sera déclinée sur le serveur en 5 tailles différentes ( taille initiale, large, medium, small, xsmall).

Alkante /28


Ajout d'une image et sa visualisation en plus grand (lightbox)

Cette fonctionnalité permet d'ajouter une image et de pouvoir la visualiser en plus grand (diaporama) coté site.

• Dans l'éditeur Insérer l'image (dans sa version de petite taille) qui doit être disponible sur le serveur

via le bouton

• Ajouter un lien sur l'image en utilisant le bouton et en pointant sur la même image (ou une autre) sur le serveur dans une version de plus grande taille.

Dans l'onglet avancé mettre dans le champ classes et feuilles de style « lightbox » comme illustré ci-dessous

Alkante /28

Illustration 14: Lien vers une image sur le serveur


Déroulement général : Comment ajouter une nouvelle page éditoriale

• Sélectionner l'application gestion éditoriale

• Se mettre au niveau de la page mère

• Créer la page fille

• Ne pas oublier de cocher la case « visible dans le menu » pour qu'elle soit visible dans l'arborescence du site (menu et plan du site)

• Associer le type de page et le modèle en cohérence avec le reste du site

• Ajouter les différents blocs, les alimenter, les organiser, ….

• Afficher l'aperçu

• Publier la page

Alkante /28

Illustration 15: Définition du style « lightbox »

guide d'utilisation de l'application 'gestion éditoriale'€¦ · la création...

Documents