Vous êtes sur la page 1sur 16

Première heure avec TYPO3

Formation
-
Votre première heure avec
TYPO3

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 1
Première heure avec TYPO3

SOMMAIRE
SOMMAIRE ...................................................................................................................................................... 2
PREMIERE HEURE EN COMPAGNIE DE TYPO3 ................................................................................................... 3
1 – INTRODUCTION AU PRINCIPE DU GESTIONNAIRE DE CONTENU ................................................................. 4
1.1 - CONCEPT ....................................................................................................................................................... 4
1.2 – VIE PUBLIQUE, VIE PRIVEE ................................................................................................................................. 4
2 – LE ROLE DE TYPO3 ...................................................................................................................................... 4
2.1 - GENERALITES .................................................................................................................................................. 4
2.2 – LES UTILISATEURS, LES DROITS ........................................................................................................................... 5
3 – ACCEDER A L’INTERFACE D’ADMINISTRATION ............................................................................................ 6
4 – PREMIER TOUR D’HORIZON DE L’INTERFACE D’ADMINISTRATION ............................................................. 7
5 - PRISE EN MAIN DE L’INTERFACE D’ADMINISTRATION ............................................................................... 10
5.1 - L’ASPECT GENERAL ......................................................................................................................................... 10
5.2 – GESTION DES BLOCS DE CONTENU..................................................................................................................... 11
5.3 – LES ICONES .................................................................................................................................................. 12
6 - PREMIERES ACTIONS ................................................................................................................................. 14
6.1 CORRECTION D’UNE FAUTE DE FRAPPE ................................................................................................................. 14
6.2 CREER UN NOUVEAU BLOC DE TEXTE .................................................................................................................... 14
6.3 AJOUTER UNE IMAGE........................................................................................................................................ 15

Auteur Version Email


Pierre-Emmanuel Muller Formation_1hTYPO3_20080508_01 pem@in-cite.net
Pierre-Emmanuel Muller Formation_1hTYPO3_20080606_01 pem@in-cite.net
Philippe Hérault Formation_1hTYPO3_20080924_01 philippe@in-cite.net
Emmanuel Dalisson Formation_1hTYPO3_20090120_01 manu@in-cite.net

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 2
Première heure avec TYPO3

Première heure en compagnie de TYPO3


Ce document a pour objectif de vous permettre de découvrir le logiciel TYPO3 et de prendre
en main son interface d’administration en une heure.
A l’issue de cette première session de formation, vous maîtriserez les concepts suivants :
• gestionnaire de contenu
• interface publique, interface d’administration
• espace de travail public
Vous serez capable :
• d’accéder à l’interface d’administration de TYPO3
• de modifier du contenu accessible publiquement sur le site
• de créer de nouveaux éléments de contenu au sein des pages auxquelles vous avez
accès

Rappel : vous disposez d’une documentation téléchargeable sur le site web de support
technique In Cité Solution (http://support.in-cite.net). Si vous ne disposez plus de vos
paramètres de connexion, merci de vous rapprocher du chef de projet In Cité.

Sommaire et estimation de temps


1. Introduction au principe du gestionnaire de contenu
2. Le rôle de TYPO3
3. Accéder à l’interface d’administration
4. Premier tour d’horizon de l’interface d’administration
5. Prise en main de l’interface d’administration
6. Premières actions

Introduction au principe du
gestionnaire de contenu
Le rôle de TYPO3

Accéder à l’interface
d’administration
Premier tour d’horizon de
l’interface d’administration
Prise en main de l’interface
d’administration
Premières actions

L’essentiel de cette formation sera pratique : tour d’horizon de l’interface d’administration,


prise en main de l’interface d’administration, premières actions concrètes au sein du
backoffice.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 3
Première heure avec TYPO3

1 – Introduction au principe du gestionnaire de contenu


1.1 - Concept
Un site web représente un ensemble de pages consultables à l’aide d’un navigateur comme
Internet Explorer ou Firefox.
Ces pages contiennent textes, images, liens, éléments multimédia.
Ces pages sont stockées sur un serveur, un PC connecté en permanence à l’Internet. Si l'on
souhaite mettre à jour son site on doit récupérer la page sur son PC, la mettre à jour et la
republier sur la machine qui héberge le site web. S'il ne s'agit que de quelques lignes de
texte ou d'une image la manipulation n'est pas particulièrement lourde. Quand il s'agit d'une
dizaine de pages, l'opération devient déjà plus fastidieuse. Dans certains cas la mise à jour
d'un site peut vite devenir une mission impossible.
Comment mettre à jour le menu de navigation d'un site qui contient 200 pages ? Il faut
récupérer les 200 pages, modifier le menu dans ces 200 pages et toutes les republier ensuite
pour vérifier qu'aucune erreur n'a été commise.
C'est là qu'intervient le principe du gestionnaire de contenu. Un gestionnaire de contenu est
une application web qui permet de gérer un site sans avoir à intervenir sur le code des pages
et, surtout, sans avoir à quitter son navigateur web. Le gestionnaire prend à sa charge la
création des rubriques, sous-rubriques ou pages du site.

1.2 – Vie publique, vie privée


Au-delà de ses fonctionnalités ou du contenu qu’il gère, un gestionnaire de contenu se
résume à deux espaces fondamentaux : une administration et une partie publique.
• L’administration : il s’agit d’un espace privatif auquel ne peuvent accéder que les
utilisateurs identifiés. Toutes les manipulations relatives à l’arborescence ou au
contenu sont effectuées depuis l’administration.
• La partie publique : il s’agit de la partie consultable par toutes et tous du site web. On
y accède sans nom d’utilisateur, simplement en se rendant à l’adresse de votre site.
Ces deux espaces sont gérés par TYPO3, l’un présente des outils et fonctionnalités, l’autre
est généré automatiquement à partir des données entrées dans l’administration. La partie
publique du site web est une vue concrète de ce que TYPO3 contient comme informations.

2 – Le rôle de TYPO3
2.1 - Généralités
TYPO3 est un gestionnaire de contenu. Il fait l’interface entre vous et les données qui
constituent le site web. Il vous permet de publier, éditer, supprimer tout type de contenu
sur le site web directement depuis votre navigateur web.
TYPO3 est une application web stockée sur le serveur qui héberge le site web
Vous n’avez pas à :
• Installer quoi que ce soit sur votre PC pour utiliser TYPO3
• utiliser autre chose que votre navigateur web
• récupérer des fichiers du site web sur votre PC

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 4
Première heure avec TYPO3

• apprendre à programmer
TYPO3 gère :
• l’arborescence du site : vous pouvez changer le nom d’une rubrique ou d’une page
directement depuis votre navigateur web. Vous pouvez également créer de nouvelles
pages ou de nouvelles rubriques directement depuis TYPO3.
• les contenus du site : vous pouvez modifier un contenu existant, ajouter du contenu
quel qu’il soit (du texte, une image, un fichier PDF, Word ou Excel, etc.), créer un
formulaire de contact, etc.
• les lettres d’information : vous pourrez, depuis TYPO3, envoyer des lettres
d’information.
• la création de la partie publique du site. A partir des données et contenus entrés
dans l’interface d’administration, TYPO3 produit le site public.

2.2 – Les utilisateurs, les droits


Lorsque vous accédez à TYPO3, vous vous connectez à l’aide d’un nom d’utilisateur et d’un
mot de passe. Vous ouvrez ce qui s’appelle une session. Cette session reste active tant que
vous ne la fermez pas en utilisant le lien prévu à cet effet au sein de TYPO3.
Attention : ne fermez pas votre navigateur pour clore votre session. Utilisez le lien
prévu à cet effet au sein de TYPO3.

Votre couple nom d’utilisateur / mot de passe constituent ce qui s’appelle un profil.
Ce profil vous donne des droits. Ces droits vous donnent la possibilité d’accéder à certaines
parties de l’arborescence du site et d’y effectuer certaines opérations.
Ainsi un administrateur accède à toute l’arborescence, peut supprimer n’importe quelle
page ou publier tout type de contenu.
Le profil d’un responsable de portail lui donne accès à la gestion de son portail. Il n’a pas la
possibilité de publier du contenu ailleurs que dans cette partie de l’arborescence.

Attention, votre profil est personnel. Il vous donne accès à certaines fonctionnalités,
certaines pages. Ne donnez pas votre profil à un autre utilisateur.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 5
Première heure avec TYPO3

3 – Accéder à l’interface d’administration


L’accès à l’interface d’administration s’effectue depuis un navigateur web.
Ouvrez un navigateur web (Internet Explorer) et rendez-vous à l’adresse de votre site (par
exemple : http://votre_site.ic-s.org).
Vous y trouvez la partie publique du site web, générée par TYPO3.
Ouvrez un second navigateur internet pour ouvrir une session dans l’interface
d’administration. Vous pourrez ainsi travailler dans l’espace d’administration dans une
fenêtre et visualiser vos travaux en direct dans une seconde fenêtre.
L’accès à l’interface d’administration se fait en ajoutant /typo3 à la suite de l’adresse de
votre site. Exemple : http://votre_site.ic-s.org/typo3/

Vous accédez alors à une interface de connexion.


Entrez votre nom d’utilisateur et votre mot de passe puis cliquez sur le bouton Connexion.

Après quelques secondes de chargement, vous accédez ainsi à l’interface d’administration


de TYPO3.
Si après ce temps de chargement vous restez sur la page d’accueil, cela signifie que vous
avez mal saisi vos informations de connexion. Vérifiez alors vos paramètres et reprenez la
procédure.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 6
Première heure avec TYPO3

4 – Premier tour d’horizon de l’interface d’administration

L’interface d’administration de TYPO3 comporte trois zones principales :


• les onglets de menus
• l’arborescence du site web
• la zone d’édition

• Les onglets de menus


Les onglets (Web, fichier…) représentent les entrées principales de l’interface
d’administration. Les sous-rubriques sont automatiquement affichées lors de la connexion. Il
suffit de cliquer sur l’une des entrées pour que la page se recharge et que l’on accède à la
fonctionnalité concernée. Pour passer à un second onglet, on clique sur celui-ci et on quitte
ainsi la rubrique active. Il n’est pas nécessaire de « fermer » ou quitter la vue active.

• L’arborescence
Toutes les rubriques, sous-rubriques et pages du site sont représentées dans cette
arborescence. Celle-ci reprend le principe d’un gestionnaire de fichier avec dossiers, sous-
dossiers, fichiers, etc.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 7
Première heure avec TYPO3

Grâce à cette arborescence TYPO3 génère toute la navigation de la partie publique. Un


dossier de premier niveau sera une rubrique de premier niveau (par exemple Page
Meyronne) et une entrée placée dans le dossier Page Meyronne sera une entrée de second
niveau au sein de l’arborescence.

Pour travailler sur l’une des pages, qu’il s’agisse d’une tête de rubrique, d’un portail ou d’une
page de contenu, il suffit de cliquer sur celle-ci dans l’arborescence.

Attention : tous les éléments de l’interface d’administration TYPO3 sont des liens ou
des boutons. Chaque action ne demande qu’un clic de souris. Il n’est pas nécessaire,
voire dangereux, de double-cliquer sur une page, un lien ou un bouton. Cela pourrait
doubler une action (double insertion d’entrée) ou entraîner une action inattendue
(déplacement d’une page au sein de l’arborescence plutôt que l’ouverture de celle-ci).

Chaque portion de l’arborescence peut être réduite ou étendue. Utilisez pour cela les petits
+ ou – situés devant la rubrique qui vous intéresse :

Ouvrez la rubrique Page Meyronne en cliquant sur +

Réduisez la rubrique Les dispositifs particuliers en cliquant sur –


Cliquez directement sur le nom de la page qui vous intéresse pour accéder aux informations
qu’elle contient :

Cliquer sur l’icône d’une page (cliquer, pas de double-clique) affiche un menu contextuel que
nous présenterons un peu plus tard.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 8
Première heure avec TYPO3

• La zone d’édition
Cette zone se met à jour en fonction du menu / sous-menu actif et de la portion
d’arborescence sélectionnée.
Remarque : certains menus principaux ne nécessitent pas l’affichage de
l’arborescence (Utilisateurs ou Outils).
Selon le type de contenu, celui-ci sera présenté dans la zone d’édition sous la forme de blocs
ou de liste.
C’est dans cette zone que vous allez travailler pour créer ou éditer du contenu, déplacer des
blocs de contenu, etc.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 9
Première heure avec TYPO3

5 - Prise en main de l’interface d’administration


Une fois maîtrisés les menus et sous-menus, l’arborescence et les réactions de la zone
d’édition, il ne vous reste plus qu’à appréhender dans le détail le contenu de la zone
d’édition.

5.1 - L’aspect général


La zone d’édition présente les éléments de contenu d’une page sous la forme de blocs.
TYPO3 vous permet de construire les pages comme vous l’entendez, en y insérant les
éléments de contenus que vous voulez.
Sur la page suivante par exemple :
On constate que trois blocs sont présents :

Premier bloc

Second bloc

Troisième bloc

L’agencement de ces blocs dépend du gabarit utilisé pour construire la page. Ici le gabarit ne
permet que le positionnement des blocs les uns à la suite des autres. D’autres gabarits
permettent l’utilisation de colonnes.

Revenons aux blocs qui constituent les pages. Vous êtes complètement libres dans la
création de ces blocs. Il n’est pas obligatoire de créer des blocs de texte uniquement.
On peut avoir, dans une même page, les blocs suivants :
• liste des pages (pour créer un plan du site par exemple ou un index de rubrique)
• formulaire (type formulaire de contact par mail ou sondage, créé à l’aide de
l’assistant)
• texte
Vous voyez que les pages du site peuvent être construites selon votre envie : une image puis
deux colonnes avec chacune du texte, un formulaire de recherche, etc. Vous construirez
alors des pages conformes à vos attentes.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 10
Première heure avec TYPO3

5.2 – Gestion des blocs de contenu


Les blocs de contenu peuvent être déplacés d’un simple glissé-déposé. Cliquez sur le titre
d’un bloc et, sans relâcher le bouton de la souris, déposez le bloc là où vous souhaitez qu’il
soit.
Vous pouvez également couper un bloc et le coller là où vous souhaitez le déplacer.
Voici comment effectuer un glisser-déposer :

Sans relâcher la pression, déplacez le bloc au sein de la page, là où vous souhaitez le placer.

Relâchez la pression là où le bloc doit se positionner.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 11
Première heure avec TYPO3

Vous n’avez pas besoin de sauvegarder la page, l’action est enregistrée automatiquement.

Remarque : cette action sera vue dans les actions concrètes qui suivent cette partie.

5.3 – Les icônes


Comme vous avez pu le constater, certaines icônes sont présentes à différents endroits sur
la page. Vous les retrouverez bien souvent dans TYPO3.
Voici leur signification :
: sauvegarde le formulaire en cours d’édition et vous permet de continuer à
travailler (même fonctionnement que l’icône disquette dans vos applications de
bureautique)
: enregistre et ouvre une nouvelle fenêtre pour pré visualiser la page telle qu’elle
sera présentée aux internautes
: enregistre et ferme le formulaire en cours d’édition.
: ferme le formulaire en cours sans sauvegarder.
: cette icône vous donne accès au menu contextuel que vous avez déjà rencontré
avec les pages de votre arborescence. Vous pourrez ainsi rapidement demander à créer
un nouveau contenu, à copier cet élément de texte, etc.
: ce petit crayon est associé à chaque élément qui peut être édité / modifié. Cliquez
simplement sur ce crayon et vous pourrez modifier un contenu, une image, les
propriétés d’une page, etc.
: « nouveau contenu », cette icône vous permet de créer un nouvel élément. Ce
bouton sera utilisé quel que soit l’élément concerné : nouvelle page, nouvelle actualité,
nouveau compte utilisateur.
: cette petite ampoule vous permet de cacher un élément. Encore une fois, elle sera
présente quel que soit l’élément concerné. Vous pourrez ainsi cacher un bloc de

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 12
Première heure avec TYPO3

contenu, une actualité, un sujet de discussion dans un forum, etc. Elle va de paire avec
l’ampoule qui permet de rendre visible un élément : .
: la poubelle vous permet tout simplement de supprimer le bloc concerné.
: les deux petites pages vous permettent de copier un élément
: les ciseaux vous permettent de couper un élément
: cette icône vous permet de créer une référence du contenu. La référence vous
permet d’afficher un contenu en plusieurs endroits sans en copier réellement son
contenu. Ainsi vous n’avez qu’un bloc à mettre à jour. Il suffit de cliquer sur l’une des
références pour accéder, en édition, au bloc original.

Vous trouvez également très souvent un fil d’Ariane qui vous précise où vous vous
trouvez au sein de l’arborescence :

Ainsi, pour créer du contenu, il vous suffit de cliquer sur l’icône pour accéder à la liste des
formulaires d’ajout de contenu supportés par TYPO3.

Attention, la même icône présente en deux endroits différents entraîne deux actions
différentes. Prenons par exemple le cas de l’icône crayon sur une page de contenu.

Le premier crayon, situé en haut à gauche, permet d’éditer les propriétés de la page, comme
son titre par exemple.
Le second crayon, situé dans un bloc, vous permet d’éditer le contenu de ce bloc.
Notez bien que le crayon situé à côté du titre de la page, loin de tout bloc de contenu,
permet d’éditer les propriétés de la page et non pas son contenu.

Maintenant que vous connaissez l’interface, il ne reste plus qu’à l’utiliser.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 13
Première heure avec TYPO3

6 - Premières actions
Des pages spéciales ont été préparées pour cette formation. Ainsi vous pourrez y travailler
librement sans crainte d’impacter le travail effectué par In Cité. Reportez-vous à l’annexe 1
pour savoir quel est votre compte utilisateur et la page qui vous est réservée.

1. Ouvrir une session dans l’interface d’administration


2. Accéder à sa page personnelle
3. Corriger la faute de frappe qui se trouve dans le bloc de texte
4. Créer un nouveau bloc de texte, saisir du texte, enregistrer le formulaire, visualiser la
page
5. Insérer un bloc image au sein de la page.

Les pages créées pour la formation sont dans la rubrique Formation.

6.1 Correction d’une faute de frappe


Une fois identifié dans l’interface d’administration, cliquez sur le nom d’une page pour que
la zone d’édition vous présente ses blocs de contenu.
Une fois le contenu présent, cliquez sur le bloc que vous souhaitez éditer. Il vous suffit de
cliquer sur le texte d’un bloc pour l’éditer.
Editez un texte comme s’il s’agissait de corriger une faute de frappe et sauvegardez la page
(à l’aide de l’icône disquette vue plus tôt).

6.2 Créer un nouveau bloc de texte


Utilisez l’icône « Nouveau contenu » pour demander à créer un nouveau bloc de contenu.

Si vous cliquez sur la seconde icône, le nouveau bloc sera créé à la suite du premier bloc au
lieu d’être placé avant celui-ci :

La troisième icône présente sur la page vous permet de créer un bloc de contenu à la suite
du premier bloc délimité par les pointillés. Cette méthode est utile quand vous utilisez des
gabarits mettant en œuvre des colonnes.

Parmi les types de contenus disponibles, choisissez le premier proposé :

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 14
Première heure avec TYPO3

Utilisez l’éditeur de texte pour saisir votre contenu :

Enregistrez et fermez le formulaire :

Demandez à visualiser votre nouveau bloc de contenu en cliquant sur l’icône loupe :

6.3 Ajouter une image


Sur votre page de test, utilisez l’icône « Nouveau contenu » pour demander à créer un
nouveau bloc de contenu.
Sélectionnez le type de contenu Liste d’images.

Dans le formulaire de création de contenu, cliquez sur le petit dossier situé dans la zone
Images.

Ce dossier vous donne accès au gestionnaire de fichiers de TYPO3.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 15
Première heure avec TYPO3

Remarque : vous pouvez également choisir de publier une nouvelle image directement
en cliquant sur le bouton Choisir.

Cliquez ensuite sur le dossier documents_formation.

Cliquez ensuite sur le nom de l’image.

Vous revenez alors automatiquement à votre formulaire de création de contenu. La zone


Images contient désormais le nom du fichier que vous venez de sélectionner.

Enregistrez et fermez le formulaire et demandez à visualiser la page.

In Cité Solution | 2, rue des Charmilles 35510 Cesson-Sévigné | Tél : 02 99 77 33 37 | pem@in-cite.net | Page 16