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 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 :

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.

4. Configuration du back-office

13

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

4. Configuration du back-office

14

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é

6. Navigation dans le back-office

18

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é.

6. Navigation dans le back-office

19

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 frontoffice 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 :

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 :

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 :

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 :

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, Le code source de sortie ressemble à ceci :

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 :

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 :

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 :

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

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

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 : 9. Les modules front-office

26



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 9. Les modules front-office

27

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 :

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 :

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 en bas de page. 9. Les modules front-office

28

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 » : .

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 :

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 :

9. Les modules front-office

29

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; } * hml #header { height:80px; } *:first-child+html #header { height:74px }

10. Feuilles de style

/* all browsers */ /* IE 5 and IE 6 */ /* IE 7 */

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 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">

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.

12. Structure du site

35

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 backoffice 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 12. Structure du site

36

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

12. Structure du site

37

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 :

Headline

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 :

Si une image a été ajoutée, le code source de sortie ressemblera à ceci :

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 :

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 :

Image Cet élément ajoute une image à l'article. Le code source de sortie ressemble à ceci :

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 :

Si vous utilisez une image à la place du texte, le code source de sortie ressemble à ceci :

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 :

14. Eléments de contenu

40

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 :

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. Le code source de sortie ressemble à ceci :

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 :

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 :

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 :

14. Eléments de contenu

42

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.

14. Eléments de contenu

43

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 :

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 :

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 :

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 ». Le code source de sortie ressemble à ceci :

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 :

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 : HTML headline

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 :

17. Générateur de formulaire

49

HTML explanation

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 : Your name:

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 :

for="ctrl_2">Password: type="password" id="ctrl_2" class="password" /> for="ctrl_2_confirm">Confirm password: id="ctrl_2_confirm" class="password" />

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. Le code source de sortie ressemble à ceci : Your message:

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 : Please choose: <select name="options" id="ctrl_2" class="select"> item_1 item_2

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 : Please choose:

17. Générateur de formulaire

50



Le menu case à cocher Ce champ ajoute un menu case à cocher au formulaire permettant aux visiteurs de sélectionner une ou plusieurs options. Le code source de sortie ressemble à ceci : Please choose:

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 : Your file:

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 : Security question <span class="captcha_text">Please calculate 4 plus 8.

Le bouton de soumission Ce champ ajoute un bouton de soumission au formulaire. Le code source de sortie ressemble à ceci :

17. Générateur de formulaire

51

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.

{{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.

18. Les balises d'insertion (insert tags)

53

{{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

{{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 : mon texte

{{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 » : mon texte

{{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

18. Les balises d'insertion (insert tags)

54

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 : [email protected], [email protected]

Historique des modifications : Version

Date

1.0

23/12/07

1.1

10/01/2008

20. Crédits

Commentaire Première version mise en page, ouf ! Ajout des crédits, de la licence d'utilisation de ce guide, et de 2 traductions manquantes : les balises d'insertions « insert_article » et « insert_content »

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