TYPOlight Guide v1.1 (French)

Guide d'utilisation
version 1.1 du 10 janvier 2008
Distribué par le projet www.typolight.fr

Table des matières
1. Introduction...................................................................................................6
2. Installation.....................................................................................................7
Recommandations systèmes...........................................................................................................................................7
Note sur la mise à jour automatique.................................................................................................................................7
Téléchargement des sources TYPOlight..........................................................................................................................7
Décompression de l'archive TYPOlight............................................................................................................................7
Création d'une nouvelle base de données.......................................................................................................................7
Démarrer l'outil d'installation............................................................................................................................................7
Changer le mot de passe de l'outil d'installation...............................................................................................................8
Création d'une clé de cryptage.........................................................................................................................................8
Connexion à la base de données.....................................................................................................................................8
Mise à jour des tables......................................................................................................................................................9
Importation du site d'exemple..........................................................................................................................................9
3. Agencement du back-office...............................................................................10
L'URL du back-office......................................................................................................................................................10
La mise en page du back-office......................................................................................................................................11
4. Configuration du back-office.............................................................................12
Le chemin relatif au dossier TYPOlight..........................................................................................................................12
Configurer l'envoi de fichiers sur le serveur...................................................................................................................12
Utilisation du SMTP pour l'envoi des mails....................................................................................................................12
Utilisation du FTP pour modifier vos fichiers..................................................................................................................12
Durée de stockage et de session...................................................................................................................................13
Sections de mise en page personnalisées.....................................................................................................................13
Largeur maximale des images.......................................................................................................................................13
Types d'images valides..................................................................................................................................................13
Types de fichiers d'envoi valides....................................................................................................................................14
Réécrire les URL............................................................................................................................................................14
5. Maintenance système......................................................................................15
Effacer le cache.............................................................................................................................................................15
Mise à jour automatique (Live update)...........................................................................................................................15
Modifier vos données personnelles................................................................................................................................16
6. Navigation dans le back-office...........................................................................17

Filtrer les enregistrements..............................................................................................................................................17
Trier les enregistrements................................................................................................................................................17
Afficher les enregistrements...........................................................................................................................................18
Rechercher dans les enregistrements............................................................................................................................18
Editer tous les enregistrements......................................................................................................................................18
Icones de navigation......................................................................................................................................................18
Sauvegarder un enregistrement.....................................................................................................................................19
7. Organisation des comptes utilisateur...................................................................20

Les membres.................................................................................................................................................................20
Les utilisateurs...............................................................................................................................................................20
Héritage de permission..................................................................................................................................................20
2
Points de montage de page et de fichier........................................................................................................................20
Permissions...................................................................................................................................................................21
Groupes de membres....................................................................................................................................................21
Champs autorisés..........................................................................................................................................................21
Gérer les flux de travail..................................................................................................................................................21
8. Mise en place des pages...................................................................................22
9. Les modules front-office..................................................................................23

Le module « Menu de navigation »................................................................................................................................23
Le module « Navigation éléments du menu principal »..................................................................................................23
Le module « Navigation éléments de sous-menu ».......................................................................................................24
Le module « Navigation Fil d'Ariane »............................................................................................................................24
Le module « Navigation rapide »....................................................................................................................................24
Le module « Lien rapide »..............................................................................................................................................25
Le module « Carte du site »...........................................................................................................................................25
Le module « Formulaire de connexion »........................................................................................................................25
Le module « Déconnexion automatique »......................................................................................................................26
Le module « Données personnelles »............................................................................................................................26
Le module « Formulaire »..............................................................................................................................................27
Le module « Moteur de recherche »..............................................................................................................................27
Le module « Liste d'articles ».........................................................................................................................................28
Le module « Code HTML personnalisé ».......................................................................................................................28
Le module « Animation Flash »......................................................................................................................................29
Le module « Image aléatoire ».......................................................................................................................................29
Le module « Lecteur de flux RSS »................................................................................................................................29
10. Feuilles de style...........................................................................................30

Liste d'enregistrements..................................................................................................................................................30
Editer les définitions de style..........................................................................................................................................30
Sélecteurs CSS..............................................................................................................................................................31
11. Présentations de page ...................................................................................32

Modèle de mise en page................................................................................................................................................32
Les feuilles de style incluses..........................................................................................................................................32
Les balises <head> supplémentaires.............................................................................................................................32
Mootools........................................................................................................................................................................32
Type de présentation de page........................................................................................................................................32
Les modules inclus.........................................................................................................................................................33
Cas spécial : le module articles......................................................................................................................................33
Spécifications de largeur................................................................................................................................................33
12. Structure du site..........................................................................................34

Types de page................................................................................................................................................................34
Page simple...................................................................................................................................................................35
Rediriger vers une URL externe.....................................................................................................................................35
Aller vers une autre page du site....................................................................................................................................35
Racine d'un nouveau site...............................................................................................................................................35
Erreur 403 (accès interdit)..............................................................................................................................................35
Erreur 404 (page non trouvée).......................................................................................................................................36
Autres configurations.....................................................................................................................................................36
Alias de la page..............................................................................................................................................................36
Protéger une page.........................................................................................................................................................36
Affecter une présentation...............................................................................................................................................36
Affecter une durée de vie au cache................................................................................................................................36
3
Affecter les permissions.................................................................................................................................................36
Publier une page............................................................................................................................................................37
Aperçu des icônes..........................................................................................................................................................37
13. Articles......................................................................................................38
Afficher l'article dans......................................................................................................................................................38
Mots clés........................................................................................................................................................................38
Publier l'article................................................................................................................................................................38
14. Eléments de contenu.....................................................................................39

Titre................................................................................................................................................................................39
Texte..............................................................................................................................................................................39
HTML.............................................................................................................................................................................39
Code..............................................................................................................................................................................40
Image.............................................................................................................................................................................40
Lien hypertexte...............................................................................................................................................................40
Liste...............................................................................................................................................................................40
Tableau..........................................................................................................................................................................41
Téléchargement.............................................................................................................................................................41
Galerie d'images............................................................................................................................................................41
Lien de haut de page.....................................................................................................................................................42
Accordéon......................................................................................................................................................................42
Elément de contenu.......................................................................................................................................................43
Formulaire......................................................................................................................................................................43
Module...........................................................................................................................................................................43
15. Actualités...................................................................................................44
Module Liste d'actualités................................................................................................................................................44
Module Lecteur d'actualités............................................................................................................................................45
Module Archive d'actualités............................................................................................................................................45
Module Menu d'archive d'actualités...............................................................................................................................46
16. Contenu Flash..............................................................................................47

Charger un article Flash.................................................................................................................................................47
Importer une feuille de style...........................................................................................................................................47
17. Générateur de formulaire...............................................................................49

Utilisé comme formulaire de contact..............................................................................................................................49
Utilisé pour les envois de fichiers...................................................................................................................................49
Utilisé avec un module front-office.................................................................................................................................49
Les champs de formulaire..............................................................................................................................................49
La ligne d'entête.............................................................................................................................................................49
L'explication...................................................................................................................................................................49
Le champ de texte..........................................................................................................................................................50
Le champ mot de passe.................................................................................................................................................50
La zone de texte.............................................................................................................................................................50
Le menu de sélection.....................................................................................................................................................50
Le menu bouton radio....................................................................................................................................................50
Le menu case à cocher..................................................................................................................................................51
L'envoi de fichier............................................................................................................................................................51
La question de sécurité (CAPTCHA)..............................................................................................................................51
Le bouton de soumission...............................................................................................................................................51
18. Les balises d'insertion (insert tags)....................................................................52

{{article::ID}}...................................................................................................................................................................52
4
{{date}}...........................................................................................................................................................................52
{{date::format}}...............................................................................................................................................................52
{{env::page_alias}}.........................................................................................................................................................52
{{env::page_name}}........................................................................................................................................................52
{{env::page_title}}...........................................................................................................................................................52
{{env::main_alias}}.........................................................................................................................................................52
{{env::main_name}}........................................................................................................................................................52
{{env::main_title}}...........................................................................................................................................................52
{{env::website_title}}.......................................................................................................................................................53
{{env::url}}......................................................................................................................................................................53
{{env::path}}...................................................................................................................................................................53
{{env::request}}...............................................................................................................................................................53
{{env::referer}}................................................................................................................................................................53
{{file::file.php}}................................................................................................................................................................53
{{insert_article::ID}}........................................................................................................................................................53
{{insert_content::ID}}......................................................................................................................................................53
{{lang::ID}}......................................................................................................................................................................53
{{last_update}}................................................................................................................................................................53
{{last_update::format}}....................................................................................................................................................53
{{link::page}}...................................................................................................................................................................53
{{link::back}}...................................................................................................................................................................54
{{link::login}}...................................................................................................................................................................54
{{link_open::page}}.........................................................................................................................................................54
{{link_url::page}}.............................................................................................................................................................54
{{link_title::page}}...........................................................................................................................................................54
{{user::property}}............................................................................................................................................................54
19. Personnaliser TYPOlight.................................................................................55

Personnalisation de TinyMCE........................................................................................................................................55
Personnalisation des champs d'entrée...........................................................................................................................55
Personnalisation des modèles.......................................................................................................................................55
20. Crédits.......................................................................................................56
21. Licence......................................................................................................57
Creative Commons........................................................................................................................................................57
5
1. Introduction
Ce manuel est destiné aux administrateurs et utilisateurs qui veulent créer et maintenir
des sites web avec le système de gestion de contenu « TYPOlight webCMS ». Ce manuel
passe en revue tous les sujets importants en commençant par l'installation, l'ajout de
contenu jusqu'à l'administration de compte utilisateurs. Pour les développeurs qui
voudraient se pencher sur « le cœur » de TYPOlight, il y a une section appropriée sur le
site du projet http://www.typolight.org.
Ce manuel se réfère au site d'exemple « Music Academy » qui est inclut dans toutes distributions TYPOlight et qui peut
être importé avec l'outil d'installation. Si vous n'avez pas encore installé TYPOlight webCMS ou que vous aurez l'intention
de le faire après la lecture de ce manuel, vous pouvez jeter un œil à la démo TYPOlight webCMS en ligne. Voici une copie
d'écran du site :
Sur la base du site d'exemple vous allez apprendre comment organiser la structure des pages d'un site web, comment
créer et éditer des articles et du contenu, comment créer des modules et des présentations de page et comment gérer les
utilisateurs ainsi que leurs permissions. Par ailleurs, vous découvrirez comment créer des pages protégées par mot de
passe, des formulaires interactifs et vous apprendrez comment travailler avec le module d'actualités.
1. Introduction 6
2. Installation
TYPOlight webCMS est une application web basée sur le couple PHP5/MySQL. Donc il
vous faut avoir accès à un serveur web qui supporte PHP5 [PHP5.2 à compter de 2008]
et MySQL en version 4.1 ou ultérieure. Si vous voulez installer TYPOlight en local sur votre
ordinateur, vous pouvez utiliser la solution opensource XAMPP
(voir http://www.apachefriends.org).
Recommandations systèmes
• PHP5 > 5.1.0
• PHP mbstring activé
• PHP GDlib activé
• MySQL > 4.1
Vous pouvez trouver une liste détaillée des recommandations systèmes sur le site officiel
(http://www.typolight.org/system-requirements.html).
Note sur la mise à jour automatique

TYPOlight requiert des droits d'écriture pour modifier les fichiers et les dossiers ! Si vous faites tourner PHP en tant que
module vous devriez changer le mode de fichier (CHMOD) avant de commencer la mise à jour. Vous devriez aussi :
• faire une sauvegarde de votre base de données et de tous les fichiers
• lancer alors la mise à jour
• restaurer votre sauvegarde s'il y a eut des erreurs
Téléchargement des sources TYPOlight

Sur le site de TYPOlight, vous trouverez un lien de téléchargement vers le portail opensource
sourceforge.net à partir duquel vous pourrez télécharger les dernières sources TYPOlight soit
sous le format ZIP pour Windows soit sous la forme d'une archive TAR pour Unix. Sur un
serveur Unix vous pouvez aussi utiliser la commande suivante :
wget http://prdownloads.sourceforge.net/typolight/typolight-2.5.0.tar.gz?download
Décompression de l'archive TYPOlight

Décompresser l'archive TYPOlight dans un répertoire sur votre serveur ou utiliser un client FTP pour transférer les fichiers
vers votre serveur.
Création d'une nouvelle base de données

Maintenant, vous pouvez créer une nouvelle base de données pour votre installation de TYPOlight. L'outil d'installation, en
lui même n'est pas capable de créer de nouvelles bases de données puisque cette fonction est désactivée sur la plupart
des hébergements mutualisés. TYPOlight utilise le préfixe de table tl_, donc il est possible de faire tourner TYPOlight en
parallèle avec d'autres applications dans la même table, ceci est néanmoins déconseillé.
Démarrer l'outil d'installation

A partir de ce point, l'outil d'installation de TYPOlight va vous guider tout au long du processus d'installation. Ouvrez l'URL
suivante dans votre navigateur :
2. Installation 7
http://www.votre-domaine.com/typolight/install.php
Si vous avez installé TYPOlight dans un sous-dossier ou si vous l'avez décompressé directement sur votre serveur, l'URL
devrait ressembler à ceci :
http://www.votre-domaine.com/TYPOlight_webCMS_2.5/typolight/install.php
A la prochaine étape, entrez s'il vous plait le mot de passe de l'outil d'installation qui est par défaut « typolight ». Pour des
questions de sécurité, l'outil d'installation sera bloqué si vous entrez un mot de passe erroné plus de trois fois de suite.
Changer le mot de passe de l'outil d'installation

D'abord, il vous sera demandé de changer le mot de passe de l'outil d'installation. Entrez un nouveau mot de passe qui doit
comporter au moins 8 caractères (lettres, nombres et caractères spéciaux sont autorisés). Après cliquez sur le bouton
« Save password ». L’installeur va vérifier si toutes les extensions PHP requises sont installées et vous signaler, le cas
échéant, les extensions manquantes.
Création d'une clé de cryptage

TYPOlight a besoin d'une clé de cryptage afin de chiffrer les données. Une fois que les données sont cryptées, elles ne
peuvent être déchiffrées qu'avec cette clé ! Laissez ce champ vide si vous voulez que TYPOlight génère automatiquement
une clé aléatoire. Si votre base de données contient des données déjà cryptées, vous pouvez renseigner cette clé de
cryptage ici.
Connexion à la base de données

A la suite, créez la connexion à la base de données. Choisissez un pilote de base de données et entrez vos paramètres de
connexion. Le nom d'hôte est habituellement « localhost ». Certains paramètres MySQL par défaut sont déjà définis.
2. Installation 8
Mise à jour des tables
Une fois que la connexion à la base est créée, TYPOlight vérifiera si toutes les tables et les colonnes requises existent. Si
des changements sont nécessaires, TYPOlight vous dévoilera une liste de requêtes que vous pourrez confirmer ou non.
Vous pouvez, de cette manière, contrôler quelles modifications seront apportées quand vous cliquerez le bouton « update
database ».
Importation du site d'exemple

Ensuite, vous pouvez choisir d'importer le site d'exemple « Music Academy ». Notez bien que toutes données existantes
seront alors effacées ! Si vous choisissez d'importer le site d'exemple, vous devrez vous identifier en temps que « k.jones »
avec le mot de passe « kevinjones ». Autrement, l'installeur vous demandera de configurer un compte administrateur.
Si vous importez le site d'exemple, toutes données existantes seront effacées !
2. Installation 9
3. Agencement du back-office
La zone d'administration : back-office. Après avoir complété le processus d'installation
vous pouvez ouvrir une session en tant qu'administrateur en cliquant sur « TYPOlight
backend login » (en bas à droite). Le back-office, permet d'accéder à l'administration de
votre site. Le back-office n'est pas le site que vos visiteurs verront quand ils dirigeront leur
navigateur vers votre adresse internet. Ce site, dont l'apparence et le contenu est
maintenu dans le back-office, se nomme le front-office.
L'URL du back-office
Vous pouvez aussi vous rendre directement sur la page d'identification du back-office. Ajoutez simplement « typolight/ » à
l'adresse internet de votre site. Par exemple :
http://www.votre-domaine.com/typolight/
http://www.votre-domaine.com/TYPOlight_webCMS_2.5/typolight/
Le back office est protégé contre les attaques en force. Entrer un mauvais mot de passe plus de trois fois bloque le compte
de l'utilisateur courant pendant cinq minutes. Ceci empêche les hackers d'essayer un large nombre de mots de passe, et
de trouver le bon.
3. Agencement du back-office 10
La mise en page du back-office
Le back-office est divisé en trois zones. Sur la gauche vous trouverez le menu de navigation qui donne accès aux modules
du système. Chaque module du back-office remplit une tâche spécifique que nous examinerons plus en détail dans un des
paragraphes suivants. Les administrateurs peuvent toujours accéder à tous les modules du back-office alors que les autres
utilisateurs pourront être limités à certains modules particuliers. Dans ce cas, seuls les modules autorisés sont montrés
dans le menu de navigation.
Sur la droite vous trouverez la zone principale qui contient, par exemple, une liste d'enregistrements ou un formulaire pour
éditer un enregistrement spécifique (dépendamment du module sélectionné). La page d'accueil du back-office montre une
liste de toutes les touches de raccourcis permettant une navigation plus rapide. Pour utiliser un raccourci, pressez la
touche [ALT] ([CTRL] sous Mac) et la touche correspondante.
La barre de liens en haut de page vous permet d'ouvrir dans une autre fenêtre/onglet une prévisualisation de votre site (la
partie front-office) ou de vous déconnecter du back-office afin d'empêcher une utilisation non autorisée de votre compte.
3. Agencement du back-office 11
4. Configuration du back-office
Une fois que vous avez installé TYPOlight, vous devriez vérifier les configurations système.
Pour le faire, ouvrez le module « configuration ». Les changements effectués ici seront
sauvés dans le fichier de configuration local « system/config/localconfig.php ». Vous
pouvez aussi modifier ce fichier manuellement si, pour quelque raison qu'il soit, vous ne
pouvez plus accéder au back-office.
Le chemin relatif au dossier TYPOlight

Ce paramètre est habituellement défini automatiquement. Si le front-office et le back-office sont configurés correctement,
vous ne devriez pas vous soucier de cette valeur. Si vous avez installé TYPOlight dans le répertoire racine de votre
serveur, ce paramètre doit rester vide. Cependant, si vous avez des messages d'erreur, ou si les URL du front-office sont
réécrites via le fichier .htaccess, vous devriez vérifier ce paramètre.
Le chemin relatif est construit à partir du répertoire racine de TYPOlight comme vu par votre navigateur. Par exemple, si
vous accédez à votre site internet TYPOlight via l'URL suivante :
http://www.votre-domaine.com/TYPOlight_webCMS_2.5/
le chemin relatif sera :

/TYPOlight_webCMS_2.5
Configurer l'envoi de fichiers sur le serveur

TYPOlight incorpore un explorateur de fichiers qui permet aussi bien l'envoi vers votre serveur, le déplacement, le
nommage et la suppression de vos fichiers. Par défaut, l'explorateur de fichier utilise le dossier « tl_files » comme
répertoire racine. Vous pouvez spécifier un autre dossier si vous le souhaitez. En temps qu'administrateur, vous pouvez
aussi spécifier le poids maximal des fichiers (en octets) ainsi que les dimensions maximales (hauteur et largeur en pixels)
des images uploadés.
Utilisation du SMTP pour l'envoi des mails

Par défaut TYPOlight utilise la fonction mail() de PHP pour l'envoi des e-mails. Ici vous pouvez choisir d'utiliser à la place
un serveur SMTP. Après avoir sélectionné la case à cocher correspondante, TYPOlight devrait automatiquement révéler
d'autres champs de saisie où vous pourrez entrer les détails de votre compte SMTP.
TYPOlight utilise AJAX afin de charger ces autres champs de saisie, ainsi vous devez avoir JavaScript d' activé
dans votre navigateur. Sinon vous devrez sauvegarder vos changements afin de voir apparaître ces nouveaux
champs sur la page. Cliquez sur le bouton « Sauvegarder » ou utilisez le raccourci clavier [ALT]+S pour le faire.
Il est recommandé d'activer JavaScript dans votre navigateur.
Utilisation du FTP pour modifier vos fichiers

Si votre serveur web fait tourner PHP en tant que module, TYPOlight ne devrait pas être autorisé à modifier les fichiers,
ceci est dû aux restrictions safe_mode ou aux permissions manquantes sur les fichiers. Dans ce cas vous pouvez soit
définir le mode (CHMOD) sur le répertoire racine de TYPOlight à 777 (non recommandé), soit saisir vos paramètres
d'identification FTP afin de permettre à TYPOlight d'accéder à vos fichiers via FTP.
4. Configuration du back-office 12
Sur une nouvelle installation, vous devriez entrer les paramètres d'identification FTP manuellement dans le
fichier de configuration local.
Durée de stockage et de session

Les durées de stockage et de session sont calculées en secondes.
Vous pouvez définir combien de temps les enregistrements supprimés ou les versions différentes d'un enregistrement
seront conservées, après quelle période de temps la session d'un utilisateur sera clause et combien de temps les comptes
utilisateur restent bloqués si leur authentification a échoué trois fois de suite (en secondes).
Sections de mise en page personnalisées

Par défaut, TYPOlight divise une page jusqu'à cinq sections : une section d'entête et de pied de page et jusqu'à trois
colonnes dans la zone principale. Vous apprendrez comment créer et modifier une présentation de page dans un des
chapitres suivants.
En plus de ces sections par défaut, vous pouvez définir des sections de mise en page personnalisées pour créer des
présentations de page individuelles. Ces sections de mise en page personnalisées sont normalement positionnées après
les sections par défaut mais peuvent être positionnées librement en changeant le fichier modèle.
Largeur maximale des images

Pour éviter que des images surdimensionnées aient un impact négatif sur la mise en page de votre site, vous pouvez
définir une largeur maximale en pixel de vos images. Si un utilisateur back-office essaye d'assigner une plus grande
largeur à une image, elle sera automatiquement ajustée à la largeur maximale autorisée moins la marge interne (padding).
Laissez ce champ vide pour désactiver les ajustements automatiques.
Types d'images valides

TYPOlight est livré avec un gestionnaire d'images incorporé qui redimensionne les images automatiquement et les rogne si
nécessaire. Le gestionnaire d'images est basé sur l'extension PHP GDLib, qui prend en charge les formats JPG
(.jpg, .jpeg), GIF (.gif) et PNG (.png). Pour ces types d'image, le gestionnaire génère automatiquement des vignettes. Vous
pouvez utiliser ce gestionnaire d'images dans vos propres scripts comme ceci :
<img src="image.php?src=tl_files/image.jpg&width=200&height=120" />
Si vous voulez utiliser votre propre script pour gérer les images ou si vous voulez exclure certains types de fichiers de la
manipulation par le gestionnaire d'images, vous pouvez changer ici la liste des types de fichier image selon vos besoins.
Types de fichiers d'envoi valides
TYPOlight est livré avec un gestionnaire d'envoi de fichier incorporé permettant un contrôle détaillé sur les fichiers envoyés
grâce à un système intelligent de jetons (tokens). Ainsi, vous pouvez définir exactement qui est habilité ou non à envoyer
des fichiers. Pour des raisons de sécurité, les envois de fichiers sont limités au répertoire « tl_files » et à certains types de
fichiers dont les extensions peuvent être renseignées ici.
Réécrire les URL

Une mesure efficace et largement acceptée dans la course à l'optimisation pour les moteurs de recherche est la simulation
de page statique. De cette manière, une page dynamique est appelée par le navigateur comme si elle était statique.
TYPOlight génère des URL statiques par défaut, par exemple :
http://www.votre-domaine.com/index.php/accueil.html
à la place des URL dynamiques
http://www.votre-domaine.com/index.php?id=accueil
Si l'utilisation du module Apache « mod_rewrite » est autorisé sur votre serveur, vous pouvez en plus enlever de l'URL le
fragment « index.php » et appeler votre site comme ceci :
http://www.votre-domaine.com/accueil.html
L'avantage de cette URL statique est que la plupart des moteurs de recherche prendront cette page pour une page HTML
statique ce qui lui donnera un « page rank » plus élevé qu'une page dynamique.
Il y a un fichier nommé « ._htaccess » dans le répertoire racine de votre installation TYPOlight. Ce fichier
contient toutes les instructions nécessaires à la mise en place de la réécriture des URL. Renommez le
simplement « .htaccess » et cochez la case « Réécrire les URL » dans les configurations du back-office.
Si votre site se trouve dans un dossier sur votre domaine, comme ceci par exemple :
http://www.votre-domaine.com/dossier/
vous devrez changer la seconde ligne du fichier « .htaccess », pour qu’elle ressemble à ceci :
RewriteBase /dossier
5. Maintenance système
Chaque système doit être maintenu de temps en temps afin de s'assurer de ses
fonctionnalités et de l'intégrité de ses données. Il y a trois façons de le faire dans
TYPOlight. Comme vous avez pu le voir dans le chapitre « Installation » vous pouvez vérifier
et optionnellement mettre à jour les champs et les tables de la base de données avec
l'outil d'installation. Les autres outils se trouvent dans le back-office sous la rubrique
« Maintenance du système ».
Effacer le cache
TYPOlight possède un système de cache efficace qui stocke diverses données (comme les pages, les requêtes de
recherche ou les flux RSS) ce qui permet un chargement des pages plus rapide. Après que des changements aient été
faits dans le back-office, le front-office peut, parfois, encore afficher la version précédente dans le cache. Dans ce cas, le
cache devrait être vidé en utilisant ce module.
Mise à jour automatique (Live update)

Une des options les plus proéminentes qui permet à TYPOlight de se démarquer des autres systèmes de gestion de
contenu, est le moteur de mise à jour automatique. Une fois identifié dans le back-office, TYPOlight vérifie la version en
cours et vous fait remarquer si une nouvelle version est disponible. D'un simple clic sur le bouton « Vérifier les mises à
jour », TYPOlight vous affiche la liste des fichiers qui ont été mise à jour dans la nouvelle version, vous permettant de
définir ceux qui le seront. Vous pouvez ainsi éviter que vos fichiers personnalisés soient réécrits.
Après un autre clic sur le bouton « mettre à jour les fichiers », tous les fichiers locaux sélectionnés seront remplacés par
leur dernière version. Notez que TYPOlight requiert des droits d'écriture afin de mettre à jour les fichiers! Si vous faites
tourner PHP5 comme module vous devriez changer le mode de fichier (CHMOD) de vos fichiers et dossiers. Le processus
de mise à jour est journalisé dans le fichier system/logs/update.log.
5. Maintenance système 15
Modifier vos données personnelles
Chaque utilisateur back-office peut changer ses données personnelles comme son nom, e-mail, la langue du back-office ou
son mot de passe en utilisant le module Données personnelles. Vous pouvez accéder à ce module soit dans le menu à
gauche sous la rubrique Données personnelles soit dans la barre de liens en haut de page.
TYPOlight ne conserve pas seulement les données personnelles de l'utilisateur, il enregistre aussi sa session. Une session
contient des informations comme les nœuds ouverts, les critères de tri utilisés ou les pages visitées. La prochaine fois que
l'utilisateur se logguera, le back-office lui sera présenté comme il l'avait laissé la fois précédente.
Parfois une session n'est pas conservée proprement ou contient une erreur qui aura des conséquences sur la navigation
dans le back-office. Dans un tel cas, l'utilisateur peut effacer ses données de session, ce qui restaurera le back-office dans
son état initial.
5. Maintenance système 16
6. Navigation dans le back-office
Ce chapitre traite de la navigation dans le back-office. Jusqu'ici vous avez pu gérer toutes
les tâches à partir du menu de navigation sur la gauche en lançant un module particulier.
Cependant, afin de gérer l'ensemble des enregistrements que forment un site web, des
éléments de navigation additionnels sont nécessaires comme montré dans l'exemple
suivant.
Ouvrez le module Utilisateurs. Tous les utilisateurs sont listés dans la zone principale. Vous avez remarqué que
l'administrateur Kevin Jones est marqué d'une couleur différente que Helen Lewis et James Wilson. Ceci vous permet de
différencier les administrateurs des utilisateurs sans avoir à utiliser les fonctions de filtre.
Filtrer les enregistrements

Le back-office TYPOlight fournit différents outils pour trier, filtrer et rechercher des enregistrements. De cette façon, vous
vous y retrouverez facilement face à une grosse somme de données. Le module Utilisateur offre deux filtres. Le premier
permet de sélectionner tous les administrateurs ou tous les utilisateurs sans droits administratifs. Le second vous permet
de sélectionner tous les comptes utilisateur actifs ou inactifs. Vous pouvez, bien sûr, combiner plusieurs filtres.
Trier les enregistrements

La fonction de tri vous permet de trier les enregistrements selon différents critères, par exemple par ordre alphabétique sur
6. Navigation dans le back-office 17

le nom ou le prénom du membre. La fonction de tri n'est pas implémentée pour le module Utilisateurs mais vous pouvez la
tester dans le module Membres.
Afficher les enregistrements

Travailler avec un grand nombre d'enregistrements, comme dans le module Journal système, peut considérablement
ralentir le chargement des pages. Habituellement, vous voudrez seulement modifier le premier enregistrement et ne pas
attendre le chargement d'une liste de 300 enregistrements. Pour éviter cela, TYPOlight a une fonction d'affichage qui limite
le nombre d'enregistrements par page à 30 (cette valeur peut être changée dans le module Configuration du back-office).
Sélectionner la première option en haut dans la liste déroulante pour remettre un filtre à sa valeur initiale. Dans
notre exemple, nous n'avons pas besoin de la fonction d'affichage vu qu'il y a seulement trois comptes utilisateur.
Donc peu importe l'option que vous choisissez, cela ne fera aucune différence.
Rechercher dans les enregistrements

La fonction de recherche est la solution la plus flexible et l'outil le plus puissant pour maintenir les enregistrements. Vous
pouvez chercher certains champs pour un enregistrement donné et donc limiter le nombre de résultats aux
enregistrements qui correspondent au motif de recherche voulu. La fonction de recherche supporte les expressions
régulières, comme l'astérisque (*) qui signifie tout caractère.
Par exemple, entrez « wi.* » dans un champ de recherche afin de trouver tous les noms contenants la séquence
« wi », Vous devriez trouver James Wilson et Helen Lewis. Pour remettre à zéro une recherche et afficher de
nouveau tous les enregistrements, laissez simplement le champ de recherche vide et cliquez sur « Chercher ».
Editer tous les enregistrements

Avec le bouton Editer tous les enregistrements, vous pouvez éditer plusieurs enregistrements à la fois. Après avoir choisi
un groupe d'enregistrements, vous serez redirigé vers une page affichant une liste de champs d'entrée possible. Vous
pourrez alors choisir quels champ vous voulez éditer. Les champs que vous n'avez pas sélectionnés ou que vous n'êtes
pas autorisé à éditer seront cachés automatiquement.
Icones de navigation
Pour modifier un enregistrement particulier depuis une liste, vous pouvez utiliser les icônes de couleur affichés à droite sur
chaque ligne. Une bulle d'aide apparaît sur chaque icône si vous y laissez votre pointeur de souris. Les icônes de
navigation changent pour chaque module en cours et selon les permissions utilisateur.
Editer un enregistrement Changer d'utilisateur (administrateur seulement)
Dupliquer un enregistrement Déplacer la colonne sur la gauche
Dupliquer un enregistrement et tous ses enfants Déplacer la colonne sur la droite
Déplacer un enregistrement Déplacer la ligne / enregistrement vers le haut
Coller un enregistrement après celui-ci Déplacer la ligne / enregistrement vers le bas
Coller un enregistrement en tant qu'enfant de celui-ci Désactiver les retours à la ligne automatiques
Afficher les détails d'un enregistrement Masquer un élément
Supprimer un enregistrement Déployer un élément
Restaurer un enregistrement supprimé

Sauvegarder un enregistrement
Comme vous l'avez peut être déjà remarqué quand vous étiez dans les configurations du back-office, il vous est proposé
différentes options au moment de la sauvegarde d'un enregistrement :
• « Sauvegarder » recharge la page courante après la sauvegarde

• « Sauvegarder et fermer » charge la page précédente après la sauvegarde
• « Sauvegarder et éditer » charge le nouvel enregistrement après la sauvegarde
En cas d'erreur, le présent formulaire sera rechargé par rapport à l'option choisie. Un message d'erreur vous sera alors
affiché au dessus de chaque champ posant problème. Pour éviter la perte des données, tout autre champ correct sera
sauvegardé.

7. Organisation des comptes utilisateur
Dans ce chapitre vous apprendrez comment organiser les utilisateurs et les groupes
d'utilisateurs, leur assigner des permissions et leur donner accès à certaines zones du
site. TYPOlight fait la distinction entre les utilisateurs du front-office (les membres) et les
utilisateurs du back-office (les utilisateurs).
Les membres
Les membres peuvent seulement se logguer dans le front-office. Vous, en tant qu'administrateur, pouvez aussi décider de
créer des membres uniquement pour leur envoyer des newsletters sans leur donner la possibilité de se logguer. Toutefois,
si vous voulez que les membres soient capables de modifier leurs données personnelles ou si vous voulez créer des pages
protégées par mot de passe, vous devriez leur fournir un formulaire de connexion.
Dans ce dernier cas, vous aurez aussi besoin de créer un ou plusieurs groupes de membres vu que l'accès aux
pages protégées par mot de passe est toujours accordé au niveau du groupe.
Les utilisateurs
La gestion des permissions pour le back-office est beaucoup plus complexe que pour le front-office, bien qu'elle suive le
même principe: les utilisateurs sont organisés en groupes qui ont certaines permissions. Toutefois, il est possible d'étendre
ces permissions de groupe individuellement pour chaque utilisateur.
Les utilisateurs héritent généralement des permissions de tous les groupes actifs auxquels ils sont assignés. Si
un groupe est désactivé, ses permissions ne peuvent plus être héritées, même si le compte utilisateur reste actif.
Ainsi, un utilisateur dont les permissions sont héritées seulement de groupes désactivés n'a plus aucune
permission du tout.
Héritage de permission
Vous pouvez définir ici si un utilisateur hérite des permissions de groupe seulement, s'il étend ces permissions
individuellement ou n'hérite d'aucune permission de groupe.
Points de montage de page et de fichier

Un « point de montage » est le terme utilisé pour décrire quel est le dossier à partir duquel sont accessibles les fichiers
dans un système de fichiers.
TYPOlight utilise un principe très similaire : un point de montage de page définit une page racine individuelle à l'intérieur de
la structure de site à partir de laquelle un utilisateur peut accéder à l'arborescence de page. De la même manière, un point
de montage de fichier définit un dossier racine individuel à partir duquel un utilisateur peut accéder au système de fichier.
Un point de montage inclut toujours toutes ses pages et fichiers enfants.
En tant qu'administrateur, vous pouvez toujours accéder à l'ensemble du système de fichier. Les utilisateurs, par défaut, ne
peuvent pas accéder au système de fichier. A moins que vous, administrateur, ayez défini un point de montage pour un
utilisateur ou un groupe, leur permettant ainsi l'accès et la gestion d'un arbre de pages et de fichiers. Les utilisateurs Helen
Lewis et James Wilson de notre site d'exemple utilisent tous les deux la page Courses 2006 comme point de montage et
héritent de permissions additionnelles du groupe Editors.
En résultat la structure de site pour James Wilson ressemble à ça :
7. Organisation des comptes utilisateur 20

Permissions
Comme vous pouvez le voir, James Wilson est seulement autorisé à modifier la page de son cours Elements of Jazz
Piano. Il ne lui est pas permis d'éditer aucune autre page, bien qu'il puisse les voir. Ces permissions sont définies dans le
module du back-office : Structure du site. Dans ce module, éditez la page Elements of Jazz Piano et descendez jusqu'à
l'option Affecter les permissions. La page appartient à James Wilson et au groupe d'utilisateur Editors, vu qu'il n'y a pas de
permissions de groupe. Seul James Wilson, en tant que propriétaire, est autorisé à modifier cette page et ses articles. Il
pourrait aussi créer, déplacer ou effacer de nouvelles sous-pages, puisque l'option Editer la hiérarchie de la page à été
activée pour lui. Cependant, il ne peut pas déplacer ou effacer la page mère Elements of Jazz Piano.
Groupes de membres
Comme vous le savez déjà, les membres peuvent hériter des permissions d'un ou plusieurs groupes de membres. De cette
façon les permissions de tous les groupes actifs sont cumulées.
Champs autorisés
Vous pouvez définir ici quels champs d'une table un utilisateur est autorisé à modifier. Les champs d'entrée que vous, en
tant qu'administrateur, désactivez seront cachés quand un utilisateur modifiera un enregistrement. Si, après vous être
connecté avec les droits de James Wilson, vous ouvrez le module Articles et choisissez d'éditer l'entête d'un article, vous
verrez que certains champs comme la section de mise en page de l'article ne sont pas visibles parce qu'ils n'ont pas été
activés pour le groupe Editors.
Gérer les flux de travail

La possibilité d'exclure certains champs de l'édition est une condition préalable idéale pour gérer les flux de travail. Un
administrateur peut créer tous les articles et les pages nécessaires (sans les publier) et alors laisser ses éditeurs créer le
contenu. Puisque l'administrateur n'a pas activé le champ de publication, seulement lui peut décider si et quand il publiera
l'article. Ceci lui assure que tous les articles publiés sur le site auront préalablement reçu son aval.
Un tel scénario peut être envisagé dans une maison d'édition, où le rédacteur en chef doit vérifier toutes les
contributions de ses éditeurs avant de les publier.
7. Organisation des comptes utilisateur 21

8. Mise en place des pages
Une mise en page est constituée naturellement d'une ou plusieurs sections (par exemple
un entête et deux colonnes) et de multiples modules qui seront affichés dans ces
sections.
Selon ce principe, il est recommandé de suivre un certain ordre quant à la mise en place d'une page :
• Créer tous les modules nécessaires dans le module Modules
• Créer toutes les feuilles de style nécessaires dans le module Feuilles de style
• Créer une nouvelle mise en page dans le module Présentations de page
• Créer une nouvelle page dans le module Structure du site
De cette façon, vous pouvez être sûr que tous les composants nécessaires existent. Une présentation de page ne peut pas
être construite sans module ni feuille de style et une page ne peut pas être construite sans une présentation de page. Aussi
les paragraphes de ce chapitre suivront cet ordre.
Maintenant vous allez apprendre comment mettre en place les modules front-office, comment créer des feuilles de style et
comment construire une présentation de page les incluant. Vous allez apprendre en plus comment les modules front-office
sont rendus et comment les styliser avec CSS.
8. Mise en place des pages 22

9. Les modules front-office
Comme vous le savez déjà, une mise en page est basée sur plusieurs modules affichés
dans des sections de mise en page prédéfinies. Maintenant vous allez en apprendre plus
sur la manière de configurer les modules et comment ils sont affichés dans la partie
front-office.
Le back-office TYPOlight est bien documenté. Chaque champ d'entrée possède une annotation expliquant la fonction du
champ et les valeurs d'entrée possibles. Donc, seront seulement expliqués dans ce guide, les principes de base et les
champs d'entrée les plus importants. TYPOlight offre la possibilité d'étendre ses fonctionnalités avec des modules front-
office additionnels.
Si vous avez besoin d'un certain module qui n'existe pas encore et que vous connaissez un peu PHP, vous pouvez le
construire vous-même et personnaliser le système à vos besoins.
Le module « Menu de navigation »

Ce module crée un menu de navigation hiérarchique basé sur la structure de page existante et incluant toutes les pages
publiques. Le code source de sortie ressemble à ceci :
<div class="**mod_navigation**">
<a href="home.html#skipNavigation" class="invisible" title="Skip navigation"></a>
<ul class="level_1">
<li><p class="active">Home</p></li>
<li class="parent"><a href="academy.html">The academy</a></li>
<li class="submenu">
<li><a href="events.html">News & Events</a></li>
<li><a href="impressions.html">Campus Impressions</a></li>
</ul>
</li>
<li class="parent"><a href="courses.html">Courses 2006</a></li>
<li><a href="violin.html">Violin Master Class</a></li>
<li><a href="jazzpiano.html">Elements of Jazz Piano</a></li>
</ul>
</li>
</ul>
<a id="skipNavigation" class="invisible" title="Skip navigation"></a>
<div class="clear"></div>
</div>
Vous pouvez styliser chaque élément en utilisant l'attribut de classe dans votre feuille de style.
Le module « Navigation éléments du menu principal »

Ce module crée aussi un menu de navigation qui est, cependant, limité aux principaux items de menu (le premier niveau
de la structure de page). Le code source de sortie ressemble à ceci :
<div class="mod_navigationMain">
<a href="home.html#skipMainNavigation" class="invisible"></a>
<li><p class="active">Home</p></li>
9. Les modules front-office 23

<li><a href="academy.html">The academy</a></li>
<li><a href="courses.html">Courses 2006</a></li>
<li><a href="services.html">Services</a></li>
</ul>
<a id="skipMainNavigation" class="invisible"></a>
</div>
Le module « Navigation éléments de sous-menu »

Ce module crée les items de sous-menus d'un item de menu principal actif.
Comme une caractéristique spéciale, le module ne sera pas inclus dans le code source du site s'il n'y a pas d'item de sous
menu.
Le code source de sortie ressemble à ceci :
<div class="mod_navigationSub">
<a href="services.html#skipSubNavigation" class="invisible"></a>
<li><a href="account.html">My account</a></li>
<li><a href="search.html">Search this website</a></li>
<li><a href="logout.html">Logout</a></li>
</ul>
<a id="skipSubNavigation" class="invisible"></a>
</div>
Le module « Navigation Fil d'Ariane »

Ce module créé une navigation en Fil d'Ariane qui affiche le chemin depuis la page racine du site jusqu'à la page courante.
Ainsi, un visiteur n'est pas seulement capable de voir sur quelle page il est, mais aussi quelles pages il a visité avant
d'arriver sur la page courante. Le code source de sortie ressemble à ceci :
<div class="mod_breadcrumb">
<a href="home.html" title="Music Academy">Music Academy</a> |
<a href="academy.html" title="The academy">The academy</a> |
<span class="active">Campus Impressions</span>
</div>
Le module « Navigation rapide »

Ce module créé un menu déroulant hiérarchique qui vous permet de sauter vers une page donnée.
Vous pouvez choisir toute page comme point de départ et limiter la navigation rapide à une partie donnée du site,
<div class="mod_quicknav">
<form action="home.html" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_quicknav" />
<select name="target">
<option value="">Quick navigation</option>
<option value="home.html">Home</option>
<option value="academy.html">The academy</option>
<option value="events.html"> News & Events</option>
<option value="courses.html">Courses 2006</option>
<option value="violin.html"> Violin Master Class</option>
<option value="jazzpiano.html"> Elements of Jazz Piano</option>
<option value="services.html">Services</option>
<option value="account.html"> My account</option>
<option value="search.html"> Search this website</option>
<option value="logout.html"> Logout</option>
</select>
<input type="submit" class="submit" value="Go" />

</div>
</form>
</div>
Le module « Lien rapide »

Contrairement au module de Navigation rapide, ce module ne créé pas de menu hiérarchique mais donne un accès rapide
à quelques pages sélectionnées. Il est affiché comme un menu déroulant. Le code source de sortie ressemble à ceci :
<div class="mod_quicklink">
<form action="home.html" method="post">
<input type="hidden" name="FORM_SUBMIT" value="tl_quicklink" />
<select name="target">
<option value="">Quick link</option>
<option value="courses.html">Courses 2006</option>
<option value="events.html">News & Events</option>
<option value="impressions.html">Campus Impressions</option>
<option value="search.html">Search this website</option>
</select>
<input type="submit" class="submit" value="Go" />
</div>
</form>
</div>
Le module « Carte du site »

Ce module créé un aperçu de toutes les pages existantes. Vous pouvez choisir une page de départ pour montrer
seulement certaines parties du site. Le code source de sortie ressemble à ceci :
<div class="mod_sitemap">
<li><a href="home.html">Home</a></li>
<li class="parent"><a href="academy.html">The academy</a></li>
<li><a href="events.html">News & Events</a></li>
<li><p class="active">Campus Impressions</p></li>
</ul>
</li>
</ul>
</div>
Le module « Formulaire de connexion »

Ce module, qui est aussi utilisé sur le site d'exemple, créé un formulaire qui permettra aux membres de s'authentifier. Vous
pouvez choisir entre une mise en page à une ou deux colonnes. Le formulaire de connexion peut prendre deux états
différents :
• Le formulaire de connexion sans membre authentifié
• Le formulaire de connexion avec membre authentifié (et un bouton “Déconnexion”)
Assurez vous de fournir des définitions CSS pour les deux états et notez qu'il pourrait y avoir un message d'erreur aussi en
cas d'échec d'identification. Le code source de sortie ressemble à ceci :
<div class="mod_login">
<form action="academy.html" method="post">
<p class="error">Please enter username and password!</p>
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />
<p class="label"><label for="username">Username</label></p>
<input type="text" name="username" id="username" class="text" value="" />
<p class="label"><label for="password">Password</label></p>
<input type="password" name="password" id="password" class="text" value="" />
<div class="submit_container">

<input type="submit" class="submit" value="Login" />
</div>
</div>
</form>
</div>
Le code source de sortie avec un membre authentifié ressemble à ceci :
<input type="hidden" name="FORM_SUBMIT" value="tl_logout" />
<p class="login_info">You are logged in as d.evans.</p>
<div class="submit_container">
<input type="submit" class="submit" value="Logout" />
</div>
</div>
</form>
</div>
Si vous avez choisi une mise en page à deux colonnes, le code source de sortie ressemble à ceci :
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />
<table cellspacing="0" cellpadding="0" summary="">
<tr>
<td class="col_0"><label for="username">Username</label></td>
<td class="col_1"><input type="text" id="username" class="text" /></td>
</tr>
<tr>
<td class="col_0"><label for="password">Password</label></td>
<td class="col_1"><input type="password" id="password" class="text" /></td>
</tr>
<tr>
<td class="submit_col_0"></td>
<td class="submit_col_1"><input type="" class="submit" value="Login" /></td>
</tr>
</table>
</div>
</form>
</div>
Le module « Déconnexion automatique »

Ce module ne créé aucun code de sortie mais déconnecte un utilisateur authentifié. Le but de ce module est de fournir un
moyen d'ajouter un élément de déconnexion au menu de navigation. Dans le chapitre sur l'organisation des comptes vous
avez appris à créer des pages protégées par mot de passe et comment les rendre accessibles à différents groupes
d'utilisateurs.
Ouvrez le site d'exemple et connectez-vous avec l'identifiant de Donna Evans (d.evans / donnaevans). Vous pourrez voir
de nouveaux items dans le menu de navigation qui n'étaient pas là avant. Une de ces pages est appelée Déconnexion et
fourni une autre manière de se déconnecter du front-office.
Le module « Données personnelles »

Ce module créé un formulaire qui permet aux utilisateurs enregistrés de changer leurs données personnelles comme leur
nom, adresse, numéro de téléphone ou mot de passe. Vous pouvez choisir quels champs seront inclus dans ce formulaire.
Chaque entrée utilisateur sera validée par TYPOlight et sera disponible dans le module des membres après que le
formulaire ait été soumis. Le code source de sortie ressemble à ceci :

<div class="mod_personalData">
<form action="account.html" method="post">
<input type="hidden" name="FORM_SUBMIT" value="tl_member" />
<table cellspacing="0" cellpadding="0" summary="">
<tr>
<td class="col_0"><label for="ff_firstname">First name</label></td>
<td class="col_1"><input type="text" id="ff_firstname" class="text" /></td>
</tr>
<tr>
<td class="col_0"><label for="ff_lastname">Last name</label></td>
<td class="col_1"><input type="text" id="ff_lastname" class="text" /></td>
</tr>
<tr>
<td class="col_0"><label for="ff_language">Language</label></td>
<td class="col_1">
<select name="language" id="ff_language" class="select">
<option value="">-</option>
<option value="en">English</option>
<option value="de">German</option>
</select>
</td>
</tr>
<tr>
<td class="submit_col_0"></td>
<td class="submit_col_1"><input type="submit" class="submit" /></td>
</tr>
</table>
</div>
</form>
</div>
Veuillez noter que le formulaire est seulement montré si un utilisateur front-office est loggué. Sinon il ne sera pas présent
dans le code source du site.
Le module « Formulaire »
Ce module vous permet d'inclure un formulaire créé par avance. Dans le chapitre Générateur de formulaire vous
apprendrez comment utiliser le générateur de formulaire incorporé et inclure des formulaires dans votre site.
Un formulaire inclus dans une présentation de page sera affiché sur toutes les pages utilisant cette présentation. Cela peut
s'avérer utile pour un formulaire de recherche par exemple. Toutefois si vous voulez afficher un formulaire sur une page
particulière seulement, vous devriez l'inclure dans un article.
Le module « Moteur de recherche »

Ce module vous permet de faire une recherche sur votre site. Avant de pouvoir utiliser ce moteur de recherche et de
pouvoir afficher des résultats, les recommandations suivantes doivent être suivies :
• Chaque page, pour pouvoir être indexée, doit avoir été vue au moins une fois
• L'indexation d'une page ne marchera pas s’elle a été désactivée sur cette page
• L'indexation de page ne marchera pas si un utilisateur est loggué dans le back-office
Vous pouvez vérifier que ces recommandations aient été suivies en utilisant le module Maintenance du système. Si le
cache des tables tl_search et tl_search_index est vide, aucune page n'a été indexée et le moteur de recherche ne pourra
montrer aucun résultat. S'il y a des enregistrements, vous pouvez toutefois ouvrir le site d'exemple et visiter la page de
recherche du site. Il y a une courte explication des différentes options de recherche que vous pouvez utiliser.
• Recherche AND trouvera les pages qui contiennent tous les mots clé
• Recherche OR trouvera les pages qui contiennent au moins un des mots clé
• Recherche par joker (ex: mus* trouvera “music” et “musical”)
• Recherche par phrase trouvera la page qui contient la phrase exacte comme “music academy”
• Mots clé forcés, les mots clé avec un plus (+) doivent être inclus
• Mots clés exclus, les mots clé avec un moins (-) doivent être exclus

Les résultats de recherche contiennent le titre et le contexte de la page trouvée comme vous pouvez le voir sur la plupart
des moteurs de recherche populaires. Le code source de sortie ressemble à ceci :
<div class="mod_search">
<p class="header">Results 1 - 2 of 2 for "james wilson" (0.001 seconds)</p>
<div class="bg1">
<h3><a href="home.html">Home - Welcome to Music Academy</a></h3>
<p class="context">...</p>
<p class="url">home.html <span class="matches">- [1 occurrences]</span></p>
</div>
<div class="bg2">
<h3><a href="academy.html">The academy - The academy</a></h3>
<p class="url">academy.html <span class="matches">- [1 occurrences]</span></p>
</div>
<div class="bg3">
<h3><a href="services.html">Services – Term paper submission</a></h3>
<p class="url">services.html <span class="matches">- [1 occurrences]</span></p>
</div>
</div>
Le nombre de résultats est limité à 10 par page (cette valeur peut être changée dans le back-office). S’il y a plus de 10
résultats, un menu de pagination est proposé vous aidant à naviguer dans les résultats. Le code source de sortie
ressemble à ceci :


<div class="pagination">
<p>Page 1 of 2</p>
<ul>
<li><a href="search/pages/1.html" class="pagination_first">First</a></li>
<li><a href="search/pages/2.html" class="pagination_previous">Previous</a></li>
<li><a href="search/pages/1.html" class="pagination_link">1</a></li>
<li><span class="pagination_current">3</span></li>
<li><a href="search/pages/4.html" class="pagination_next">Next</a></li>
<li><a href="search/pages/5.html" class="pagination_last">Last</a></li>
</ul>
</div>

A propos du moteur de recherche, il est temps de présenter une autre caractéristique de TYPOlight. Les commentaires
dans le précédent exemple de code HTML évitent au moteur de recherche de TYPOlight d'indexer le menu de pagination.
Chaque module qui ne créé pas de contenu est exclu de l'indexation par cette méthode. Vous pouvez aussi utiliser ces
commentaires pour éviter que le moteur de recherche indexe votre propre code (par exemple dans le module Code HTML
personnalisé).
Le module « Liste d'articles »

Ce module affiche une liste d'articles d'une colonne particulière.
Le module « Code HTML personnalisé »

Ce module vous permet d'ajouter votre propre code HTML à une page. Utilisez ce module pour chaque tâche qui n'est pas
encore couverte par un autre module.
Vous pouvez aussi utiliser ce module si vous avez besoin d'une enveloppe supplémentaire autour du corps de votre page.
Dans ce cas, créez deux modules HTML et placez le premier, avec une balise ouvrante <div id=“wrapper”> en haut et le
deuxième avec une balise fermante </div> en bas de page.

Le module « Animation Flash »
Ce module vous permet d'inclure de manière accessible un clip Flash dans votre site. Si le lecteur Flash n'est pas installé
dans le navigateur de votre visiteur, ou que JavaScript ait été désactivé, un contenu alternatif lui sera proposé
automatiquement. Le contenu alternatif peut aussi bien être une image que du code HTML. Dans ce cas, entrez dans le
champ « contenu alternatif » :
<img src=“tl_files/image.gif” alt=“alternative text” />.
Le module « Image aléatoire »

Ce module affiche une image aléatoire depuis une sélection d'images. A chaque rafraichissement de page, une nouvelle
image est affichée. Vous pouvez choisir plusieurs images ou bien des dossiers comme source. Si vous choisissez un
dossier, toutes ses images seront incluses automatiquement. Le code source de sortie ressemble à ceci :
<div class="mod_randomImage">
<img src="image.php?src=tl_files/music_academy/campus_3.jpg&width=200" />
<div class="caption">Campus impressions</div>
</div>
Le module « Lecteur de flux RSS »

Ce module intègre un flux RSS dans votre site. Il existe deux modèles appelés rss_default et rss_items_only qui soit
affiche un flux RSS complet soit juste des items de flux. Le code source de sortie ressemble à ceci :
<div class="mod_rss_reader">
<div class="rss_default_header">
<h2><a href="...">RSS Feed Title</a></h2>
<p class="description">RSS Feed Description</p>
</div>
<div class="rss_default">
<h3><a href="...">First item</a></h3>
<p class="description">First item description</p>
</div>
</div>

10. Feuilles de style
Comme vous devez le savoir, un des principes de base d'un système de gestion de
contenu est de séparer le fond de la forme, le contenu du design. Jusqu'à maintenant,
vous avez seulement appris à créer du contenu. Il est temps de passer au design de votre
site qui devra être fait en utilisant CSS si vous voulez qu'il soit accessible.
Dans ce but, il y a, dans le back-office, un module Feuille de style qui vous aidera à gérer les différentes feuilles de style
pour les différents médias visés. Ouvrez le site d'exemple et choisissez d'éditer la feuille de style « basic »,
Liste d'enregistrements
Ce module nous montre une autre manière de lister les enregistrements. Jusqu'à présent, il n'y avait seulement qu'à partir
de simples listes que vous pouviez choisir directement un enregistrement. Les applications plus complexes comme le
générateur de CSS vous demande, dans un premier temps, de créer une feuille de style (élément parent) et d'y ajouter
plus tard des définitions de style (éléments enfant). Si vous choisissez de modifier une feuille de style particulière, vous
vous retrouverez avec un aperçu, comme montré plus bas, à partir duquel vous pourrez éditer soit la feuille de style elle
même (élément parent), soit ses définitions de style (éléments enfant).
Editer les définitions de style

Maintenant descendez la page courante jusqu'à arriver à la définition de style h1. Cliquez sur le bouton « Editer la
10. Feuilles de style 30

définition » pour ouvrir le formulaire d'édition. Comme vous pouvez le voir, le formulaire est divisé en différents groupes que
vous pouvez ouvrir ou fermer. La définition de style utilise les groupes Marges, Remplissage, Alignement, Fond, Bordure et
Police de caractère. Si vous voulez utiliser des commandes spéciales CSS, vous pouvez les entrer dans la partie Code
CSS personnalisé en bas de page.
TYPOlight utilise AJAX pour ouvrir/fermer les groupes. Il faut pour cela que JavaScript soit activé dans votre
navigateur. Sinon vous devrez, dans un premier temps, sauvegarder vos changements pour que les champs
additionnels apparaissent ensuite dans la page. Cliquez le bouton Sauvegarder ou utilisez le raccourci clavier
[ALT] + S pour le faire ([CTRL] + S sous Mac). Il est recommandé d'activer JavaScript.
Sélecteurs CSS
Un sélecteur définit a quel élément ou groupe d'éléments une définition de style est assignée. Il existe trois manières de
viser un élément HTML :
• via le type d'élément (par exemple div, span, a, img, input...)
• via l'attribut de classe (par exemple .invisible)
• via l'attribut ID (par exemple #header)
Les sélecteurs vous permettent aussi d'inclure ou d'exclure certains navigateurs. Ainsi vous pouvez, par exemple, créer
une définition de style qui sera interprétée uniquement par Internet Explorer 7 et sera ignorée par toutes les autres
versions. Voici un court aperçu des trois aiguilleurs les plus connus :
*html Internet Explorer jusqu'à la version 6
*:first-child+html Internet Explorer 7 seulement
html>body Navigateurs basés sur Gecko et IE 7
Par exemple, si vous voulez styliser l'entête de votre mise en page et que vous ayez besoin d'affecter différentes valeurs
de hauteur pour chaque navigateur (Firefox, IE6 et IE7), vous pouvez y parvenir avec un aiguillage CSS. Comme vous le
savez déjà, le conteneur correspondant possède un attribut de classe appelé #header pour le référencer.
#header { height:72px; } /* all browsers */

* hml #header { height:80px; } /* IE 5 and IE 6 */
*:first-child+html #header { height:74px } /* IE 7 */
10. Feuilles de style 31

11. Présentations de page
TYPOlight a un constructeur de CSS incorporé qui créé automatiquement une mise en
page cross-browser (divisée en entête, pied de page et colonnes). Définissez simplement
le nombre de colonnes et les modules à afficher dans ces colonnes. Ensuite, vous pouvez
styliser la mise en page créée automatiquement en utilisant CSS. Vous allez maintenant
apprendre comment mettre en place une mise en page.
Le back-office TYPOlight est bien documenté. Chaque champ d'entrée est suivi d'une courte explication décrivant la
fonction du champ et les possibles valeurs d'entrée. Donc seuls les principes de base et les champs d'entrée les plus
importants sont expliqués dans ce guide utilisateur.
Modèle de mise en page

Chaque mise en page est basée sur un modèle. Vous trouverez le modèle par défaut fe_page dans le dossier templates du
front-office system/modules/frontend/templates.
Les feuilles de style incluses

Vous pouvez ici inclure vos feuilles de style précédemment créées. Si vous n'en avez pas encore créées, un message « il
n'y a pas encore d'enregistrements » apparaît.
Les balises <head> supplémentaires

TYPOlight créé automatiquement la section d'entête de votre site web en incluant par exemple les mots clé, la description,
les feuilles de style et les fichiers JavaScript nécessaires. Les mots clé peuvent être définis au moment de l'édition de
l'article. Les descriptions peuvent être définies au moment de l'édition de la page. Si vous voulez utiliser vos propres
scripts, vous pouvez les entrer ici comme ceci:
<script type="text/javascript" src="templates/custom.js"></script>

<link rel="stylesheet" type="text/css" href="templates/my.css" media="screen" />
Bien sûr, vous pouvez aussi ajouter ici vos définitions CSS ou vos fonctions JavaScript. Dans ce cas, assurez-vous de
commenter correctement vos scripts en les incluant dans des sections CDATA.
Mootools
Mootools est une librairie JavaScript qui s'est fait connaître grâce à son effet accordéon. Cet effet est intégré dans
TYPOlight comme un élément de contenu et requiert une initialisation JavaScript. Par défaut, il y a trois différents modèles
Mootools parmi lesquels vous pouvez faire votre choix. Le modèle moo_default initialise simplement un accordéon par
défaut. Le modèle moo_close_all qui vous permet de fermer tous les nœuds et le modèle moo_modify_foreground qui
change en plus la couleur des polices de chaque entête, pourvu qu'elle ait été définie dans un attribut de style ou dans une
feuille de style.
Type de présentation de page

Le constructeur de mise en page de TYPOlight distingue deux types de conceptions:
• design liquide
• design statique
Alors qu'un design statique contient une largeur fixe donnée en pixels et peut être aligné dans le navigateur (alignement à
gauche, à droite ou centré), un design liquide ajuste ses hauteurs et largeurs en fonction de la taille de la fenêtre du
11. Présentations de page 32

navigateur. Toutes les dimensions d'un design liquide sont donc exprimées en pourcentage et non en pixels. Le site
d'exemple utilise une mise en page statique, centrée avec une largeur fixe.
Les modules inclus

Cette partie vous permet d'organiser vos modules précédemment créés à l'intérieur des sections de mise en page. Le
nombre de sections de mise en page disponibles dépend du nombre de colonnes, de l'élément d'entête et de pied de page
ainsi que des possibles sections de mise en page personnalisées. Si vous modifiez une section de mise en page, vous
devrez sauvegarder vos changements avant de les voir apparaître dans cette partie.
Les modules sont affichés les uns après les autres à l'intérieur de chaque colonne. Dans notre exemple, le module
Navigation « Fil d'Ariane » sera affiché avant le module Articles.
Cette partie utilise AJAX, donc JavaScript devrait être activé. Sinon vous devrez sauvegarder vos changements
avant de cliquer sur un symbole de navigation. Cliquez le bouton « Sauvegarder » ou utilisez le raccourci
clavier [ALT] + S pour le faire ([CTRL] + S sous Mac).
Il est recommandé d'activer JavaScript dans votre navigateur.
Cas spécial : le module articles

Le module articles est disponible par défaut et ne doit pas être créé à l'avance. A la différence des autres modules, le
contenu du module articles change dynamiquement aux vues des articles respectifs se trouvant sur la page donnée.
Une autre option de ce module est qu'il affiche différents articles selon la colonne courante. Comme vous le verrez dans les
chapitres à venir, chaque article est assigné à une colonne particulière (section mise en page) et sera affiché seulement si
la colonne correspondante contient un module articles. Donc assurez vous d'ajouter ce module à chaque colonne qui
abritera des articles.
Spécifications de largeur
Après avoir installés tous les modules et sauvegardés vos changements, vous pouvez spécifier la largeur hors-tout.
Assurez vous de définir la largeur en pixel pour les présentations statiques et en pourcentage pour les présentations
liquides !
Un espacement global sera soustrait de la largeur de chaque colonne et n'affectera donc pas la largeur de la
colonne que vous avez spécifiée. Le constructeur de mise en page de TYPOlight prend soin des particularités
des navigateurs comme le bug du modèle de boite d'Internet Explorer.
11. Présentations de page 33

12. Structure du site
La structure du site est la colonne vertébrale de votre site et est, par exemple, utilisée
pour créer le menu de navigation. Les pages sont ordonnées hiérarchiquement et
peuvent hériter de certaines configurations de leurs pages parentes. Par exemple, si vous
assignez une présentation de page ou une durée limite de cache à une page, ces
configurations seront aussi appliquées à ses pages enfant – à moins qu'elles aient leur
propre présentation de page ou leur propre durée limite de cache.
Ouvrez le module « Structure du site » du back-office du site d'exemple. Cliquez sur l'icône [+] devant Music Academy afin
de déplier l'arbre de nœud. Comme vous pouvez le voir, chaque page a un symbole particulier qui vous indique non
seulement le type de page mais aussi si elle est visible ou non, si elle est publiée ou si elle est protégée par mot de passe.
Maintenant nous allons voir plus en détail les configurations de page sur la base de la page Home.
Le back-office TYPOlight est bien documenté. Chaque champ d'entrée est suivi d'une courte explication décrivant la
fonction du champ et les possibles valeurs d'entrée. Donc seuls les principes de base et les champs d'entrée les plus
importants sont expliqués dans ce guide utilisateur.
Types de page
Le paramètre le plus important de chaque page est son type. Il détermine si une page affiche son contenu, si elle redirige
le visiteur vers une autre page ou si elle est le point de départ dans l'arbre de page d'un nouveau site. Il y a six différents
types de page qui seront expliqués dans les paragraphes suivants.
12. Structure du site 34

Page simple
Une page simple se comporte comme une page HTML statique et est utilisée pour afficher des articles, du contenu et des
modules. La plupart des pages du site d'exemple sont des pages simples.
Rediriger vers une URL externe

Une page de redirection n'affiche aucun contenu mais redirige les visiteurs vers une autre page. L'URL cible est n'importe
quelle page qui ne peut pas être vue sous votre domaine. Ce type de page est similaire à un lien de redirection vers une
URL externe (par exemple http://www.typolight.org).
Aller vers une autre page du site

Ce type de page n'affiche pas plus de contenu, mais redirige les visiteurs vers une autre page interne. Au contraire d'une
page de redirection, les visiteurs sont amenés vers une autre page dans l'arbre de page.
Racine d'un nouveau site

Pour faire tourner plusieurs sites à l'intérieur de l'arbre de page vous devez créer une racine de page pour chaque site.
Vous pouvez assigner une langue et un nom de domaine optionnel à chaque page racine pour chacun d'eux afin de
rediriger les visiteurs vers une page d'accueil qui correspond à un domaine précis ou la langue du navigateur.
Même si vous avez l'intention de ne faire tourner qu'un seul site web, il peut être opportun d'utiliser ce type de
page vu que ses configurations (mise en page, cache, droits d'accès) seront transmises à toutes ses pages
enfant automatiquement.
Supposons que vous faites tourner un site d'entreprise bilingue et un autre plus petit site privé que vous voudriez gérer
avec TYPOlight dans le futur. Votre site d'entreprise utilise le domaine www.votre-compagnie.com et votre site privé le
domaine www.votre-site-prive.com. Vous allez donc créer trois pages racine avec les paramètres suivants:
• Site d'entreprise français, pas de nom de domaine, Français
• Site d'entreprise anglais, pas de nom de domaine, Anglais, langue de remplacement
• Site privé, www.votre-site-prive.com, Anglais, langue de remplacement
Le tableau suivant vous montre vers quelle page un visiteur sera amené à voir en fonction des préférences de son
navigateur et de l'URL employée.
URL Langue du navigateur Redirection vers
www.votre-compagnie.com Français Site d'entreprise français
www.votre-compagnie.com Anglais Site d'entreprise anglais
www.votre-compagnie.com Allemand Site d'entreprise anglais
www.votre-site-prive.com Peu importe Site privé
Notez que nous utilisons l'option de langue pour le site privé dans cet exemple. Si ce n'était pas le cas, seuls
les visiteurs ayant défini l'anglais comme langue par défaut de leur navigateur pourront voir le site privé. Les
visiteurs français ne pourront pas le voir et une page 404 leur sera affichée puisqu'il n'y a pas de version
française de ce site privé.
Erreur 403 (accès interdit)

Si un visiteur non loggué essaye d'atteindre une page protégée par mot de passe, il sera redirigé vers la page d'accueil du
site. Néanmoins si vous préférez afficher un message d'erreur ou rediriger le visiteur vers une page d'identification, vous
pouvez créer une page d'erreur 403 qui sera appelée automatiquement dans ce cas précis.

Erreur 404 (page non trouvée)
Si un visiteur essaye d'accéder une page non-existante qui n'est probablement pas encore créée, pas encore publiée ou a
été renommée, un message d'erreur « No pages found » est affiché. Mais si vous préférez afficher un message
personnalisé ou rediriger vos visiteurs vers une autre page, vous pouvez créer une page 404 qui sera appelée
automatiquement dans un tel cas.
Autres configurations
En outre le type de page, il y a d'autres configurations importantes qui affectent le comportement d'une page. La plupart de
ces configurations sont cachées par défaut puisqu'elles sont habituellement héritées de la page parent.
Ces configurations sont :
• Page protégée
• Affecter une présentation
• Affecter une durée de vie au cache
• Affecter les permissions
Alias de la page
Chaque page a un identifiant numérique unique par lequel il peut être identifié. Pour voir une page donnée dans votre
navigateur, vous devez donner cet identifiant dans l'URL, par exemple :
http://www.votre-domaine.com/index.php/32.html
Dans ce cas l'identifiant de page est 32. Un alias de page est aussi un identifiant unique qui peut être utilisé à la place de
l'identifiant numérique. Son but premier est de générer des URL plus facilement lisibles par l'homme et les moteurs de
recherche comme :
http://www.votre-domaine.com/index.php/contactez-nous.html
Protéger une page

Avant de protéger une page et de limiter son accès à certains utilisateurs authentifiés, vous devez au moins créer un
groupe de membres. Vous pouvez alors choisir de protéger une page et sélectionner le groupe de membres qui est
autorisé à la voir. Souvenez vous que si vous ne sélectionnez aucun groupe, n'importe quel membre authentifié aura accès
à la page.
Affecter une présentation

Dans le chapitre précédent nous avons vu comment créer une présentation de page. Vous pouvez ici affecter à la page
une présentation de page. Si vous n'en affectez pas, la présentation de la page parente sera utilisée. Si la page parente n'a
pas non plus de présentation qui lui soit affectée, la présentation par défaut sera utilisée. S'il n'y a pas de présentation par
défaut, l'exécution du script sera bloquée et un message d'erreur « No layout specified » sera affiché.
Affecter une durée de vie au cache

TYPOlight utilise un mécanisme de cache intelligent qui emmagasine les pages visitées et charge la version en cache pour
les prochaines requêtes. Vu que la plupart des routines du programme sont ainsi évitées, les pages sont affichées
beaucoup plus rapidement.
Pour des raisons de sécurité, les pages protégées par mot de passe ne sont jamais mises en cache, même si
vous leurs affectez une durée de vie au cache. La même chose s'applique si un utilisateur loggué dans le back-
office prévisualise une telle page. Dans les deux cas, les données confidentielles ne peuvent pas être écrites
dans le cache et chargées à la prochaine requête de page.
Affecter les permissions

Les permissions de page s'applique au back-office et détermine quel utilisateur peut accéder quelle page et s'il lui est-il

permis de modifier ou supprimer des pages ou des articles. A l'instar de la commande UNIX CHMOD, il y a trois niveaux de
permissions :
• Accès comme le propriétaire d'une page
• Accès comme un membre du groupe d'une page
• Accès comme un autre utilisateur back-office
Chaque page appartient à un utilisateur back-office particulier et un groupe d'utilisateurs back-office particulier qui peuvent
avoir différentes permissions. Par défaut, le propriétaire de la page a toutes les permissions alors que les membres d'un
groupe d'une page sont seulement autorisés à modifier les enregistrements existants.
Les permissions de page sont aussi héritées des pages parentes et ne doivent pas être réaffectées à chaque
page enfant. Si vous n'affectez aucune permission de page, les permissions par défaut, qui peuvent être
changées dans le module Configuration, seront utilisées.
Publier une page

Une page est seulement affichée dans le front-office si elle a été publiée ou si un utilisateur back-office authentifié la
prévisualise. Utilisez cette option afin de cacher les pages incomplètes ou de publier une page pour une période donnée
seulement (par exemple un Joyeux Noël en décembre).
Aperçu des icônes

Maintenant que vous connaissez toutes les configurations importantes de page, vous êtes prêt pour un aperçu complet des
icônes de l'arbre de pages :
Page publiée
Page non publiée
Page publiée qui n'est pas visible dans le menu de navigation
Page non publiée qui n'est pas visible dans le menu de navigation
Page protégée et publiée
Page protégée non publiée
Page protégée publiée qui n'est pas visible dans le menu de navigation
Page protégée non publiée qui n'est pas visible dans le menu de navigation

13. Articles
Comme vous le savez déjà, TYPOlight utilise les articles pour organiser les éléments de
contenu. Ces articles peuvent alors être affichés dans une section particulière d'une
présentation de page. Ainsi vous pouvez non seulement publier ou déplacer en une seule
fois un ensemble d'éléments de contenu en relation les uns avec les autres mais aussi
gérer les flux de travail dans un environnement multiutilisateurs (auteurs).
Ouvrez le module Articles du site d'exemple. Comme vous pouvez le voir, il y a un article par page assigné à la colonne
principale. Vous pouvez créer un nombre illimité d'articles qui seront affichés les uns au dessus des autres (les articles
publiés seulement).
Maintenant ouvrez l'article Home en cliquant sur son icône d'édition. Vous êtes à présent sur une page d'aperçu qui vous
montre l'élément parent et les éléments enfant (comme pour le module Feuilles de style). Les paragraphes suivants
expliquent les paramètres les plus importants de l'élément parent.
Afficher l'article dans

Comme vu plusieurs fois précédemment, les articles peuvent être affichés dans différentes sections de mise en page
(colonnes), pourvu qu'un module Articles leurs aient été assignées.
Mots clés
Alors que la description d'une page est fournie dans le module Structure de site, les mots clés seront cumulés à partir de
ceux indiqués dans tous les articles composants une page. Assurez vous de ne pas utiliser les mêmes mots clés pour tous
les articles parce que certains moteurs de recherche pourraient interpréter leur répétition comme du SPAM et
n'indexeraient pas du tout la page.
Publier l'article
Comme les pages de la structure de site, les articles doivent aussi être publiés avant d'être visibles dans le front-office.
Vous pouvez soit publier ou non un article soit choisir de le publier pour une période de temps donné seulement. Ainsi vous
pouvez, par exemple, annoncer un événement jusqu'au jour où il a lieu.
13. Articles 38
14. Eléments de contenu
Un élément de contenu est un certain type de contenu comme un texte, une image ou un
tableau HTML. Vous pouvez ajouter un nombre illimité d'éléments de contenu (par
exemple un texte, une image et un lien hypertexte) à un article à l'intérieur du contenu de
votre site web. Dans les chapitres suivants vous allez apprendre les différents éléments
de contenu et comment ils sont formatés.
Titre
L'élément titre ajoute un titre en entête de l'article. Le code source de sortie ressemble à ceci :
<h1 class="ce_headline">Headline</h1>
Texte
L'élément texte ajoute un texte formaté à un article. Vous pouvez utiliser un éditeur de texte avancé pour appliquer
facilement différents formats comme un programme de bureautique. TYPOlight utilise TinyMCE que vous pouvez trouver
sur http://tinymce.moxiecode.com. Après que le texte ait été validé en terme d'accessibilité, le code source de sortie
ressemblera à ceci :
<div class="ce_text">
Rich Text Editor Output
</div>
Si une image a été ajoutée, le code source de sortie ressemblera à ceci :
<div class="ce_text">
<div class="image_container" style="float:left;">
<img src="image.php?src=campus_1.jpg&width=200" alt="Campus Impression" />
<div class="caption">Campus Impression</div>
</div>
Rich Text Editor Output
</div>
HTML
L'élément HTML contient du code XHTML (espérons le valide). Il est utilisé pour montrer toute sorte de contenu qui ne peut
pas être généré avec un élément de contenu existant. Le code source de sortie ressemble à ceci :
<div class="ce_html">
<div>This is valid XHTML Code</div>
</div>
Notez que TYPOlight ne permet aucune balise HTML et enlève les balises interdites. Une liste complète des balises
autorisées peut être trouvée dans le fichier system/config/config.php. Vous pouvez personnaliser cette liste dans le fichier
de configuration local.
14. Eléments de contenu 39

Code
Cet élément affiche un bout de code écrit dans un langage de programmation donné (par exemple PHP ou HTML). Le code
ne sera pas exécuté. Le code source de sortie ressemble à ceci :
<div class="ce_code">
<pre>
function test($test)
{
echo $test;
}
</pre>
</div>
Image
Cet élément ajoute une image à l'article. Le code source de sortie ressemble à ceci :
<div class="ce_image">
<h1>Headline</h1>
<div class="image_container">
<img src="image.php?src=campus_1.jpg&width=200" alt="Campus Impression" />
</div>
</div>
Le titre dans cet exemple est facultatif et ne sera affiché que si le champ Titre a été rempli.
Lien hypertexte
Cet élément de contenu ajoute un lien hypertexte à un article. Le code source de sortie ressemble à ceci :
<div class="ce_hyperlink">
Visit <a href="http://www.typolight.org/" class="hyperlink_txt">TYPOlight</a>.
</div>
Si vous utilisez une image à la place du texte, le code source de sortie ressemble à ceci :
<div class="ce_hyperlink">
<div class="image_container">
<a href="http://www.typolight.org/" class="hyperlink_img"><img src="..." /></a>
</div>
</div>
Si vous utilisez le protocole mailto, vous pouvez entrer une adresse mail à la place d'une URL. TYPOlight crypte
automatiquement les adresses mail afin d'éviter que les robots de SPAM ne les attrapent.
Liste
Cet élément ajoute une liste à un article en utilisant un assistant JavaScript afin de vous aider à la mise en place des
éléments. Le code source de sortie ressemble à ceci :
<div class="ce_list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

Tableau
Cet élément ajoute un tableau à un article en utilisant un assistant JavaScript pour vous aider dans la mise en place des
éléments. Le code source de sortie ressemble à ceci :
<div class="ce_table">
<table cellspacing="0" cellpadding="0" summary="Table summary">
<thead>
<tr>
<th class="col_0">Header column 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col_0_bg">Table body</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="col_0">Footer column 1</td>
</tr>
</tfoot>
</table>
</div>
Téléchargement
Cet élément ajoute un lien de téléchargement à un article et ouvre automatiquement la boite de dialogue « Enregistrer
sous » dès que le gestionnaire de téléchargement incorporé a vérifié la permission de l'utilisateur à télécharger un fichier.
<div class="ce_download">
<img src="iconJPG.gif" alt="Campus impression" class="mime_icon" />
<a
href="download.php?src=campus.jpg&token=fe1fdecb58fb4c02d7e2939
01dae9a78">
Campus impression (113 KB)
</a>
</div>
Galerie d'images
Cet élément affiche un nombre d'images donné comme galerie en utilisant le script open source « slimbox » pour voir les
images en pleine largeur. Plus d'information sur ce script à l'adresse http://www.digitalia.be/software/slimbox. Le code
source de sortie ressemble à ceci :
<div class="ce_gallery">
<table cellspacing="0" cellpadding="0" summary="Image gallery">
<tbody>
<tr>
<td width="33">
<a href="campus_1.jpg" rel="lightbox[lb1]" title="Campus 1">
<img src="image.php?src=campus_1.jpg&width=150" alt="Campus 1" />
</a>
</td>
<td width="33">

</a>
</td>
<td width="33">
</a>
</td>
</tr>
</tbody>
</table>
</div>
Depuis la version 2.2.8 vous pouvez aussi ajouter des métadatas (description, légende et lien optionnel) à la galerie. Créez
simplement un fichier texte nommé meta.txt et placez le dans le répertoire avec vos images.
PIC0001.jpg = This is the description | http://www.domain.com | Caption

PIC0002.jpg = This is another description || Caption (no link)
Assurez vous d'utiliser une nouvelle ligne pour chaque image. Si vous choisissez d'ordonner vos images par un fichier
méta, elles seront ordonnées par rapport à cette liste.
Lien de haut de page

Cet élément ajoute un lien de haut de page qui vous permet de sauter vers le haut de la page. Ceci est particulièrement
utile pour les longues pages où les visiteurs doivent beaucoup scroller. Le code source de sortie ressemble à ceci :
<div class="ce_toplink">
<a href="home.html#top" title="Back to top">Back to top</a>
</div>
Accordéon
Cet élément de contenu ajoute un bloc contenant un accordéon Mootools à un article. Vous trouverez plus d'informations
sur le framework opensource JavaScript Mootools sur http://mootools.net et sur http://moofx.mad4milk.net.
Le framework JavaScript Mootools est inclus par défaut vu qu'il est utilisé par l'élément galerie d'images. Donc
vous pouvez utiliser tous les effets Mootools et les scripts basés sur mootools sur votre site web sans avoir à
inclure d'autres fichiers JavaScript.
Si vous n'utilisez pas le modèle standard TYPOlight (fe_page.tpl), vous pourriez avoir des problèmes pour faire
fonctionner l'Accordéon correctement.
Voici la solution : http://www.typolight.org/forum/viewtopic.php?id=1072
L'élément accordéon marche comme l'élément texte à l'exception que vous devez entrer un titre pour que l'élément puisse
être ouvert ou fermé. Le titre peut contenir du code HTML, vous pouvez alors utiliser aussi bien une image que du texte.
Pour faire fonctionner cet effet, vous devez inclure dans votre présentation de page un script Mootools à l'aide de la liste
déroulante JavaScript Mootools. Le code source de sortie de cet élément ressemble à ceci :
<div class="ce_accordion">
<div class="toggler">
HTML headline
</div>
<div class="accordion"><div>
Content of the accordion pane
</div></div>
</div>

Elément de contenu
Cet élément est utilisé pour afficher un élément de contenu existant. Donc vous n'avez pas à créer/changer un élément
répété plusieurs fois. Le code source de sortie est identique au code source de sortie de l'élément d'origine, cependant
vous pouvez réécrire l'alignement, les marges et l'id dans la feuille de style.
Formulaire
Cet élément ajoute un formulaire à un article. La manière de construire des formulaires en utilisant le générateur de
formulaire incorporé sera expliquée dans un des chapitres suivants.
Module
Cet élément est utilisé pour ajouter un module front-office à un article.

15. Actualités
Le module actualités sert à publier différents articles d'actualités qui seront vu sur votre site web en utilisant un des
modules front-office suivants. Sa fonction est similaire au module articles excepté que les articles d'actualités n'utilisent pas
de pages comme conteneur d'éléments mais des archives d'actualités. Chaque archive d'actualités peut avoir affaire avec
un sujet différent ou peut être écrit dans une langue différente.
Chaque article d'actualités est lié à une URL interne ou externe ou un visiteur est envoyé quand il clique sur l'article
d'actualités. Cette page cible devrait contenir un module lecteur d'actualités afin de montrer l'article d'actualités.
Module Liste d'actualités

Ce module vous permet d'afficher un certain nombre d'articles d'actualités à partir d'une archive d'actualités particulière.
Selon le modèle d'actualités choisi, son code source de sortie inclura différents éléments de l'article d'actualités (ex: le titre
et le texte d'accroche). Vu que l'interaction des différents modules d'actualités est un peu délicate, nous allons regarder de
plus près chacun d'eux sur la base du site d'exemple. Ouvrez le module Modules dans le back-office et modifiez le module
liste d'actualités (breaking news). Vous êtes maintenant en train d'éditer le second module de la section de mise en page
#left qui est affichée sur chaque page en dessous du formulaire d'identification. Il liste les deux plus récents articles
d'actualités de l'archive d'actualités de Music Academy. Comme vous pouvez le voir, le module utilise le modèle
news_short dont le code source de sortie ressemble à ceci :
<div class="layout_short">
<p class="info">2006-03-05 12:27</p>
<h2><a href="james-wilson.html">Associate Professor James Wilson
returns</a></h2>
<p class="teaser">Jazz pianist James Wilson returns to Music Academy to give
lessons in traditional and contemporary Jazz Piano.</p>
<p class="more"><a href="james-wilson-returns.html">Read more...</a></p>
</div>
Vous venez juste d'apprendre un autre principe important qui est utilisé avec beaucoup de modules front-office. Vous
pouvez utiliser différents modules de mise en page pour des items de modules récurrents (ex: articles d'actualités) pour
formater le module individuellement. Pour trouver quelle classe CSS un module ou un modèle utilise regardez simplement
le code source du site en front-office. Vous allez apprendre dans un prochain chapitre comment mettre en place vos
propres modèles de mise en page. Notre liste d'actualités est faite d'un conteneur englobant (qui est aussi un modèle
appelé mod_newslist) et deux nouveaux articles qui sont formatés par le modèle d'actualités news_short. Le code source
de sortie de tout le module ressemble à ceci :
<div class="mod_newslist" id="breaking_news">

<h1>Breaking news</h1>
<div class="layout_short">...</div>
<div class="layout_short">...</div>
</div>
Cet exemple inclut deux options de plus qui sont disponibles dans presque tous les modules et éléments de contenu.
D'une part le titre qui est généré automatiquement à partir du champ titre. Presque tous les modules et les éléments de
contenu fournissent ce champ d'entrée et supportent cette option. Dans notre exemple, le module liste d'actualités possède
le titre Breaking News. D'une autre part l'attribut ID du conteneur englobant que nous avons entré dans la dernière ligne du
formulaire de back-office. Vous pouvez affecter un identifiant unique à chaque module ou élément de contenu afin de le
formater avec une feuille de style.
15. Actualités 44
Module Lecteur d'actualités
A contrario du module liste d'actualités, le module lecteur d'actualités affiche seulement un seul article d'actualités. Ouvrez
le site d'exemple en front-office et cliquez sur Associate Professor James Wilson returns dans la liste d'actualités sur la
partie gauche du site. Une nouvelle page contenant le module lecteur d'actualités s'ouvre et affiche l'article d'actualités
entier. L'URL suivant devrait être affichée dans la barre d'adresse de votre navigateur :
http://www.votre-domaine.com/index.php/archive/articles/james-wilson-returns.html
Profitons-en pour analyser les portions de cette URL. La portion archive représente l'identifiant de page (en fait l'alias de
page). La portion articles est le mot clé pour le lecteur d'actualités et la portion james-wilson-returns est l'identifiant de
l'article d'actualités. L'URL dynamique correspondante serait :
http://www.votre-domaine.com/index.php?id=archive&articles=james-wilson-returns
Notez que le lecteur d'actualités sera affiché seulement si il y a un identifiant d'article d'actualités (ex: quand il est appelé
depuis un lien de la liste d'actualités). S'il n'y a pas d'identifiant d'article d'actualités, le module ne sera pas présent dans le
code source du site. Vous pouvez tester ceci en enlevant l'identifiant d'article d'actualités de l'URL :
http://www.votre-domaine.com/index.php/archive.html
Maintenant vous voyez seulement la page d'actualités sans l'article d'actualités, parce que le module lecteur d'actualités ne
sait pas quel article afficher. Le code source de sortie de ce module (avec un identifiant d'actualités donné) ressemble à
ceci :
<div class="mod_newsreader">
<div class="layout_full">
<h1>Associate Professor James Wilson returns</h1>
<p class="info">2006-03-05 by Kevin Jones</p>
<h2>Veteran Jazz pianist James Wilson has enjoyed international renown since
graduating from Music Academy in 1968.</h2>
<div class="ce_text">James Wilson and the stage have been lifelong partners.
The jazz pianist and youngest son of a preacher began playing in his father's
church as a preschooler, took his first solo at the age of six, and has been a
lead performer ever since.</div>
</div>
</div>
Module Archive d'actualités

Le module archive d'actualités est très similaire au module liste d'actualités à l'exception qu'il n'affiche pas les articles
d'actualités les plus récents mais tous les articles d'un mois particulier. Donc vous pouvez structurer les articles d'actualités
d'une archive et les relire individuellement - comme un blog. Ouvrez la partie front-office du site d'exemple et cliquez sur
News & Events. Le dernier paragraphe contient un lien vers l'archive d'actualités. Vous verrez l'archive du mois en cours.
15. Actualités 45
Il n'y a eu aucun article d'actualités en Décembre 2007, donc choisissez un autre mois en utilisant le menu archive
d'actualités sur la partie gauche du site. Vous devriez voir maintenant une liste de tous les articles d'actualités qui ont été
créés dans le mois choisi. Cliquez sur le titre pour lire l'article en entier.
Comme pour le module lecteur d'actualités, le module archive d'actualités est appelé par un identifiant donné d'archive. Si
cet identifiant n'existe pas, l'archive d'actualités soit saute au mois en cours (comme dans le site d'exemple) soit n'est pas
inclus du tout. Vous pouvez changer ce comportement dans le back-office sous « Sauter vers le mois en cours ».
<div class="mod_newsarchive">
<h1>February 2006</h1>
<div class="layout_simple">
2006-02-12 <a href="articles/open-days.html">Open days 2006</a>
</div>
<div class="layout_simple">
2006-02-01 <a href="articles/scholarship-program.html">Scholarship Program</a>
</div>
</div>
Module Menu d'archive d'actualités

Vous en avez déjà appris sur le dernier module d'actualités manquant qui est le module menu d'archive d'actualités. Il créé
une liste de liens pour chaque mois qui contiennent au moins un article d'actualités. Le code source de sortie ressemble à
ceci :
<div class="mod_newsmenu">
<ul>
<li class="year">2006</li>
<ul>
<li><p class="active">December 2006</p></li>
<li><a href="news/archives/200603.html">March 2006</a></li>
<li><a href="news/archives/200602.html">February 2006</a></li>
</ul>
</li>
</ul>
</div>
15. Actualités 46
16. Contenu Flash
Ce module vous permet de gérer le contenu qui sera chargé dynamiquement
dans un clip Flash.
Charger un article Flash

Pour permettre la communication entre TYPOlight et votre clip Flash, vous devez assigner un identifiant unique à chaque
article du module de contenu Flash et ajouter le code suivant à la première image du scénario de votre clip Flash:
TextField.prototype._loadArticle = function(flashID)
{
tf = this;
// Enable HTML mode and remove content

tf.html = true;
tf.htmlText = "";
// Instantiate a new LoadVars object and assign the article ID

lv = new LoadVars();
lv["flashID"] = flashID;
lv.sendAndLoad(URL + "flash.php", lv, "POST");
lv.onLoad = function(success)
{
if (success)
{
tf.htmlText = lv["content"];
}
}
}
Voici comment appeler la fonction afin de charger un article dans une boite de texte:
myTextBox._loadArticle("article_ID");
Dans cet exemple, l'article Flash « article_ID » devrait être affiché dans la boite de texte appelée « myTextBox ».
Importer une feuille de style

Vous pouvez aussi importer une feuille de style dans votre clip Flash pour l'utiliser avec une boite de texte particulière.
Ajouter simplement la fonction suivante sur la première image de votre scénario :
TextField.prototype._addCSS = function(style_sheet)
{
tf= this;
tf.styleSheet = null;
// Instantiate a new StyleSheet object

st = new TextField.StyleSheet();
st.load(URL + style_sheet);
st.onLoad = function(success)
{
if (success)
{
tf.styleSheet = st;
}
16. Contenu Flash 47

}
}
Voici comment appeler la fonction afin d'appliquer le style à la boite de texte :
myTextBox._addCSS("basic.css");
Notez que Flash ne supporte que quelques balises HTML particulières et donc certains formatages de votre éditeur de
texte pourraient ne pas être affichés.
16. Contenu Flash 48

17. Générateur de formulaire
Il y a en fait trois manières d'utiliser le générateur de formulaire incorporé que vous allez
apprendre à manipuler dans les paragraphes suivants.
Utilisé comme formulaire de contact

Dans la plupart des cas, le générateur de formulaire sera utilisé comme formulaire de contact afin d'envoyer toutes les
entrées du visiteur à une adresse mail donnée. Vous pouvez définir le receveur et le format de donnée dans l'élément
d'entête de chaque formulaire. Les fichiers uploadés seront attachés au mail. Après que le formulaire ait été soumis, le
visiteur est renvoyé vers une page que vous avez préalablement définit dans le back-office. Sur cette page vous pouvez
par exemple afficher une notification disant « Nous avons bien reçu votre message ».
Pour éviter que le formulaire ne soit la cible de SPAM, vous devriez toujours valider les entrées utilisateurs.
TYPOlight offre un ensemble d'expressions régulières que vous pouvez utiliser dans chaque champ.
En plus, vous devriez limiter le nombre de caractères de chaque champ (par exemple 72 caractères pour les
adresses mail).
Utilisé pour les envois de fichiers

Au lieu d'attacher les fichiers uploadés à un mail, vous pouvez aussi les sauvegarder dans un dossier choisi sur votre
serveur. Ce répertoire n'est pas défini dans l'entête du formulaire (élément parent) mais dans le champ d'envoi lui même
(élément enfant). Ainsi vous pouvez sauvegarder chaque fichier dans un dossier différent, ce qui peut s'avérer utile dans un
environnement multi-utilisateur.
Utilisé avec un module front-office

En lui assignant un identifiant unique vous pouvez aussi utiliser un formulaire avec un module front-office. Bien que chaque
module front-office contient déjà tous les formulaires nécessaires, il peut être utile d'en créer d'autres, par exemple si vous
voulez montrer un formulaire de recherche sur chaque page de votre site. Dans ce cas, créer un formulaire avec
l'identifiant tl_search qui consiste en un champ de texte nommé « mots clé », un bouton de soumission et faites le pointer
vers la page de recherche.
Pour en savoir plus sur cette fonctionalité, rendez vous sur le tutoriel intitulé Comment ajouter un formulaire de recherche à
la présentation de page.
Les champs de formulaire

Les sections suivantes expliquent les différents champs de formulaire.
La ligne d'entête
Ce champ est utilisé pour ajouter une ligne d'entête au formulaire. Les balises HTML sont autorisées. Le code source de
sortie ressemble à ceci :
<tr>
<td colspan="2" class="headline">HTML headline</td>
</tr>
L'explication
Ce champ ajoute une explication au formulaire. Il est identique au champ ligne d'entête mais utilise un attribut class
différent. Le code source de sortie ressemble à ceci :
<tr>
17. Générateur de formulaire 49

<td colspan="2" class="explanation">HTML explanation</td>
</tr>
Le champ de texte
Ce champ ajoute un champ de texte d'une seule ligne. Vous devriez permettre la validation des entrées de chaque champ
afin d'éviter une mauvaise utilisation du formulaire. Le code source de sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Your name:</label></td>
<td class="col_1"><input type="text" id="ctrl_2" class="text" /></td>
</tr>
Le champ mot de passe

Ce champ est à peu près identique au champ de texte à l'exception qu'il cache les caractères qui lui sont entrés et n'admet
pas de valeur pas défaut. Un second champ de confirmation est généré automatiquement. Le code source de sortie
ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Password:</label></td>
<td class="col_1"><input type="password" id="ctrl_2" class="password" /></td>
</tr>
<tr>
<td class="col_0"><label for="ctrl_2_confirm">Confirm password:</label></td>
<td class="col_1"><input id="ctrl_2_confirm" class="password" /></td>
</tr>
La zone de texte
Ce champ ajoute un champ de texte multi ligne au formulaire. N'oubliez pas de définir le nombre de colonnes et de lignes.
<tr>
<td class="col_0"><label for="ctrl_2">Your message:</label></td>
<td class="col_1"><textarea id="ctrl_2" class="textarea"></textarea></td>
</tr>
Le menu de sélection
Ce champ ajoute un menu déroulant au formulaire permettant aux visiteurs de sélectionner une ou plusieurs options. Le
code source de sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Please choose:</label></td>
<td class="col_1">
<select name="options" id="ctrl_2" class="select">
<option value="item_1">item_1</option>
<option value="item_2">item_2</option>
</select>
</td>
</tr>
Le menu bouton radio

Ce champ ajoute un menu bouton radio au formulaire permettant aux visiteurs de sélectionner une seule option parmi un
choix de plusieurs proposées. Le code source de sortie ressemble à ceci :
<tr>
<td class="col_1">

<div id="ctrl_2" class="radio_container">
<span><input type="radio" class="radio" /><label>item_1</label></span>
<span><input type="radio" class="radio" /><label>item_2</label></span>
</div>
</td>
</tr>
Le menu case à cocher

Ce champ ajoute un menu case à cocher au formulaire permettant aux visiteurs de sélectionner une ou plusieurs options.
<tr>
<td class="col_1">
<div id="ctrl_2" class="checkbox_container">
<span><input type="checkbox" class="checkbox" />
<label>item_1</label></span>
<span><input type="checkbox" class="checkbox" />
<label>item_2</label></span>
</div>
</td>
</tr>
L'envoi de fichier
Ce champ ajoute un champ d'envoi de fichier au formulaire. Vous pouvez définir une liste des fichiers dont le type est
autorisé, la taille maximale de fichier ainsi que le dossier où seront sauvegardés les fichiers envoyés. Le code source de
sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Your file:</label></td>
<td class="col_1"><input type="file" id="ctrl_2" class="upload" /></td>
</tr>
La question de sécurité (CAPTCHA)

Ce champ ajoute une question de sécurité (CAPTCHA) au formulaire. La question de sécurité est une simple question de
maths que le visiteur doit éluder afin de valider le formulaire. Vous pouvez ainsi éviter les robots de SPAM de se servir de
votre formulaire. Le code source de sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_10">Security question</label></td>
<td class="col_1">
<input type="text" class="captcha" maxlength="2" />
<span class="captcha_text">Please calculate 4 plus 8.</span>
</td>
</tr>
Le bouton de soumission
Ce champ ajoute un bouton de soumission au formulaire. Le code source de sortie ressemble à ceci :
<tr>
<td class="col_0"></td>
<td class="col_1">
<div id="submit_container">
<input type="submit" id="ctrl_2" class="submit" value="Submit form" />
</div>
</td>
</tr>

18. Les balises d'insertion (insert tags)
Les balises d'insertion sont des jokers qui seront remplacés par certaines valeurs quand
une page est affichée à l'écran. Elles offrent un large nombre d'applications comme
l'affichage de la date courante, l'adressage des membres par leurs noms ou l'inclusion de
fichiers. Les balises d'insertion peuvent être utilisées partout, par exemple dans les titres,
modules ou formulaires.
Vu que les balises d'insertion sont remplacées seulement lors de l'affichage de la page à
l'écran, elles peuvent aussi être utilisées dans les pages mises en cache.
Vous trouverez une liste complète des balises d'insertion dans le back-office TYPOlight.
Ouvrez un élément de texte et cliquez sur l'icône « Help wizard » (point d'interrogation dans un triangle rouge) au
dessus de l'éditeur de texte.
{{article::ID}}
Cette balise d'insertion sera remplacée par un lien vers un article. Remplacez ID par l'identifiant de l'article.
{{date}}
Cette balise d'insertion sera remplacée par la date courante selon le format de date global.
{{date::format}}
Cette balise d'insertion sera remplacée par la date courante selon le format fourni en second argument. Par exemple,
remplacer format par Y/m/d donnera une date du type 2007/03/07. Vous trouverez plus d'informations sur le formatage des
dates sur http://www.php.net/date.
{{env::page_alias}}
Cette balise d'insertion sera remplacée par l'alias de la page courante (env = environnement).
{{env::page_name}}
Cette balise d'insertion sera remplacée par le nom de la page courante (env = environnement).
{{env::page_title}}
Cette balise d'insertion sera remplacée par le titre de la page courante (env = environnement).
{{env::main_alias}}
Cette balise d'insertion sera remplacée par l'alias de la page parente principale (env = environnement).
{{env::main_name}}
Cette balise d'insertion sera remplacée par le nom de la page parente principale (env = environnement).
{{env::main_title}}
Cette balise d'insertion sera remplacée par le titre de la page parente principale (env = environnement).
18. Les balises d'insertion (insert tags) 52

{{env::website_title}}
Cette balise d'insertion sera remplacée par le titre de votre site web (env = environnement).
{{env::url}}
Cette balise d'insertion sera remplacée par l'URL courante (ex: http://www.votre-site.com).
{{env::path}}
Cette balise d'insertion sera remplacée par l'URL courante et le chemin vers votre répertoire TYPOlight (ex:
http://www.votre-site.com/chemin).
{{env::request}}
Cette balise d'insertion sera remplacée par la requête courante (ex: accueil.html).
{{env::referer}}
Cette balise d'insertion sera remplacée par l'URL de la dernière page visitée.
{{file::file.php}}
Cette balise d'insertion sera remplacée par la sortie du fichier file.php. Les fichiers PHP inclus doivent être stockés dans le
répertoire templates. Il est aussi possible d'ajouter des arguments :
{{file.php?arg=val&arg2=val2}}
{{insert_article::ID}}
Cette balise d'insertion sera remplacée par la sortie de l'article spécifié. Ceci est utile pour inclure le contenu d'un article
dans un autre article ou une actualité.
{{insert_content::ID}}
Cette balise d'insertion sera remplacée par la sortie de l''élément de contenu spécifié. Ceci est utile pour inclure des
éléments de contenu d'un article dans un autre article ou une actualité.
{{lang::ID}}
Utilisez cette balise d'insertion pour marquer les mots d'une autre langue dans votre texte (afin d'y améliorer l'accessibilité).
{{lang::de}}Ich denke nie an die Zukunft. Sie kommt früh genug.{{lang}}
sera remplacé par
<span lang="de" xml:lang="de">Ich denke nie an die Zukunft. Sie kommt früh
genug.</span>
{{last_update}}
Cette balise d'insertion sera remplacée par la date et l'heure de la dernière mise à jour selon le format de date global.
{{last_update::format}}
Cette balise d'insertion sera remplacée par la date de la dernière mise à jour selon le format fourni en second argument.
Par exemple, remplacer format par Y/m/d donnera une date du type 2007/03/07. Vous trouverez plus d'informations sur le
formatage des dates sur http://www.php.net/date.
{{link::page}}
Cette balise d'insertion sera remplacée par un lien vers une page interne à votre site. Remplacez page par un identifiant de
page ou un alias.

{{link::back}}
Cette balise d'insertion sera remplacée par un lien vers la dernière page visitée. Vous pouvez aussi l'utiliser avec
link_open, link_url et link_title.
{{link::login}}
Cette balise d'insertion sera remplacée par un lien vers la page d'identification de l'utilisateur courant et il est seulement
montré s'il y a un utilisateur connecté. Vous pouvez aussi l'utiliser avec link_open, link_url et link_title.
{{link_open::page}}
Cette balise d'insertion sera remplacée par la balise d'ouverture d'un lien vers une page interne à votre site. Donc vous
pouvez utiliser un texte personnalisé ou une image comme lien :
{{link_open::page}}mon texte</a>
{{link_url::page}}
Cette balise d'insertion sera remplacée par l'URL d'une page interne. Donc vous pouvez faire un lien sur une page interne :
<a href="{{link_url::page}}">mon texte</a>
{{link_title::page}}
Cette balise d'insertion sera remplacée par le titre d'une page interne et peut être utilisé dans les attributs « title »
et « alt » :
<a href="{{link_url::page}}" title="{{link_title::page}}">mon texte</a>
{{user::property}}
Cette balise d'insertion sera remplacée par la propriété fournie en second paramètre d'un membre particulier. Par exemple,
vous pouvez viser un membre par son nom en utilisant :
{{user:firstname}} {{user:lastname}}
Voici une liste des propriétés disponibles :
firstname Prénom city Ville
lastname Nom state Etat
compagny Société country Pays
email Adresse e-mail phone Téléphone fixe
street Rue mobile Téléphone mobile
postal Code postal fax Fax

19. Personnaliser TYPOlight
Ce chapitre traite de la personnalisation de TYPOlight sans avoir à refaire de
changements à chaque fois que le système est mis à jour.
Personnalisation de TinyMCE
Vous pouvez trouver le fichier de configuration de l'éditeur de texte dans le dossier system/config. Le module Contenu
Flash utilise le fichier tinyFlash.php, le module Actualités le fichier tinyNews.php et tous les autres modules le fichier de
configuration tinyMCE.php. Rendez vous sur la page http://tinymce.moxiecode.com pour plus d'informations sur la
personnalisation de TinyMCE.
Pour utiliser des plugins avec cet éditeur, vous pouvez les envoyer, ainsi que leurs fichiers de langue, dans le
dossier plugins/tinyMCE/plugins.
Personnalisation des champs d'entrée

TYPOlight génère automatiquement tous les champs de formulaire nécessaires depuis un tableau conteneur de données
(DCA: Data Container Array). Chaque table du back-office est installée grâce à de tels tableaux. Vous pouvez trouver de
tels fichiers de configuration par exemple dans le dossier system/modules/backend/dca. Si vous voulez personnaliser un
champ d'entrée particulier, vous pouvez le faire en réécrivant la nouvelle valeur du conteneur de données dans le fichier
system/config/dcaconfig.php.
Personnalisation des modèles

Tous les codes sources de sortie sont basés sur des modèles qui peuvent être modifiés à votre convenance. Les fichiers
de modèle sont par exemple situés dans le dossier system/modules/frontend/templates. Plutôt que de modifier les
modèles originaux, faites en une copie dans le dossier templates qui se trouve à la racine de votre installation TYPOlight.
TYPOlight utilisera alors automatiquement ce nouveau fichier plutôt que l'original et la mise à jour de votre installation ne
risquera pas de vous voir perdre vos changements.
Par exemple, pour changer le modèle par défaut fe_page.tpl, copiez ce fichier dans le dossier templates à la
racine de votre installation TYPOlight. A la prochaine requête de page, TYPOlight utilisera automatiquement le
modèle personnalisé se trouvant dans le dossier templates à la place du modèle original. Pour en apprendre plus
sur cette fonctionnalité, voir le tutoriel intitulé Comment utiliser un modèle de page personnalisé.
19. Personnaliser TYPOlight 55

20. Crédits
Auteur : Leo Feyer et contributeurs du site www.typolight.org
Traduction : Guéric Folliot
Relecture et mise en page : Cyril Ponce
Contacts : gueric@typolight.fr, cyril@typolight.fr
Historique des modifications :
Version Date Commentaire
1.0 23/12/07 Première version mise en page, ouf !
Ajout des crédits, de la licence d'utilisation de ce guide, et de 2 traductions manquantes :

1.1 10/01/2008
les balises d'insertions « insert_article » et « insert_content »
20. Crédits 56
21. Licence
Creative Commons
Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported
Vous êtes libres :
de reproduire, distribuer et communiquer cette création au public
de modifier cette création
Selon les conditions suivantes :

Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l'oeuvre
ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait
qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).
Pas d'Utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette création à des fins
commerciales.
Partage des Conditions Initiales à l'Identique. Si vous modifiez, transformez ou adaptez cette
création, vous n'avez le droit de distribuer la création qui en résulte que sous un contrat identique à
celui-ci.
● A chaque réutilisation ou distribution de cette création, vous devez faire apparaître clairement au public les
conditions contractuelles de sa mise à disposition. La meilleure manière de les indiquer est un lien vers cette
page web : http://creativecommons.org/licenses/by-nc-sa/3.0/deed.fr
● Chacune de ces conditions peut être levée si vous obtenez l'autorisation du titulaire des droits sur cette oeuvre.
● Rien dans ce contrat ne diminue ou ne restreint le droit moral de l'auteur ou des auteurs.
Ce qui précède n'affecte en rien vos droits en tant qu'utilisateur

(exceptions au droit d'auteur : copies réservéesà l'usage privé du copiste, courtes citations, parodie...)
Ceci est le Résumé Explicatif du Code Juridique
( la version intégrale du contrat : http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode ).
21. Licence 57

TYPOlight Guide v1.1 (French)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TYPOlight Guide v1.1 (French)

Uploaded by

Copyright:

Available Formats

Guide d'utilisation

version 1.1 du 10 janvier 2008

Distribué par le projet www.typolight.fr

6. Navigation dans le back-office...........................................................................17

7. Organisation des comptes utilisateur...................................................................20

8. Mise en place des pages...................................................................................22

9. Les modules front-office..................................................................................23

10. Feuilles de style...........................................................................................30

11. Présentations de page ...................................................................................32

12. Structure du site..........................................................................................34

14. Eléments de contenu.....................................................................................39

16. Contenu Flash..............................................................................................47

17. Générateur de formulaire...............................................................................49

18. Les balises d'insertion (insert tags)....................................................................52

19. Personnaliser TYPOlight.................................................................................55

Note sur la mise à jour automatique

Téléchargement des sources TYPOlight

Décompression de l'archive TYPOlight

Création d'une nouvelle base de données

Démarrer l'outil d'installation

Changer le mot de passe de l'outil d'installation

Création d'une clé de cryptage

Connexion à la base de données

Importation du site d'exemple

Si vous importez le site d'exemple, toutes données existantes seront effacées !

Le chemin relatif au dossier TYPOlight

le chemin relatif sera :

Configurer l'envoi de fichiers sur le serveur

Utilisation du SMTP pour l'envoi des mails

Utilisation du FTP pour modifier vos fichiers

Durée de stockage et de session

Sections de mise en page personnalisées

Largeur maximale des images

Types d'images valides

<img src="image.php?src=tl_files/image.jpg&amp;width=200&amp;height=120" />

Réécrire les URL

à la place des URL dynamiques

Mise à jour automatique (Live update)

Filtrer les enregistrements

Trier les enregistrements

6. Navigation dans le back-office 17

Afficher les enregistrements

Rechercher dans les enregistrements

Editer tous les enregistrements

Editer un enregistrement Changer d'utilisateur (administrateur seulement)

Dupliquer un enregistrement Déplacer la colonne sur la gauche

Dupliquer un enregistrement et tous ses enfants Déplacer la colonne sur la droite

Déplacer un enregistrement Déplacer la ligne / enregistrement vers le haut

Coller un enregistrement après celui-ci Déplacer la ligne / enregistrement vers le bas

Afficher les détails d'un enregistrement Masquer un élément

Supprimer un enregistrement Déployer un élément

Restaurer un enregistrement supprimé

6. Navigation dans le back-office 18

• « Sauvegarder » recharge la page courante après la sauvegarde

6. Navigation dans le back-office 19

Points de montage de page et de fichier

En résultat la structure de site pour James Wilson ressemble à ça :

7. Organisation des comptes utilisateur 20

Gérer les flux de travail

7. Organisation des comptes utilisateur 21

8. Mise en place des pages 22

Le module « Menu de navigation »

Le module « Navigation éléments du menu principal »

9. Les modules front-office 23

<img src="image.php?src=tl_files/image.jpg&width=200&height=120" />