Documentation utilisateur Support Rédacteur/Publicateur. Kit de Publication

Transcription

1 Kit de publication Documentation utilisateur Rédacteur / Publicateur Page 1 sur 55

2 Table des matières 1 Préambule Présentation générale du backend Fonctionnalités...5 Arborescence...6 Zone de travail...7 Fonctions de base Gestion des fichiers et des dossiers Création d'une page Ajouter une page Description de propriétés de page Création de contenu «classique» Ajouter du contenu à une page Types de contenu Copier, couper et référencer du contenu Les actualités Les événements (agenda - calendrier) Gestion des commentaires d'un internaute sur une page Activer la fonction de commentaire sur une page Valider un commentaire ajouté par un utilisateur Modifier un commentaire en cliquant sur l'icône «crayon» Diaporama d'images Contenu de type "image" Contenu de type "SmoothGallery" - répertoire de fileadmin Contenu de type "SmoothGallery" images stockées sous forme d'enregistrements images Typo Les newsletters Créer une newsletter Le contenu Envoyer et gérer les newsletters Le processus de publication, les espaces de travail, la gestion des versions le rédacteur le publicateur Remarques complémentaires Configuration du backend préférences...53 Page 2 sur 55

3 1 Préambule Le kit de publication s'administre par l'intermédiaire d'un navigateur web tel que Internet Explorer ou Firefox. Dans la suite du document, on appelle «backend» cet outil d'administration. On appelle, par opposition, «frontend» le site web vu par les internautes, c'est à dire le résultat final du site. La gestion du kit s'appuie sur trois profils utilisateurs prédéfinis : rédacteur, publicateur et administrateur. Cette documentation détaille l'utilisation du backend du kit de publication pour les profils "rédacteur" et "publicateur". Elle est complétée par la documentation administrateur pour certaines fonctionnalités plus poussées. Page 3 sur 55

4 2 Présentation générale du backend L'interface de backend se divise en 3 parties : A gauche, les différentes fonctionnalités de typo3, Au centre, l'arborescence des pages du site, A droite, la zone de travail, affichant principalement les objets qui composent une page, ses propriétés, etc. Navigation dans les fonctionnalités Arborescence du site Zone de travail Page 4 sur 55

5 2.1 Fonctionnalités Description du menu de gauche : Page : les éléments qui sont affichés dans la page. Voir : prévisualisation du résultat. Liste : les éléments de contenu qui sont stockés dans la page, mais pas forcément affichés. DirectMail : gestion des listes de diffusion des newsletters. Page Comments : gestion des commentaires. Fichiers : Ajouter/supprimer des fichiers (doc, pdf, images...). Configuration : gestion des paramètres utilisateur. Espace de travail : gestion du workflow. Aide : les aides. Dans la suite du document, on dira qu'on est en mode "liste", en mode "voir" ou en mode "page" si l'on a cliqué (bouton gauche) sur un de ces icônes. Page 5 sur 55

6 2.2 Arborescence C'est la zone où l'on peut voir l'arborescence du site et ainsi naviguer à l'intérieur (accessible en mode liste ou page). Chaque élément correspond à une page du site ou bien un dossier système dans lequel sont stockées des données utiles lors de l'affichage sur le site (actualités, événements, etc.). Rubrique Pages de la rubrique Espaces Intranet et Extranet Module Newsletter Module calendrier Page 6 sur 55

7 2.3 Zone de travail Cette zone permet de visualiser les éléments de contenu et d'effectuer les principales actions sur ceux-ci. Dans l'exemple ci contre : 2 pages et un contenu général de type en-tête. 2.4 Fonctions de base Les fonctions de base décrites ci-dessous centralisent la majeure partie des possibilités de l'interface de backend. Ces fonctions sont disponibles sur une page ou un élément de contenu (ou «contenu de page»). Vous pouvez aussi faire un «clic droit» sur une page pour accéder à certaines de ces fonctionnalités. Page 7 sur 55

8 Édition d'une page ou d'un élément de contenu Outil autorisant respectivement le copier, le couper et le coller de page ou d'élément de contenu Suppression d'une page ou d'un élément de contenu Visualisation d'une page sur le frontend Permet de descendre ou de remonter le niveau d'une page dans l'arborescence (fonction appliquée uniquement sur les pages) Permet de modifier l'ordre d'affichage des éléments de contenus composants la page (fonction appliquée uniquement sur le contenu) Déplace une page ou un élément de contenu Affiche des informations sur une page ou un élément de contenu Définit les droits d'accès sur une page Création d'une nouvelle page Création d'un nouvel élément de contenu Affichage de l'historique des changements et annulation des dernières modifications effectuées sur une page ou un élément de contenu NB : Typo3 offre un outil d'édition de contenu accessible directement depuis le frontend : le panneau d'administration. Celui-ci permet, à partir du menu «Editer» d'afficher par une icône d'ajouter, de modifier ou de supprimer du texte. les zones où il est possible Page 8 sur 55

9 3 Gestion des fichiers et des dossiers En cliquant sur "Fichiers" (dans la colonne des fonctionnalités à gauche), vous accédez à une zone qui permet : d'uploader (télécharger) des fichiers sur le serveur, de chercher et visualiser les images ou documents disponibles sur le serveur (pour les insérer dans vos pages). A gauche, l'arborescence du répertoire Fichiers. A droite, le "visualiseur". Après positionnement dans un répertoire de l'arborescence, le bouton Envoyer des fichiers permet de mettre sur le serveur de nouveaux fichiers. Vous pouvez envoyer un fichier Ou plusieurs fichiers en même temps Page 9 sur 55

10 Le bouton Nouveau permet d'ajouter de nouveaux répertoires. Vous pouvez créer un dossier Ou plusieurs dossiers en même temps Page 10 sur 55

11 4 Création d'une page 4.1 Ajouter une page Pour ajouter une nouvelle page, cliquer sur le mode page Cliquer ensuite sur l'icône d'une page dans l'arborescence selon le positionnement désiré. Le menu contextuel ci-dessous s'affiche : Cliquer sur «Nouveau». Choisir «Page (Dans)» ou «Page (Après)» selon le positionnement voulu de votre nouvelle page. ou Vous avez également la possibilité de sélectionner l'assistant (lien «Cliquez ici pour l'assistant»), qui vous guidera dans le processus de création de cette nouvelle page. Sélectionner le positionnement de votre page dans l'arborescence Page 11 sur 55

12 Sélectionner le gabarit de page (1 colonne internet, 2 colonnes égales extranet, etc.) Saisir le titre de page Terminer l'opération en cliquant sur le bouton «Enregistrer et fermer le document» Page 12 sur 55

13 4.2 Description de propriétés de page En mode «Page», cliquer sur l'icône représentée par un crayon page pour ouvrir les propriétés de votre Choix du type de page Dans le champ «Types» choisir «Avancé» dans la liste. Ce type est le type par défaut et correspondant à une page classique dans laquelle du contenu pourra être inséré Choix du gabarit de la page Il existe différents types de structure de page. Lors de l'ajout d'une page dans la section «structure de gabarit de page», il est nécessaire de choisir le type de page que l'on veut créer : Page pop up : sans logo ni bandeau, elle est utilisée par exemple pour afficher l'aide lors de l'édition des formulaires du type envoi de mail. Page colonne unique : page dont le contenu prendra toute la largeur de la page (hors menu) Page 2 colonnes : structure qui permet d'ajouter un contenu au centre de la page ( dans la première colonne), et un autre contenu à droite. Page accueil : utilisée uniquement pour les pages d'accueil des différents sites intranet / extranet et internet Remarque : L'interface propose un aperçu "image" des structures disponibles pour faciliter le choix. Page 13 sur 55

14 Il faut ensuite choisir le design pour la page dans la section «utiliser le design de gabarit»: internet, extranet, intranet Pour chaque gabarit de page, on trouve différents design de gabarits. Page newsletter : un seul gabarit spécifique (détaillé plus bas) Page pop-up : un seul gabarit disponible Page colonne unique (exemple ci-dessus) : gabarit de base (internet), vide (aucun bandeau ni habillage), extranet et internet Page 2 colonnes : mêmes choix que précédemment, mais en deux déclinaisons (deux colonnes d'égales largeur, ou en répartition 2tiers/1tier) Page d'accueil : gabarit de base ou vide Titre de page Le champ «Titre de la page» est obligatoire, il représente le titre qui sera affiché dans l'arborescence de page du backend ainsi que dans la barre de titre du navigateur (balise «title») lors de la visualisation en frontend. Cas particulier : Pour une «page 2 colonnes» afin de permettre l'affichage d'un filet sur la largeur des 2 colonnes, le titre affiché en tant que contenu doit être définit lors de la création de page, dans la section "Contenu" : Page 14 sur 55

15 Pour une "page colonne unique" le titre de la page sera définit lors de l'ajout d'un titre au premier contenu, dans la section "En-tête". Remarque : Par défaut pour chaque nouveau contenu, l'en-tête apparaîtra en frontend comme un titre. Néanmoins, ce champ peut être caché au moyen de la liste déroulante «Type» Affichage d'une page en frontend Cette propriété permet de cacher ou non la page afin qu'elle soit visible ou non par les internautes. Il est à noter qu'elle reste néanmoins visibles par les utilisateurs qui sont connectés au backend. Page 15 sur 55

16 4.2.5 Génération de PDF Dans le cadre de pages affichant des contenus «classiques» (texte, texte/images, etc.), vous avez la possibilité d'ajouter un icone pour les internautes en bas de page permettant de générer automatiquement votre page en fichier pdf. Pour cela, côté back end, éditer les propriétés de la page et cliquer sur la case à cocher «Générer un pdf» Méta données Les propriétés «Mots-clés» et «Description» permettent de renseigner des meta-données utilisées par les moteurs de recherche. NB : Le champ «mots-clés» doit contenir uniquement des mots séparés par des virgules Dates de lancement et d'arrêt Permet de définir une date de lancement et/ou un date d'arrêt à partir duquel cette page apparaîtra ou ne sera plus visible. NB : une fois validée, la page peut être corrigée en cliquant sur «éditer» Page 16 sur 55

17 4.2.8 Zone de réécriture des URL Cette zone, si elle est renseignée permettra de spécifier manuellement le nom de la page HTML affichée en frontend dans la barre d'adresse du navigateur. Si cette zone n'est pas spécifiée, la page HTML prend par défaut le nom indiqué dans la zone «Titre de page» (cf 4.4) Exemple : > Droit sur les pages en frontend Il est possible dans cette zone, de renseigner un ou plusieurs groupes d'utilisateurs afin de définir les droits de visualisation de cette page coté frontend. Cacher à la connexion : Page non visible par les utilisateurs connectés à l'intranet ou l'extranet Afficher à toutes les connexions : Page visible par les utilisateurs connectés à l'intranet ou l'extranet Groupes d'utilisateurs : Page visible uniquement pour le ou les groupes selon l'utilisateur connecté en frontend (Intranet, Extranet ou Administrateur) NB : Ces mêmes droits sont également disponibles sur chaque éléments de contenu ajoutés au pages. Page 17 sur 55

18 Autres champs disponibles Champ «Afficher le contenu de cette page à la place» Si ce champ est renseigné, la page affichera le contenu de la page spécifiée à la place du contenu éventuellement présent dans la page nouvellement créée. Champ «Contenu» Selon le gabarit choisit, ce champ permet de spécifier les éléments de contenus qui seront affichés dans la page. Dans l'exemple ci-dessus, le gabarit «2 colonnes» à été sélectionné, on retrouve donc deux champs correspondant aux éléments de contenus affichés dans la colonne de gauche et la colonne de droite. Ces éléments de contenus sont également visibles en mode «Page» NB : Ce champ sera remplit automatiquement lors de l'ajout de contenu dans la page. Présentation des éléments de contenus affichés dans la page en mode «Page» Dans l'impression d'écran ci-dessus, on retrouve l'élément de contenu «Lorem Ipsum» dans la colonne de gauche et «Tagcloud Pages» dans la colonne de droite. Page 18 sur 55

19 5 Création de contenu «classique» On appelle contenu classique, tout contenu qui n'est pas une actualité (chapitre 6) ou un événement d'agenda (chapitre 7). 5.1 Ajouter du contenu à une page Pour ajouter du contenu, cliquer sur le mode page Sélectionner ensuite sur une page dans l'arborescence Cliquer sur l'icône selon le positionnement désiré de votre nouveau contenu (colonne, avant ou après un contenu existant). Page 19 sur 55

20 Et choisir dans l'assistant le type contenu que vous désirez insérer. Page 20 sur 55

21 5.2 Types de contenu Il est possible d'ajouter à une page différents types de contenu : Titre : Permet d'ajouter uniquement un contenu titre Texte : Permet de créer un contenu de type texte simple. Image : Permet de mettre un titre, charger, positionner et dimensionner une image. Texte & Image : Permet de rassembler dans un même contenu un texte et une image. Multimédia : Permet d'ajouter du contenu multimédia de type SWF, WAV, AVI, MPG, WMV, MP3, etc. Note : Concernant les vidéos, afin d'éviter les problèmes de compatibilité poste client, il est préférable d'utiliser un formats standard web de type Flash (swf). Formulaire : Permet de créer facilement, à l'aide d'un assistant un formulaire de saisie Menu / Plan Site : Permet d'ajouter un contenu affichant dynamiquement un menu de pages avec des informations complémentaires (exemple : menu des sous-page, dernières pages mises à jour) Insérer un plugin : Différents plugins sont disponibles :«Page Comments», «SmoothGallery»... Il s'agit de fonctionnalités développées spécifiquement permettant de gérer des contenus particulier (voir chapitres spécifiques) HTML : Contenu permettant d'insérer directement du contenu HTML (exemple : vidéo issue de YouTube) Contenu flexible : bloc d'affichage de contenu Un contenu classique (texte, texte & image, image) peut également être présenté à l'intérieur d'un cadre paramétré dans la zone «Cadre». Page 21 sur 55

22 Ces différents cadres permettent d'encadrer un contenu afin de mettre en valeur une partie de votre page Exemple 1 : Texte et Images La première partie de la zone est destinée au texte et se compose de deux blocs : le bloc «En-tête» et le bloc «Texte». Bloc titre En-tête : titre de l'élément de contenu. Alignement : aligner le titre à droite, à gauche ou au centre. Type : choisir un type de titre (titre de 1 à 12 ou de type «Caché» permettant de masquer le titre). Lien : si vous désirez un titre avec un lien cliquable Date : fixer la date de publication. Page 22 sur 55

23 Bloc texte Dans ce bloc, entrez le texte de votre page. Il s'agit d'un bloc habituel de saisie avec Rich Text Editor. Annuler, refaire la dernière opération Gras, Italique Souligné Aligner à gauche, Centrer, Aligner à droite, Justifier Remarque : la césure des mots doit être réalisée manuellement. Puces et Numérotations Diminuer, Augmenter le retrait Afficher le code HTML généré par l'éditeur Couleur du texte, couleur d'arrière-plan Insérer, Supprimer un lien Insérer une image Ajouter un tableau Copier, Coller, Coller comme du texte, Coller depuis Word Ligne horizontale Style -- : Styles utilisés principalement dans les tableaux Paragraphe -- : Titres 1, 2 et 3 Police -- : Police de caractère Taille -- : Taille de la police de caractère Vous pouvez via cet éditeur, créer des documents avec des titres jusqu'au niveau 3. Pour les titres d'un niveau supérieur, il vous faudra créer un contenu de type "titre" (voir page suivante l'exemple pour un titre de niveau 4.) Page 23 sur 55

24 Exemple de contenu de type «Titre» Attention, compte tenu sa longueur fixe (titre de 4 à 12), un contenu de type titre ne peut être positionné uniquement dans une page possédant une structure : colonne unique 2 colonnes 2/3-1/3 (dans la colonne de gauche). Avertissements : A noter que cet éditeur n'est pas d'un traitement de texte de type Word : il se peut qu'il finisse par «s'embrouiller» et provoque un affichage anarchique. Dans ce cas, supprimer la partie de texte qui ne s'affiche pas correctement et reprendre le formatage. N'oubliez pas d'enregistrer souvent votre contenu : si votre connexion internet venait à s'interrompre vous perdriez tout votre travail! Astuce : Selon la résolution de l'écran de l'utilisateur, il est possible qu'un ascenseur horizontal soit affiché et gène la rédaction de contenu. Dans ce cas, il est possible de l'afficher en plein écran. Pour ce faire, cliquer sur l'icône située tout en bas du formulaire de l'élément de contenu afin de l'ouvrir une nouvelle fenêtre (affichage d'une popup sans le menu de gauche et sans l'arborescence de pages). Puis dans cette nouvelle fenêtre, étirer le RTE au moyen de l'icône située dans le coin inférieure droit de l'éditeur HTML. Page 24 sur 55

25 La deuxième partie du formulaire est dédiée à l'image. Bloc image Insérer une image, soit en parcourant le dossier "Fichiers" du backend, soit en la téléchargeant depuis votre ordinateur (voir le chapitre "gestion des fichiers". Si vous insérez plusieurs photos, vous pouvez cocher la case diaporama(voir plus bas) Si vous cliquez sur parcourir, vous pouvez choisir une image sur votre disque mais elle ne sera pas téléchargée dans le dossier «fichier». Puis définir la position de l'image par rapport au texte. Chaque position du menu déroulant est illustrée par un icone cliquable. Si votre image est trop grande, vous pouvez redéfinir sa largeur et/ou sa hauteur (en pixels). Si vous ne définissez qu'un des deux paramètres, Typo3 calcule l'autre pour garder la proportionnalité. Cocher Diaporama si vous voulez créer un diaporama. Titre : titre de l'image ou du diaporama, qui sera visible sur le site. Texte alternatif : petit texte de description destiné aux navigateurs (la balise «alt»). S'affichera si l'image n'existe plus. Text (titre) : titre de l'image destiné aux navigateurs (la balise «title»). Affiche une infobulle quand on passe la souris sur l'image Ces infos sont très utiles pour les personnes malvoyantes ou utilisant un lecteur vocal, ou encore les personnes naviguant sans afficher les images. Page 25 sur 55

26 5.2.2 Exemple 2 : Multimédia Cet exemple permet d'afficher du contenu multimédia de différents formats (vidéo, audio). La propriété «Paramètres» permet par exemple de redimensionner le contenu en hauteur et en largeur (nombre de pixels). NB : Vous pouvez également insérer une vidéo issue de youtube en insérant un élément de contenu de type html (voir exemple fourni avec le kit) Exemple 3 : Formulaire A. Le bloc titre est identique à celui de l'exemple 1. B. La zone configuration vous permet de créer/visualiser votre formulaire en langage typoscript. Pour créer votre formulaire sans utiliser ce langage, vous avez la possibilité d'utiliser l'assistant de formulaire. Pour ce faire, cliquez sur l'icone Grâce à cet assistant, vous pouvez créer vos formulaires pas à pas, en insérant des champs au fur et à mesure. Page 26 sur 55

27 Chaque bloc (encadré rouge) représente un élément du formulaire. Type de l'élément Type vous permet de choisir quel type de champ vous souhaitez insérer. Les différents types de champs sont accessibles par menu déroulant. Étiquette : le «label» du champ, tel qu'il apparaîtra en frontend. Obligatoire : cocher si l'on désire que le champ ne puisse rester vide. Configuration détaillée Cette zone vous permet de paramétrer les différents champs : items des listes déroulantes, valeurs par défaut, longueur des champs et taille max des réponses, etc... Menu A droite de chaque bloc se trouve un menu qui vous permet de déplacer, supprimer ou ajouter des champs. Le bouton détaillée. + permet de valider le champs en cours et fait ainsi apparaître la configuration Page 27 sur 55

28 Configuration spéciale de courrier Cette dernière partie, en dessous blocs correspondant à chaque champ, permet de configurer la forme de l' réponse. Étiquette bouton d'envoi : "label" du bouton "valider". Mode HTML activé : si vous voulez envoyer le mail au format html (sinon, mail format texte plus universel). C. La zone "aller à la page" : Cette zone permet de rediriger l'utilisateur vers une page, après validation du formulaire. Idéalement, une page avec un contenu texte («Merci de votre contribution»...) D. L' destinataire C'est la zone ou vous devez indiquer l'adresse de la personne qui recevra les réponses du formulaire. Si vous avez déjà rempli cette zone à l'étape B (configuration spéciale de courrier), cette zone sera remplie déjà préremplie. NB : la réponse aux formulaires n'est pas stockée dans une base de données. Elle est simplement envoyée par mail Contenu flexible Dans le kit de publication, il s'agit d'un élément graphique permettant l'insertion d'un bloc dans lequel on pourra préciser le ou les contenus affichés à l'intérieur. Page 28 sur 55

29 Dans cet exemple le contenu flexible «L'agriculture» situé dans la colonne de droite, contient 2 éléments de contenus de type Texte : «contenu l'agriculture» et «suite 2». Le formulaire correspondant au contenu flexible utilise l'objet de gabarit «Bloc contenu». Le champ «contenu» précise les éléments de contenu qui seront affichés dans ce bloc. Le champ «en-tête» sert à préciser le titre affiché dans le bloc en frontend. Page 29 sur 55

30 Le bloc «contenu» permet l'affichage suivant en frontend : Note : Ce type de contenu flexible permet également d'afficher les actualités en page d'accueil (Objet «bloc actualité» Contenus multilangues Création d'une traduction En mode "Page", cliquer sur la page dont vous souhaitez prévoir la traduction dans l'arborescence Cliquer sur l'onglet "Vue de localisation" et dans le menu déroulant choisir la langue Un formulaire est alors affiché, intitulé : Page 30 sur 55

31 Saisissez le titre de la page en anglais (le titre original est affiché en vert) La page se recharge en proposant cette fois-ci de traduire chacun des éléments de contenu "Créer une copie pour la traduction (English)" copie le contenu en préfixant le titre et le texte par [Translate to English:]. (à modifier lors de la traduction) Il ne reste plus qu'à éditer ce nouveau contenu! Pour aider le rédacteur, le contenu original est affiché en vert sous chaque zone du formulaire Naviguer sur le site web vers la page traduite et cliquer sur le drapeau anglais. (Ces derniers doivent être activés, voir documentation d'installation) NB: si aucun contenu anglais n'existe, le site affiche la version française du site par défaut. Page 31 sur 55

32 Modification / suppression d'une traduction L'action «Créer une copie pour la traduction (English)» crée un nouveau contenu sur la page. Pour le manipuler, passez en mode "Liste" Vous pouvez alors le supprimer en cliquant sur la corbeille 5.3 ou le modifier en l'éditant Copier, couper et référencer du contenu Il faut distinguer 3 notions importantes lors de la manipulation d'élément de contenus dans Typo3 : la copie de contenu (copier) le déplacement de contenu le référencement (coller) (référencer) La copie de contenu permet comme son nom l'indique de copier un élément de contenu et de le coller dans une autre page. Le déplacement de contenu s'effectue en coupant un contenu dans une page et et en le collant dans une autre page. Par contre, le référencement permet d'afficher un même contenu dans plusieurs pages. Dans ce cas, après modification d'un élément contenu référencé dans plusieurs pages, cet élément apparaitra avec les dernières modifications dans l'ensemble des pages ou il a été référencé. Après avoir copié, collé ou créé une référence, il faut coller l'élément de contenu en se plaçant en mode page et en cliquant sur l'icône «coller» selon le positionnement désiré (colonne gauche, droite, avant ou après un contenu existant) Page 32 sur 55

33 Dans l'exemple ci-dessus, le contenu «Bloc troisième niveau» est référencé (absence d'icône pour éditer le contenu et titre en italique + surligné de gris) contrairement à l'élément «contenu sous page 1» qui est stocké et affiché dans cette page. De même, un référence est crée sur l'élément «contenu sous page 1» pour être par la suite coller dans la même page ou dans une autre page. Page 33 sur 55

34 6 Les actualités Les actualités sont un type de contenu particulier, géré par un plugin associé qui permet leur affichage de manière automatique sur le frontend. Pour le kit de publication, les trois actualités les plus récentes sont affichées au sein des pages d'accueil inter intra ou extranet. En mode liste, cliquer sur extranet ou intranet). (disponible dans l'arborescence du site internet, L'interface affiche les actualités disponibles sur le site. Pour ajouter une nouvelle actualité, cliquer sur l'icône. Un formulaire de saisie avec 3 onglets (Général, Relations et Extra Fields) permet d'enregistrer une nouvelle actualité. Onglet Général Définir un titre pour l'actualité, ainsi qu'un teaser (ou chapeau qui s'affichera en page d'accueil, avec un lien pour voir l'actualité en entier). Facultatif : Lancement : permet de définir une date de publication postérieure. Arrêt : permet de définir une limite de validité de l'actualité. Auteur et précise le nom de l'auteur de l'actualité ainsi que son . Page 34 sur 55

35 Puis le texte de l'actualité, et les mots clés (utilisés par le moteur de recherche ou le nuage de mots clés). Onglet Relations Permet de définir une image qui sera placée à gauche de l'actualité. Titre : s'affiche en dessous de l'image en frontend Alttext : s'affichera si l'image n'existe plus Titletext : affiche une infobulle quand on passe la souris sur l'image Page 35 sur 55

36 Onglet extra fields Cet onglet permet de définir les droits en visualisation frontend sur cette actualité. Cacher à la connexion : Actualité non visible par les utilisateurs connectés à l'intranet ou l'extranet Afficher à toutes les connexions : Actualité visible par les utilisateurs connectés à l'intranet ou l'extranet Afficher uniquement pour le ou les groupes selon l'utilisateur qui est connecté en frontend (Intranet, Extranet ou Administrateur) Page 36 sur 55

37 7 Les événements (agenda - calendrier) Dans le frontend, les événements apparaissent soit sous la forme d'une liste (exemple en page d'accueil du site internet) soit sous forme de mini-calendrier (exemple en page d'accueil du site intranet). Le paramétrage de cet affichage est expliqué dans la documentation administrateur. Pour créer un nouvel événement : En mode Liste, cliquer sur Calendriers en bas de l'arborescence. L'interface affiche la liste des événement déjà saisis. Cliquer ensuite sur (créer un nouvel enregistrement). L'interface affiche alors une page avec différents onglets à renseigner. Onglet Général Renseigner un Titre, ainsi que les dates de début et de fin de l'évènement. Page 37 sur 55

38 Par défaut, l'évènement est affecté au calendrier Extranet. Vous avez la possibilité de l'affecter à un autre calendrier (Internet, Intranet).Définir ensuite la Catégorie d'évènement (Divers, Extranet, Formation, Réunion externe, Réunion interne). Puis le texte l'événement. descriptif de Onglet Fréquence Permet de définir si l'événement est périodique (répétition quotidienne, hebdomadaire, mensuelle, annuelle) ou unique (aucune). Page 38 sur 55

39 Onglet Lieu Permet de définir le lieu de l'évènement, et éventuellement un lien vers une page. Onglet Organisateur Permet de préciser qui organise l'évènement. Onglet Fichier Permet de renseigner un ou plusieurs fichiers attachés à l'événement. Onglet Autre Propriétés non accessible en connexion rédacteur/publicateur. Page 39 sur 55

40 8 Gestion des commentaires d'un internaute sur une page Ce plugin permet de créer sur une page du frontend un contenu de type «Commentaire» : les utilisateurs connectés peuvent laisser un message sur la page. Le commentaire est validé par un administrateur pour qu'il soit affiché sur la page. 8.1 Activer la fonction de commentaire sur une page Pour ajouter ce contenu dans une page, ajouter un élément de contenu de type «Insérer un plugin» et choisir dans la zone plugin «Page Comments» dans la liste déroulante. Sur le site, les utilisateurs connectés peuvent alors saisir des commentaires. 8.2 Valider un commentaire ajouté par un utilisateur Pour valider un commentaire ajouté par un utilisateur, cliquer sur dans le menu de gauche du backend (cliquer éventuellement une deuxième fois pour afficher l'ensemble des commentaires toutes pages confondues : varie selon votre positionnement dans le menu). Page 40 sur 55

41 La liste des commentaires s'affiche avec l'identifiant de la page. Fonctions d'édition (modifier, masquer, supprimer) Début du commentaire Nom du publicateur Date de publication du commentaire État du commentaire et ID de la page ou il est publié Pour voir les commentaires d'une page spécifique, il suffit de la sélectionner dans l' arborescence, dans la partie centrale du backend. L'icône indique que le commentaire est en ligne, l'icône pour passer d'un statut à l'autre. 8.3 indique qu'il est masqué. Faire un clic sur Modifier un commentaire en cliquant sur l'icône «crayon» Vous pouvez modifier tous les champs du commentaire : Nom, , url et le commentaire en lui même. Vous avez aussi la possibilité de masquer le commentaire (la case à cocher «Cacher»). Page 41 sur 55

42 9 Diaporama d'images Vous avez trois possibilités pour insérer un diaporama d'image dans votre site : dans un contenu de type image ou texte et image un utilisant le plugin SmoothGallery : - par la lecture d'un répertoire présent dans l'arborescence sous le répertoire fileadmin, - par le biais d'enregistrements images 9.1 Contenu de type "image" Dans un contenu de type «texte et image» ou «image», dans la zone image, vous pouvez insérer plusieurs images et en cochant la case «diaporama», Typo3 générera un diaporama automatiquement. (voir 5.2.1) 9.2 Contenu de type "SmoothGallery" - répertoire de fileadmin Pour utiliser cette fonctionnalité, il faut ajouter un contenu de type «Insérer un plugin» et choisir «SmoothGallery» dans la liste. La lecture d'un répertoire permet d'afficher l'ensemble des images contenues dans le chemin spécifié dans le paramétrage. Ces images sont affichées dans l'ordre alphanumérique des descriptions. Sélectionner «Images depuis un répertoire» dans le champ «Mode», puis remplir les différents champs proposés. Page 42 sur 55

43 Durée diaporama (ms) : temps d'affichage de l'image (en milliseconde) avant le passage à l'image suivante. Chemin du répertoire : chemin dans votre système de fichiers, dans lequel sont stockés vos images. Description : Description de chaque images affichées en frontend (une description par ligne et par image par rapport à l'ordre d'affichage) Largeur / hauteur des images : Largeur / hauteur des images affichées en frontend Largeur / hauteur de l'afficheur : Largeur / hauteur des images affichées lors du clic sur l'image en frontend 9.3 Contenu de type "SmoothGallery" images stockées sous forme d'enregistrements images Typo3 Cette façon de faire permet une plus grande souplesse dans l'ordre d'apparition et la possibilité d'avoir une description pour chaque image. Elle est cependant plus longue à mettre en œuvre. Ce mode permet d'afficher vos images stockées sous la forme d'enregistrements Typo3. Il faut dans ce cas créer autant d'enregistrements de type «smoothgallery Image» qu'il y a d'images à afficher Création des enregistrements «smoothgallery Image» Cette fonction n'est accessible qu'au publicateur, dans l'espace de travail LIVE (voir partie 11). Dans l'arborescence, au milieu de l'écran, il faut se positionner sur la page sur laquelle on veut ajouter ce diaporama, faire un clic droit et choisir «nouveau». Dans la liste des nouveaux enregistrements, choisir Puis renseigner les différents champs et enregistrer Titre : Titre de votre image affichée Description : Description de votre image Image : indiquer le chemin d'accès de l'image à afficher Page 43 sur 55

44 Une fois cette première image enregistrée, passez en mode liste de votre page. Pour ajouter une nouvelle image, cliquer sur (à côté de titre). Renouveler ces opérations pour toutes les images à afficher dans le diaporama. Vous pouvez ensuite utiliser les boutons de déplacement pour changer l'ordre d'apparition des photos Affichage sur le frontend de ces enregistrements «smoothgallery Image» Dans la page où vous voulez ajouter le diaporama, il faut maintenant créer un contenu de type «insérer un plugin» et dans la zone plugin choisir «smoothgallery». Sélectionner ensuite «Images depuis un enregistrement» dans le champ «Mode» et remplir les champs ci-dessous. Durée diaporama (ms) : temps d'affichage de l'image (en milliseconde) avant le passage à l'image suivante. Point d'entrée : page dans laquelle vos images sont stockées Largeur / hauteur des images : Largeur / hauteur des images affichées en frontend Largeur / hauteur de l'afficheur : Largeur / hauteur des images affichées lors du clic sur l'image en frontend Page 44 sur 55

45 10 Les newsletters 10.1 Créer une newsletter Passer en mode Liste et se positionner sur le dossier newsletter de l'arborescence. Nous avons alors une vue des différentes pages (newsletters) déjà existantes ainsi que les listes de diffusions déjà crées (qui nous seront utiles plus loin). 2- Pour créer une nouvelle newsletter, cliquer sur l icône avec le plus après Titre de la page 1- En mode Liste, cliquer sur le répertoire Newsletters dans l arborescence. Une nouvelle page apparaît. 3- Décocher la case destinée à cacher la page 4- Dans Type, sélectionner Directmail Page 45 sur 55

46 Le message suivant apparaît. Cliquer sur OK. Après rechargement du formulaire, vous pouvez donner un nom à votre newsletter, en remplissant la zone Titre de la page. Il est conseillé de spécifier le Nom de l émetteur ainsi que son adresse. Il faut ensuite choisir les destinataires de cette newsletter dans la partie Receveurs réels. Page 46 sur 55

47 Une fenêtre s ouvre. Vous pouvez à ce moment choisir à quelle liste de diffusion vous souhaitez envoyer cette newsletter. Pour cela, il suffit de parcourir l'arborescence et vous positionner sur le dossier newsletter et, dans un deuxième temps, de cliquer sur celle de votre choix. Faire de même pour Receveurs de tests, en choisissant cette fois-ci la liste prévue à cet effet. Il est possible de joindre un document, ainsi que de définir une date d'envoi. Une fois ceci réalisé, faites «Enregistrer et fermer le document». Votre newsletter apparaît alors dans la liste des Pages. Sélectionnez votre newsletter, et passez en mode Page pour remplir le contenu, comme n'importe quel page. Page 47 sur 55

48 10.2 Le contenu Il y a deux possibilités pour créer du contenu dans une newsletter : soit on incorpore le contenu d une page déjà existante du site, soit on créé de toute pièce le contenu. Dans le premier cas, il faut chercher la page en question en cliquant sur : Une fenêtre s ouvre et il vous faut ensuite sélectionner la page souhaitée en cliquant sur cette page dans l arborescence. Si l on veut ajouter du contenu de la deuxième manière, il faut valider cet enregistrement, puis passer en mode Page. L ajout de contenu se fait alors de la même manière que pour un ajout de contenu classique. Cela pourra être par exemple des copier coller de différentes parties du site. NB : c'est de cette manière qu'on pourra envoyer automatiquement les nouvelles du site (voir exemple fournit avec le kit). Page 48 sur 55

49 10.3 Envoyer et gérer les newsletters Pour faire valider cette newsletter, le rédacteur doit se rendre dans l Espace de travail (dans le menu de gauche des fonctionnalités) et demander la validation. Le publicateur doit passer par l'espace de travail pour valider le travail du rédacteur (cf chapitre 10). Il peut également envoyer et gérer la newsletter. Sélectionner la newsletter dans l'arborescence et passer en mode DirectMail. En haut à droite de la zone de travail, un menu déroulant propose plusieurs fonctionnalités. "Statut" donne les données relatives aux statuts des destinataires réels et des destinataires de test. Vous avez la possibilité depuis ce panneau : - d'envoyer le courrier directement (attention, ne cliquer qu'une seule fois) - ou d'envoyer un courrier de test aux utilisateurs définis dans la liste de diffusion et précisés en tant que «Receveurs de test» "Statistiques" fournit les statistiques sur les envois : dates, destinataires... "Validité du courrier" Typo3 vous donne un diagnostic sur la validité du code généré pour la newsletter, ainsi que des conseils d'amélioration. "Prévisualisation" donne un aperçu des conditions d'envoi de la newsletter (format d'envoi, liste de diffusion). Page 49 sur 55

50 Vous avez également la possibilité de programmer l'envoi de votre newsletter à une date et heure précise en renseignant celle-ci dans le champ «Date de l'envoi» présent dans les propriétés de votre page newsletter. Dans cet exemple, la newsletter sera envoyée automatiquement le 21 octobre à 20h. NB : Ce champ date est automatiquement renseigné avec la date et heure du jour lors du clic sur le bouton La date présente dans ce champ sera affichée automatiquement (à la place du 1/1/1970) dans la newsletter après envoi. Page 50 sur 55

51 11 Le processus de publication, les espaces de travail, la gestion des versions Le kit de publication permet de gérer différents acteurs dans la chaîne de publication. Le Rédacteur ne peut pas publier directement un article ou une modification. Il doit soumettre ses modifications à validation par un Publicateur. Celui-ci sera notifié de la demande, et acceptera ou non les évolutions des articles. Deux espaces de travail permettent de gérer les processus de publication : l'espace de travail "[1] Espace rédacteur" : accessible par défaut au rédacteur. Des règles s'appliquent pour tout changement effectué dans le backend : les changements n'affecteront pas directement le site web, la gestion des versions est transparente. Une nouvelle version sera automatiquement créée et attachée à l'espace de travail lors de l'édition de pages ou de contenus. La navigation sur le site se fera avec les données de l'espace de travail rédacteur : les changements seront visibles uniquement pour l'utilisateur connecté sur cet espace de travail l'"espace de travail LIVE" : accessible au publicateur. Tout changement sera automatiquement répercuté sur le site Le processus de mise à jour peut donc être imaginé comme suit : 11.1 le rédacteur Il travaille dans «l'espace rédacteur» sur lequel il est connecté par défaut et n'a pas accès à "l'espace live". Il créé, modifie ou supprime un contenu. Se positionner en mode Page. Cliquer sur l'onglet Gestion des versions. C'est en travaillant sur une nouvelle version de la page, et non en modifiant directement celle-ci, que le rédacteur propose ses contributions. Afin de faire des modifications, cliquer sur Nouvelle version de page. Page 51 sur 55

52 Ajouter ou modifier du contenu, comme vu dans les chapitres précédents (exemple ici : ajout d'un élément de texte appelé "essai") Le rédacteur peut visualiser son travail en cliquant sur la loupe Si le résultat convient, il peut envoyer les modifications au publicateur / valideur via l'un de ces deux boutons. A l'ouverture de la petite fenêtre, remplir le champ de commentaire pour signaler la nature de la modification au publicateur. Page 52 sur 55

53 NB : Ces étapes peuvent être effectuées, sans prévisualiser, en quittant le mode Page et en passant en mode Espace de Travail (dans la colonne des fonctionnalités de gauche), puis onglet Validation et Publication. Dans l'exemple ci-dessous la mention "en cours de validation" apparaît en bleu car la demande a déjà été faite avec la méthode précédente le publicateur Le publicateur reçoit un mail qui l'invite à se rendre dans typo 3 pour valider une contribution Il se connecte et passe en mode "Espace de Travail". Dans l'onglet Validation et Publication, ouvrir le menu déroulant, et passer en Espace rédacteur. Zone de validation (cf schéma suivant) Ceci permet de voir les notifications envoyées par les rédacteurs. Pages modifiées Au survol de la zone Etape, apparaîssent les infos du rédacteur : heure de modif, commentaire Page 53 sur 55

54 La zone de validation permet au publicateur de mettre en ligne le contenu : Echanger : publier la modif à la place de la page en cours, mais en la gardant intacte non publiée (en vue d'un nouvel echange par exemple) Montrer les logs : voir l'historique des modifications Editer la page : modifier le contenu Mettre en ligne : publier les modifications NB : si le rédacteur a demandé la validation d'un contenu, il a toujours la possibilité de modifier à nouveau son contenu mais il ne peux pas l'envoyer pour publication tant qu'il n'a pas été refusé ou publié. Si le publicateur travaille directement dans l'espace de travail rédacteur, il peut directement publier son contenu Remarques complémentaires Code couleur dans l'arborescence de pages page sélectionnée nouvelle version de page en cours nouvelle page Page 54 sur 55

55 12 Configuration du backend préférences Cette zone permet à chaque Publicateur ou Rédacteur de configurer le backend selon ses préférences. Démarrage Pour configurer l'aspect du backend (position du menu, backend réduit...) Fonctions avancées Pour activer les créations et suppressions récursives (à manier avec précaution) Editer Pour configurer les options d'édition (activation du Rich Text Editor, upload...) Données Personnelles Pour configurer ses données personnelles : nom, , mot de passe. Page 55 sur 55