L'objectif de ce document est de vous présenter avec quelle facilité vous pouvez éditer les contenus de votre site avec Typo3.
Dans un premier temps nous vous présenterons succinctement l'environnement technique propre à cet outil de gestion de contenu.
Nous verrons ensuite comment accomplir les tâches les plus courantes (éditions de contenu, ajout de pages, ...)
Ce document est un mémo diffusé après une formation réalisée par Oblady, il ne remplace bien sûr pas la lecture de la documentation officielle sur le site Typo3.org, il permet par contre une prise en main rapide de l'outil.
1. Qu'est-ce que Typo3 ?
Typo3 est ce qu'on appelle un logiciel de gestion de contenu, c'est-à-dire un programme fonctionnant sur un serveur Web et permettant de mettre facilement à jour les pages de votre site Internet. L'objectif étant bien sûr de gagner en réactivité en s'épargnant une tâche fastidieuse.
Bien que vous n'ayez pas besoin de connaître tous les rouages techniques de Typo3, il est bon d'avoir à l'esprit l'architecture technique sur laquelle il est bâti.
Comme vous pouvez le voir ci-dessus, Typo3 fonctionne selon le grand principe de tous les moteurs de gestion de contenu, les données de type texte sont stockées dans une base de données (ici MySQL, produit open source) et les pages sont générées à la volée, c'est-à-dire lorsqu'un internaute les demande.
Les pages HTML délivrées à l'utilisateur final correspondent à la fusion entre :
- les données stockées en base,
- les modèles de pages fournis à la livraison de votre site,
- les images stockées sur le serveur.
C'est ce que l'on nomme des
pages dynamiques par opposition aux pages de première génération dites
statiques.
2. En pratique, la connexion
Une fois ces notions théoriques abordées voyons comment cela se passe dans la pratique.
La première étape consiste à saisir un contenu pour l'afficher sur le site.
La gestion des contenus à l'intérieur de Typo3 s'opère directement sur le site Web à travers une interface sécurisée où vous vous connectez avec votre identifiant et votre mot de passe fournis à la livraison du site.
Attention : l'adresse ainsi que l'identifiant et le mot de passe sont sensibles à la casse et chaque caractère compte, en cas d'erreur de connexion vérifiez bien votre saisieUne fois que vous êtes connecté avec ces informations vous arrivez sur ce que l'on appelle le BackEnd, en bon français « l'arrière-boutique », généralement traduit par « console d'administration » ; c'est ce dernier terme que nous nous efforcerons donc d'utiliser.
3. Interface
Vous êtes maintenant connectés à l'interface d'administration de Typo3, vous pouvez bien sûr éditer les textes directement depuis le site public grâce aux petites icônes de stylos figurant en bord de chaque texte, nous y reviendrons.
Voyons tout d'abord comment se compose l'interface de Typo3.
Dans la colonne numéro 1, vous choisissez votre mode d'affichage :
Le mode «
Page », le plus courant, vous permet d'afficher dans la fenêtre numéro 3 une liste des contenus de la page sélectionnée dans la fenêtre 2. Dans ce modèle il vous suffit de cliquer sur le bloc de texte situé dans la fenêtre numéro 3 pour l'éditer directement.
Le mode «
Voir » vous permet de visualiser le rendu final de votre site dans la fenêtre numéro 3.
Le mode «
Liste » affiche tous les éléments situés à ce niveau de l'arborescence (pages, contenus de pages, éléments spéciaux); la liste apparaît dans la fenêtre numéro 3.
Le mode «
Info » permet d'afficher les caractéristiques de chaque page : droit d'accès, cible, date de création...
Le mode «
Fichiers » vous permet de parcourir la liste des fichiers présents dans votre site (à la façon d'un explorateur de fichiers classique), et d'accéder aux différents outils d'administration de ces fichiers.
La fenêtre numéro 2 représente l'arborescence de votre site Internet. Les icônes plus à gauche des titres permettent de déplier ou de replier les rubriques et les sous-rubriques.
Vous pouvez accéder à la plupart des fonctions d'édition depuis cette arborescence.
En cliquant une fois sur l'icône représentant la page vous voyez apparaître un menu supplémentaire.
Cette interface vous paraît peut-être complexe mais vous prendrez rapidement l'habitude d'utiliser cet outil d'édition. D'autre part pour les tâches les plus courantes, vous utiliserez plutôt le mode édition « FrontEnd »
4. Edition FrontEnd
Le mode d'édition dit « FrontEnd » est la façon la plus simple d'éditer les contenus de votre site.
1. Vous vous connectez en entrant votre nom d'utilisateur et votre mot de passe,
2. Vous revenez sur le site public et vous disposez des « stylos » pour éditer les textes directement en ligne
5. Ajout d'une page
Pour ajouter une page, vous allez revenir sur l’interface d’administration du départ.
Dans la fenêtre numéro 2, cliquez sur la rubrique dans laquelle vous voulez ajouter une page.
Le menu contextuel apparaît :
Choisissez l'élément nouveau; dans la fenêtre numéro 3, vous pouvez choisir le type de contenu à ajouter. Pour notre exemple, nous choisissons l'option « Page »
Comme vous le voyez dans l'illustration ci-dessus vous pouvez choisir si la nouvelle page doit être créée à l'intérieur de la rubrique désignée (« Page (Dans) ») ou à la suite de la rubrique (ou des pages) désignée (« Page (Après) »).
Dans la fenêtre numéro 3, vous pouvez maintenant configurer cette nouvelle page, comme vous le voyez dans l'illustration ci-dessous : la page lors de sa création est par défaut en mode caché.
Pour que cette page soit visible par tous les visiteurs du site, il suffit de décocher cette case.
Saisissez le titre de la nouvelle page (les champs précédés d’un point d’exclamation sur fond jaune doivent être obligatoirement rempli).
Appuyez ensuite sur l'un des boutons d'enregistrement (icône disquette); la nouvelle page apparaît immédiatement dans l'arborescence de la fenêtre 2.
6. Ajout d'un contenu dans cette page
Vous avez donc maintenant une page prête à l'emploi. Lorsque vous visualisez cette page côté site public ou dans l'interface d'administration, cette page est vide : il faut lui ajouter un contenu.
Dans l'arborescence située dans la fenêtre 2, cliquez sur l'icône de la page que vous venez d'ajouter; le menu contextuel apparaît : choisissez « Nouveau », et dans la fenêtre numéro 3, choisissez cette fois-ci « Contenu de la page » (vous pouvez aussi ajouter du contenu de page en cliquant directement sur l’icône « + » se trouvant dans la fenêtre 3).
Dans la fenêtre numéro 3, sélectionnez le type d'élément de contenu voulu.
L
es contenus typiques : Un élément texte régulier avec un champs qui peut contenir un certain nombre d'images positionnées en dessous.
Texte avec image en dessous
Un élément texte régulier avec un champs qui peut contenir un certain nombre d'images positionnées en dessous.
Texte avec une image à droite
Comme le précédent mais l'image est habillée de texte et se trouve sur la droite.
Liste d'images aligné en colonnes et en lignes avec titre.
Une simple liste à puces.
Les éléments spéciaux : Fait une liste de fichiers à télécharger.
Crée un plan du site.
Les formulaires :
Formulaire d'identification
Formulaire de connexion/déconnexion pour les utilisateurs website. C'est utilisé pour protéger certaines pages par mot de passe. Vous devez créer des utilisateurs et des groupes website pour que ceci fonctionne.
Les plugins : Si vous voulez insérer un plugin qui ne se trouve pas dans la liste ci-dessous, sélectionnez ce plugin, en attendant de pouvoir choisir (dans une liste déroulante) votre plugin spécifique.
Système de News versatiles pour Typo3.
Module de type livre d'or.
Crée des sondages et collecte les réponses des questions que vous destinez à vos visiteurs.
Formulaire d'identification avancé
Ajouter un formulaire d'identification dans la page (avancée)
7. Déplacer une page
Vous souhaitez maintenant déplacer une page dans l'arborescence du site. Il y a deux manières de procéder : au moyen du menu contextuel ou bien d'un glisser-déposer.
7.1 Mode ‘Classique’
Cliquez sur l'icône de la page que vous voulez déplacer, le menu contextuel apparaît :
Dans ce menu cliquez sur « Plus d'options » : un second menu contextuel vous propose désormais de déplacer cette page.
Dans la fenêtre numéro 3, vous n'avez plus qu'à choisir la nouvelle position pour cette page. Dans l'arborescence de la fenêtre numéro 2, vous voyez alors la page apparaître à sa nouvelle position.
7.2 Mode ‘Glisser/Déposer’
Cliquez sur le dossier que vous souhaitez déplacer dans l’arborescence du site. Ne relachez pas le bouton et déplacez le dossier - le bouton de la souris toujours enfoncé - jusqu’à l’endroit ou vous désirez l'insérer.
Relâchez le bouton de la souris. Un menu s’affiche alors avec les options disponibles.
« Déplacer page dans » permet de déplacer la page dans la page que vous avez sélectionnée, en effaçant la page d’origine.
« Déplacer page après » permet de déplacer la page après la page que vous avez sélectionnée, en effaçant la page d’origine.
« Copier page dans » permet de copier la page que vous venez de glisser dans la page que vous avez sélectionnée, sans effacer la page d’origine.
« Copier page après » permet de copier la page que vous venez de glisser après la page que vous avez sélectionnée, sans effacer la page d’origine.
7.3 Déplacement des sous éléments
Lorsque vous déplacez une page contenant des sous-éléments, que ce soit en mode ‘classique’ ou en mode ‘glisser-déposer’, les sous-éléments sont déplacés dans leur intégralité.
Exemple :
Vous avez la page Rubrique 1 contenant les pages rubriques 11, 12 et 13.
La page Rubrique 2 contenant les pages rubriques 21, 22 et 23. La page Rubrique 22 contenant les pages rubriques 221 et 222.
Vous souhaitez déplacer la page
Rubrique 22 et son contenu, les pages Rubriques 221 et 222, dans la page
Rubrique 12.
Vous utilisez l’une des méthodes citées précédemment (‘classique’ ou ‘glisser déposer’) et vous déplacez la page Rubrique 22 dans la page Rubrique 12.
Une fois le déplacement effectué la page Rubrique 22 et son contenu se trouvent bien dans la page Rubrique 12. Les pages Rubriques 221 et 222 ont été déplacés automatiquement car elles étaient à l’intérieur de la page Rubrique 22.
8. Ajouter une image dans un contenu texte
Maintenant que nous savons comment ajouter des pages et des articles à l'intérieur de ces pages nous allons pouvoir insérer les illustrations dans nos articles.
Dans l'interface d'administration de Typo3, nous nous plaçons dans l'édition d'un contenu. Nous obtenons l'écran suivant dans la fenêtre numéro 3.
Dans le menu Type choisissez le type « Textes w/image », après avoir enregistré, ainsi que l'interface le propose.
De nouvelles options apparaissent dans le formulaire pour ajouter une ou plusieurs images.
Un clic sur le bouton «Parcourir...» fait apparaître la boite de dialogue de sélection d'un fichier local, (c'est-à-dire situé sur le disque dur de votre ordinateur).
Choisissez l'image que vous voulez mettre à l'intérieur de l'article, appuyez sur « Enregistrer », cette image est envoyée automatiquement sur le serveur.
Grâce en dessous de la liste d'images vous allez pouvoir choisir la position de cette image par rapport au texte, ou encore le texte descriptif figurant en dessous de cette image.
9. Fonctions avancées
Grâce à ces premiers exemples vous avez vu avec quelle facilité vous pouvez manipuler les contenus textuels au sein de Typo3. Il en va de même pour les autres éléments comme les formulaires de prise de contact, des contenus multimédias, tableaux, listes à puce...
Nous ne vous présentons que les composants de Typo3 dont vous aurez besoin dans le cadre de votre activité.
Voyons simplement les plus courants :
Insertion d'une image seule
Ces différents types de contenus sont tous accessibles depuis l'outil éditer un contenu de page (figure ci-dessus) il suffit de choisir le type de contenu voulu pour recharger le formulaire adapté.
Dans les brèves présentations suivantes nous considérons que ce principe de menu est acquis.
10. Insertion d'une image seule
Le mode image est relativement simple et tout à fait semblable à l'écran texte et image, vous pouvez de la même façon ajouter une image depuis votre ordinateur (en cliquant sur le bouton « Parcourir ») ou choisir une image déjà présente sur le serveur.
Ici encore vous pouvez ajouter un lien ou un commentaire à l'image.
11. Newsletter
11.1 Fabrication de la newsletter
Dans l'écran 1, cliquer sur
Plugins, puis dans l'écran 2 sur
Mailer « nom du site » : dans cet exemple, aucun bulletin n'a été créé :
Il faut donc créer un bulletin, en cliquant sur
Créer un bulletin basé sur cette page.
Cet écran apparaît :
Maintenant, un bulletin (sans contenu pour l'instant) a été créé sur le modèle Newsletter (correspond au "cadre" de la newsletter).
Puis, sur l'écran 1, se positionner sur
Liste et dans l'écran 3, cliquer sur le picto
Newsletter sous
Titre de la page, puis
éditer et
Créer du contenu de page.
Dans cet exemple, l'article est construit sur le modèle « article simple sans image » :
Cette newsletter est maintenant prête à être envoyée, mais avant il faut déterminer à qui l'envoyer.
11.2 Gestion des groupes
Si maintenant, je repasse en mode
Plugins sur l'écran 1, la fenêtre de l'écran 3 se présente comme ceci :
Dans le menu déroulant du haut, sélectionner
Listes de distribution à la place de Pages.
Puis cliquer sur un groupe existant, ou
Pour revenir ensuite à édition des groupes :Dans le menu déroulant du haut, choisissez un autre type que Liste de Distribution, puis, à nouveau dans le menu déroulant re-choisissez Liste de Distribution.
Cela permet de mettre à jour les listes de groupes mail. Vous devriez donc maintenant voir un stylo permettant d'éditer le groupe que vous venez de créer.
Une fois les listes de diffusion définies, nous pouvons passer à l'étape suivante, l'envoi de cette newsletter.
11.3 Envoi
Toujours en mode
Plugins dans l'écran 1, re-cliquer sur
Newsletter dans l'écran 2 pour revenir à cet écran :
Nous retrouvons donc notre Newsletter dont l'état "envoi déclenché" est négatif.
Cliquer sur le bulletin "Newsletter", et en bas de l'écran "Bulletins", se trouve un menu OPTIONS avec une liste déroulante, et l'option
Préparer le bulletin pour l'envoi massif.
A ce stade, une prévisualisation de la Newsletter est possible avant son envoi en cliquant sur le lien proposé :
Puis, choisir dans le menu :
EnvoiDéclencher l'envoi massif ouvre un écran qui permet de choisir parmi les listes de diffusion, de choisir l'heure d'envoi et d'envoyer la newsletter à tous les membres de la liste choisie ou d'envoyer à une liste de destinataires :
Et c'est parti !
11.4 Statistiques :
Ensuite, pour consulter l'état des envois, sélectionner Etat des envois massifs dans le menu :
-
11.5 Extraction des comptes abonnés à « Mon site » avec informations sur les différentes inscriptions des internautes
Directmail permet de consulter ou d’exporter les listes d'utilisateurs sous forme de CSV pour utilisation externe.
Dans le menu Directmail choisir l’entrée liste de distribution pour obtenir la liste des groupes existants.
Choisir un groupe dans la liste pour obtenir le détail de ce groupe.
Le lien « Lister tous les destinataires » : Permet de lister à l’écran les destinataires
Les liens l « listes » permettent de télécharger les listes de destinataire sous forme de csv selon leur table de provenance.
-
