TYPOlight Guide v1.1 (French)

8/14/2019 TYPOlight Guide v1.1 (French)

1/57

Guide d'utilisation

version 1.1 du 10 janvier 2008

Distribu par le projet www.typolight.fr


2/57

Table des matires1. Introduction...................................................................................................6

2. Installation.....................................................................................................7Recommandations systmes...........................................................................................................................................7Note sur la mise jour automatique.................................................................................................................................7Tlchargement des sources TYPOlight..........................................................................................................................7Dcompression de l'archive TYPOlight............................................................................................................................7Cration d'une nouvelle base de donnes.......................................................................................................................7Dmarrer l'outil d'installation............................................................................................................................................7Changer le mot de passe de l'outil d'installation...............................................................................................................8Cration d'une cl de cryptage.........................................................................................................................................8Connexion la base de donnes.....................................................................................................................................8Mise jour des tables......................................................................................................................................................9Importation du site d'exemple..........................................................................................................................................9

3. Agencement du back-office...............................................................................10L'URL du back-office......................................................................................................................................................10La mise en page du back-office......................................................................................................................................11

4. Configuration du back-office.............................................................................12Le chemin relatif au dossier TYPOlight..........................................................................................................................12Configurer l'envoi de fichiers sur le serveur...................................................................................................................12Utilisation du SMTP pour l'envoi des mails....................................................................................................................12Utilisation du FTP pour modifier vos fichiers..................................................................................................................12

Dure de stockage et de session...................................................................................................................................13Sections de mise en page personnalises.....................................................................................................................13Largeur maximale des images.......................................................................................................................................13Types d'images valides..................................................................................................................................................13Types de fichiers d'envoi valides....................................................................................................................................14Rcrire les URL............................................................................................................................................................14

5. Maintenance systme......................................................................................15Effacer le cache.............................................................................................................................................................15Mise jour automatique (Live update)...........................................................................................................................15Modifier vos donnes personnelles................................................................................................................................16

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

Filtrer les enregistrements..............................................................................................................................................17Trier les enregistrements................................................................................................................................................17Afficher les enregistrements...........................................................................................................................................18Rechercher dans les enregistrements............................................................................................................................18Editer tous les enregistrements......................................................................................................................................18Icones de navigation......................................................................................................................................................18Sauvegarder un enregistrement.....................................................................................................................................19

7. Organisation des comptes utilisateur...................................................................20Les membres.................................................................................................................................................................20Les utilisateurs...............................................................................................................................................................20Hritage de permission..................................................................................................................................................20

2


3/57

Points de montage de page et de fichier........................................................................................................................20Permissions...................................................................................................................................................................21Groupes de membres....................................................................................................................................................21Champs autoriss..........................................................................................................................................................21Grer les flux de travail..................................................................................................................................................21

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

9. Les modules front-office..................................................................................23Le module Menu de navigation ................................................................................................................................23Le module Navigation lments du menu principal ..................................................................................................23Le module Navigation lments de sous-menu .......................................................................................................24Le module Navigation Fil d'Ariane ............................................................................................................................24Le module Navigation rapide ....................................................................................................................................24Le module Lien rapide ..............................................................................................................................................25Le module Carte du site ...........................................................................................................................................25Le module Formulaire de connexion ........................................................................................................................25

Le module Dconnexion automatique ......................................................................................................................26Le module Donnes personnelles ............................................................................................................................26Le module Formulaire ..............................................................................................................................................27Le module Moteur de recherche ..............................................................................................................................27Le module Liste d'articles .........................................................................................................................................28Le module Code HTML personnalis .......................................................................................................................28Le module Animation Flash ......................................................................................................................................29Le module Image alatoire .......................................................................................................................................29Le module Lecteur de flux RSS ................................................................................................................................29

10. Feuilles de style...........................................................................................30Liste d'enregistrements..................................................................................................................................................30Editer les dfinitions de style..........................................................................................................................................30

Slecteurs CSS..............................................................................................................................................................31

11. Prsentations de page ...................................................................................32Modle de mise en page................................................................................................................................................32Les feuilles de style incluses..........................................................................................................................................32Les balises supplmentaires.............................................................................................................................32Mootools........................................................................................................................................................................32Type de prsentation de page........................................................................................................................................32Les modules inclus.........................................................................................................................................................33Cas spcial : le module articles......................................................................................................................................33Spcifications de largeur................................................................................................................................................33

12. Structure du site..........................................................................................34Types de page................................................................................................................................................................34Page simple...................................................................................................................................................................35Rediriger vers une URL externe.....................................................................................................................................35

Aller vers une autre page du site....................................................................................................................................35Racine d'un nouveau site...............................................................................................................................................35Erreur 403 (accs interdit)..............................................................................................................................................35Erreur 404 (page non trouve).......................................................................................................................................36

Autres configurations.....................................................................................................................................................36 Alias de la page..............................................................................................................................................................36Protger une page.........................................................................................................................................................36

Affecter une prsentation...............................................................................................................................................36Affecter une dure de vie au cache................................................................................................................................36

3


4/57

Affecter les permissions.................................................................................................................................................36Publier une page............................................................................................................................................................37

Aperu des icnes..........................................................................................................................................................37

13. Articles......................................................................................................38Afficher l'article dans......................................................................................................................................................38Mots cls........................................................................................................................................................................38Publier l'article................................................................................................................................................................38

14. Elments de contenu.....................................................................................39Titre................................................................................................................................................................................39Texte..............................................................................................................................................................................39HTML.............................................................................................................................................................................39Code..............................................................................................................................................................................40Image.............................................................................................................................................................................40Lien hypertexte...............................................................................................................................................................40Liste...............................................................................................................................................................................40

Tableau..........................................................................................................................................................................41Tlchargement.............................................................................................................................................................41Galerie d'images............................................................................................................................................................41Lien de haut de page.....................................................................................................................................................42

Accordon......................................................................................................................................................................42Elment de contenu.......................................................................................................................................................43Formulaire......................................................................................................................................................................43Module...........................................................................................................................................................................43

15. Actualits...................................................................................................44Module Liste d'actualits................................................................................................................................................44Module Lecteur d'actualits............................................................................................................................................45Module Archive d'actualits............................................................................................................................................45

Module Menu d'archive d'actualits...............................................................................................................................46

16. Contenu Flash..............................................................................................47Charger un article Flash.................................................................................................................................................47Importer une feuille de style...........................................................................................................................................47

17. Gnrateur de formulaire...............................................................................49Utilis comme formulaire de contact..............................................................................................................................49Utilis pour les envois de fichiers...................................................................................................................................49Utilis avec un module front-office.................................................................................................................................49Les champs de formulaire..............................................................................................................................................49La ligne d'entte.............................................................................................................................................................49L'explication...................................................................................................................................................................49Le champ de texte..........................................................................................................................................................50Le champ mot de passe.................................................................................................................................................50La zone de texte.............................................................................................................................................................50Le menu de slection.....................................................................................................................................................50Le menu bouton radio....................................................................................................................................................50Le menu case cocher..................................................................................................................................................51L'envoi de fichier............................................................................................................................................................51La question de scurit (CAPTCHA)..............................................................................................................................51Le bouton de soumission...............................................................................................................................................51

18. Les balises d'insertion (insert tags)....................................................................52{{article::ID}}...................................................................................................................................................................52

4


5/57

{{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.................................................................................55Personnalisation de TinyMCE........................................................................................................................................55Personnalisation des champs d'entre...........................................................................................................................55Personnalisation des modles.......................................................................................................................................55

20. Crdits.......................................................................................................56

21. Licence......................................................................................................57Creative Commons........................................................................................................................................................57

5


6/57

1. Introduction

Ce manuel est destin aux administrateurs et utilisateurs qui veulent crer et maintenir

des sites web avec le systme de gestion de contenu TYPOlight webCMS . Ce manuel

passe en revue tous les sujets importants en commenant par l'installation, l'ajout de

contenu jusqu' l'administration de compte utilisateurs. Pour les dveloppeurs qui

voudraient se pencher sur le cur de TYPOlight, il y a une section approprie sur le

site du projethttp://www.typolight.org.

Ce manuel se rfre au site d'exemple Music Academy qui est inclut dans toutes distributions TYPOlight et qui peuttre import avec l'outil d'installation. Si vous n'avez pas encore install TYPOlight webCMS ou que vous aurez l'intentionde le faire aprs la lecture de ce manuel, vous pouvez jeter un il la dmo TYPOlight webCMS en ligne. Voici une copied'cran du site :

Sur la base du site d'exemple vous allez apprendre comment organiser la structure des pages d'un site web, commentcrer et diter des articles et du contenu, comment crer des modules et des prsentations de page et comment grer lesutilisateurs ainsi que leurs permissions. Par ailleurs, vous dcouvrirez comment crer des pages protges par mot depasse, des formulaires interactifs et vous apprendrez comment travailler avec le module d'actualits.

1. Introduction 6
http://www.typolight.org/http://www.typolight.org/http://www.typolight.org/http://www.typolight.org/


7/57

2. Installation

TYPOlight webCMS est une application web base sur le couple PHP5/MySQL. Donc il

vous faut avoir accs un serveur web qui supporte PHP5 [PHP5.2 compter de 2008]

et MySQL en version 4.1 ou ultrieure. Si vous voulez installer TYPOlight en local sur votre

ordinateur, vous pouvez utiliser la solution opensource XAMPP

(voir http://www.apachefriends.org).

Recommandations systmes

PHP5 > 5.1.0 PHP mbstring activ PHP GDlib activ MySQL > 4.1

Vous pouvez trouver une liste dtaille des recommandations systmes sur le site officiel(http://www.typolight.org/system-requirements.html).

Note sur la mise jour automatiqueTYPOlight requiert des droits d'criture pour modifier les fichiers et les dossiers ! Si vous faites tourner PHP en tant quemodule vous devriez changer le mode de fichier (CHMOD) avant de commencer la mise jour. Vous devriez aussi : faire une sauvegarde de votre base de donnes et de tous les fichiers lancer alors la mise jour

restaurer votre sauvegarde s'il y a eut des erreurs

Tlchargement des sources TYPOlightSur le site de TYPOlight, vous trouverez un lien de tlchargement vers le portail opensourcesourceforge.net partir duquel vous pourrez tlcharger les dernires sources TYPOlight soitsous le format ZIP pour Windows soit sous la forme d'une archive TAR pour Unix. Sur unserveur Unix vous pouvez aussi utiliser la commande suivante :

wget http://prdownloads.sourceforge.net/typolight/typolight-2.5.0.tar.gz?download

Dcompression de l'archive TYPOlightDcompresser l'archive TYPOlight dans un rpertoire sur votre serveur ou utiliser un client FTP pour transfrer les fichiers

vers votre serveur.

Cration d'une nouvelle base de donnesMaintenant, vous pouvez crer une nouvelle base de donnes pour votre installation de TYPOlight. L'outil d'installation, enlui mme n'est pas capable de crer de nouvelles bases de donnes puisque cette fonction est dsactive sur la plupartdes hbergements mutualiss. TYPOlight utilise le prfixe de table tl_, donc il est possible de faire tourner TYPOlight enparallle avec d'autres applications dans la mme table, ceci est nanmoins dconseill.

Dmarrer l'outil d'installationA partir de ce point, l'outil d'installation de TYPOlight va vous guider tout au long du processus d'installation. Ouvrez l'URLsuivante dans votre navigateur :

2. Installation 7
http://www.apachefriends.org/http://www.typolight.org/system-requirements.htmlhttp://www.typolight.org/system-requirements.htmlhttp://prdownloads.sourceforge.net/typolight/typolight-2.5.0.tar.gz?downloadhttp://www.apachefriends.org/http://www.typolight.org/system-requirements.htmlhttp://prdownloads.sourceforge.net/typolight/typolight-2.5.0.tar.gz?download


8/57

http://www.votre-domaine.com/typolight/install.php

Si vous avez install TYPOlight dans un sous-dossier ou si vous l'avez dcompress 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 dfaut typolight. Pour desquestions de scurit, 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'installationD'abord, il vous sera demand de changer le mot de passe de l'outil d'installation. Entrez un nouveau mot de passe qui doitcomporter au moins 8 caractres (lettres, nombres et caractres spciaux sont autoriss). Aprs cliquez sur le bouton Save password. Linstalleur va vrifier si toutes les extensions PHP requises sont installes et vous signaler, le cas

chant, les extensions manquantes.

Cration d'une cl de cryptageTYPOlight a besoin d'une cl de cryptage afin de chiffrer les donnes. Une fois que les donnes sont cryptes, elles nepeuvent tre dchiffres qu'avec cette cl ! Laissez ce champ vide si vous voulez que TYPOlight gnre automatiquementune cl alatoire. Si votre base de donnes contient des donnes dj cryptes, vous pouvez renseigner cette cl decryptage ici.

Connexion la base de donnesA la suite, crez la connexion la base de donnes. Choisissez un pilote de base de donnes et entrez vos paramtres deconnexion. Le nom d'hte est habituellement localhost. Certains paramtres MySQL par dfaut sont dj dfinis.

2. Installation 8
http://www.votre-domaine.com/typolight/install.phphttp://www.votre-domaine.com/TYPOlight_webCMS_2.5/typolight/install.phphttp://www.votre-domaine.com/typolight/install.phphttp://www.votre-domaine.com/TYPOlight_webCMS_2.5/typolight/install.php


9/57

Mise jour des tables

Une fois que la connexion la base est cre, TYPOlight vrifiera si toutes les tables et les colonnes requises existent. Sides changements sont ncessaires, TYPOlight vous dvoilera une liste de requtes que vous pourrez confirmer ou non.Vous pouvez, de cette manire, contrler quelles modifications seront apportes quand vous cliquerez le bouton updatedatabase .

Importation du site d'exempleEnsuite, vous pouvez choisir d'importer le site d'exemple Music Academy. Notez bien que toutes donnes existantesseront alors effaces ! 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 donnes existantes seront effaces !

2. Installation 9


10/57

3. Agencement du back-office

La zone d'administration : back-office. Aprs avoir complt 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'accder l'administration devotre 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-officeVous 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 protg contre les attaques en force. Entrer un mauvais mot de passe plus de trois fois bloque le comptede l'utilisateur courant pendant cinq minutes. Ceci empche les hackers d'essayer un large nombre de mots de passe, etde trouver le bon.

3. Agencement du back-office 10


11/57

La mise en page du back-officeLe back-office est divis en trois zones. Sur la gauche vous trouverez le menu de navigation qui donne accs aux modulesdu systme. Chaque module du back-office remplit une tche spcifique que nous examinerons plus en dtail dans un des

paragraphes suivants. Les administrateurs peuvent toujours accder tous les modules du back-office alors que les autresutilisateurs pourront tre limits certains modules particuliers. Dans ce cas, seuls les modules autoriss sont montrsdans le menu de navigation.

Sur la droite vous trouverez la zone principale qui contient, par exemple, une liste d'enregistrements ou un formulaire pourditer un enregistrement spcifique (dpendamment du module slectionn). La page d'accueil du back-office montre uneliste de toutes les touches de raccourcis permettant une navigation plus rapide. Pour utiliser un raccourci, pressez latouche [ALT] ([CTRL] sous Mac) et la touche correspondante.

La barre de liens en haut de page vous permet d'ouvrir dans une autre fentre/onglet une prvisualisation de votre site (lapartie front-office) ou de vous dconnecter du back-office afin d'empcher une utilisation non autorise de votre compte.

3. Agencement du back-office 11


12/57

4. Configuration du back-office

Une fois que vous avez install TYPOlight, vous devriez vrifier les configurations systme.

Pour le faire, ouvrez le module configuration . Les changements effectus ici seront

sauvs 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 accder au back-office.

Le chemin relatif au dossier TYPOlight

Ce paramtre est habituellement dfini automatiquement. Si le front-office et le back-office sont configurs correctement,vous ne devriez pas vous soucier de cette valeur. Si vous avez install TYPOlight dans le rpertoire racine de votreserveur, ce paramtre doit rester vide. Cependant, si vous avez des messages d'erreur, ou si les URL du front-office sontrcrites via le fichier .htaccess, vous devriez vrifier ce paramtre.Le chemin relatif est construit partir du rpertoire racine de TYPOlight comme vu par votre navigateur. Par exemple, sivous accdez 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 serveurTYPOlight incorpore un explorateur de fichiers qui permet aussi bien l'envoi vers votre serveur, le dplacement, lenommage et la suppression de vos fichiers. Par dfaut, l'explorateur de fichier utilise le dossier tl_files commerpertoire racine. Vous pouvez spcifier un autre dossier si vous le souhaitez. En temps qu'administrateur, vous pouvezaussi spcifier le poids maximal des fichiers (en octets) ainsi que les dimensions maximales (hauteur et largeur en pixels)des images uploads.

Utilisation du SMTP pour l'envoi des mailsPar dfaut TYPOlight utilise la fonction mail() de PHP pour l'envoi des e-mails. Ici vous pouvez choisir d'utiliser la placeun serveur SMTP. Aprs avoir slectionn la case cocher correspondante, TYPOlight devrait automatiquement rvlerd'autres champs de saisie o vous pourrez entrer les dtails 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 apparatre ces nouveauxchamps 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 fichiersSi 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 soitdfinir le mode (CHMOD) sur le rpertoire racine de TYPOlight 777 (non recommand), soit saisir vos paramtresd'identification FTP afin de permettre TYPOlight d'accder vos fichiers via FTP.

4. Configuration du back-office 12
http://www.votre-domaine.com/TYPOlight_webCMS_2.5/http://www.votre-domaine.com/TYPOlight_webCMS_2.5/


13/57

Sur une nouvelle installation, vous devriez entrer les paramtres d'identification FTP manuellement dans lefichier de configuration local.

Dure de stockage et de sessionLes dures de stockage et de session sont calcules en secondes.Vous pouvez dfinir combien de temps les enregistrements supprims ou les versions diffrentes d'un enregistrementseront conserves, aprs quelle priode de temps la session d'un utilisateur sera clause et combien de temps les comptesutilisateur restent bloqus si leur authentification a chou trois fois de suite (en secondes).

Sections de mise en page personnalisesPar dfaut, TYPOlight divise une page jusqu' cinq sections : une section d'entte et de pied de page et jusqu' troiscolonnes dans la zone principale. Vous apprendrez comment crer et modifier une prsentation de page dans un deschapitres suivants.

En plus de ces sections par dfaut, vous pouvez dfinir des sections de mise en page personnalises pour crer desprsentations de page individuelles. Ces sections de mise en page personnalises sont normalement positionnes aprsles sections par dfaut mais peuvent tre positionnes librement en changeant le fichier modle.

Largeur maximale des imagesPour viter que des images surdimensionnes aient un impact ngatif sur la mise en page de votre site, vous pouvezdfinir une largeur maximale en pixel de vos images. Si un utilisateur back-office essaye d'assigner une plus grandelargeur une image, elle sera automatiquement ajuste la largeur maximale autorise moins la marge interne (padding).Laissez ce champ vide pour dsactiver les ajustements automatiques.

Types d'images valides

TYPOlight est livr avec un gestionnaire d'images incorpor qui redimensionne les images automatiquement et les rogne sincessaire. 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 gnre automatiquement des vignettes. Vouspouvez utiliser ce gestionnaire d'images dans vos propres scripts comme ceci :

Si vous voulez utiliser votre propre script pour grer les images ou si vous voulez exclure certains types de fichiers de lamanipulation par le gestionnaire d'images, vous pouvez changer ici la liste des types de fichier image selon vos besoins.



14/57

Types de fichiers d'envoi validesTYPOlight est livr avec un gestionnaire d'envoi de fichier incorpor permettant un contrle dtaill sur les fichiers envoysgrce un systme intelligent de jetons (tokens). Ainsi, vous pouvez dfinir exactement qui est habilit ou non envoyer

des fichiers. Pour des raisons de scurit, les envois de fichiers sont limits au rpertoire tl_files et certains types defichiers dont les extensions peuvent tre renseignes ici.

Rcrire les URLUne mesure efficace et largement accepte dans la course l'optimisation pour les moteurs de recherche est la simulationde page statique. De cette manire, une page dynamique est appele par le navigateur comme si elle tait statique.TYPOlight gnre des URL statiques par dfaut, 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 lefragment 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 HTMLstatique ce qui lui donnera un page rank plus lev qu'une page dynamique.

Il y a un fichier nomm ._htaccess dans le rpertoire racine de votre installation TYPOlight. Ce fichiercontient toutes les instructions ncessaires la mise en place de la rcriture des URL. Renommez lesimplement .htaccess et cochez la case Rcrire 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 quelle ressemble ceci :

RewriteBase /dossier

http://www.votre-domaine.com/index.php/accueil.htmlhttp://www.votre-domaine.com/index.php?id=accueilhttp://www.votre-domaine.com/accueil.htmlhttp://www.votre-domaine.com/dossier/http://www.votre-domaine.com/index.php/accueil.htmlhttp://www.votre-domaine.com/index.php?id=accueilhttp://www.votre-domaine.com/accueil.htmlhttp://www.votre-domaine.com/dossier/


15/57

5. Maintenance systme

Chaque systme doit tre maintenu de temps en temps afin de s'assurer de ses

fonctionnalits et de l'intgrit de ses donnes. Il y a trois faons de le faire dans

TYPOlight. Comme vous avez pu le voir dans le chapitre Installation vous pouvez vrifier

et optionnellement mettre jour les champs et les tables de la base de donnes avec

l'outil d'installation. Les autres outils se trouvent dans le back-office sous la rubrique

Maintenance du systme .

Effacer le cacheTYPOlight possde un systme de cache efficace qui stocke diverses donnes (comme les pages, les requtes derecherche ou les flux RSS) ce qui permet un chargement des pages plus rapide. Aprs que des changements aient tfaits dans le back-office, le front-office peut, parfois, encore afficher la version prcdente dans le cache. Dans ce cas, lecache devrait tre vid en utilisant ce module.

Mise jour automatique (Live update)Une des options les plus prominentes qui permet TYPOlight de se dmarquer des autres systmes de gestion decontenu, est le moteur de mise jour automatique. Une fois identifi dans le back-office, TYPOlight vrifie la version encours et vous fait remarquer si une nouvelle version est disponible. D'un simple clic sur le bouton Vrifier les mises

jour, TYPOlight vous affiche la liste des fichiers qui ont t mise jour dans la nouvelle version, vous permettant dedfinir ceux qui le seront. Vous pouvez ainsi viter que vos fichiers personnaliss soient rcrits.

Aprs un autre clic sur le bouton mettre jour les fichiers , tous les fichiers locaux slectionns seront remplacs parleur dernire version. Notez que TYPOlight requiert des droits d'criture afin de mettre jour les fichiers! Si vous faitestourner PHP5 comme module vous devriez changer le mode de fichier (CHMOD) de vos fichiers et dossiers. Le processusde mise jour est journalis dans le fichiersystem/logs/update.log.

5. Maintenance systme 15


16/57

Modifier vos donnes personnellesChaque utilisateur back-office peut changer ses donnes personnelles comme son nom, e-mail, la langue du back-office ouson mot de passe en utilisant le module Donnes personnelles. Vous pouvez accder ce module soit dans le menu

gauche sous la rubrique Donnes personnelles soit dans la barre de liens en haut de page.

TYPOlight ne conserve pas seulement les donnes personnelles de l'utilisateur, il enregistre aussi sa session. Une sessioncontient des informations comme les nuds ouverts, les critres de tri utiliss ou les pages visites. La prochaine fois quel'utilisateur se logguera, le back-office lui sera prsent comme il l'avait laiss la fois prcdente.

Parfois une session n'est pas conserve proprement ou contient une erreur qui aura des consquences sur la navigationdans le back-office. Dans un tel cas, l'utilisateur peut effacer ses donnes de session, ce qui restaurera le back-office dansson tat initial.

5. Maintenance systme 16


17/57

6. Navigation dans le back-office

Ce chapitre traite de la navigation dans le back-office. Jusqu'ici vous avez pu grer toutes

les tches partir du menu de navigation sur la gauche en lanant un module particulier.

Cependant, afin de grer l'ensemble des enregistrements que forment un site web, des

lments de navigation additionnels sont ncessaires comme montr dans l'exemple

suivant.

Ouvrez le module Utilisateurs. Tous les utilisateurs sont lists dans la zone principale. Vous avez remarqu quel'administrateurKevin Jones est marqu d'une couleur diffrente que Helen Lewis et James Wilson. Ceci vous permet dediffrencier les administrateurs des utilisateurs sans avoir utiliser les fonctions de filtre.

Filtrer les enregistrementsLe back-office TYPOlight fournit diffrents outils pour trier, filtrer et rechercher des enregistrements. De cette faon, vousvous y retrouverez facilement face une grosse somme de donnes. Le module Utilisateur offre deux filtres. Le premierpermet de slectionner tous les administrateurs ou tous les utilisateurs sans droits administratifs. Le second vous permetde slectionner tous les comptes utilisateur actifs ou inactifs. Vous pouvez, bien sr, combiner plusieurs filtres.

Trier les enregistrementsLa fonction de tri vous permet de trier les enregistrements selon diffrents critres, par exemple par ordre alphabtique sur

6. Navigation dans le back-office 17


18/57

le nom ou le prnom du membre. La fonction de tri n'est pas implmente pour le module Utilisateurs mais vous pouvez latester dans le module Membres.

Afficher les enregistrementsTravailler avec un grand nombre d'enregistrements, comme dans le module Journal systme, peut considrablementralentir le chargement des pages. Habituellement, vous voudrez seulement modifier le premier enregistrement et ne pasattendre le chargement d'une liste de 300 enregistrements. Pour viter cela, TYPOlight a une fonction d'affichage qui limitele nombre d'enregistrements par page 30 (cette valeur peut tre change dans le module Configuration du back-office).

Slectionner la premire option en haut dans la liste droulante pour remettre un filtre sa valeur initiale. Dansnotre 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 diffrence.

Rechercher dans les enregistrementsLa fonction de recherche est la solution la plus flexible et l'outil le plus puissant pour maintenir les enregistrements. Vouspouvez chercher certains champs pour un enregistrement donn et donc limiter le nombre de rsultats aux

enregistrements qui correspondent au motif de recherche voulu. La fonction de recherche supporte les expressionsrgulires, comme l'astrisque (*) qui signifie tout caractre.

Par exemple, entrez wi.* dans un champ de recherche afin de trouver tous les noms contenants la squence wi, Vous devriez trouver James Wilson et Helen Lewis. Pour remettre zro une recherche et afficher denouveau tous les enregistrements, laissez simplement le champ de recherche vide et cliquez sur Chercher.

Editer tous les enregistrementsAvec le bouton Editer tous les enregistrements, vous pouvez diter plusieurs enregistrements la fois. Aprs avoir choisiun groupe d'enregistrements, vous serez redirig vers une page affichant une liste de champs d'entre possible. Vouspourrez alors choisir quels champ vous voulez diter. Les champs que vous n'avez pas slectionns ou que vous n'tespas autoris diter seront cachs automatiquement.

Icones de navigationPour modifier un enregistrement particulier depuis une liste, vous pouvez utiliser les icnes de couleur affichs droite surchaque ligne. Une bulle d'aide apparat sur chaque icne si vous y laissez votre pointeur de souris. Les icnes denavigation changent pour chaque module en cours et selon les permissions utilisateur.

Editer un enregistrement Changer d'utilisateur (administrateur seulement)

Dupliquer un enregistrement Dplacer la colonne sur la gauche

Dupliquer un enregistrement et tous ses enfants Dplacer la colonne sur la droite

Dplacer un enregistrement Dplacer la ligne / enregistrement vers le haut

Coller un enregistrement aprs celui-ci Dplacer la ligne / enregistrement vers le bas

Coller un enregistrement en tant qu'enfant de celui-ci Dsactiver les retours la ligne automatiques

Afficher les dtails d'un enregistrement Masquer un lment

Supprimer un enregistrement Dployer un lment

Restaurer un enregistrement supprim



19/57

Sauvegarder un enregistrementComme vous l'avez peut tre dj remarqu quand vous tiez dans les configurations du back-office, il vous est proposdiffrentes options au moment de la sauvegarde d'un enregistrement :

Sauvegarder recharge la page courante aprs la sauvegarde Sauvegarder et fermer charge la page prcdente aprs la sauvegarde Sauvegarder et diter charge le nouvel enregistrement aprs la sauvegarde

En cas d'erreur, le prsent formulaire sera recharg par rapport l'option choisie. Un message d'erreur vous sera alorsaffich au dessus de chaque champ posant problme. Pour viter la perte des donnes, tout autre champ correct serasauvegard.



20/57

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 accs 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 membresLes membres peuvent seulement se logguer dans le front-office. Vous, en tant qu'administrateur, pouvez aussi dcider decrer 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 donnes personnelles ou si vous voulez crer des pagesprotges par mot de passe, vous devriez leur fournir un formulaire de connexion.

Dans ce dernier cas, vous aurez aussi besoin de crer un ou plusieurs groupes de membres vu que l'accs auxpages protges par mot de passe est toujours accord au niveau du groupe.

Les utilisateursLa gestion des permissions pour le back-office est beaucoup plus complexe que pour le front-office, bien qu'elle suive lemme principe: les utilisateurs sont organiss en groupes qui ont certaines permissions. Toutefois, il est possible d'tendreces permissions de groupe individuellement pour chaque utilisateur.

Les utilisateurs hritent gnralement des permissions de tous les groupes actifs auxquels ils sont assigns. Siun groupe est dsactiv, ses permissions ne peuvent plus tre hrites, mme si le compte utilisateur reste actif.

Ainsi, un utilisateur dont les permissions sont hrites seulement de groupes dsactivs n'a plus aucunepermission du tout.

Hritage de permissionVous pouvez dfinir ici si un utilisateur hrite des permissions de groupe seulement, s'il tend ces permissionsindividuellement ou n'hrite d'aucune permission de groupe.

Points de montage de page et de fichierUn point de montage est le terme utilis pour dcrire quel est le dossier partir duquel sont accessibles les fichiersdans un systme de fichiers.TYPOlight utilise un principe trs similaire : un point de montage de page dfinit une page racine individuelle l'intrieur dela structure de site partir de laquelle un utilisateur peut accder l'arborescence de page. De la mme manire, un point

de montage de fichier dfinit un dossier racine individuel partir duquel un utilisateur peut accder au systme de fichier.Un point de montage inclut toujours toutes ses pages et fichiers enfants.En tant qu'administrateur, vous pouvez toujours accder l'ensemble du systme de fichier. Les utilisateurs, par dfaut, nepeuvent pas accder au systme de fichier. A moins que vous, administrateur, ayez dfini un point de montage pour unutilisateur ou un groupe, leur permettant ainsi l'accs et la gestion d'un arbre de pages et de fichiers. Les utilisateurs HelenLewis et James Wilson de notre site d'exemple utilisent tous les deux la page Courses 2006 comme point de montage ethritent de permissions additionnelles du groupe Editors.

En rsultat la structure de site pourJames Wilson ressemble a :

7. Organisation des comptes utilisateur 20


21/57

PermissionsComme vous pouvez le voir, James Wilson est seulement autoris modifier la page de son cours Elements of JazzPiano. Il ne lui est pas permis d'diter aucune autre page, bien qu'il puisse les voir. Ces permissions sont dfinies dans lemodule 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'utilisateurEditors, vu qu'il n'y a pas depermissions de groupe. Seul James Wilson, en tant que propritaire, est autoris modifier cette page et ses articles. Ilpourrait aussi crer, dplacer ou effacer de nouvelles sous-pages, puisque l'option Editer la hirarchie de la page tactive pour lui. Cependant, il ne peut pas dplacer ou effacer la page mre Elements of Jazz Piano.

Groupes de membresComme vous le savez dj, les membres peuvent hriter des permissions d'un ou plusieurs groupes de membres. De cettefaon les permissions de tous les groupes actifs sont cumules.

Champs autorissVous pouvez dfinir ici quels champs d'une table un utilisateur est autoris modifier. Les champs d'entre que vous, entant qu'administrateur, dsactivez seront cachs quand un utilisateur modifiera un enregistrement. Si, aprs vous treconnect avec les droits de James Wilson, vous ouvrez le module Articles et choisissez d'diter l'entte 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 tactivs pour le groupe Editors.

Grer les flux de travailLa possibilit d'exclure certains champs de l'dition est une condition pralable idale pour grer les flux de travail. Unadministrateur peut crer tous les articles et les pages ncessaires (sans les publier) et alors laisser ses diteurs crer lecontenu. Puisque l'administrateur n'a pas activ le champ de publication, seulement lui peut dcider si et quand il publieral'article. Ceci lui assure que tous les articles publis sur le site auront pralablement reu son aval.

Un tel scnario peut tre envisag dans une maison d'dition, o le rdacteur en chef doit vrifier toutes lescontributions de ses diteurs avant de les publier.

7. Organisation des comptes utilisateur 21


22/57

8. Mise en place des pages

Une mise en page est constitue naturellement d'une ou plusieurs sections (par exemple

un entte et deux colonnes) et de multiples modules qui seront affichs dans ces

sections.

Selon ce principe, il est recommand de suivre un certain ordre quant la mise en place d'une page : Crer tous les modules ncessaires dans le module Modules Crer toutes les feuilles de style ncessaires dans le module Feuilles de style Crer une nouvelle mise en page dans le module Prsentations de page

Crer une nouvelle page dans le module Structure du site

De cette faon, vous pouvez tre sr que tous les composants ncessaires existent. Une prsentation de page ne peut pastre construite sans module ni feuille de style et une page ne peut pas tre construite sans une prsentation de page. Aussiles paragraphes de ce chapitre suivront cet ordre.

Maintenant vous allez apprendre comment mettre en place les modules front-office, comment crer des feuilles de style etcomment construire une prsentation de page les incluant. Vous allez apprendre en plus comment les modules front-officesont rendus et comment les styliser avec CSS.

8. Mise en place des pages 22


23/57

9. Les modules front-office

Comme vous le savez dj, une mise en page est base sur plusieurs modules affichs

dans des sections de mise en page prdfinies. Maintenant vous allez en apprendre plus

sur la manire de configurer les modules et comment ils sont affichs dans la partie

front-office.

Le back-office TYPOlight est bien document. Chaque champ d'entre possde une annotation expliquant la fonction duchamp et les valeurs d'entre possibles. Donc, seront seulement expliqus dans ce guide, les principes de base et leschamps d'entre les plus importants. TYPOlight offre la possibilit d'tendre ses fonctionnalits 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 leconstruire vous-mme et personnaliser le systme vos besoins.

Le module Menu de navigation Ce module cre un menu de navigation hirarchique bas sur la structure de page existante et incluant toutes les pagespubliques. Le code source de sortie ressemble ceci :

Home
The academy
News & EventsCampus Impressions

Courses 2006Violin Master ClassElements of Jazz Piano

Vous pouvez styliser chaque lment en utilisant l'attribut de classe dans votre feuille de style.

Le module Navigation lments du menu principal Ce module cre aussi un menu de navigation qui est, cependant, limit aux principaux items de menu (le premier niveaude la structure de page). Le code source de sortie ressemble ceci :

Home

9. Les modules front-office 23


24/57

The academyCourses 2006Services

Le module Navigation lments de sous-menu Ce module cre les items de sous-menus d'un item de menu principal actif.Comme une caractristique spciale, le module ne sera pas inclus dans le code source du site s'il n'y a pas d'item de sousmenu.Le code source de sortie ressemble ceci :

My account

Search this websiteLogout

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 avantd'arriver sur la page courante. Le code source de sortie ressemble ceci :

Music Academy |The academy |Campus Impressions

Le module Navigation rapide Ce module cr un menu droulant hirarchique qui vous permet de sauter vers une page donne.Vous pouvez choisir toute page comme point de dpart et limiter la navigation rapide une partie donne du site,Le code source de sortie ressemble ceci :

Quick navigationHomeThe academy News & EventsCourses 2006 Violin Master Class Elements of Jazz PianoServices My account Search this website Logout



25/57

Le module Lien rapide Contrairement au module de Navigation rapide, ce module ne cr pas de menu hirarchique mais donne un accs rapide quelques pages slectionnes. Il est affich comme un menu droulant. Le code source de sortie ressemble ceci :

Quick linkCourses 2006News & EventsCampus ImpressionsSearch this website

Le module Carte du site Ce module cr un aperu de toutes les pages existantes. Vous pouvez choisir une page de dpart pour montrerseulement certaines parties du site. Le code source de sortie ressemble ceci :

HomeThe academyNews & Events

Campus Impressions

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. Vouspouvez choisir entre une mise en page une ou deux colonnes. Le formulaire de connexion peut prendre deux tatsdiffrents : Le formulaire de connexion sans membre authentifi Le formulaire de connexion avec membre authentifi (et un bouton Dconnexion)

Assurez vous de fournir des dfinitions CSS pour les deux tats et notez qu'il pourrait y avoir un message d'erreur aussi encas d'chec d'identification. Le code source de sortie ressemble ceci :

Please enter username and password!

Username

Password



26/57

Le code source de sortie avec un membre authentifi ressemble ceci :

You are logged in as d.evans.

Si vous avez choisi une mise en page deux colonnes, le code source de sortie ressemble ceci :

Username

Password

Le module Dconnexion automatique Ce module ne cr aucun code de sortie mais dconnecte un utilisateur authentifi. Le but de ce module est de fournir unmoyen d'ajouter un lment de dconnexion au menu de navigation. Dans le chapitre sur l'organisation des comptes vous

avez appris crer des pages protges par mot de passe et comment les rendre accessibles diffrents groupesd'utilisateurs.Ouvrez le site d'exemple et connectez-vous avec l'identifiant de Donna Evans (d.evans / donnaevans). Vous pourrez voirde nouveaux items dans le menu de navigation qui n'taient pas l avant. Une de ces pages est appele Dconnexion etfourni une autre manire de se dconnecter du front-office.

Le module Donnes personnelles Ce module cr un formulaire qui permet aux utilisateurs enregistrs de changer leurs donnes personnelles comme leurnom, adresse, numro de tlphone ou mot de passe. Vous pouvez choisir quels champs seront inclus dans ce formulaire.Chaque entre utilisateur sera valide par TYPOlight et sera disponible dans le module des membres aprs que leformulaire ait t soumis. Le code source de sortie ressemble ceci :



27/57

First name

Last name

Language-English

German

Veuillez noter que le formulaire est seulement montr si un utilisateur front-office est loggu. Sinon il ne sera pas prsentdans le code source du site.

Le module Formulaire Ce module vous permet d'inclure un formulaire cr par avance. Dans le chapitre Gnrateur de formulaire vousapprendrez comment utiliser le gnrateur de formulaire incorpor et inclure des formulaires dans votre site.Un formulaire inclus dans une prsentation de page sera affich sur toutes les pages utilisant cette prsentation. Cela peuts'avrer utile pour un formulaire de recherche par exemple. Toutefois si vous voulez afficher un formulaire sur une pageparticulire 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 depouvoir afficher des rsultats, les recommandations suivantes doivent tre suivies : Chaque page, pour pouvoir tre indexe, doit avoir t vue au moins une fois L'indexation d'une page ne marchera pas selle a t dsactive sur cette page

L'indexation de page ne marchera pas si un utilisateur est loggu dans le back-office

Vous pouvez vrifier que ces recommandations aient t suivies en utilisant le module Maintenance du systme. Si lecache des tables tl_search et tl_search_index est vide, aucune page n'a t indexe et le moteur de recherche ne pourramontrer aucun rsultat. S'il y a des enregistrements, vous pouvez toutefois ouvrir le site d'exemple et visiter la page derecherche du site. Il y a une courte explication des diffrentes 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 forcs, les mots cl avec un plus (+) doivent tre inclus Mots cls exclus, les mots cl avec un moins (-) doivent tre exclus



28/57

Les rsultats de recherche contiennent le titre et le contexte de la page trouve comme vous pouvez le voir sur la plupartdes moteurs de recherche populaires. Le code source de sortie ressemble ceci :

Results 1 - 2 of 2 for "james wilson" (0.001 seconds)
Home - Welcome to Music Academy
...

home.html - [1 occurrences]
The academy - The academy
...

academy.html - [1 occurrences]
Services Term paper submission
...

services.html - [1 occurrences]

Le nombre de rsultats est limit 10 par page (cette valeur peut tre change dans le back-office). Sil y a plus de 10rsultats, un menu de pagination est propos vous aidant naviguer dans les rsultats. Le code source de sortieressemble ceci :

Page 1 of 2
FirstPrevious12345NextLast
A propos du moteur de recherche, il est temps de prsenter une autre caractristique de TYPOlight. Les commentairesdans le prcdent 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 mthode. Vous pouvez aussi utiliser ces

commentaires pour viter que le moteur de recherche indexe votre propre code (par exemple dans le module Code HTMLpersonnalis).

Le module Liste d'articles Ce module affiche une liste d'articles d'une colonne particulire.

Le module Code HTML personnalis Ce module vous permet d'ajouter votre propre code HTML une page. Utilisez ce module pour chaque tche qui n'est pasencore couverte par un autre module.Vous pouvez aussi utiliser ce module si vous avez besoin d'une enveloppe supplmentaire autour du corps de votre page.Dans ce cas, crez deux modules HTML et placez le premier, avec une balise ouvrante en haut et ledeuxime avec une balise fermante en bas de page.



29/57

Le module Animation Flash Ce module vous permet d'inclure de manire accessible un clip Flash dans votre site. Si le lecteur Flash n'est pas installdans le navigateur de votre visiteur, ou que JavaScript ait t dsactiv, 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 lechamp contenu alternatif :

.

Le module Image alatoire Ce module affiche une image alatoire depuis une slection d'images. A chaque rafraichissement de page, une nouvelleimage est affiche. Vous pouvez choisir plusieurs images ou bien des dossiers comme source. Si vous choisissez undossier, toutes ses images seront incluses automatiquement. Le code source de sortie ressemble ceci :

Campus impressions

Le module Lecteur de flux RSS Ce module intgre un flux RSS dans votre site. Il existe deux modles appels rss_default et rss_items_only qui soitaffiche un flux RSS complet soit juste des items de flux. Le code source de sortie ressemble ceci :

RSS Feed Title

RSS Feed Description
First item
First item description



30/57

10. Feuilles de style

Comme vous devez le savoir, un des principes de base d'un systme de gestion de

contenu est de sparer le fond de la forme, le contenu du design. Jusqu' maintenant,

vous avez seulement appris crer 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 grer les diffrentes feuilles de stylepour les diffrents mdias viss. Ouvrez le site d'exemple et choisissez d'diter la feuille de style basic,

Liste d'enregistrementsCe module nous montre une autre manire de lister les enregistrements. Jusqu' prsent, il n'y avait seulement qu' partirde simples listes que vous pouviez choisir directement un enregistrement. Les applications plus complexes comme legnrateur de CSS vous demande, dans un premier temps, de crer une feuille de style (lment parent) et d'y ajouterplus tard des dfinitions de style (lments enfant). Si vous choisissez de modifier une feuille de style particulire, vousvous retrouverez avec un aperu, comme montr plus bas, partir duquel vous pourrez diter soit la feuille de style ellemme (lment parent), soit ses dfinitions de style (lments enfant).

Editer les dfinitions de styleMaintenant descendez la page courante jusqu' arriver la dfinition de style h1. Cliquez sur le bouton Editer la

10. Feuilles de style 30


31/57

dfinition pour ouvrir le formulaire d'dition. Comme vous pouvez le voir, le formulaire est divis en diffrents groupes quevous pouvez ouvrir ou fermer. La dfinition de style utilise les groupes Marges, Remplissage, Alignement, Fond, Bordure etPolice de caractre. Si vous voulez utiliser des commandes spciales CSS, vous pouvez les entrer dans la partie CodeCSS personnalis en bas de page.

TYPOlight utilise AJAX pour ouvrir/fermer les groupes. Il faut pour cela que JavaScript soit activ dans votrenavigateur. Sinon vous devrez, dans un premier temps, sauvegarder vos changements pour que les champsadditionnels 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.

Slecteurs CSSUn slecteur dfinit a quel lment ou groupe d'lments une dfinition de style est assigne. Il existe trois manires deviser un lment HTML : via le type d'lment (par exemple div, span, a, img, input...) via l'attribut de classe (par exemple .invisible) via l'attribut ID (par exemple #header)

Les slecteurs vous permettent aussi d'inclure ou d'exclure certains navigateurs. Ainsi vous pouvez, par exemple, crerune dfinition de style qui sera interprte uniquement par Internet Explorer 7 et sera ignore par toutes les autresversions. Voici un court aperu des trois aiguilleurs les plus connus :

*html Internet Explorer jusqu' la version 6

*:first-child+html Internet Explorer 7 seulement

html>body Navigateurs bass sur Gecko et IE 7

Par exemple, si vous voulez styliser l'entte de votre mise en page et que vous ayez besoin d'affecter diffrentes valeursde hauteur pour chaque navigateur (Firefox, IE6 et IE7), vous pouvez y parvenir avec un aiguillage CSS. Comme vous lesavez dj, le conteneur correspondant possde un attribut de classe appel #header pour le rfrencer.

#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


32/57

11. Prsentations de page

TYPOlight a un constructeur de CSS incorpor qui cr automatiquement une mise en

page cross-browser (divise en entte, pied de page et colonnes). Dfinissez simplement

le nombre de colonnes et les modules afficher dans ces colonnes. Ensuite, vous pouvez

styliser la mise en page cre 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'entre est suivi d'une courte explication dcrivant lafonction du champ et les possibles valeurs d'entre. Donc seuls les principes de base et les champs d'entre les plus

importants sont expliqus dans ce guide utilisateur.

Modle de mise en pageChaque mise en page est base sur un modle. Vous trouverez le modle par dfaut fe_page dans le dossier templates dufront-office system/modules/frontend/templates.

Les feuilles de style inclusesVous pouvez ici inclure vos feuilles de style prcdemment cres. Si vous n'en avez pas encore cres, un message iln'y a pas encore d'enregistrements apparat.

Les balises supplmentairesTYPOlight cr automatiquement la section d'entte de votre site web en incluant par exemple les mots cl, la description,

les feuilles de style et les fichiers JavaScript ncessaires. Les mots cl peuvent tre dfinis au moment de l'dition del'article. Les descriptions peuvent tre dfinies au moment de l'dition de la page. Si vous voulez utiliser vos propresscripts, vous pouvez les entrer ici comme ceci:

Bien sr, vous pouvez aussi ajouter ici vos dfinitions CSS ou vos fonctions JavaScript. Dans ce cas, assurez-vous decommenter correctement vos scripts en les incluant dans des sections CDATA.

MootoolsMootools est une librairie JavaScript qui s'est fait connatre grce son effet accordon. Cet effet est intgr dansTYPOlight comme un lment de contenu et requiert une initialisation JavaScript. Par dfaut, il y a trois diffrents modles

Mootools parmi lesquels vous pouvez faire votre choix. Le modle moo_default initialise simplement un accordon pardfaut. Le modle moo_close_allqui vous permet de fermer tous les nuds et le modle moo_modify_foreground quichange en plus la couleur des polices de chaque entte, pourvu qu'elle ait t dfinie dans un attribut de style ou dans unefeuille de style.

Type de prsentation de pageLe 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 donne 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 fentre du

11. Prsentations de page 32


33/57

navigateur. Toutes les dimensions d'un design liquide sont donc exprimes en pourcentage et non en pixels. Le sited'exemple utilise une mise en page statique, centre avec une largeur fixe.

Les modules inclusCette partie vous permet d'organiser vos modules prcdemment crs l'intrieur des sections de mise en page. Lenombre de sections de mise en page disponibles dpend du nombre de colonnes, de l'lment d'entte et de pied de pageainsi que des possibles sections de mise en page personnalises. Si vous modifiez une section de mise en page, vousdevrez sauvegarder vos changements avant de les voir apparatre dans cette partie.

Les modules sont affichs les uns aprs les autres l'intrieur de chaque colonne. Dans notre exemple, le moduleNavigation 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 raccourciclavier [ALT] + S pour le faire ([CTRL] + S sous Mac).Il est recommand d'activer JavaScript dans votre navigateur.

Cas spcial : le module articlesLe module articles est disponible par dfaut et ne doit pas tre cr l'avance. A la diffrence des autres modules, lecontenu du module articles change dynamiquement aux vues des articles respectifs se trouvant sur la page donne.Une autre option de ce module est qu'il affiche diffrents articles selon la colonne courante. Comme vous le verrez dans leschapitres venir, chaque article est assign une colonne particulire (section mise en page) et sera affich seulement sila colonne correspondante contient un module articles. Donc assurez vous d'ajouter ce module chaque colonne quiabritera des articles.

Spcifications de largeurAprs avoir installs tous les modules et sauvegards vos changements, vous pouvez spcifier la largeur hors-tout.Assurez vous de dfinir la largeur en pixel pour les prsentations statiques et en pourcentage pour les prsentationsliquides !

Un espacement global sera soustrait de la largeur de chaque colonne et n'affectera donc pas la largeur de lacolonne que vous avez spcifie. Le constructeur de mise en page de TYPOlight prend soin des particularitsdes navigateurs comme le bug du modle de boite d'Internet Explorer.

11. Prsentations de page 33


34/57

12. Structure du site

La structure du site est la colonne vertbrale de votre site et est, par exemple, utilise

pour crer le menu de navigation. Les pages sont ordonnes hirarchiquement et

peuvent hriter de certaines configurations de leurs pages parentes. Par exemple, si vous

assignez une prsentation de page ou une dure limite de cache une page, ces

configurations seront aussi appliques ses pages enfant moins qu'elles aient leur

propre prsentation de page ou leur propre dure limite de cache.

Ouvrez le module Structure du site du back-office du site d'exemple. Cliquez sur l'icne [+] devant Music Academy afinde dplier l'arbre de nud. Comme vous pouvez le voir, chaque page a un symbole particulier qui vous indique nonseulement le type de page mais aussi si elle est visible ou non, si elle est publie ou si elle est protge par mot de passe.

Maintenant nous allons voir plus en dtail les configurations de page sur la base de la page Home.Le back-office TYPOlight est bien document. Chaque champ d'entre est suivi d'une courte explication dcrivant lafonction du champ et les possibles valeurs d'entre. Donc seuls les principes de base et les champs d'entre les plusimportants sont expliqus dans ce guide utilisateur.

Types de pageLe paramtre le plus important de chaque page est son type. Il dtermine si une page affiche son contenu, si elle redirigele visiteur vers une autre page ou si elle est le point de dpart dans l'arbre de page d'un nouveau site. Il y a six diffrentstypes de page qui seront expliqus dans les paragraphes suivants.

12. Structure du site 34


35/57

Page simpleUne page simple se comporte comme une page HTML statique et est utilise pour afficher des articles, du contenu et desmodules. La plupart des pages du site d'exemple sont des pages simples.

Rediriger vers une URL externeUne page de redirection n'affiche aucun contenu mais redirige les visiteurs vers une autre page. L'URL cible est n'importequelle page qui ne peut pas tre vue sous votre domaine. Ce type de page est similaire un lien de redirection vers uneURL externe (par exemple http://www.typolight.org ).

Aller vers une autre page du siteCe type de page n'affiche pas plus de contenu, mais redirige les visiteurs vers une autre page interne. Au contraire d'unepage de redirection, les visiteurs sont amens vers une autre page dans l'arbre de page.

Racine d'un nouveau sitePour faire tourner plusieurs sites l'intrieur de l'arbre de page vous devez crer 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 prcis ou la langue du navigateur.Mme si vous avez l'intention de ne faire tourner qu'un seul site web, il peut tre opportun d'utiliser ce type depage vu que ses configurations (mise en page, cache, droits d'accs) seront transmises toutes ses pagesenfant automatiquement.

Supposons que vous faites tourner un site d'entreprise bilingue et un autre plus petit site priv que vous voudriez greravec TYPOlight dans le futur. Votre site d'entreprise utilise le domaine www.votre-compagnie.com et votre site priv ledomainewww.votre-site-prive.com. Vous allez donc crer trois pages racine avec les paramtres suivants: Site d'entreprise franais, pas de nom de domaine, Franais Site d'entreprise anglais, pas de nom de domaine, Anglais, langue de remplacement Site priv, www.votre-site-prive.com, Anglais, langue de remplacementLe tableau suivant vous montre vers quelle page un visiteur sera amen voir en fonction des prfrences de sonnavigateur et de l'URL employe.

URL Langue du navigateur Redirection vers

www.votre-compagnie.com Franais Site d'entreprise franais

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, seulsles visiteurs ayant dfini l'anglais comme langue par dfaut de leur navigateur pourront voir le site priv. Lesvisiteurs franais ne pourront pas le voir et une page 404 leur sera affiche puisqu'il n'y a pas de versionfranaise de ce site priv.

Erreur 403 (accs interdit)Si un visiteur non loggu essaye d'atteindre une page protge par mot de passe, il sera redirig vers la page d'accueil dusite. Nanmoins si vous prfrez afficher un message d'erreur ou rediriger le visiteur vers une page d'identification, vouspouvez crer une page d'erreur 403 qui sera appele automatiquement dans ce cas prcis.

12. Structure du site 35
http://www.typolight.org/http://www.votre-compagnie.com/http://www.votre-site-prive.com/http://www.votre-site-prive.com/http://www.typolight.org/http://www.votre-compagnie.com/http://www.votre-site-prive.com/


36/57

Erreur 404 (page non trouve)Si un visiteur essaye d'accder une page non-existante qui n'est probablement pas encore cre, pas encore publie ou at renomme, un message d'erreur No pages found est affich. Mais si vous prfrez afficher un message

personnalis ou rediriger vos visiteurs vers une autre page, vous pouvez crer une page 404 qui sera appeleautomatiquement dans un tel cas.

Autres configurationsEn outre le type de page, il y a d'autres configurations importantes qui affectent le comportement d'une page. La plupart deces configurations sont caches par dfaut puisqu'elles sont habituellement hrites de la page parent.Ces configurations sont :

Page protge Affecter une prsentation Affecter une dure de vie au cache Affecter les permissions

Alias de la pageChaque page a un identifiant numrique unique par lequel il peut tre identifi. Pour voir une page donne dans votrenavigateur, 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 del'identifiant numrique. Son but premier est de gnrer des URL plus facilement lisibles par l'homme et les moteurs derecherche comme :

http://www.votre-domaine.com/index.php/contactez-nous.html

Protger une pageAvant de protger une page et de limiter son accs certains utilisateurs authentifis, vous devez au moins crer ungroupe de membres. Vous pouvez alors choisir de protger une page et slectionner le groupe de membres qui estautoris la voir. Souvenez vous que si vous ne slectionnez aucun groupe, n'importe quel membre authentifi aura accs la page.

Affecter une prsentationDans le chapitre prcdent nous avons vu comment crer u

Documents

TYPOlight Guide v1.1 (French)