FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

I. Fonctionnalités standard 2

1. Accès à l’interface d’administration 32. Description de l’interface 43. Le menu 5

3.1 Le module web 53.2 Le module Media 6

4. Arborescence et gestion des pages 74.1 L’arborescence 74.2 Créer, déplacer, copier, supprimer une page 9

4.2.1 Créer une nouvelle page 94.2.2 Déplacer une page 104.2.3 Copier/coller une page 104.2.4 Supprimer une page 10

5. Editer une page, modifier le contenu 115.1 Editer le contenu d’une page 115.2 Editer les propriétés d’une page 16

6. Gestion des encarts 18

II. Fonctionnalités spécifiques19

1. Gestion des actualités et positions 202. Affichage des syndicats 213. Nos partenaires 224. Liens utiles 235. Extranet 246. Outils de communication 257. Vidéos 26

Mode d’emploi de Typo3

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

I. FONCTIONNALITES STANDARD

2

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

Vos identifiants :Username :Password :

Pour vous connecter à l’espace de gestion de Direct Mail, rendez-vous à l’adresse : http://www.fnecs-cfecgc.org/typo3

L’écran suivant apparaît :

1. Accès à l’interface d’administration

3

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

2. Description de l’interface

3 grandes zones forment l’interface Typo3.- la première, à gauche, comprend le menu de l’interface. Ce menu sera détaillé ci-dessous.- la deuxième partie, au centre, comprend l’arborescence du site.- la troisième, à droite, comprend les contenus.

4

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

3. Le menu

Le menu, présent en partie gauche de l’interface, permet d’accéder aux différents modules.

3.1 Le module Web

Le module "Web" contient les fonctions les plus importantes pour la définition et l'édition des pages de votre site.

Cette fonction vous permet de créer, puis d’éditer de nouvelles pages. Une fois la page créée, vous pouvez y ajouter des contenus : texte, images, etc.

Cette fonction donne un aperçu de la page. Grâce à lui, vous pouvez immédiatement apprécier le résultat de vos modifications, sans avoir à vous déconnecter de Typo3.

La fonction "Liste" vous donne la meilleure vue d'ensemble des données d'une page, à laquelle un utilisateur a accès. Les contenus seront également listés, tout comme les gabarits ou les pages sous-jacentes. Vous pouvez ainsi facilement déplacer les éléments les uns par rapport aux autres, les copier, etc. On l'utilise essentiellement pour lister les contenus d'un dossier système.

Détails des icônes présentes dans la fonction "Liste"

Visualiser la page

Editer l’enregistrement

Créer un nouvel enregistrement

Cacher l’enregistrement

Déplacer la page Coller le contenu du presse papier

Effacer le cache de la page

Actualiser

Afficher les informations

Afficher l’historique Créer une nouvelle page

Déplacer après Déplacer vers le bas Déplacer vers le haut

Copier Couper Coller dans

5

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

3. Le menu

Le menu, présent en partie gauche de l’interface, permet d’accéder aux différents modules.

3.2 Le module Media

Le module « Media" permet de télécharger des fichiers depuis votre ordinateur vers le serveur. Les fichiers, ainsi téléchargés, seront disponibles plus tard lors de la création des pages.

Procédure à suivre pour uploader ses fichiers sur le serveur :- lorsque l’on clique sur « File", l’arborescence du site disparaît pour laisser place à l’arborescence des fichiers- un clic sur l’un des dossiers fait apparaître à droite la liste des documents présents sur le serveur- pour uploader des fichiers sur le serveur, il suffit de cliquer sur « Upload", de choisir le nombre de fichiers à envoyer (maximum 15), puis par le biais de "boîte de dialogue" indiquer ces fichiers sur son ordinateur et enfin cliquer sur "Envoyer des fichiers"

6

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

4. Arborescence et gestion des pages

4.1 L’arborescence

Dès que vous avez choisi la fonction d’un module ( par exemple "Web>PageTV" ) en cliquant dessus, l’arborescence correspondante apparaît. Pour le module "Web>PageTV" , il s'agit d'une arborescence de page, celle du site. Pour le module « Media", vous disposez de l’arborescence des fichiers du serveur. Les images et les fichiers à télécharger du site y sont stockés.

Les rédacteurs utilisent le plus souvent le module "Web". Les exemples ci-dessous reposent sur ce module. On remarque que la vue indique toujours la structure du site de manière arborescente.

1.Tout en haut se trouve la page racine. Elle représente la page principale de tous les sites gérés grâce à Typo3. A partir de là, la structure se ramifie en différentes couches. Dans notre exemple « Accueil" est la page racine, « La Fnecs" la première couche, « Notre rôle" la deuxième couche…

2.Chaque couche peut être détaillée ou réduite

3.Devant le titre de chaque page se trouve une icône qui détermine le statut de chaque page.

4.En haut de l’arborescence des pages se trouve le bouton qui permet de mettre à jour l’arborescence.

5.En cliquant sur le nom de la page, vous ferez apparaître le détail de la page dans la partie droite de l’écran.

6.En cliquant sur l’icône de la page, vous faites apparaître un menu contextuel (Cf. page suivante).

7

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

4. Arborescence et gestion des pages

4.1 L’arborescence (suite)

1. Visualiser un aperçu

de la page.

2. Éditer le contenu de la

page sélectionnée.

3. Créer une nouvelle

page (affiche l'assistant).

4. Informations sur la

page.

5. Copier la page pour la

coller ailleurs dans

l'arborescence.

6. Couper la page pour la

coller ailleurs dans

l'arborescence.

7. Coller dans (telle ou

telle page)

8. Plus d'options pour la

page (seconde palette

d'options).

9. Option d'affichage de

la page (Cacher -

Montrer)

10. Options de visibilité

de la page.

11. Editer les

propriétés : édition soit

des propriétés, soit du

contenu d'une page

12. Supprimer

13. Suivi de version de la page.

Détails du menu contextuel :

8

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

4. Arborescence et gestion des pages

4.2 Créer, déplacer, copier, supprimer une page

Pour créer une nouvelle page, il suffit de cliquer sur l’icône de la rubrique dans laquelle vous souhaitez créer une nouvelle page. Le menu ci-dessous apparaît :

Lorsque l’on clique sur "Nouveau", une interface s’affiche dans la partie droite.

4.2.1 Créer une nouvelle page

Pour créer une nouvelle page, il suffit de cliquer sur "Créer" une nouvelle page. Sont alors proposées différentes positions pour la nouvelle page :

Une fois la position de la page choisie (en cliquant sur une flèche grise), le choix du template (modèle) de la page est proposé. Une fenêtre vous permet de donner un titre à cette nouvelle page.

9

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

4.2.2 Déplacer une page

4. Arborescence et gestion des pages

Pour déplacer une page, il suffit de cliquer sur l’icône de la pageque vous souhaitez déplacer et de la déplacer tout en conservantle clic à l’endroit où vous souhaitez la déplacer. Un menu apparaît alors

4.2.3 Copier/coller une page

Pour copier une page, il suffit de cliquer sur l’icône de la page que vous souhaitez copier et de choisir "Copier" dans le menu contextuel qui apparaît alors. (Cf. page précédente)

Pour coller la page, il suffit à nouveau de cliquer sur l’icône où vous souhaitez coller la page copiée et de choisir "coller dans" ou "coller après" selon votre choix.

La procédure est la même pour l’action de couper/coller.

4.2.4 Supprimer une page

Pour supprimer une page, il suffit de cliquer sur l’icône de la page que vous souhaitez supprimer et de choisir « Supprimer" dans le menu contextuel qui apparaît alors.

10

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

5. Editer une page, modifier le contenu

5.1 Edition du contenu d’une page

Lorsque l’on clique sur le titre de la page « Notre rôle" par exemple, en mode PageTV l’écran suivant apparaît dans la partie droite :

agit sur la page dans son intégralité

permet d’avoir accès au menucontextuel détaillé en partie 4.1 permet d’éditer les propriétés de lapage (Cf. 5.2) permet de visualiser la page

11

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

5. Editer une page, modifier le contenu

Le contenu de la page est encadré en pointillés. Les différents blocs de contenus y sont présents, les uns en dessous des autres.

5.1 Edition du contenu d’une page (suite)

Détails des boutons présents :

permet de créer un nouveau bloc de contenu

permet d’éditer le contenu du bloc (un clic sur le contenu permetd’y accéder aussi)

permet de copier le bloc de contenu

permet de créer une référence, soit d’insérer le contenu

permet de couper le bloc de contenu pour le coller à un autre endroit

permet de supprimer le bloc de contenu.

12

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

5. Editer une page, modifier le contenu

5.1 Edition du contenu d’une page (suite)

Une fois le bloc de contenu édité à l’aide de l’icône , la partie droite de l’administration change.

enregistre les modifications apportées

enregistre les modifications apportées et affiche le rendu réel de la page

enregistre les modifications apportées et ferme la page

ferme la page

supprime la page

annuler/rétablir le dernier changement

Différents onglets permettent d’accéder à toutes les informations du bloc édité.

Celui-ci permet de choisir le type de contenu (Texte, texte et image…)Spécifier si le contenu doit être visible ou non.Lui assigner un en-tête (non visible en frontoffice ,mais utile pour la gestion en backoffice)

13

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

Cet écran permet de modifier le contenu du bloc dans lequel on se trouve. Cet éditeur fonctionne comme les principaux logiciels de traitement de texte Microsoft Word ou Open Office.

Ci-dessous, le détail des boutons :

5. Editer une page, modifier le contenu

5.1 Edition du contenu d’une page (suite)

14

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

5. Editer une page, modifier le contenu

5.1 Edition du contenu d’une page (suite)

Ainsi, pour insérer un lien hypertexte sur un ou plusieurs mots, il suffit de le(s) surligner à l’aide de la souris, puis de cliquer sur le bouton .

La fenêtre suivante apparaît :

Pour créer un lien vers une autre page du site, il suffit de cliquer sur la page désirée dans l’arborescence présente en partie basse, le lien se fait automatiquement.

Pour créer un lien vers un fichier, il suffit de cliquer sur « Media » , puis de sélectionner le fichier dans l’arborescence

Pour créer un lien vers une URL externe, il suffit de cliquer sur "URL externe » puis de renseigner l’adresse du site.

Pour créer un lien "mailto", permettant d’un seul clic d’envoyer un mail à une adresse mail, il suffit de cliquer sur « E-mail » et de renseigner l’email du destinataire.

15

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

5.2 Edition des propriétés de la page

5. Editer une page, modifier le contenu

Nous avons vu qu’en cliquant sur l’icône (icônes présentes en haut de page), après avoir cliqué sur le nom d’une page dans l’arborescence, l’écran des propriétés de la page apparaissait.On retrouve en partie haute, les icônes décrites précédemment.

Permet de rendre accessible ou non une page aux visiteurs, malgré sa présence en backoffice

Titre de la page est le titre qui est repris dans le menu du site, dans le fil d’Ariane, l’url de la page et le Title de la page (texte présent dans la barre la plus haute du navigateur)

Titre de navigation prend le dessus sur le titre dans : le menu, le fil d’Ariane et l’url

Prend le dessus uniquement sur l’url de la page

16

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

5.2 Edition des propriétés de la page (suite)

5. Editer une page, modifier le contenu

L’onglet Metadata vous permet de renseigner le résumé, la description et les mots clés de la page. Tous ces renseignement sont utiles pour un bon référencement.

L’onglet Access vous permet de sélectionner à quel groupe de personnes cette page est accessible (groupes extranet)

17

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

6. Gestion des encarts

Il est possible de mettre un ou plusieurs encarts sur toutes les pages du site.

N.B. l’encart « Votre espace » qui permet d’accéder à l’extranet s’intègre automatiquement avec l’intégration d’un encart.

1ere étape : création d’un encart- dans l’arborescence se trouve un dossier « Gestion des encarts » dans lequel on trouve, en mode « Liste » une liste de contenus, c’est contenus sont les différents encarts.- pour en créer un, il suffit d’agir comme s’il s’agissait d’un contenu de page

(voir précédemment)

2ème étape : attribution d’un encart- en mode « PageTV », cliquer sur la page où l’on souhaite ajouter un encart- dans le bloc « encart », créer un nouveau contenue de type « Listed’encarts »- choisir les encarts à afficher dans liste des contenus disponibles

18

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

II. FONCTIONNALITES SPECIFIQUES

19

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

1. Gestion des actualités et positions

Les actualités (ou infos) sont gérées dans le dossier « Actualité » et visibles en mode Liste.

Les actualités s’affichent sous forme de liste :

Le contenu se gère de la même manière qu’un contenu classique sauf qu’il est possible de lui attribuer une catégorie/thème. (via le bloc catégorie parente).

Les catégories se créent comme un contenu classique et ne nécessitent qu’un titre comme information.

N.B. Dans le flash infos, seules les 2 dernières infos sont affichées. La rubrique Flash info/actualité ne remonte que la dernière tandis que la rubrique « Toute l’actualité » affiche toutes les actualités insérées.

N.B. le fonctionnement est identique pour les positions.

20

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

2. Affichage des syndicats sur la page « Notre organisation »Sur la page « Notre organisation » et uniquement sur celle-ci, il est possible d’afficher les syndicats de la manière suivante :

Pour insérer, modifier, supprimer un syndicat, il suffit de cliquer sur la page « Syndicats » en mode liste.

Apparaît alors la liste des syndicats sous forme de contenu gérable, comme tout contenu classique.

N.B. il est possible d’insérer autant de syndicats que possible dans la limite de la largeur de la page (environ 10 max)

21

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

3. « Nos partenaires »

L’affichage des partenaires sur la page concernée est automatique :

Pour insérer, modifier, supprimer un partenaire, il suffit de cliquer sur la page « Partenaires » en mode liste.

Apparaît alors la liste des partenaires sous forme de contenus gérables, comme tout contenu classique. (titre, texte, lien et photo)

N.B. La mise en page est prédéfinie, il est impossible de la modifier via le backoffice.Il est possible d’afficher une infinité de partenaires sur la même page.

22

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

4. « Liens utiles »Les liens sont également gérés en base de données, leur affichage sur la page liens utiles est donc automatique :

Pour insérer, modifier, supprimer un lien, il suffit de cliquer sur la page « Liens utiles » en mode liste dans la rubrique « Base de données ».

Apparaît alors la liste des liens sous forme de contenus gérables , comme tout contenu classique. (titre, texte, lien et catégorie)

Les catégories se créent comme un contenu classique et ne nécessitent qu’un titre comme information.

23

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

5. ExtranetIl existe plusieurs catégories d’adhérents extranet :

- adhérents- négociateurs- délégués syndicaux- bureau & conseil fédéral- espace conseil

Il est possible de créer, modifier, supprimer une catégorie sur la page «utilisateurs extranet » en mode Liste.

Nous avons vu en I. 5.2 comment attribuer une page à une catégorie d’utilisateurs. (propriété de la page, access)

Le menu de gauche affiche automatiquement l’arborescence du dossier « extranet » visible en backoffice

24

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

6. « Outils de communication »

Sur la page « Outils de communication », on peut trouver des listes de documents classés par rubrique.

Chaque « rubrique » (carte de visite, affiche….) est un point de montage contenant n fichiers.

Il faut donc : - cliquer sur la page « outils de com », créer une nouvelle page de type « point de montage »- une fois le point de montage créé, il suffit de créer au sein de ce point de montage des blocs de contenus de type « lien vers un fichier », lui attribuer un ent-ête et lui joindre un fichier.

Automatiquement, la nouvelle rubrique et les fichiers adjoints apparaîtront sur la page.

25

FNECS – Formation à l’utilisation de Typo3 – 15/12/2008Document strictement confidentiel - reproduction interdite - droit de propriété intellectuelle de la société Hippocampe – SARL au capital de 8 842 euros – RCS Paris B 402 069 033 – Code NAF : 722C

7. « Vidéos »

26

Remplir uniquement les champs « Path média » et Mediafile

Toujours la même valeur : fileadmin/user_uploads/videos

Nom de la vidéo envoyées via FTP

Envoi des vidéos sur le serveur via FTP : Host : kessel.hippocampe.frUtilisateur : fnecs_videosMot de passe : v1d30s

Les vidéos sont directement ajoutées dans le bon dossier

NB : les vidéos doivent être ajoutées dans un contenu sur deux colonnes spécifique : « Contenu sur deux colonnes pour les vidéos »