doc: manuel du rédacteur (français) · compléter, toute l'équipe de @rtplan[21]...

Doc: Manuel du rédacteur (français)Extension Key: doc_tut_editor_ger

Copyright 2000-2002, Werner Altmann, <[email protected]>

@rtplan[21] webconcepts & solutions GmbH / Berlin

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to Typo3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table des matièresDoc: Manuel du rédacteur (français)........... 1

Introduction ...................................................................... 2La connexion.....................................................................3

Configurer son navigateur Internet .............................. 3Le Login.........................................................................8

L'interface et ses différentes parties..............................9Aperçu........................................................................... 9La liste des modules................................................... 10Le menu de navigation................................................10La vue détaillée........................................................... 12

Les Modules.................................................................... 13Aperçu des différents modules .................................. 13La partie “Web”........................................................... 15La partie “Fichier”........................................................20La partie “Document” ................................................. 21La partie “Utilisateur”.................................................. 22La partie “Outils”......................................................... 24La partie “Aide” .......................................................... 29

La création et la modification de page........................ 31Les notions prérequises: ............................................31Les informations d'une page.......................................31Créer une nouvelle page............................................. 33L'édition d'une page.................................................... 35Le type de page “Standard” ....................................... 38Le type “Avancé" ........................................................ 39Le type de page "URL externe" .................................. 41Le type de page “Raccourci”....................................... 42Le type de page “Absent du menu".............................44Le type de page “Section utilisateur Backend" .......... 45Le type de page "Délimiteur" ..................................... 46Le type de page “Dossier système" ........................... 47Le type de page "Corbeille" ........................................47

Content plugin............................................................. 48Les types de contenu..................................................... 49

Aperçu......................................................................... 49L'agencement des contenus....................................... 49L'interface.................................................................... 51Ajouter un contenu...................................................... 52Editer un contenu........................................................ 57Le type de contenu “Titre”........................................... 61Le type de contenu "Text" .......................................... 62Le type de contenu “Image" ....................................... 63Le type de contenu ”Texte w/ image" .........................66Le type de contennu "Liste à puces" ..........................68Le type de contenu "Table" ........................................ 69Le type de contenu “Lien vers un fichier" ...................71Le type de contenu "Multimedia" ............................... 72Le type de contenu"Formulaire" .................................73Le type de contenu "Rechercher" ...............................75Le type de contenu "Login" ........................................ 76Le type de contenu "Champ de saisie" ...................... 77Le type de contenu "Menu / plan du site" .................. 78Le type de contenu "Insérer un enregistrement" ....... 79Le type de contenu "Insérer un plugin" ......................80Le type de contenu "Script" ........................................81Le type de contenu "Séparateur" ............................... 82Le type de contenu "HTML" ....................................... 82

Le "Rich Text Editor"..................................................... 83Aperçu......................................................................... 83Les différentes possibilités d'édition........................... 84

Le presse papier............................................................. 88Aperçu......................................................................... 88Copier dans le presse-papier...................................... 89Déplacer avec le presse papier...................................91

Doc: Manuel du rédacteur (français) - 1

Introduction

Grâce à ces quelques pages vous allez pouvoir faire vos premiers pas avec Typo3. Nous nous attacherons uniquement la partie rédacteur : quels modules sont à leur disposition, comment mettre en place des pages et quels sont les différents types de contenu qui s'y rattachent.

La référence utilisée lors de la rédaction est la version Typo3 3.0 et 3.5b4 comme fond d'écran un backend de type "Alternativ Backend". Pendant chaque étape de cette documentation nous serons loggué en temps qu'administrateur. Cela signife que tous les modules sont à disposition, que toutes les pages seront visualisables et que toutes les modifications seront permises. Cette présentation peut également être suivie à travers un autre profil avec des droits d'accès plus limités. Typo3 permet en effet une description très précise des droits sur chaque fonction : les droits de chacun des rédacteurs seront décidés par l'équipe de développement et l'administrateur du site.

Le manuel va décrire les parties suivantes

La connexion

L'interface et sa disposition

Les modules de Typo3

La mise en place et la modification des pages

Les différents types de contenu

L'éditeur de texte

Le presse-papier

Cette documentation a été écrite le 26 novembre 2002. Merci à René Fritz et Daniel Hinderink, pour avoir parcouru ce texte. Si vous avez la moindre question, remarque, critique mais également si vous souhaitez apporter une idée pour améliorer ou compléter, toute l'équipe de @rtplan[21] webconcepts & solutions GmbH reste à votre entière disposition.

Après une phase de test d'à peu près 6 semaines pendant lesquelles le présent docuement sera amélioré et corrigé nous le mettrons en ligne au format PDF afin qu'il puisse être téléchargé.

Bon courage !

NDT : J'ai traduit ce document initialement en allemand pour mes besoins personnels. Il reste certainement des erreurs ou des imprésicions, et ce malgré une relecture attentive. Je vous encourage cependant à envoyez vos remarque sur le forum français de Typo3, dans la partie Documentation.

Pour ma part j'ai traduit ce document avec la version 3.6 de Typo3. J'essayé de préciser autant que possible les différences entre ces 2 versions lorsqu'il y en avait

Ce document étant relativement complet et précis, dites-vous bien qu'une erreur lors de l'utilisation de Typo3 avec les exmples fournis ici provient certainement plus d'un problème d'installation de Typo3 que du document en lui-même. Contactez l'administrateur de votre site dans ce cas.


La connexion

Configurer son navigateur Internet

Typo3 est un système de gestion de contenu en ligne. Il s'utilise comme client de votre navigateur habituel, celui avec lequel vous surfez sur Internet. Comme tout système de gestion de contenu il est stocké sur un serveur : vous avez ainsi la possibilité d'y accéder n'importe où et à n'importe quelle heure.

Pour que Typo3 puisse fonctionner correctement, nous vous conseillons de vérifier les paramètres de votre navigateur. Vous devez activer les “JavaScript”, paramétrer correctement la gestion du ” cache” et des “cookies”. Nous allons vous montrer comment mettre en place puis vérifier ces paramètres

Microsoft Explorer 5.x, 6.x

Ouvrez Microsoft Internet Explorer et dans le menu allez dans “Outils”

Dans le menu qui va apparaître choisissez “Options Internet”.

Une fenêtre avec différents onglets s'ouvre. Dans la partie ”Général” vous verrez la fenêtre illusttrée ci-dessous.

Cliquez maintenant sur le bouton “Paramètres” dans la 2ème partie de la fenêtre.


Activez dans la 1ère option

Cliquez sur OK. Vous venez de configurer la gestion du cache de votre navigateur

Ouvrez maintenant l'onglet “Sécurité” et choisissez “Internet”

Cliquez sur le bouton “Personnaliser le niveau...”

Internet Explorer 5.x Une fenêtre de paramétrage de la sécurité s'ouvre alors. Descendez dans la liste jusqu'à ariver à la propriété “Cookies”. Vérifiez que les 2 options “Accepter les cookies” sont activées. Les versions 5.x d'Internet Explorer se différencient des versions ultérieures ( 6.x et suivantes ) où l'activation se fait d'une autre manière

NDT : Pour savoir la version d'Internet Explorer installée sur votre machine allez dans la partie “Aide” du menu lorsque vous ouvrez Internet Explorer. En choisissant “A propos” une fenêtre va s'ouvrir, où le numéro de version sera affiché.


La fenêtre “Paramètres de sécurité” descendez jusqu'à la propriété “Scripting”. Cette option doit être activée

Cliquez sur OK/ La fenêtre “Paramètres de sécurité “ se referme. La fenêtre “Options Internet” est encore ouverte, vous pouvez maintenant la fermer en cliquant sur OK. Ainsi les paramètres que vous venez de définir seront pris en compte.


Internet Explorer 6.x Pour tester la configuration des Cookies sous Internet Explorer 6.x ouvrez l'onglet “Confidentialité” et cliquez sur le bouton ”Avancé”

Explorer 6.x S'ouvre alors un 2ème écran, où vous devez cocher la partie “” et activer les 2 propriétés en choisissant “accepter”

Explorer 6.x Une fois ces réglages effectués cliquez sur le bouton OK. La fenêtre “Paramètres” se referme alors. Si vous avez également modifié les paramètres de “Cache” et de “Scripting”, enregistrez vos modifications en cliquant sur OK dans la seule fenêtre encore ouverte, la fenêtre “Options Internet”. Vos modifiactions sont maintenant prises en compte.


Netscape Navigator 6.x, 7.x

Ouvrez Nestcape Navigator et cliquez sur le menu “Edition”

Dans le menu qui s'ouvre alors choisissez le dernier élément : “Paramètres”

NDT : Pour savoir la version de Netscape Navigator installée sur votre machine allez dans la partie “Aide” du menu lorsque vous ouvrez Netscape. En choisissant “A propos” une fenêtre va s'ouvrir, où le numéro de version sera affiché.

Pour visualiser la gestion actuelle du cache cliquez sur la partie “Avancée” du menu de gauche.

Dans le sous-menu qui s'ouvre alors choisissez la partie “Cache” et les options sur la gestion du cache vont s'afficher dans la partie de droite.

A la ligne “Comparer la page mise en cache avec celle chargée” activiez la ligne “A chaque ouverture de la page”.

Les paramètres pour le Javascript sont directement accessible dans le menu “Avancé” du menu principal

Vérifiez que la case à cocher “Activer Javascript lors de la navigation” est bien activé.

Lorsque vous aurez finis de configurer vos paramètres cliquez sur “OK” por enregistrer vos modifications


Votre navigateur est maintenant correctement configuré et vous pouvez commencer à utiliser Typo3

Le Login

Pour pouvoir travailler avec Typo3 vuos devez ensuite vous identifiez sur le système. Pour cela vous avez besoin de l'adresse correcte du site ( son URL ), un nom d'utilisateur ( Username ) et le mot de passe correspondant.

Indiquez à votre navigateur l'adresse du site que vous souhaitez configurer (z.B. http://www.ihre-domain.de/typo3).

NDT : Cette adresse vous est donnée par l'administrateur du site et n'est pas l'adresse du site. Il s'agit de l'adresse pour accéder à la gestion du site

Donnez votre nom d'utilsateur

Donnez votre mot de passe.

NTD : Ces deux valeurs vous ont été données par l'administrateur du site

Appuyer sur le bouton “Log in”

Si les 2 valeurs ont été correctement renseignée vous vous retrouvez maintenant sur l'écran principal de Typo3


http://www.ihre-domain.de/typo3

L'interface et ses différentes parties

Aperçu

L'interface de Typo3 est formée principalement de 3 parties

La Liste des modules – elle représente le menu principal de l'application. C'est en choisissant l'un des éléments la contenant que vous indiquez au système ce que vous souhaitez faire. Par exemple en allant dans le module “ “Utilisateur>Centre de tâche” vous pourrez mettre à jour le travail qu'il vous reste à faire

La menu de navigation – décrit les fonctionnalités disponibles à travers le module. Dans notre exemple nous avons choisis le module “Utilisateur>Centre de tâche”, et cette partie contient une liste des éléments modifiables : vos améliorations, vos notes, vos tâches en cours, et ainsi de suite.

La vue détaillée – décrit la zone de travail active. Dans notre exemple nous voyons les tâches restantes à faire, que l'on voit s'afficher en choisissant “Utilisateur>Centre de tâche” dans la liste des modules, puis “Notes rapides”

Ci-dessous: L'interface après s'être connecté et après avoir choisi dans la liste des modules “Utilisateur>Centre de tâche” puis “Notes rapides”.

Dans le coin en bas à gauche de l'écran sont toujours présent les boutons suivants :

Déconnexion – Lorsque vous voulez quittez Typo3 il suffit de fermer votre navigateur ou de vous déconnecter. En vous déconnectant vous pouvez ensuite laisser la place à la personne suivante, le système revenant à l'écran de connexion

Utilisateur – votre nom d'utilisateur est écrit ici.

Editer la page ID - über das Feld haben Sie die Möglichkeit schnell eine gewünschte Seite zur Bearbeitung aufzurufen.


La liste des modules

La liste des modules est classée par catégorie selon le type d'action que l'on souhaite effectuer. Pour un rédacteur la partie “Web” et “Doc” sont les parties les plus intéressantes.

La capture d'écran montre ici les différentes catégories : “Web”, “Fichier”, “Document”, “Utilisateur”, “Outil” et “Aide”

A l'intérieur de chaque catégorie sont affichés les différents modules. Dans notre exemple nous avons dans la catégorie “Web” les modules suivants :

"Web > Page",

"Web > Voir",

"Web > Liste",

"Web > Info",

"Web > Accès",

"Web > Accès",

"Web > Fonction" et

"Web > Gabarit"

Le menu de navigation

Dès que vous avez choisi un module ( par exemple “Web>Page” ) en cliquant dessus, le menu de navigation correspondant apparaît. Pour le module “Web>Page” il s'agit d'une arborescence de page, celle correspondante au site. Pour le module “Fichier” vous avez une arborescence des fichier du serveur, dans laquelle les images et les fichiers à télécharger du site sont stockés. Pour le module “Utilisateur>Centre de tâches” vous avez un nouveau menu qui s'affiche.

Comme le plus souvent les rédacteurs utilisent le plus fréquement le module “Web” nous alons nous baser sur celui-ci pour nos exemples. On pourra remarquer que la vue nous indique toujours la structure du site de manière arborescente.

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 “artplan21.info” est la page racine, “home” la première couche, “über uns” la deuxième, “kommunikation” la troisième, et ainsi de suite.

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

Devant le titre de chaque page on trouve un icône qui détermine le type et le status de chaque page. Par exemple les pages de type “Standard” ou “Avancé” sont représenté par une page jaune, comme on peut le voir sur la page “This week”


En bas de l'aborescence des pages se trouve un bouton Rechager l'arborescence depuis le serveur pour mettre à jour l'arborescence.

En cliquant sur le nom de la page vous ferez apparaître le détail de chaque page dans la partie droite de l'écran

En cliquant sur l'icône de la page vous faites apparaître un menu contextuel.

Ce menu contextuel permet d'afficher des fonctionnalités classique d'édition : copier, coller, déplacer une page. Nous détaillerons ce menu dans le chapitre sur les pages

La navigation dans l'arborescence des fichiers fonctionne sur le même principe.


La vue détaillée

La partie affichée par la vue détaillée est sans aucun doute la principale zone de travail. C'est ici que sont affichées les différentes informations et les possibilités d'édition selon l'élément choisi (par exemple une page). L'affichage s'adapte en fonction du module choisi.

Dans notre exemple nous allons aller dans le module "Web > Liste" et choisir la page “Open-Source-Systeme” dans le menu de navigation. Dans la partie vue détaillée apparaît une liste de toutes les données directement rattachées à la page "Open-Source-Systeme".

NDT : Il ne s'agit pas d'une vue en profondeur complète, mais simplement des pages directement liées à celle-ci, c'est-à-dire appartenant à la couche directement inférieure. Il ne s'agit pas d'une vue récursive

Toute en haut de la vue détaillée on trouve en général le chemin de l'élément ouvert et les icônes d'édition de la page ( ceux qui apparaissent dans le menu contextuel cf. page précédente )

Comme nous avons choisi le module "Web > Liste" nous allons donc voir le contenu de cette page sous la forme d'une liste. Le module "Web > Liste" donne des informations sur les pages, les icônes d'édition rapide étant également à disposition. Ces éléments seront expliqués dans les chapitres “Editer des pages” et “Editer des contenus”

En dessous de chaque vue détaillée se trouve un certain nombre de cases à cocher, selon le module choisi. Dans notre cas vous pouvez soit développer en profondeur la liste pour obtenir une vue étendue (cf. Point 1) soit afficher le contenu du presse-papier.

Dans le pied de page vous pouvez effectuer une recherche pour retrouver rapidement une page ou un élément.

Comme la vue détaillée diffère selon le module choisi nous ne présenterons que certaines d'en elles


Les Modules

Aperçu des différents modules

En choisissant un module vous déterminez le type d'action que vous souhaitez opérer sur une page. Nous allons à présent tenter d'expliquer dans les pages qui suivent les différents modules et leurs rôles respectifs. Même si en tant que rédacteur vous n'aurez certainement à vous servir que des modules “Web”, “Document”, “Fichier” et votre espace personnel, il est important que vous ayez au moins un aperçu des possibilités de Typo3 Les autres modules servent plus à l'administration du site. Le module “Outils” en est un exemple

Un bref descriptif de de chaque module de Typo3 est disponible dans le moduke “Aide>Sur les modules”

La partie " Web"

Vous trouverez ici les modules les plus importants pour la définition et l'édition de vos “Pages” Internet. Vous stockez les pages ici, ainsi que leurs contenus, que vous pouvez ensuite éditer. Le module “Vue” permet d'avoir un aperçu du rendu de vos pages avant de les mettre en ligne. C'est ici que ce trouve en fait l'ensemble des informations importantes relatives à vos pages, visualisables à travers les modules “Liste” et “Info”.

Vous pouvez également afficher les droits d'Accès des pages concernées, si elles ne doivent être accessibles que pour un public bien précis. La partie “Fonction” permet d'appeler des fonctions particulères sur le serveur, et la partie “Gabarit” détermine enfin le comportement et la structure générale du site.

La partie "Fichier"

Cette partie nous offre une vue de l'ensemble des ressources du site : les images, les fichiers à télécharger, les films, les sons, etc. qui seront utilisés dans les pages. Vous pouvez ainsi parcourir l'ensemble des fichiers de manière intuitive, puisqu'elle se rapproche fortement de la vue d'un explorateur de fichier classique

La partie “Documentation”

Cette partie affiche les derniers gabarits, contenus ou pages qui ont pu être édités. Cela permet de retrouver rapidement une page. Le nombre de page gardé en mémoire est définit dans le module “Utilisateur>Configuration”


La partie “Utilisateur”

Le module permet de configurer avec précision les paramètres de chaque utilisateur. Le centre de tâche permet de gérer des tâches, que ce soit seul ou en équipe

La partie “Outils"

Cette partie n'est en général accessible qu'à l'administrateur du site et offre différents outils d'administration des utilisateurs, de vérification de la consistence de la base de donnée, l'évaluation des fichiers de log ( afin de savoir par exemple qui s'est connecté en dernier pour modifier le contenu du site )

La partie “Aide”

Ce module vous offre un premier aperçu de Typo3, une aide en ligne sur différents thèmes assez généraux


La partie “Web”

La partie “Web” propose les modules suivants :

Page

Avec ce module vous pouvez créer puis éditer de nouvelles pages. Une fois la page créée vous devez y ajouter des contenus, c'est à dire du texte, des images, etc.

La partie Contenus est là pour ça. Suivant la configuration de votre site vous pourrez ajouter du contenu à droite, à gauche, au milieu ou à l'extrême bord.

La partie Recherche vous permet de retrouver rapidement un contenu.

La partie Fonctions avancées permet de vider le cache pour la page en cours, ou pour toutes les pages. Le problème vient des navigateurs et de la gestion du cache. Si vous avez déjà chargé la page le navigateur ne va pas recharger la page, il utilisera la page qu'il a gardé en mémoire. C'est pourquoi lorsque vous êtes en train de modifier une page et que vous voulez visualiser le résultat il est important de penser à vider les caches de ces pages


Vue

Ce module donne un aperçu du rendu d'une page. Grâce à lui vous pouvez immédiatement apprécier le résultat de vos modifications, sans avoir à vous déconnecter de Typo3. Avec ce module vous vous rendez directement à la page choisie

Le crayon (“Frontend-Editing") permet de savoir quels sont les parties que l'on peut modifier AU COURS DE LA VISUALISATOIN DU SITE. Il ne sera peut-être pas activé dans votre cas, puisqu'en général on ne souhaite pas que les visiteurs d'un site ne puisse en modifier le contenu

Liste

Le module “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.

Info

Le module Info rassemble les informations actuelles sur la page considérée.

Dans le mode “Arborescence” sont affichées les informations sur les pages ( quand ont-elles été fabriquées et par qui ? ), les dernières modifications d'entête, de contenu, de statut, etc. Les informations sont affichées à la fois sous la forme d'une liste et d'une arborecence. Un menu permet de choisir le type d'informations affiché : les paramètres de base, le cache et l'âge des pages ou les éléments qui la compose.

En choisissant dans la liste déroulante “liste” vous faites apparaître le fichier de log de la page considérée, c'est-à-dire l'ensemble des modifications qui ont pu être faites sur cette page. En cliquant sur “--> His” vous faites apparaître les détails de la modification que vous avez choisi. Vous pouvez ainsi revenir en arrière en cas de fausse manipulation, il y aura toujours une sauvegarde automatique de vos mises à jour.

Le mode “Configuration TS de la page” vous afficherez le TypoScript de la page considérée. Ce n'est pas utile pour un rédacteur.


Accès

Le module d'Accès sert à administrer les droits d'accès des utilisateurs internes du site ( appelé Back End ), concrètement ceux qui écrivent les pages. On y définit les propriétaires de chaque page ( d'après une notion d'utilisateur et de groupe ) . Les droits définissent l'accès en lecture, édition, suppression, et création de page.


Le mode “Résumé de l'utilisateur” permet de résumer vos droits personnels pour la page choisie

Fonctions

Le module “Fonctions” offre différents outils pour travailler plus efficacement avec Typo3.

Le mode “Trier les pages” permet de déplacer facilement les pages d'un site

Le mode “Créer des pages multiples” permet de créer jusqu'à 10 pages en une fois, en spécifiant simplement leus titres. Combiné avec la fonction précédente cela permet d'avoir très rapidement des pages prêtes à être remplies.


Gabarit ( Accessible uniquement par l'administrateur )

Le module Gabarit utilise les gabarits Typoscript, qui sont responsables de la mise en forme générale de votre site Web. Le module offre aux administrateurs de nombreux outils pour intégrer des gabarits internes ( appelés StaticTemplate ) et externe ( typiquement ceux qu'un graphiste aura réalisé ), ainsi pour configurer rapidement vos pages.

Le mode “Info/Modify” sert à avoir une vue d'ensemble d'un gabarit, son titre, sa composition, les ressources ainsi que les constantes qui lui sont associées.

Le mode “Constant Editor” décrit les objets qui configurent les gabarits Typo3 interne. Par ex. dans le gabarit “Cset” vous pourrez définir la taille, la couleur et la police de caractère.

Le mode “Typocript Object Browser” illustre la configuration des pages à travers un affichage arborescent.Il vous indiquera certaines fautes de syntaxe ( une accolade pas fermée par exemple )

Et enfin le mode “Template Analyser” décrit l'organisation des gabarits utilisés, et la hiérarchie entre chacun d'eux ( l'ordre d'apparition a une importance en cas de conflit )


La partie “Fichier”

Liste des fichiers

Le module Liste de fichier représente les fichiers disponibles pour Typo3. Cela vous permet d'accéder à un répertoire qui vous est personnel. En cliquant avec le menu gauche sur l'un des icônes de l'arborescence vous faites apparaître un menu contextuel, ceci afin de renommer un répertoire, déposer de nouveaux fichiers sur le serveur , ainsi que les fonctions de copier / coller , de suppression et d'informations .

Grâce aux cases à cocher en bas de l'affichage vous pouvez faire visualiser des miniatures de vos images ou du presse-papier, avant de copier ou de déplacer ces fichiers.

Images

Le module Image affiche les images du répertoire courant avec un aperçu plus grand de l'image, ainsi que certaines données complémenaires comme la taille de l'image en pixel. Les images sont affichées 5 par 5, le défilement se faisant à travers les icônes et


La partie “Document”

Le module de documentation vous donne accès aux documentations sur les pages, les contenus, les templates disponibles ou en cours de réalisation. Un menu permet de naviguer rapidement à travers les différentes parties. Le nombre maximal d'enregistrement disponible ici se paramètre dans le module “Utilisateur > Configuration”.

Grâce au 2nd menu vous pouvez opérer les opérations courantes sur le document visualisé : le fermer, le sauvegarder, etc.

NDT : Dans la version 3.6 de Typo3 il n'existe pas de documentation par défaut. Je ne suis donc pas en mesure de faire les captures d'écrans correpondantes.

Si aucun document ne peut être édité vous verrez une liste des dernières pages qui ont été affichées ou modifiées

.


La partie “Utilisateur”

Centre de tâches

Le module “Centre de tâches” est un outil pour gérer vos tâches quotidiennes Il contient vos notes personnelles (v.3.6) sur les tâches à faire, permet la communicatioin au sein d'un groupe de travail par un système de messagerie interne

et permet de suivre la plannification de votre travail . La partie “Avancé” renvoie les améloirations qui ont été apportées au Front-End , ainsi que les dernières pages à avoir été éditées par l'utilisateur .


Configuration

Avec le mdule de “Configuration” vous pouvez adapter l'environnement de travail selon vos désirs. Ainsi Typo3 propose un certain nombre de langue pour la partie Backend. Différentes formes d'affichage sont disponibles, selon vos préférences ou les capacités de votre écran. Vous pouvez définir si par défaut vous préférerez afficher des miniatures pour vos images, et si le texte d'aide doit appraître ou non, si la copie ( respectivement la suppression ) de manière récursive est autorisée ou non, combien de documents sont affichés au maximum par écran, etc.

NDT : une copie / une suppression récursive copie supprime la page courante ainsi que toutes les pages sous-jacentes.

On décide également si l'éditeur de texte riche ( Rich Text Editor, ou RTE ), doit être affiché ou non, et de même pour les menus contextuels. Afin d'améliorer la sécurité vous pouvez demander à être notofier par mail lorsque quelqu'un se connecte avec le compte choisi


La partie “Outils”

Administration des utilisateurs ( Notion utile uniquement pour les administrateurs ! )

Le module Utilisateur / Administrateur contrôle le coeur de la partie Backend de Typo3 de votre site. Grâce à lui vous récupérez un aperçu complet des utilisateurs actuels avec leurs droits, que vous pouvez modifier, et rassembler à travers une notion de groupe d'utilisateur. Finalement un profil utilisateur complet pourra être configuré.

Ce module est un moyen très utile pour les administrateurs qui souhaitent définir les rôles de chacun des rédacteurs, et surveiller leurs droits sur Typo3.


Le gestionnaire d'extension ( Notion utile uniquement pour les administrateurs ! )

Avec la version Typo3.5 quelques nouveautés ont été apportées. Le gestionnaire d'extension sert à l'administration des différents modules pour le Front et le Backend. Le coeur de Typo3 reste ainsi séparé des ajouts succésifs, qui pourront selon vos besoins être téléchargés.

Vérification de la base ( Notion utile uniquement pour les administrateurs ! )

Grâce au module de vérification de la base l'administrateur peut vérifier l'intégrité de la base de donnée, qui auraient été appliqués à travers la configuration $TCA des tableaux ( cf le module “Database Relations” ). L'affichage de l'arborescence complète, en incluant les pages supprimées ( module “Total Page Tree” ), des statistiques sur les enregistrements ( module “Record Statistics” ), une fonction de recherche globale sur la base ( module “Full search” ) sont autant d'outils pour contrôler la consistence de votre site Web


Log ( Notion utile uniquement pour les administrateurs ! )

Typo3 enregistre toutes les modifications du site Web. Le module Log permet d'obtenir d'obtenir des statistiques de log sur les fichiers. Vous avez en tant qu'administrateur la possibilité de visualiser les modifications en les classant par utilisateur, par action ou par pages. Vous pouvez dans certains cas revenir en arrière, grâce à un historique des modifications.

Configuration ( Notion utile uniquement pour les administrateurs ! )

Le module Configuration offre à l'administrateur une vue d'ensemble de la valeur du tableau de configuration $TCA et de la variable de configuration $TYPO3_CONF_VARS. Vous n'y avez cependant qu'un accès en lecture.


Indexation ( Notion utile uniquement pour les administrateurs ! )

Si l'indexation du gabarit est activée à travers un TypoScript, vous pouvez dans le module Indexation mettre en place les paramètres du système d'indexation. Cela sera utilisé à travers le FrontEnd pour obtenir des statistiques sur les pages indexées, et ainsi pouvoir les évaluer.

Installation (Notion utile uniquement pour les administrateurs !)

Typo3 offre un outil d'installation de CMS, qui simplifie les paramètres et la configuration de base. Le module permet d'accéder directement à cet outil, après la validation d'un mot de passe ( celui-ci peut être désactivé )


phpMyAdmin (Notion utile uniquement pour les administrateurs !)

PhpMyAdmin s'est imposé comme interface d'administration des bases de données MySQL. Typo3 intègre cet outil pour pouvoir travailler directement sur la base de données. Une utilisation possible serait, par exemple, l'ajout d'une table à la base. Cela garantit un accès direct afin d'administrer pllus facilement les enregistrements de Typo3.


La partie “Aide”

Sur les modules

Ce module offre une courte description sur les différents modules actuellement disponibles. La liste correspond aux modules accessibles par l'utilisateur selon son profil.

Manuel utilisateur

Le module “Manuel utilisateur” renvoie à l'aide en ligne à l'adresse typo3.com. Ce site aborde différents thèmes généraux pour vous permettre de bien débuter avec Typo3. Il est en langue anglaise, mais n'offre cependant aucune information sur l'état actuel de votre système.

NDT : Pas encore activé sur la version 3.6.


A propos

Le module “A propos” donne des informations complémentaires sur le copyright, les conditions de licence ainsi que la version avec laquelle vous travaillez

NDT : il n'y a pas la version sur la 3.6.

Bienvenue

Le module “Bienvenue” vous offre onze animations pour vous familiariser avec les concepts de Typo3, et afin de faciliter vos 1er pas. Malheureusement l'interface utilisateur “Classic-Backend” est utilisé, ce qui, étant donné que vous utilisez l'interface “Alternative Backend”, pourrait plutôt vous embrouiller

NTD : Ce module n'est plus disponible dans les versions 3.6 et ultérieur. Vous pouvez vous rentre à l'adresse http://typo3.org/documentation/videos/ pour télécharger des vidéos (an anglais)

Après cette vue d'ensemble des modules de Typo3 nous allons maintenant nous intéresser à la conception des pages proprement dites.


http://typo3.org/documentation/videos/

La création et la modification de page

Les notions prérequises:

Dans Typo3 une page construit un cadre pour accéder à l'information de votre site Web. Elle représente un conteneur pour différents contenus, qui seront ensuite renseignés. Elle a son propre numéro d'identification et en général un titre, ainsi qu'une description, différents mot-clés pour les moteurs de recherche, un certain aspect défini à travers un gabarit, etc. La hiérarchie ( ou structure ) des pages est représentée sous la forme d'une arborescence. Cette hiérarchie détermine en général les liens pour la navigations entre les pages de votre site Web.

Typo3 définie également un type standard pour ses pages, ceci afin de simplifier votre travail. Ces types permettent de paramétrer la page, par exemple en indiquant si oui ou non la page doit apparaître dans un menu.

Les contenus (du texte, des images, des tableaux) seront ajoutés à chaque page.

Pour les contenus plus complexes, les formulaires et les cas particuliers (Calendrier, e-Commerce, etc.) vous pourrez choisir un type plus particulier. Cela permet ue gestion plus précise de chaque contenu, la page étant là uniquement pour agencer les contenus

Nous allons maintenant étape par étape étudier les points suivants

Comment afficher les informations sur les pages existantes ?

Comment insérer une nouvelle page ?

Comment éditer une page avec les différents modules disponibles ?

Quels types de page existe-t'il ?

Quelles améliorations peuvent vous apporter les fonctionnalités d'une page ?

Les informations d'une page

Typo3 fournit un résumé compact de toutes les informations importantes d'une page existante, donnant ainsi rapidement une vue d'ensemble.

Vous pouvez utliser le menu contextuel dans la partie “Web” pour une navigation rapide. Cliquez sur une page de l'arborescence sur l'icône correspondant, et vous ferez apparaître le menu contextuel. Celui-ci offre un certain nombre de fonctionnalités :

Voir – pour afficher la page,

Editer – pour modifier le contenu d'une page,

Nouveau – pour créer une nouvelle page,

Info – pour avoir des informations sur une page,

Copier -pour déposer la page (et ses contenus) dans le presse-papier,

découper,

Copier dans – ajoute le contenu du presse-papier comme sous-page de la page actuelle,

Copier après - ajoute le contenu du presse-papier comme page en-dessous de la page actuelle,

Dans la partie “Plus d'options”

Déplacer - pour changer la position d'une page dans l'arborescence ,

Historique / Undo – Pour afficher l'historique des modifications et éventuellement en annuler certaines.

Accès – Contrôler et modifier les droits d'accès aux pages

Web>Listenmodul – Ouvrir la page sous forme d'une liste


'Assistant nouvel élément – l'assistant de création de page et d'insertion dans le site

Cacher – cela signifie mettre votre page hors-ligne, c'est-à-dire pour qu'elle ne soit pas visible sur votre site Web

Propriétés de visibilité – pour une publication planifiée vous pourrez ici indiquer à quel moment votre page doit être mise en ligne

Editer les entêtes de pages – Pour modifier les “méta-données” comme le titre, la description mais également les droits d'accès, le cache,etc....

Supprimer

Pour visualiser les informations sur un page vous choisissez naturellement la ligne Info .

Une nouvelle fenêtre s'ouvre alors avec les infomations actuelles de la page choisie. Dans cet exemple nous avons une page de type “Standard” avec comme titre de page ”News”. Le renouvellement du cache se fait de manière standard, c'est-à-dire régulièrement, après un certain temps. Les autres informations de la page n'ont pas été définies. L'emplacement de la page dans l'arborescence est /FC Bigfeet/Home/News et l'identifiant actuel de la page est ID = 20.

Pour accéder aux informations d'une page et son contenu vous trouverez également l'icône dans le module “Web>Liste” en activant la vue étendue.


Créer une nouvelle page

Typo3 simplifie énormément la création d'une page

Choisissez l'endroit où vous souhaitez ajouter une page dans l'arborescence et grâce au menu contextuel choisissez l'Assistant 'Nouvel élément' ou l'action Nouveau .

Nous choisissons dans notre exmple l'action “Nouveau”. Dana la partie vue détaillée nous avons un certain nombre d'éléments actuellement à disposition. Il s'agit de ceux que nous pouvons ajouter à cette page

Si la page doit être placée en dessous de la page courante choisissez l'icône "Page (dans)"

Si vous souhaitez placer la page à autre endroit choisissez l'”assistant”

Dans notre exemple l'assistant permet de choisir l'endroit exact de la page que vous allez créer. Ici il s'agit de la page “News”. Cliquez sur la flèche grisée pour faire votre choix.

Nous venons de déterminer l'emplacement de la page à créer. Un formulaire de création de page s'ouvre alors.


En haut se trouve une série d'icône pour fermer votre formulaire. Pour sauvegarder vos données choisisssez . Vous pouvez également sauvegarder et visualiser le résultat de vos modifications , sauvgarder et fermer le formulaire

ou simplement fermer le formulaire sans sauvegarder .

L'emplacement dans l'arbosrescence que nous avons choisi précédemment est indiqué en-dessous des icônes. Dans notre exemple il s'agit de “/FC Bigfeet/Home/News/”

Nous allons maintenant choisir le type de page que nous allons créer.

"Type": En général il s'agit d'une page “Standard” ou “Avancé”. Les autres types à disposition seront expliqués plus tard

dans ce chapitre. Pour le moment nous allons choisir le type “Standard”

La prochaine étape est de donner à notre page un titre.

"Titre visible sur le côté": Il s'agit d'une rubrique nécessaire, puisqu'elle correspond au titre qui apparaîtra dans votre site Internet. Typo3 vous indique par l'icône que ce champ est obligatoire

Quand vous sauvegarderez vos modifications la page sera placée dans l'arborescence. Il reste cependant encore beaucoup de chose à défnir dans notre page, ce que nous allons voir dans la partie “Editer une page”


L'édition d'une page

Dans l'exemple précédent nous venons de créer une nouvelle page de type “standard”, nous l'avons enregistrée puis nous avons refermé le formulaire. Disons maintenant nous souhaitons modifier le titre de la page précédente. Nous allons vous montrer comment éditer une page, et quelles sont les informations à fournir à chaque édition ( c'est-à-dire celles qui ne dépendent pas du type de page choisi).

Nous voudrions simplement une nouvelle fois insister sur le fait que nous sommes connectés en tant qu'administrateur. Cela signifie que de votre côté, celui du rédacteur, il est très probable que vous ne puissiez voir exactement les mêmes fenêtres que celles de ce manuel. Cela dépend des droits qui vous ont été alloués par l'administrateur du site.

La manière la plus rapide d'éditer une page est d'aller dans l'arborescence du site et d'utiliser le menu contextuel.

Cliquez sur l'icône de la page avec le bouton droit de la souris, et dans le menu contextuel choisissez “Editer”. Vous pouvez également choisir “Editer les entêtes de la page” si vous ne souhaitez modifier que les propriétés de la page et non son contenu.

En allant dans le module “Web>Liste” et en choisissant la page correspondante dans la vue détaillée vous pourrez éditer les entêtes de page en cliquant sur l'icône

Toujours dans le module “Web>Liste” vous aurez d'autres informations à disposition :

Le chemin de la page dans l'arborescence du site

Un certains nombre d'icône pour voir le site, pour éditer les entêtes de page, pour ajouter un nouveau contenu, pour cacher la page sur le site ou inversement la rendre visible et finalement pour déplacer la page.

Pour améliorer les performances de votre site, Typo3 intègre un système de cache. Cela signifie que lorsque l'on va afficher une page celle-ci sera également sauvegardée dans la base de données, ceci afin de diminuer les temps de chargement. Lorsque vous afficherez une nouvelle fois la page, celle-ci sera chargée à partir de l'image sauvegardée dans la base de données, elle se sera plus reconstruite intégralement. Pour vider le cache d'une page vous pouvez utiliser l'icône C. L'icône rafraîchit l'affichage de la page une fois le cache vidé et l'îcone va charger la vue détaillée des pages situées au niveau supérieur par rapport à la page courante.

Dans la partie “Page” vous verrez l'ensemble des contenus de la page

En allant dans le module “Web>Page” vous aurez la possibilité de choisir votre mode d'édition.

Le mode “Edition rapide” vous donne un accès immédiat à l'édition des contenus de la page.

Pour modifier les entêtes de page vous pouvez utiliser le menu déroulant ou l'icône .


Le module “Web>Page” en mode “Colonne” affiche un aperçu des différents contenus de la page afin de choisir facilement celui que vous souhaitez éditer.

Servez-vous de l'icône pour modifier les entêtes de page

Nous venons de voir toutes les méthodes pour accéder à l'entête d'une page et pouvoir ainsi la modifier. Indépendamment du type de page choisi se trouve un certain nombre de champs que l'on retrouvera dans chaque page : le titre de la page, le type de page, et les informations générales.

Dans notre exemple nous avons déjà une page de type “Standard”. Dans la partie “Type” nous pouvons définir :

Le status on-lien de la page. Acivez cette case à cocher.

"Cacher une page", permet de cacher une page, c'est-à-dire de l'enregistrer sur Typo3 sans la mettre en ligne. Vous pouvez ainsi prendre tout votre temps pour finaliser votre page, la relire, sans qu'elle ne soit mise à disposition du grand public.

Parmi les autres options :

"Préparation-Type": cette propriété indique quel type d'organisation existe pour cette page. Celle-ci dépend des templates HTML présents sur le site, et ne sont pas forcément à disposition. Demandez à votre administrateur si cette option est utilisable dans votre cas

"Dernière mise-à-jour": Indiquez ici la date de dernière modification sous la forme 12:00 30-10-2002 (l'heure, puis la date).

"Nouveau jusqu'à": jusqu”à quand la page doit-elle être considérée comme nouvelle.


Dans la partie "Titre de la page"

Les champs présents ici dépendent tous du type de page choisi à l'exception du champ

"Titre visible sur le côté": qui est obligatoire pour tout titre de page.

"Sous-titre": facultatif, il n'apparaîtra pas si les sous-titres ne sont pas gérés sur votre site

La partie “General options" définit la gestion de la publication de la page ainsi que les droits d'accès :

"Lancement": indique la date à laquelle une page devra être mise en ligne, sous la forme Jour-Mois-Année (par exemple 13-9-2002)

"Stop": indique la date à laquelle une page devra être cachée. Remplissez le champ de “Stop” de la même manière que précédement, sous la forme Jour-Mois-Année (par exemple. 27-10-2002).

"Accès": si la page ne doit être accessible qu'à un certain type d'utilisateur, après validation d'un login + mot de passe, ou si son accès n'est pas limité. L'icône appraîtra dans l'arobrescence afin d'indiquer que son accès est restreint à un groupe d'utilisateur bien précis. Si les sous-pages de cette page sont définies avec les mêmes contraintes seule la page principale aura un icône particulier, qui cette fois sera de cette forme :

"Inclure les sous-pages": indique si les propriétés de la page que nous venons de définir doivent être étendues à celle des pages sous-jacentes. Dans ce cas validez la case à cocher correspondante

Nous venons de créer une page de type standard et d'éditer ses propriétés. Au-delà du type “standard” et “avancé” il existe d'autres types de pages, que nous allons décrire maintenant.


Le type de page “Standard”

Comme son nom l'indique il s'agit d'une page de base, que vous trouverez à côté du type “Avancé” dans le menu.

Dans la partie “Type” vous trouverez la case à cocher indiquant si la page doit être cachée ou non.

Dans la partie “Titre de la page” :

"Tire visible sur le coté" est un champ obligatoire. Lorsque la page est construite dynamiquement par Typo3 les entrées des différents menus ainsi que le titre de la page indiqué par le navigateur sont créés à partir de ce champ.

"Sous-titre": La visualisation du sous-titre dépend du template HTML du site. Si votre template exploite la notion de sous-titre ce champ vous permettra de définir un sous-titre pour votre page

Grâce aux options avancées vous pouvez définir :

"Alias": Pour que cette page ne soit plus référencé à partir de son identifiant dans l'arborescence vous pouvez ici lui donner un nom.

NDT : Rappel : pour voir l'identifiant d'un page laissez la souris sur l'icône de la page. Un encadré va apparaître avec le numéro représentant l'identifiant de la page choisie

"Cible": Lors de l'utilisation d'un lien internet vous pouvez ici définir si ce lien devra s'ouvrir dans une nouvelle page (_blank), dans la frame principal si vous utilisez des frames (_parent), dans la même fenêtre après fermeture de la frame courante (_top).

"Pas de cache": Activez cette case à cocher si vous ne voulez pas que cette page soit mise dans le cache mais qu'elle soit reconstruite dynamiquement à chaque lecture.

NDT : Par ex. Une rubrique de news devrait avoir cette option de coché. Si vous ne le faites pas la page sera toujours rechargée à partir de l'image présente en base, ce qui fait que vous ne verrez les modifiactions qu'une fois votre cache vidé.

"Renouvellement du cache": Grâce à ce menu déroulant vous pouvez choisir pour chaque page le temps de renouvellement du cache, c'est-à-dire le temps au bout duquel l'image de la page dans le cache sera supprimée

La partie “TSconfig”. Elle est rarement utilisée par les rédacteurs

"TSconfig": sert pour configurer plus particulièrement une page et son comportement à travers l'utilsation de TypoScript

Grâce aux options avancées vous pouvez définir :

“Bloquer l'arborescence” si vous souhaitez empêcher que l'on rajoute des sous-pages à cette page. Les sous-pages restent cependant toujours visible dans le FrontEnd.

“Jstop” : remplit les mêmes fonctions que l'interface classique et n'a pour nous, comme nous l'utilisons comme “Alternativ-Backend”, aucune répercussion.

“Est la racine du site” indique aux robots qu'il s'agit du début de l'arborescence d'un site


Le type “Avancé"

Grâce au type “Avancé” vous aurez accès à nettement plus d'informations qu'avec le type standard. Vous pourrez également rajouter des “Plugins” qui vous apporteront des fonctionnalités nouvelles

Dans la partie “Titre de la page" se trouve maintenant un “titre de navigation”, afin de définir l'entrée qui sera visbile dans le menu.

Dans la partie “Contenu de la page”:

"Abstract": Vous pouvez indiquer ici un résumé du contenu de la page. Celui a pour but d'informer les autres rédatceurs du contenu de la page, et n'est pas utiilsé par les moteurs de recherche

"Mot-clés(,)": Indiquez ici une série de mots-clés, séparés par des virgules, afin de décrire le contenu de la page. Ces mots clés seront utilisés ensuite par les moteurs de recherche

"Decription": Donnez ici une brève description de la page, qui sera ensuite exploitée par les moteurs de recherche.

Grâce aux options avancées:

"Auteur": L'auteur de la page peut ici se présenter

"Email": L'auteur renseignera ce champ avec son adresse mail courante

Dans la partie “Fichiers” vous auirez la possibilité à travers le champ “Fichiers” d'attribuer des images. Votre image ne sera affichée que si votre template HTML en tient compte, ce qui est à demander à l'administrateur du site

Dans la partie “Tsconfig” vous pouvez, à travers les champs :

"Contient plugin”: ajouter un plugin.


Le type de page "URL externe"

Si vous souhaitez ajouter une entrée dans le menu de votre qui soit un lien vers une page externe, choisissez le type “URL externe”. Typo3 ne saurait en aucun cas garantir la validité de l'adresse indiquée, en particulier sa pérennité (si le site cible change d'adresse par exemple).

Dans la partie “Titre de la page” se retrouve les mêmes informations que pour le type “Standard”.

“Titre visible sur le côté” indique simplement l'entrée telle qu'elle apparaîtra dans le menu de votre site.

Dans la partie “URL” indiquez :

"URL": L'adresse du site externe choisi. Cette adresse peut être écrite sous la forme http://www.monsite.com ou www.monsite.com, ou [email protected] dans le cas d'une adresse mail

Grâce aux options avancée vous pourrez définir:

"Type": Le type de lien dont il s'agit, c'est-à-dire le protocole utilisé, par exemple "http://", "ftp://" und "mailto:"


mailto:[email protected]

http://www.monsite.com/

http://www.monsite.com/

Le type de page “Raccourci”

Le type de page “Raccourci“ remplit la même fonction que le type de page “Externe URL”, à la différence qu'il s'agit d'un lien vers une page interne, c'est-à-dire vers une page de votre site

Cela vous permet de définir un thème général pour le menu du site, et que le fait de cliquer sur le thème prinicipal redirige automatiquement l'utilisateur vers une page bien précise. Cela vous permet un meileur contrôle de la navigation et de la structure de votre site.

NDT : Par ex. la page “Archive” composé de “Avril 2004”, ”Mai 2004”, sera définit comme un raccourci vers les archives les plus récentes, c'est-à-dire celle de mai 2004

Dans la partie “Raccourci vers une page" vous pouvez grâce au bouton appeler l'explorateur de Typo3 et choisir la page souhaitée dans l'arborescence. Le bouton permet de supprimer le lien actuel.

L'explorateur de Typo3 est utilisé à plusieurs endroits différents pour spécifier des pages ou des fichiers à utiliser. Il est très pratique d'usage, et affiche uniquement les renseignements à donner (dans notre cas une page du site)


Utilisation de l'explorateur de Typo3 :

Grâce à l'arborescence dans la partie gauche de la fenêtre vous pouvez naviguer à travers les differentes pages.

L'icône affiche dans la partie de droite les sous-pages apparenant à la page sélectionnée (ou selon les cas les contenus de la page).

Pour choisir la page à insérer dans le champ “Raccourci” utilisez l'icône qui se trouve à droite de chaque page de l'arborescence, ou cliquer sur l'une des pages / sur son nom, toujours dans la partie de droite. Lorsque ce choix aura été fait la fenêtre va se fermer et le lien aura été ajouté dan le champ “Raccourci”


Le type de page “Absent du menu"

Le type de page “Absent du menu” correspond exactement au type standard, à ceci près qu'il se sera présent ni dans le menu ni dans le plan du site

Remplissez les champs que nous avons déjà vu pour le type standard.


Le type de page “Section utilisateur Backend"

Ce type de page n'est visible que pour les utilisateurs Backend ayant des droits en lecture sur la page. Cela permet par exemple de conserver sur une page des news qui n'ont pas encore été valildées à travers le procesus de Workflow. Les utilisateurs Backend n'y auront accès qu'après s'être connectés. Ces news ne sont donc pas visible pour les visiteurs du site

Remplissez les champs que nous avons déjà vu pour le type standard.


Le type de page "Délimiteur"

Les délimiteurs servent à structurer le menu de votre site en y insérant des ligne horizontales qui ne sont pas cliquables. Cela requière l'ajout de TypoScript pour prendre en compte ces délimiteurs, sinon ils ne seront pas visibles dans le menu.

Dans notre exemple le délimiteur “-- Les pages -- ” encadre la page “Aperçu” et “Informations”. A gauche pour voyez comment est représenté ce délimiteur dans l'arborescence du Backend.

Donnez le titre de la page qui sera placé dans le délimiteur


Le type de page “Dossier système"

Ce type de page ne sera pas afficher sur le site Web, et sert comme conteneur (ou répertoire) pour différents objects. Dans notre exemple nous allons enregistrer les catégories de news dans un “Dossier système”.

Donnez le titre de la page qui sera donné ensuite au dossier système

Le type de page "Corbeille"

Dans la “Corbeille” vous pouvez placer des pages qui sont effacées sans être définitement supprimées du site. Ces pages ne sont alors plus visibles à partir du FrontEnd.

Donnez un titre pour votre corbeille.

Ces fonnctionnalités peuvent être étendues par Typo3 à travers l'utilisation de “Plugins”. Dans le prochain chapitre nous allons étudier les principaux plugins qui sont mis à disposition par Typo3


Content plugin

Typo3 offre de nombreux plugins pour améliorer les fonctionnalités existantes. Nous allons simplement décrire les principales qui pourront être intégrées à une arborescence. Ces propriétés étendues sont définis dans les entêtes de pages ne font que modifier l'aspect de l'icône dans l'aroborescence du site. Concrètement pour profiter de la fonctionnalité choisie il faudra installer ou télécharger sur le site de Typo3 le plugin correspondant.

Plugin "Livre d'or"

Cette fonctionnalité permet aux visiteurs du site donner leur avis sur le site, son contenu, sa structure, lors de leur visite. Ce plugin contrôle la manière dont ces contributions vont apparaître dans le site.

Plugin "Forum"

Le plugin “Forum” permet aux visteurs de déposer des questions / des réponses, sur des thèmes définies par les modérateurs du forum.

Plugin "Magasin"

Ce plugin permet de proposer des proposer des produits, en les classant par catégories

Plugin "Nouvelles"

“Nouvelles" est un plugin qui gère l'ajout d'information courtes : des dépêches par exemples.

Plugin "Direct Mail"

"Direct Mail" est un plugin qui gère une mailing liste

Plugin "Website Benutzer"

La page sert à répertorier les utlisateurs du FrontEnd. Il s'agit d'un dossier système spécifique.

Dans la partie suivante nous allons voir comment ajouter un contenu à une page. Ces contenus sont indéndants des pages, qui sont en fait les conteneurs de ces contenus


Les types de contenu

Aperçu

Les contenus représentent l'information telle qu'elle apparaît sur le site Web. Ils sont classés et affichés à travers les pages du site. Ils sont placés dans Typo3 comme des listes dans les pages et c'est leur agencement quidéfinit leur ordre d'apparition.

Typo3 offre un certain nombre de types de contenu, qui seront choisis selon le type d'information et facilite ainsi l'édition des pages.

L'ordre d'apparition des contenus dépend du classement des contenus dans les pages, de l'ordre des pages, du template et du TypoScript associé.

Nous allons voir dans cette partie:

Comment créer un contenu et comment Typo3 intéprète ce contenu

Comment se déroule l'édition d'un contenu suivant son type

Comment éditer un contenu existant

Quels sont les différents types de contenu disponible

L'agencement des contenus

Un site Internet est en général formé d'un certain nombre de contenu. Ces contenus sont donc le coeur du site, ce sont eux les réels porteurs d'information. Le travail prinicipal d'un rédacteur consiste ainsi à éditer et maintenir à jour ces contenus.

Nous allons étudier l'organisation d'un site dans un cas concret

Chaque zone de la page est représentée par une colonne sous Typo3, une zone dans laquelle on peut ajouter un contenu : "LINKS", "NORMAL", "RECHTS", "HEAD", "EXTRA". Ces zones sont définies avec du TypoScript et dépendent du Template utilisée par votre site. Il est donc tout à fait possible que votre site n'ait pas autant de zone de contenu à diposition, mais simplement une, voir deux colonnes. Il s'agit d'un choix fait par l'administrateur du site.


Pour afficher, ajouter ou éditer les contenus par zone allez dans le module ”Web>Seite” en mode “Colonnes”. Dans notre exemple le site s'organise autour de 5 grandes zones

"LINKS"

"NORMAL"

"RECHTS"

"HEAD"

"EXTRA"

et "SCRIPT"

Si le contenu d'un page doit être disponible en plusieurs langues vous pouvez aussi basculer vers un écran similaire, mais décrivant le contenu de la page dans l'une des autres langues de votre site. Pour cela allez dans “Web>Seite” et choisissez le module “Langues”

NDT : Il ne s'agit pas de l'unique manière de traduire une page, et il ne s'agit peut-être pas de la philosophie adoptée par l'administrateur pour votre site. Il existe en réalité une autre méthode qui consiste à créer plusieurs arborescences, une par langue

Dans notre exemple notre site Internet est bilingue. Les contenus dans les deux langues seront affichés de la manière suivante :

"Standard" correspond à la configuration classique du site

"Englisch" à la 2ème langue utlisée pour ce site

Les contenus seront affichés les uns à la suite des autres, d'après la langue et la zone de contenu à laquelle ils appartienent, comme on peut le voir sur les colonnes La création de page multilingue est donc relativement simple à mettre en place.


L'interface

Dans Typo3 l'interface varie en fonction des contenus que vous éditer, ceci afin de correpondre au mieux avec les renseignements réellement attendus par chaque type de contenu.

Pour éditer un contenu, vous pouvez étendre les champs à remplir. A l'aide des cases à cocher vous pouvez ainsi ajouter la palette optionnelle ou de l'aide en ligne sur l'utlité de chaque champ.

"Afficher la 2ème palette": pour afficher plus de champs

"Afficher la description des champs”: pour afficher l'aide en ligne

"Désactiver Rich Text Editor (RTE)": Pour désactiver le RTE (Rich Text Editor).

Concrètement la “2ème palette d'options” vous permet d'être plus précis dans la définition de vos contenus, et de préciser leur comportement

Dans cette fenêtre le RTE (Rich Text Editor) n'a pas été désactivé

Pour afficher la 2ème palette d'option associée à ce champ cliquez sur , car l'option d'affichage est décoché par défaut

Les champs supplémentaires apparaissent soit en haut dans la partie supérieure de l'écran, soit directement sous le champ principal choisi


En activant l'option “Afficher la 2ème palette”,

des champs à saisir supplémentaires vont apparaître pou chaque champ. Le formulaire s'allonge alors d'autant

Ajouter un contenu

Typo3 rend également la création de contenu très facile.

Choisissez une page de l'arborescence à laquelle vous souhaitez ajouter un contenu. Cliquez sur l'icône de la page avec le bouton gauche de la souris. Un menu contextuel s'ouvre alors, choisissez l'option "Nouveau".

Dans la partie Vue détailée apparait un choix de contenu parmi ceux que vous êtes en droit de créer. Pour créer un


nouveau contenu choisissez :

"Contenu" et un formulaire de saisie s'ouvre alors, ou bien

"Assistant", et vous pourrez choisir le type de contenu ainsi que l'emplacement du contenu parmi les pages de l'arborescence.


L'assistant de création de contenu

Cet assistant vous indique

Le nom de page à laquelle vous avez choisi d'ajouter une page

Grâce à la liste déroulante déterminez le type de contenu que vous souhaitez aouter. L'assistant adaptera le formulaire de saisie en fonction du type de page choisie

"Contenu type de la page" -

"Elément texte norma",

"Texte avec une image en dessous",

"Texte avec une image à droite",

"Liste d'images",

"Liste à puces",

"Tableau" -

"2léments spéciaux" -

"Fichiers à télécharger",

"Multimedia",

"Carte du site",

"Code HTML

"Formulaire" -

"Formulaire par e-mail",

"Formulaire de recherche",

"Formulaire d'identification".

Une fois le type de contenu choisi choisissez l'emplacement où vous souhaitez placer ce contenu parmi les différentes zones à disposition. L'assistant affiche les contenus déjà présents et les différents emplacements où vous pouvez placer votre nouveau contenu. Grâce à l'icône vous pouvez spécifier cet emplacement. Le formulaire de saisie de Typo3 va alors s'afficher, et vous aurez ainsi créé votre premier contenu

A partir de la version 3.5 de Typo3 les plugins de Front-End disponibles seront aussi disponibles à la fin de l'assistant.


Le formulaire de saisie

Le formulaire de saisie rassemble l'ensemble des champs à spécifier pour un type de contenu donnée. En haut vous trouverez une série de boutons et un menu déroulant pour effectuer des actions sur votre formulaire de saisie

Pour sauvegarder les valeurs saisies cliquez sur "Sauvegarder", les autres options étant "Sauvegarder et afficher le site Internet", "Sauvegarder et fermer", "Fermer" sans que vos modifications ne soient prises en compte.

Le menu déroulant vous permet également de vider le cache.

Le chemin d'accès du contenu dans l'arborescence sera également indiqué ici

On rappelle ici simplement qu'il s'agit d'un formulaire de saisie d'un contenu (d'après l'icône choisi et le titre du formulaire)

L'ensemble des formulaires possèdent une zone pour définir le “Type” et les “Options avancées”

"Type": C'est l'information décisive, celle qui définit tous les autres champs du formulaire. Suivant les rensignements que vous donnerez certains nouveaux champs pourront d'ailleurs apparaître ou disparaître. Rappelez-vous simplement qu'avant chaque mise-à-jour des champs de la page il faudra sauvegarder vos valeurs, sinon les champs saisis seront remis à zéro. Votre navigateur devrait vous l'indiquer au moment de recharger le formulaire.

Les autres options que vous pouvez définir :

"Langue": pour classer les contenus par langue, dans le cas où la page est définie avec plusieurs langues différentes

"Colonne": Pour afficher les zones de contenus par colonne, avec les contenus classés selon leur ordre d'apparition. Le nombre de colonne est défini par un TypoScript

"Avant", "Après": Défnissez ainsi une marge supérieur et inférieur pour l'insertion de votre contenu

"Cadre": Grâce à la liste déroulante définisser ainsi si le contenu doit être encadré, s'il doit avoir une couleur de fond, ou si vous souhaitez juste une ligne de démarcation.


"Index": Si la case à cocher est validée, le contenu sera indexé dans la base de donnée. Cela suppose cependant que l'outil d'indexation soit activé à travers un TypoScript approprié.

"Vers le haut": En activant cette case à cocher Typo3 ajouter un lien en bas du contenu pour remonter automatiquement en haut de la page

Dans la partie Option générales du formulaire vous définissez

"Cacher": Si le contenu doit être visible.

"Lancement": La date à laquelle ce contenu doit être mise en ligne (Format: 24-10-2002).

"Arrêt": Inndique la date à laquelle le contenu doit être caché. Ce contenu restera archivé.

"Accès": Vous pouvez limiter la visibilité du contenu pour un groupe d'utilisateurs du Front-End. Ce contenu ne sera alors visible que lorsque un membre des personnes autorisées se sera connecté

Dans la partie suivante nous allons vous présenter la manière d'éditer le contenu selon le module choisi.


Editer un contenu

Pour éditer un contenu sous Typo3 vous disposer des modules “Web>Liste” et “Web>Page”.

L'édition de contenu à travers le module “Web>Liste”

Le module "Web>Liste” offre une vue d'ensemble des contenus d'une page sous forme d'une liste

En activant la case à cocher "Vue avancée" un menu composé d'icône va apparaître pour éditer vos contenus

Grâce à ces icônes vous pourrez réaliser l'opération que vous souhaitez :

"Visualiser le site", "Editer un élément", "Déplacer un élément","Afficher l'historique des changements", "Créer un nouvel élément, après celui-ci", “déplacer vers le bas” et respectivement vers le haut. , “cacher l'élément” ou le rendre visible et finalement supprimer l'élément.

En cliquant sur l'icône d'un contenu vous ferez alors apparaître un menu contextuel, comme dans l'aroborescence, qui d'ailleurs offre les mêmes fonctionnalités

Comme nous voulons éditer une page, nous devons choisir “Editer un élément” dans la liste d'icône ou dans le menu contextuel. Un formulaire de saisie s'ouvre alors en fonction de l'élément choisi


Edition d'un contenu à travers le module “Web>Page” en mode édition rapide

En mode “Edition rapide” le module “Web>Page” affichera directement le contenu de la page à éditer dans un formulaire

Le mode “Saisie rapide” en haut de la vue détaillée, dans le menu déroulant.

Directement en-dessous vous trouvez un 2ème menu déroulant pour afficher les autres contenus de la page, ainsi que les boutons classiques pour les opérations courantes (fermer, enregistrer, etc.)

La partie principale de la vue détaillée est constitué des différents champs pour paramétrer le contenu de la page que vous êtes en train d'éditer

4 cases à cocher permettent de contrôler la forme du formulaire

"Afficher les contenus cachés": vous montre les contenus cachés (ceux qui ne sont pas mis en ligne)

"Show secondary options (palettes)”: Permet d'afficher des champs de saisie optionnels. Si cette option n'est pas activée, vous pouvez aussi afficher les champs pour la partie qui vous intéresse grâce à l'icône . Les champs vont alors appraraître non pas à la suite du formulaire mais dans la partie supérieure de l'écran.

"Show field description": décrit de manière brève la fonction de chaque champ de saisie. Pour n'afficher la description que d'un élément, celui qui vous intéresse, cliquez sur l'icône .

"Désactiver le RTE": Le RTE aparaît en général lorsque vous éditez un contenu de type “Texte” ou “Texte avec image”, mais vous pouvez grâce à cette option saisir votre texte dans un champ de saisie normal

En bas de la page se trouve une description des éléments de la page, classé par contenu. Celui que vous éditez actuellement se reconnaît par un icône .


Nous voudrions enfin souligner plus particulièrement le mode d'édition rapide entre les différents contenus de la page à travers le menu d'édition rapide.

Tout d'abord le menu déroulant, qui est présent pour chaque zone de contenu en haut de la page. Choisissez le contenu que vous souhaitez éditer d'après son titre.

En bas de la vue détaillée les contenus seront à nouveau classés selon leur ordre dans la page, sous la forme d'un tableau pour distinguer chaque colonne de la page.

Pour éditer un des contenus de page cliquez sur le titre de l'élément choisi.

Pour ajouter un nouvel élément cliquez sur la flèche pour préciser son emplacement dans la page

Editer des contenus à travers le module “Web>page” en mode “Colonne”

Pour lancer le mode d'édition “Colonne” du module “Web>page” aller dans la liste déroulante en haut à droite. Les icônes d'édition habituels s'affichent alors dans la page

La vue qui apparaît alors représente la page, séparé selon chaque zone de contenu. Dans notre exemple, certainenement différent de celui que vous utilisez chez vous, il s'agit des colonnes “GAUCHE”, “DROITE”, “ENTETE”, “EXTRA”, et “SCRIPT”

Les contenus sont ensuite ajouté les uns à la suite des autres, selon la zone de contenu à laquelle ils appartiennent


Dans chaque colonne on retrouve les icônes d'édition habituels, le type de contenu, et le début du texte apartenant au contenu.

Dans notre exemple nous nous trouvons dans la colonne NORMAL. Celle-ci commence par 3 contenus de type “Text”


Le type de contenu “Titre”

Avec ce type de contenu vous pouvez ajouter un titre dans votre page. Comme chaque type est définit par un titre ce type de contenu est donc rarement utilisé, ou uniquement dans le but de définir un groupe de contenu

Les champs de saisie particuliers sont:

"Titre": Donnez ici le titre à insérer

"Sous-titre": Selon les besoins il peut s'avérer utile d'avoir un sous-titre. Ce titre ne sera pris en compte que si le template HTML de votre site exploite la notion de sous-titre

Les options avancées que vous pouvez définir sont :

"Aligné": Si le titre doit être “Aligné à gauche, ”“Centré”, ou “Aligné à droite”. La valeur par défaut est “Aligné à gauche”

"Type": Pour définir le format de votre titre

"Liens": Si ce titre est un lien. Cliquez sur l'icône pour ouvrir l'assistant d'édition de lien. Il vous permettra de saisir le lien vers la page, le fichier ou l'adresse Email à exécuter.

"Date": Pour définir la date à laquelle ce titre sera mis en ligne. Ce champ se remplit selon le format JJ-MM-AAAA, par ex. 26-12-2002

"Préparation type": Choisissez un mode d'affichage de votre sous-titre


Le type de contenu "Text"

La partie “Titre” correspond à celle vu pour le type titre, à l'exception du sous-titre

Les champs de saisie particuliers sont:

"Texte": ajoutez ici le texte du contenu

"Propriétés": Grâce aux cases à cocher vous pouvez définir ici si le texte doit apparaître en gras, en italique, souligné ou en majuscule.


“Type” : Vous pouvez choisir ici parmi 5 affichages prédéfinis celui que vous souhaitez. Ces modèles de mise en forme on été définis par votre administrateur. Un dernier type, “Caché”, permets de créer un contenu dont le titre n'apparaîtra pas sur le site lorsqu'il sera affiché.

"Lien": Si ce titre est un lien vers une autre page Web vous pouvez le préciser ici

"Date": Permet de spécifier une date à placer à côté du titre

Dans la partie “Text” du formualuaire vous trouverez :

"Déasctiver le RTE" : Pour activer / désactiver la saisie à travers le RTE. Dans l'exemple ci-contre ce texte a été saisi en dehors du RTE


Le type de contenu “Image"

Une des forces de Typo3 est sa capacité à intégrer des images. Grâce au type “Image” vous pouvez mettre en ligne autant d'images que vous le souhaitez. Elles seront ensuite affichées selon la configuration de votre site. La taille, le type et le taux de compression d'une image sont également paramétrables dans Typo3, paramétrage que vous pouvez ensuite modifier par vous-mêmes

Dans la partie “Image” vous choisissez vos images grâce à licône qui appelera le navigateur d'élément Typo3. Celui-ci insérera l'image souhaitée dans l'arborescence des ressources à disposition ou téléchargemera l'image à partir d'un autre pote. L'icône permet de modifier l'odre d'apparition des images, en faisant monter l'image dans la liste. La suppression d'une image se fait grâce à l'icône

Servez-vous des boutons “Parcourir” pour aller télécharger une image de votre poste de travaille sur le serveur. La différence avec la méthode précédente est que l'image choisie ne sera pas mis à disposition dans le dossier “images” de votre site. Ces images ne seront utilisables que pour cette page.

Les champs de saisie de la partie “Image” sont:

"Position": Définit la position de votre image dans la page par rapport à la zone de contenu dans laquelle on se trouve. Pour le type “Image” on ne peut définir ici que “Centré”, “Aligné à droite” ou “Aligné à gauche”. Pour le type de contenu “Texte w/ image” on pourra également définir la position de l'image par rapport au texte.

"Largeur(pixels)": Définissez ici la largeur en pixel de votre image telle qu'elle devra être affichée dans votre site Web. Attention, une largeur maximale a été définit dans le gabarit du site, l'image ne pourra pas dépasser cette valeur.

"Text": Ce champ permet en général de donner un titre à l'image, un commentaire, ou un Copyright. Une ligne est ajoutée à la suite de chaque image insérée, pour peu que votre gabarit de site en tienne compte



"Colonne": Si les images doivent aparaître dans plusieurs colonnes, vous en indiquer le nombre ici

"Pas de ligne": En activant vous pouvez forcer l'alignement des images pour qu'elles aient le même écart vertical. Cela permet de résoudre certains problèmes d'affichage lorsque les images sont de taille différente.

"Bordure": Pour encadrer l'image

"Hauteur (Pixel)": Pour défiinir la hauteur de l'image en pixel.

"Liens": Par défaut vous pourrrez créer des liens sur vos images en utilisant l'assistant de navigateur de lien RTL. Choisissez ensuite le type de lien (page, fichier, URL externe ou Email) dans la fenêtre qui va s'ouvrir. Vous pouvez définir un lien pour chaque image de votre liste, en les séparant par des virgules

"Cliquer pour agrandir": Cette fonction permet d'afficher l'image choisie dans une nouvelle fenêtre, avec une plus grande tailles

"Qualité": Choisissez un format et un taux de compression (gif, jpg, png) pour vos images, telles qu'elles devront être affichées sur votre site.

NDT : Le format et le taux de compression des pages jouent sur le temps de chargement de vos pages : en réduisant la qualité les images sont de plus petites tailles et sont affichables plus rapidement

"Effet": Vous pouvez ainsi choisir différents effets pour vos images (rotation, niveaux de gris, modifier le contraste, la clareté de l'image, etc.)

"Alignement": Indique l'alignement à utiliser pour positionner le titre de l'image par rapport à celle-ci. Votre titre pourra être aligné à droite, à gauche ou centré.

Le navigateur d'élément de Typo3 :

Naviguez à travers l'arborescence des fichiers por choisir l'image que vous souhaitez afficher

Si vous souhaitez téléchargement sur le serveur une nouvelle ressource (film, image, etc.) choisissez “Parcourir“ et vous vous retrouvez dans l'arborescence de votre poste de travail. Dans notre exemple l'image sera déposée dans pour chemin fileadmin/Info/

Pour organiser vos ressources vous pouvez également créer de nouveaux répertoires

Pour choisir une image naviguez jusqu'à son emplacement à travers l'arborescence des répertoires.

En cliquant sur le nom de l'image ou sur l'image celle-ci sera sélectionnée et le navigateur d'élément Typo3 va se


refermer.

Pour ajouter plusieurs images d'un répertoire cliquez sur l'icône de l'image correspondante pour l'insérer dans la liste.

Pour avoir des informations complémentaires sur l'image choisie cliquez sur l'icône .


Le type de contenu ”Texte w/ image"

Le type de contenu “Texte w/ image” (Text with image, Texte avec image en français) permet de combiner du texte et des images au sein d'un même contenu. L'intérêt est de pouvoir positionner des images dans un texte.

"Texte": Rentrez ici votre texte, vous vous avez pu le faire avec le type de contenu 'Texte'

"Images: Choisissez ici vos images grâce au navigateur d'élément Typo3 à partir de l'arborescence de fichier du serveur ou télécharger des images présentes sur votre poste.

Vous retrouvez ensiute les mêmes propriétés à définir que pour le type “Image” décrit précédement.


"Position": Grâce à ce champ vous pourrez indiquer comment positionner l'image par rapport au texte. Vous pouvez soit choisir le positionnement adéquat dans la liste déroulante, soit cliquez sur l'une des images. Une flèche à gauche des images indique celle qui est actuellement utilisée pour ce contenu. Les choix à disposition sont les suivants :

En haut, centré

En haut, à droite,

En haut, à gauche,

En bas, centré,

En bas, à droite,

En bas, à gauche,

Dans le texte, à droite,

Dans le texte, à gauche,

Dans le texte, à droite (séparé),

Dans le texte, à gauche (séparé).


Le type de contennu "Liste à puces"

Avec le type de conetnu “Liste à puce” vous pouvez définir une énumération d'élément. Cette liste n'a pas de limite de taille.

"Préparation type": Choisissez ici le type de liste à puce que vous désirez utiliser. Ces préparations dépendent de chaque site, suivant comment l'adrministrateur de votre site a définit les listes pour votre site

"Texte": Donnez ici le contenu de votre liste à puces. Attention, chaque ligne correspond à une entrée dans votre liste à puces, c'est-à-dire à avoir une balise <br> après chaque ligne (pour passer à la ligne)



“Type” : Vous pouvez choisir ici parmi 5 affichages prédéfinis celui que vous souhaitez. Ces modèles de mise en forme on été définis par votre administrateur. Un dernier type, “Caché”, permets de créer un contenu dont le titre n'apparaîtra pas sur le site lorsqu'il sera affiché.




Le type de contenu "Table"

Avec ce type de contenu vous pouvez facilement définir un tableau au sein de votre contenu. Vous pouvez ajouter autant de ligne que vous voulez, et jusqu'à 9 colonnes par zone de contenu.

"Préparation-type": Ce champ influence le rendu du tableau. Il vous donne 4 possibilités de mise en page : un tableau sans encadrement, avec une ligne de démarcation pour chaque ligne, une pour chaque colonne ou une pour chaque colonne et chaque ligne.

"Colonne du frame": Typo3 reconnaît automatiquement le nombre de colonne du tableau. Vous pouvez cependant le fixer vous-même, ceci afin d'avoir une colonne vide par exemple (pour placer un tableau sans le remplir immédiatement)

"Texte": Comme dans les listes à puces chaque ligne de cette zone de texte correspondra à une ligne du tableau. Les colonnes du tableau seront séparées par le signe "|" dans ce champ, pour pouvoir les distinguer les unes des autres. Ces séparations seront ensuite interprétées par une balise <br> dans le code HTML.

Un assistant pour faciliter la réalisation du tableau.

Afin d'illustrer la notion de séparateur de colonne : dans ce champ nous avons placés des symboles “|” pour distinguer chaque colonne du tableau.



"Couleur de fond": pour donner une couleur de fond à votre tableau.

“Bordure” : pour insérer un cadre à votre tableau.

“Espacement entre les cellules” : pour définir un espacement entre les cellules (les cases) du tableau. La valeur par défaut utilisée est 0. Correspond à la balise “Cell spacing” en HTML

“Espacement intercellules” correspond à la marge entre le contenu d'une cellule et ses côtés. Par défaut la valeur utilisée est 0. Correspond à la balise “Cell Padding” en HTML

"Aligné": Si le titre doit être “Aligné à gauche, ”“Centré”, ou “Aligné à droite”. La valeur par défaut est “Aligné à gauche”

“Type” : Vous pouvez choisir ici parmi 5 affichages prédéfinis celui que vous souhaitez. Ces modèles de mise en forme on


été définis par votre administrateur. Un dernier type, “Caché”, permets de créer un contenu dont le titre n'apparaîtra pas sur le site lorsqu'il sera affiché.



L'assistant "Tableau"

Grâce à lui vous pourrez facilement créer votre tableau et y placer le contenu désiré.

Icônes:

Ajoute une ligne en dessous ou une colonne à droite.

La corbeille supprime la ligne ou la colonne choisie

Déplace la ligne choisie vers le haut ou vers le bas

Déplace une colonne vers la droite ou vers la gauche

Place la ligne choisie tout en haut ou tout en bas du tableau

Place la colonne choisie à l'extrémité droite ou gauche du tableau


Le type de contenu “Lien vers un fichier"

Le type de contenu “Lien vers un fichier” permet de mettre à disposition un fichier de n'importe quel type, excepté PHP. Ce fichier pourra ainis être visualisé ou téléchargé par les visiteurs du site.

"Fichiers": Choisissez vos fichiers avec le navigateur d'élément Typo3. Vouspouvez ajouter un fichier présent sur le serveur ou en télécharger un sur votre poste de travail.

"Parcourir": Servez-vous des boutons “Parcourir” pour aller télécharger un fichier de votre poste de travaille sur le serveur. La différence avec la méthode précédente est que le fichier choisi ne sera pas mis à disposition dans le dossier “fichier” de votre site. Ces fichiers ne seront utilisables que pour cette page.

"Chemin": Vous pouvez donner ici le chemin de votre fichier.

"Préparation-type": Les 4 types de préparation-types pour le rendu de votre tableau dans la page : normal – le lien est incorporé au titre, préparation type 1 – Ajout d'un icône selon le type de fichier, préparation type 2 – pour avoir à la place d'un icône une vue miniature du fichier, préparation type 3 une miniature non représentative du contenu.

"Afficher la taille des fichiers": en activant cette option la taille des fichiers sera placé au bout du lien.

"Description": Vous pouvez également décrire chaque lien. Chaque ligne de ce champ porte sur un des fichiers à télécharger.


Le type de contenu "Multimedia"

Le type de contenu “Multimedia” permet d'intégrer des éléments multimédia de type "TXT", "HTML", "HTM", "CLASS", "SWF", "SWA", "DCR", "WAV", "AVI", "AU", "MOV", "ASF", "MPG", "WMV" ou "MP3". Vous pouvez ainsi facilement insérer un applet Java, une vidéo ou une animation Flash à votre site.

"Fichiers": Choisissez vos fichiers avec le navigateur d'élément Typo3. Vous pouvez ajouter un fichier présent sur le serveur ou en télécharger un sur votre poste de travail.

"Parcourir": Servez-vous des boutons “Parcourir” pour aller télécharger un fichier de votre poste de travaille sur le serveur. La différence avec la méthode précédente est que le fichier choisi ne sera pas mis à disposition dans le dossier “fichier” de votre site. Ces fichiers ne seront utilisables que pour cette page.

"Parameter": Préciser ici les paramètres pour vos fichiers, par exemple pour une animation Flash :

WIDTH=300

HEIGHT=50

LOOP=false

QUALITY=high

BGCOLOR=#FFFFFF

TYPE="application/x-shockwave-flash"

PLUGINSPAGE=http://www.macromedia.com/shockwave/download/index.cgi?

1_Prod_Version=ShockwaveFlash;

La petite flèche rouge vous indique quels champs ont été modifiés sans avoir été encore sauvegardés


Le type de contenu"Formulaire"

Le type de contenu formulaire permet de créer facilement un formulaire de saisie sur votre site. Pour vous accompagner dans l'intégration de ce formulaire un assistant est également disponible.

"Configuraiton": Placer ici un TypoScript définissant la manière dont doit être affiché le formulaire. Chaque ligne définit un élément ou une fonction

Un exemple:

Votre nom: | *nom=input,40 | [Votre nom]

Votre adresse mail: | *email=input,40

Votre adresse: | adresse=textarea,40,10

Votre vote: |vote=radio|Oui=oui, Non=non, Indéterminé= Indéterminé

|formtype_mail = submit | Envoyer le formulaire

|subject=hidden| Votre option sur le thème lambda

|html_enabled=hidden | 1

Vous pouvez vous référez au documet “Typoscript reference” (en anglais) pour plus de détail ou plus simplement

à l'assistant de formulaire.

"Aller à la page": Choisissez ici au moyen du navigateur d'élément Typo3 la page à ouvrir une fois le formulaire rempli

"Adresse du destinataire": Donnez ici l'adresse du destinataire.


L'assistant de formulaire :

Ajoutez au moyen de l'icône champ, auquel vous pourrez ensuite spécifier le type

Une fois le champ créé, vous pouvez définir sa configuration et indiquer s'il s'agit d'un champ obbligatoire ou non. L'ordre des champs se définit grâce aux boutons et, ou avec pour placer un élément en haut du formulaire. La corbeille supprime le champ choisi

Au pied de l'assistant se trouve les éléments de configuration globaux : le titre du bouton d'envoi, l'objet du mail, l'adresse du destinataire ainsi qu'une case à cocher, afin de déterminer si le mail sera écrit en mode Texte ou HTML


Le type de contenu "Rechercher"

Le type de contenu “Rechercher” permet d'avoir une fonction de recherche sur les contenus de la page active. Par défaut la boite de recherche permet de porter la recherche sur l'ensemble des contenus ou uniquement sur les titres des contenus.

"Envoyer à la page": Si le résultat de la recherche doit rediriger l'utilisateur vers une page spécifique vous pouvez la définir ici, au travers du navigateur d'élément de Typo3. Attention, la page de destination doit également contenir un contenu de type “Rechercher” pour pouvoir afficher les résultats


Le type de contenu "Login"

Le type de contenu “Login” insère deux champs de saisie pour un nom d'utilisateur et un mot de passe. Les visiteurs de votre site devront donc s'identifier avant de pouvoir accès à certaines parties réservées à un groupe particulier

"Envoyer à la page": Si le résultat de la recherche doit rediriger l'utilisateur vers une page spécifique vous pouvez la définir ici, au travers du navigateur d'élément de Typo3. Attention, la page de destination doit également contenir un contenu de type “Rechercher” pour pouvoir afficher les résultats


Le type de contenu "Champ de saisie"

Un contenu de type “Champ de saisie” offre la possibilité de définir un design particulier pour vos champ de saisie. Cela permet d'encadrer un graphique par du texte

"Type de champ": Choisissez ici le rendu souhaité pour votre contenu

"Texte": Donnez ici le texte à insérer

"Image": Choisissez ici vos images grâce au navigateur d'élément Typo3 à partir de l'arborescence de fichier du serveur ou télécharger des images présentes sur votre poste.


"Largeur(pixels)": Définissez ici la largeur en pixel de votre image telle qu'elle devra être affichée dans votre site Web. Attention, une largeur maximale a été définit dans le gabarit du site, l'image ne pourra pas dépasser cette valeur.

"Liens": Par défaut vous pourrrez créer des liens sur vos images en utilisant l'assistant de navigateur de lien RTL. Choisissez ensuite le type de lien (page, fichier, URL externe ou Email) dans la fenêtre qui va s'ouvrir. Vous pouvez définir un lien pour chaque image de votre liste, en les séparant par des virgules


Le type de contenu "Menu / plan du site"

Grâce au type de contenu “Menu / Plan du site” vous pouvez créer un menu ou un plan du site pour votre site

"Type de menu": Grâce à ce menu déroulant vous décidez du type de menu / de plan de site que vous souhaitez obtenir

"Point de démarrage: Choisissez un à plusieurs points de démarrage pour votre plan de site / votre menu.

Parmi les types de menu à disposition :

"Menu des pages": Crée un menu avec les pages au même niveau que la page courante

"Menu des sous-pages": Crée un menu des sous pages de la pages de la page courante

" Menu des sous-pages (avec abstract)": Ajoute la desrciption des sous-pages.

" Menu des sous-pages (avec contenu)": idem mais avec leur contenu. Pour chaque entée du menu la acse à cocher “Index” dans le contenu correspondant doit être coché

"Plan du site": Génère un plan du site sous la forme d'une arborescence

"Index des sections": Crée un aperçu des contenus dans le menu

"Page récemment mise à jour": Affiche une liste des 10 dernières pages mises à jour. Pour que cela ait un sens il faut que les contenus choisis ne soient pas cachés

"Page en relatoin (d'après les mots clés)": génère une liste des pages du site ayant un à plusieurs mots-clés en commun


Le type de contenu "Insérer un enregistrement"

Le type de contenu “Ajouter un enregistrement” permet d'ajouter un contenu présent dans une autre page. Les types d'enregistrement disponibles sont les contenus mais également des plugins comme "Adresse", "Liens",

"Forum", "Livre d'or", "Calendrier", "Produit", "News", "Evaluation", ou "Vote"

"Elements": Choisissez ici, grâce au navigateur d'élément de Typo3 l'enregistrement souhaité

"Préparation-type”: Vous pouvez indiquer une mode de rendu particulier pour l'enregistrement choisi


Le type de contenu "Insérer un plugin"

Vous pouvez jouter un certain nombre de plugin à votre site Typo3, en général pour gérer des types de contenu plus particuliers. Une fois ces plugin téléchargé il faut pouvoir les utiliser dans une page, ce que permet de faire ce type de contenu.

"Améliorations": définissez ici le type d'amélioration que vous souhaitez intégrer au site.

"CODE": Donnnez ici une chaine de caractère pour spécifier les paramètres de votre plugin. Ces paramètres sont décrits dans le document “TypoScript reference”

Par exemple le code "GUESTBOOK, POSTFORM" définit pour le plugin “Livre d'Or” que la page doit être sous la forme d'un formulaire de saisie.

"Point de démarrage: Choisissez un à plusieurs points de démarrage pour votre plugin (cf “Typoscript reference”)


"Niveau d'arborescence": Pour inclure les pages sous-jacentes au point de démarrage indiqué, vous pouvez précisez ici la profondeur à utiliser

La liste déroulante “Améliorations” (ci-contre en exemple) vous montre les plugins à disposition, que vous pouvez ensuite sélectionner pour les utiliser


Le type de contenu "Script"

Le type de contenu script sert à relier certaines fonctionnalités réparties sur différentes pages. Si vous voulez par exemple intégrer un script PHP à votre page c'est ici que vous indiquerez le chemin vers ce script.

NTD : Ce type de contenu n'existe plus dans la version 3.6

"CODE": Donnez ici le code à utiliser pour votre script.

"Point de démarrage: Choisissez un à plusieurs points de démarrage pour votre plugin (cf “Typoscript reference”)

"Paramètres": Si votre script doit prendre des paramètres en entrée, vous pouvez les préciser dans ce formulaire.

"Commentaire": Il est toujours intéressant d'apporter quelques commentaires sur le code réalisé


"Niveau d'arborescence": Pour inclure les pages sous-jacentes au point de démarrage indiqué, vous pouvez précisez ici la profondeur à utiliser


Le type de contenu "Séparateur"

Le type de contenu “Séparateur” ne sert pas véritablement à l'affichage, mais par exemple pour organiser des zones dans votre menu, en les spécifiant explicitement.

"Nom": donnez le titre de votre séparateur

Le type de contenu "HTML"

Un système de gestion de contenu sert avant tout à faciliter l'affichage de l'information que l'on souhaite mettre à disposition. Cependant dans certains cas plus complexes les choix proposés par le CMS ne sont suffisants. Ce type de contenu permet donc de palier à ce problème, en insérant un contenu qui sera interprété comme du HTML.

"HTML": écrivez ici la partie qui sera ensuite interprétée en HTML.


Le "Rich Text Editor"

Aperçu

Pour les types de contenu “Texte” et “Texte avec image” vous disposez d'un assistant pour mettre en forme votre texte, si vous utilisez Internet Explorer 5.x ou 6.x. Celui-ci permet d'éditer votre texte, mais également d'insérer des liens, des tableaux, des images. Gardez cependant à l”esprit qu'il est peu être plus jusdicieux de créer plusieurs contenu pour chaque type de contenu (il est plus facile de contrôler leurs rendus s'il sont répartis en différentes parties)

Le “Rich Text Editor” peut être entièrement configuré selon chaque utilisateur, voir même désactivé. Pour cela vous pouvez vous référer à la configuration des utilisateurs en modifiant les modes d'édition.

Si le "Rich Text Editor" est activé,la zone d'édition du texte va être complétée par toute une série d'icônes avec lesquels vous pourrez mettre en forme votre texte

Pour augmenter la taile du “Rich Text Editor” pour qu'il remplisse toute la vue détaillée, cliquez sur l'icône .

Vous pouvez également désactiver le “Rich Text Editor” pour un contenu uniquement. Cela vous permet éventuellement de mieux contrôler le rendu du texte en ajoutant vous-même les balises HTML nécessaires


Les différentes possibilités d'édition

"Découper: Découpe la zone de texte sélectionnée et la place en mémoire

"Copier": Copie le texte sélectionné et le place en mémoire

"Coller": Le contenu de la mémoire retranscris à l'endroit où se trouve le curseur

"Mise en forme": Pour définir une mise en forme pour la zone de texte sélectionnée

"Police de caractère": Choisissez la police de caractère souhaitée pour la zone de texte sélectionnée.

"police": Choisissez la police de caractère pour la zone de texte sélectionnée.

"Taille": Pour définir la taille de la zone de texte sélectionnée.


"Couleur": Choisissez la couleur du texte sélectionnée

Pour chaque zone sélectionnée vous pouvez en plus mettre votre texte en :

"Gras",

"Italique"

"Souligné"

Pour définir l'alignement d'une zone de texte :

"A gauche",

"Centré" ou

"A droite"

"Enumération": Pour créer une énumarétion sur une zone de texte. Chaque retour à la ligne de la sélection correspond à un nouveau chiffre

"Puce": Idem que pour l'énumération, sauf que chaque retour à la ligne sera précédé d'une puce.


"Réduire la marge":

"Augmenter la marge":

Pour définir une marge pour une zone de texte déterminé

"Ajouter un lien": Pour ajouter un lien à votre page, sélectionnez la zone de texte sensible et cliquez sur l'icône de lien. Le navigateur de lien RTL s'ouvre alors. Choisissez parmi les 4 onglets celui que vous souhaitez ajouter : “Page”, “Fichier”, “URL externe”, “Email”. Le navigateur de lien RTL se refermera automatiquement lorsque vous aurez choisi un lien.

"Insérer un tableau": Pour ajouter un tableau vous disposez là encore d'un assistant, que vous pouvez lancer à partir de cet icône. Vous pouvez ainsi définir le nombre de ligne et de colonnes, l'espacement inter- et intra- cellules, ainsi que la couleur de fond.


"Couleur de fond": Pour définir ue couleur de fond à votre texte choisissez une couleur parmi celles proposées dans le tableau

"Ajouter une image":

Avec dans un contenu de type “Texte” ou “Texte avec image” vous pouvez également intégrer un image au sein même du texte (ce qui revient à ajouter les images comme on a pu le faire dans ce manuel utilisateur avec les icônes). Utilisez le navigateur d'élément Typo3 pour choisir une image dans votre liste de fichier ou pour en télécharger un

"Ajouter un symbole": Ajoute un symbole du type de ceux utilisé dans les messageries instantanées.

"Ajouter une ligne": Pour tracer une ligne de démarcation horizontale.


Le presse papier

Aperçu

Typo3 vous offre la possibilité de copier ou de découper des pages, des contenus ou des morceaux complets de l'arborescence.Cela permet d'éditer rapidement et de manière efficace l'ensemble des éléments de Typo3.

Pour cela commencer par activer la case à cocher située en bas de chaque page de la vue détaillée du module “Page>Liste”

Dans la partie qui vient d'apparaître vous avez 2 icônes, un menu déroulant et un bouton à disposition.

Avec pour activer ou . Pour désactiver l'affichage des miniatures dans le presse-papier. L'icône

affiche le mode “Déplacement”, le mode “copie”. Attention, en mode “Déplacement” vos contenus sont retirés de leur emplacement original.

La liste déroulante offre la possibilité d'éditier l'ensemble des éléments présent dans le presse papier ou de les supprimer

Le bouton Supprime rest en fait relié au presse-papier actif ; vos pages ne sont ainsi pas irrémédiablement supprimées de votre site

Le presse papier se compose en réalité de 4 presse papier différents, ceci afin de pouvoir facilement différencier le contenu de chacun. Seul le premier, appelé “Normal”, est limité à un élément. Les 3 autes, "#1 - #3" peuvent contenir plusieurs contenus. Cliquez sur l'un des presse-papier pour faire apparaître son contenu

Les presse papiers contenant plusieurs contenus seront mis en gras. Le nombre d'élément présent est indiqué entre parenthèse.

Lorsque l'un des presse-papiers est actif, son contenu est présenté sous forme de liste. Sous le titre se trouve le mode d'édition actif. Dans notre exemple nous sommes dans le presse-papier “Normal”, en mode copie Sous le contenu “Image2” nous voyons qu'il s'agit d'une copie de l'élément initial, celui-ci n'ayant pas bougé de son emplacement.

Avec chaque contenu vous pouvez utilisez l'icône pour afficher des informations plus précies.L'icônesupprime le contenu choisi du presse-papier


Copier dans le presse-papier

Dans l'arborescence ou dans une des listes d'élement de la vue détaillée il vous suffit de choisir “Copier” dans le menu contextuel qui s'ouvre en cliquant sur l'icône de l'élément choisi. Cet élément sera déposé dans le presse-papier “Normal“ et pourra ensuite étre résinséré à l'endoirt désiré.

Pour avoir un bon aperçu des éléments d'un page utilisez le module “Web>Liste” et utilisez le pour copier / déplacer des pages.

Si vous avez activé la case à cocher “Afficher le presse-papier” vous avez un aperçu du contenu du presse-papier actif. Vous avez le choix parmi 4 presse-papiers pour déposer votre élément. Le presse-papier “Normal” sera utilisé par défaut, que ce soit pour la copie ou le déplacement

Les enregistrements placés dans le presse-papier “Normal” seront reconnaissables à l'icône et affiché dans la partie presse-papier. Vous contrôlez le mode d'édition à travers l'icône . Cet enregistrement peut maintenant être ajouté là où vous le désirez en utilisant l'icône .

Si vous souhaitez copier plusieurs contenus à un même endroit activer l'un des presse-papier #1 - #3. Des cases à cocher

vous permettent de choisir vos éléments que vous placerez ensuite en cliquant sur l'icône . Pour tout sélectionner / désélectionner utilisez le bouton .


Contrôler bien que le mode d'édition “Copie” est bien activé. Placez ensuite les élements à l'endroit désiré avec cet icône .


Déplacer avec le presse papier

Dans l'arborescence ou dans une des listes d'élement de la vue détaillée il vous suffit de choisir “Déplacer” dans le menu contextuel qui s'ouvre en cliquant sur l'icône de l'élément choisi. Cet élément sera déposé dans le presse-papier “Normal“ et pourra ensuite étre résinséré à l'endoirt désiré. Attention l'élément choisi ser retiré de son emplacement original

Si vous avez activé la case à cocher “Afficher le presse-papier” vous avez un aperçu du contenu du presse-papier actif. Vous avez le choix parmi 4 presse-papiers pour déposer votre élément. Le presse-papier “Normal” sera utilisé par défaut, que ce soit pour la copie ou le déplacement

Contrôlez que le mode “Déplacer” est bien activé . Placez ensuite les élements à l'endroit désiré avec cet icône

Nous sommes arrivé à la fin du “Manuel pour les rédacteurs”. Si vous avez des questions, des remarques, des crtiques, ou si vous souhaitez compléter le présent document toute l'équipe de @rtplan[21] webconcepts & solutions GmbH est à votre disposition

Bon courage !


doc: manuel du rédacteur (français) · compléter, toute l'équipe de @rtplan[21]...

Documents