Professional Documents
Culture Documents
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
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
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
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
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
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).
wget http://prdownloads.sourceforge.net/typolight/typolight-2.5.0.tar.gz?download
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.
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 ».
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.
http://www.votre-domaine.com/TYPOlight_webCMS_2.5/
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.
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.
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.
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.
http://www.votre-domaine.com/index.php/accueil.html
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.
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.
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.
Coller un enregistrement en tant qu'enfant de celui-ci Désactiver les retours à la ligne automatiques
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é.
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.
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.
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.
Le back-office TYPOlight est bien documenté. Chaque champ d'entrée possède une annotation expliquant la fonction du
champ et les valeurs d'entrée possibles. Donc, seront seulement expliqués dans ce guide, les principes de base et les
champs d'entrée les plus importants. TYPOlight offre la possibilité d'étendre ses fonctionnalités avec des modules front-
office additionnels.
Si vous avez besoin d'un certain module qui n'existe pas encore et que vous connaissez un peu PHP, vous pouvez le
construire vous-même et personnaliser le système à vos besoins.
<div class="**mod_navigation**">
<a href="home.html#skipNavigation" class="invisible" title="Skip navigation"></a>
<ul class="level_1">
<li><p class="active">Home</p></li>
<li class="parent"><a href="academy.html">The academy</a></li>
<li class="submenu">
<ul class="level_2">
<li><a href="events.html">News & Events</a></li>
<li><a href="impressions.html">Campus Impressions</a></li>
</ul>
</li>
<li class="parent"><a href="courses.html">Courses 2006</a></li>
<li class="submenu">
<ul class="level_2">
<li><a href="violin.html">Violin Master Class</a></li>
<li><a href="jazzpiano.html">Elements of Jazz Piano</a></li>
</ul>
</li>
</ul>
<a id="skipNavigation" class="invisible" title="Skip navigation"></a>
<div class="clear"></div>
</div>
Vous pouvez styliser chaque élément en utilisant l'attribut de classe dans votre feuille de style.
<div class="mod_navigationMain">
<a href="home.html#skipMainNavigation" class="invisible"></a>
<ul class="level_1">
<li><p class="active">Home</p></li>
<div class="mod_navigationSub">
<a href="services.html#skipSubNavigation" class="invisible"></a>
<ul class="level_1">
<li><a href="account.html">My account</a></li>
<li><a href="search.html">Search this website</a></li>
<li><a href="logout.html">Logout</a></li>
</ul>
<a id="skipSubNavigation" class="invisible"></a>
<div class="clear"></div>
</div>
<div class="mod_breadcrumb">
<a href="home.html" title="Music Academy">Music Academy</a> |
<a href="academy.html" title="The academy">The academy</a> |
<span class="active">Campus Impressions</span>
</div>
<div class="mod_quicknav">
<form action="home.html" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_quicknav" />
<select name="target">
<option value="">Quick navigation</option>
<option value="home.html">Home</option>
<option value="academy.html">The academy</option>
<option value="events.html"> News & Events</option>
<option value="courses.html">Courses 2006</option>
<option value="violin.html"> Violin Master Class</option>
<option value="jazzpiano.html"> Elements of Jazz Piano</option>
<option value="services.html">Services</option>
<option value="account.html"> My account</option>
<option value="search.html"> Search this website</option>
<option value="logout.html"> Logout</option>
</select>
<input type="submit" class="submit" value="Go" />
<div class="mod_quicklink">
<form action="home.html" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_quicklink" />
<select name="target">
<option value="">Quick link</option>
<option value="courses.html">Courses 2006</option>
<option value="events.html">News & Events</option>
<option value="impressions.html">Campus Impressions</option>
<option value="search.html">Search this website</option>
</select>
<input type="submit" class="submit" value="Go" />
</div>
</form>
</div>
<div class="mod_sitemap">
<ul class="level_1">
<li><a href="home.html">Home</a></li>
<li class="parent"><a href="academy.html">The academy</a></li>
<li class="submenu">
<ul class="level_2">
<li><a href="events.html">News & Events</a></li>
<li><p class="active">Campus Impressions</p></li>
</ul>
</li>
</ul>
</div>
<div class="mod_login">
<form action="academy.html" method="post">
<div class="formbody">
<p class="error">Please enter username and password!</p>
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />
<p class="label"><label for="username">Username</label></p>
<input type="text" name="username" id="username" class="text" value="" />
<p class="label"><label for="password">Password</label></p>
<input type="password" name="password" id="password" class="text" value="" />
<div class="submit_container">
<div class="mod_login">
<form action="academy.html" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_logout" />
<p class="login_info">You are logged in as d.evans.</p>
<div class="submit_container">
<input type="submit" class="submit" value="Logout" />
</div>
</div>
</form>
</div>
Si vous avez choisi une mise en page à deux colonnes, le code source de sortie ressemble à ceci :
<div class="mod_login">
<form action="academy.html" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />
<table cellspacing="0" cellpadding="0" summary="">
<tr>
<td class="col_0"><label for="username">Username</label></td>
<td class="col_1"><input type="text" id="username" class="text" /></td>
</tr>
<tr>
<td class="col_0"><label for="password">Password</label></td>
<td class="col_1"><input type="password" id="password" class="text" /></td>
</tr>
<tr>
<td class="submit_col_0"></td>
<td class="submit_col_1"><input type="" class="submit" value="Login" /></td>
</tr>
</table>
</div>
</form>
</div>
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.
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
<div class="mod_search">
<p class="header">Results 1 - 2 of 2 for "james wilson" (0.001 seconds)</p>
<div class="bg1">
<h3><a href="home.html">Home - Welcome to Music Academy</a></h3>
<p class="context">...</p>
<p class="url">home.html <span class="matches">- [1 occurrences]</span></p>
</div>
<div class="bg2">
<h3><a href="academy.html">The academy - The academy</a></h3>
<p class="context">...</p>
<p class="url">academy.html <span class="matches">- [1 occurrences]</span></p>
</div>
<div class="bg3">
<h3><a href="services.html">Services – Term paper submission</a></h3>
<p class="context">...</p>
<p class="url">services.html <span class="matches">- [1 occurrences]</span></p>
</div>
</div>
Le nombre de résultats est limité à 10 par page (cette valeur peut être changée dans le back-office). S’il y a plus de 10
résultats, un menu de pagination est proposé vous aidant à naviguer dans les résultats. Le code source de sortie
ressemble à ceci :
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é).
<div class="mod_randomImage">
<img src="image.php?src=tl_files/music_academy/campus_3.jpg&width=200" />
<div class="caption">Campus impressions</div>
</div>
<div class="mod_rss_reader">
<div class="rss_default_header">
<h2><a href="...">RSS Feed Title</a></h2>
<p class="description">RSS Feed Description</p>
</div>
<div class="rss_default">
<h3><a href="...">First item</a></h3>
<p class="description">First item description</p>
</div>
<div class="clear"></div>
</div>
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).
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 :
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.
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.
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.
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.
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.
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.
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é.
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
Pour des raisons de sécurité, les pages protégées par mot de passe ne sont jamais mises en cache, même si
vous leurs affectez une durée de vie au cache. La même chose s'applique si un utilisateur loggué dans le back-
office prévisualise une telle page. Dans les deux cas, les données confidentielles ne peuvent pas être écrites
dans le cache et chargées à la prochaine requête de page.
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.
Page publiée
Page non publiée qui n'est pas visible dans le menu de navigation
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
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.
Mots clés
Alors que la description d'une page est fournie dans le module Structure de site, les mots clés seront cumulés à partir de
ceux indiqués dans tous les articles composants une page. Assurez vous de ne pas utiliser les mêmes mots clés pour tous
les articles parce que certains moteurs de recherche pourraient interpréter leur répétition comme du SPAM et
n'indexeraient pas du tout la page.
Publier l'article
Comme les pages de la structure de site, les articles doivent aussi être publiés avant d'être visibles dans le front-office.
Vous pouvez soit publier ou non un article soit choisir de le publier pour une période de temps donné seulement. Ainsi vous
pouvez, par exemple, annoncer un événement jusqu'au jour où il a lieu.
13. Articles 38
14. Eléments de contenu
Un élément de contenu est un certain type de contenu comme un texte, une image ou un
tableau HTML. Vous pouvez ajouter un nombre illimité d'éléments de contenu (par
exemple un texte, une image et un lien hypertexte) à un article à l'intérieur du contenu de
votre site web. Dans les chapitres suivants vous allez apprendre les différents éléments
de contenu et comment ils sont formatés.
Titre
L'élément titre ajoute un titre en entête de l'article. Le code source de sortie ressemble à ceci :
<h1 class="ce_headline">Headline</h1>
Texte
L'élément texte ajoute un texte formaté à un article. Vous pouvez utiliser un éditeur de texte avancé pour appliquer
facilement différents formats comme un programme de bureautique. TYPOlight utilise TinyMCE que vous pouvez trouver
sur http://tinymce.moxiecode.com. Après que le texte ait été validé en terme d'accessibilité, le code source de sortie
ressemblera à ceci :
<div class="ce_text">
Rich Text Editor Output
</div>
<div class="ce_text">
<div class="image_container" style="float:left;">
<img src="image.php?src=campus_1.jpg&width=200" alt="Campus Impression" />
<div class="caption">Campus Impression</div>
</div>
Rich Text Editor Output
<div class="clear"></div>
</div>
HTML
L'élément HTML contient du code XHTML (espérons le valide). Il est utilisé pour montrer toute sorte de contenu qui ne peut
pas être généré avec un élément de contenu existant. Le code source de sortie ressemble à ceci :
<div class="ce_html">
<div>This is valid XHTML Code</div>
</div>
Notez que TYPOlight ne permet aucune balise HTML et enlève les balises interdites. Une liste complète des balises
autorisées peut être trouvée dans le fichier system/config/config.php. Vous pouvez personnaliser cette liste dans le fichier
de configuration local.
<div class="ce_code">
<pre>
function test($test)
{
echo $test;
}
</pre>
</div>
Image
Cet élément ajoute une image à l'article. Le code source de sortie ressemble à ceci :
<div class="ce_image">
<h1>Headline</h1>
<div class="image_container">
<img src="image.php?src=campus_1.jpg&width=200" alt="Campus Impression" />
<div class="caption">Campus Impression</div>
</div>
</div>
Le titre dans cet exemple est facultatif et ne sera affiché que si le champ Titre a été rempli.
Lien hypertexte
Cet élément de contenu ajoute un lien hypertexte à un article. Le code source de sortie ressemble à ceci :
<div class="ce_hyperlink">
Visit <a href="http://www.typolight.org/" class="hyperlink_txt">TYPOlight</a>.
</div>
Si vous utilisez une image à la place du texte, le code source de sortie ressemble à ceci :
<div class="ce_hyperlink">
<div class="image_container">
<a href="http://www.typolight.org/" class="hyperlink_img"><img src="..." /></a>
<div class="caption">Campus Impression</div>
</div>
</div>
Si vous utilisez le protocole mailto, vous pouvez entrer une adresse mail à la place d'une URL. TYPOlight crypte
automatiquement les adresses mail afin d'éviter que les robots de SPAM ne les attrapent.
Liste
Cet élément ajoute une liste à un article en utilisant un assistant JavaScript afin de vous aider à la mise en place des
éléments. Le code source de sortie ressemble à ceci :
<div class="ce_list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="ce_table">
<table cellspacing="0" cellpadding="0" summary="Table summary">
<thead>
<tr>
<th class="col_0">Header column 1</th>
<th class="col_1">Header column 2</th>
<th class="col_2">Header column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col_0_bg">Table body</td>
<td class="col_1_bg">Table body</td>
<td class="col_2_bg">Table body</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="col_0">Footer column 1</td>
<td class="col_1">Footer column 2</td>
<td class="col_2">Footer column 3</td>
</tr>
</tfoot>
</table>
</div>
Téléchargement
Cet élément ajoute un lien de téléchargement à un article et ouvre automatiquement la boite de dialogue « Enregistrer
sous » dès que le gestionnaire de téléchargement incorporé a vérifié la permission de l'utilisateur à télécharger un fichier.
Le code source de sortie ressemble à ceci :
<div class="ce_download">
<img src="iconJPG.gif" alt="Campus impression" class="mime_icon" />
<a
href="download.php?src=campus.jpg&token=fe1fdecb58fb4c02d7e2939
01dae9a78">
Campus impression (113 KB)
</a>
</div>
Galerie d'images
Cet élément affiche un nombre d'images donné comme galerie en utilisant le script open source « slimbox » pour voir les
images en pleine largeur. Plus d'information sur ce script à l'adresse http://www.digitalia.be/software/slimbox. Le code
source de sortie ressemble à ceci :
<div class="ce_gallery">
<table cellspacing="0" cellpadding="0" summary="Image gallery">
<tbody>
<tr>
<td width="33">
<a href="campus_1.jpg" rel="lightbox[lb1]" title="Campus 1">
<img src="image.php?src=campus_1.jpg&width=150" alt="Campus 1" />
</a>
</td>
<td width="33">
<a href="campus_2.jpg" rel="lightbox[lb1]" title="Campus 2">
<img src="image.php?src=campus_2.jpg&width=150" alt="Campus 2" />
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.
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.
<div class="ce_toplink">
<a href="home.html#top" title="Back to top">Back to top</a>
</div>
Accordéon
Cet élément de contenu ajoute un bloc contenant un accordéon Mootools à un article. Vous trouverez plus d'informations
sur le framework opensource JavaScript Mootools sur http://mootools.net et sur http://moofx.mad4milk.net.
Le framework JavaScript Mootools est inclus par défaut vu qu'il est utilisé par l'élément galerie d'images. Donc
vous pouvez utiliser tous les effets Mootools et les scripts basés sur mootools sur votre site web sans avoir à
inclure d'autres fichiers JavaScript.
Si vous n'utilisez pas le modèle standard TYPOlight (fe_page.tpl), vous pourriez avoir des problèmes pour faire
fonctionner l'Accordéon correctement.
Voici la solution : http://www.typolight.org/forum/viewtopic.php?id=1072
L'élément accordéon marche comme l'élément texte à l'exception que vous devez entrer un titre pour que l'élément puisse
être ouvert ou fermé. Le titre peut contenir du code HTML, vous pouvez alors utiliser aussi bien une image que du texte.
Pour faire fonctionner cet effet, vous devez inclure dans votre présentation de page un script Mootools à l'aide de la liste
déroulante JavaScript Mootools. Le code source de sortie de cet élément ressemble à ceci :
<div class="ce_accordion">
<div class="toggler">
HTML headline
</div>
<div class="accordion"><div>
Content of the accordion pane
</div></div>
</div>
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.
<div class="layout_short">
<p class="info">2006-03-05 12:27</p>
<h2><a href="james-wilson.html">Associate Professor James Wilson
returns</a></h2>
<p class="teaser">Jazz pianist James Wilson returns to Music Academy to give
lessons in traditional and contemporary Jazz Piano.</p>
<p class="more"><a href="james-wilson-returns.html">Read more...</a></p>
<div class="clear"></div>
</div>
Vous venez juste d'apprendre un autre principe important qui est utilisé avec beaucoup de modules front-office. Vous
pouvez utiliser différents modules de mise en page pour des items de modules récurrents (ex: articles d'actualités) pour
formater le module individuellement. Pour trouver quelle classe CSS un module ou un modèle utilise regardez simplement
le code source du site en front-office. Vous allez apprendre dans un prochain chapitre comment mettre en place vos
propres modèles de mise en page. Notre liste d'actualités est faite d'un conteneur englobant (qui est aussi un modèle
appelé mod_newslist) et deux nouveaux articles qui sont formatés par le modèle d'actualités news_short. Le code source
de sortie de tout le module ressemble à ceci :
Cet exemple inclut deux options de plus qui sont disponibles dans presque tous les modules et éléments de contenu.
D'une part le titre qui est généré automatiquement à partir du champ titre. Presque tous les modules et les éléments de
contenu fournissent ce champ d'entrée et supportent cette option. Dans notre exemple, le module liste d'actualités possède
le titre Breaking News. D'une autre part l'attribut ID du conteneur englobant que nous avons entré dans la dernière ligne du
formulaire de back-office. Vous pouvez affecter un identifiant unique à chaque module ou élément de contenu afin de le
formater avec une feuille de style.
15. Actualités 44
Module Lecteur d'actualités
A contrario du module liste d'actualités, le module lecteur d'actualités affiche seulement un seul article d'actualités. Ouvrez
le site d'exemple en front-office et cliquez sur Associate Professor James Wilson returns dans la liste d'actualités sur la
partie gauche du site. Une nouvelle page contenant le module lecteur d'actualités s'ouvre et affiche l'article d'actualités
entier. L'URL suivant devrait être affichée dans la barre d'adresse de votre navigateur :
http://www.votre-domaine.com/index.php/archive/articles/james-wilson-returns.html
Profitons-en pour analyser les portions de cette URL. La portion archive représente l'identifiant de page (en fait l'alias de
page). La portion articles est le mot clé pour le lecteur d'actualités et la portion james-wilson-returns est l'identifiant de
l'article d'actualités. L'URL dynamique correspondante serait :
http://www.votre-domaine.com/index.php?id=archive&articles=james-wilson-returns
Notez que le lecteur d'actualités sera affiché seulement si il y a un identifiant d'article d'actualités (ex: quand il est appelé
depuis un lien de la liste d'actualités). S'il n'y a pas d'identifiant d'article d'actualités, le module ne sera pas présent dans le
code source du site. Vous pouvez tester ceci en enlevant l'identifiant d'article d'actualités de l'URL :
http://www.votre-domaine.com/index.php/archive.html
Maintenant vous voyez seulement la page d'actualités sans l'article d'actualités, parce que le module lecteur d'actualités ne
sait pas quel article afficher. Le code source de sortie de ce module (avec un identifiant d'actualités donné) ressemble à
ceci :
<div class="mod_newsreader">
<div class="layout_full">
<h1>Associate Professor James Wilson returns</h1>
<p class="info">2006-03-05 by Kevin Jones</p>
<h2>Veteran Jazz pianist James Wilson has enjoyed international renown since
graduating from Music Academy in 1968.</h2>
<div class="ce_text">James Wilson and the stage have been lifelong partners.
The jazz pianist and youngest son of a preacher began playing in his father's
church as a preschooler, took his first solo at the age of six, and has been a
lead performer ever since.</div>
</div>
</div>
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 :
<div class="mod_newsarchive">
<h1>February 2006</h1>
<div class="layout_simple">
2006-02-12 <a href="articles/open-days.html">Open days 2006</a>
</div>
<div class="layout_simple">
2006-02-01 <a href="articles/scholarship-program.html">Scholarship Program</a>
</div>
</div>
<div class="mod_newsmenu">
<ul>
<li class="year">2006</li>
<li class="submenu">
<ul>
<li><p class="active">December 2006</p></li>
<li><a href="news/archives/200603.html">March 2006</a></li>
<li><a href="news/archives/200602.html">February 2006</a></li>
</ul>
</li>
</ul>
</div>
15. Actualités 46
16. Contenu Flash
Ce module vous permet de gérer le contenu qui sera chargé dynamiquement
dans un clip Flash.
TextField.prototype._loadArticle = function(flashID)
{
tf = this;
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 ».
TextField.prototype._addCSS = function(style_sheet)
{
tf= this;
tf.styleSheet = null;
st.onLoad = function(success)
{
if (success)
{
tf.styleSheet = st;
}
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.
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).
La ligne d'entête
Ce champ est utilisé pour ajouter une ligne d'entête au formulaire. Les balises HTML sont autorisées. Le code source de
sortie ressemble à ceci :
<tr>
<td colspan="2" class="headline">HTML headline</td>
</tr>
L'explication
Ce champ ajoute une explication au formulaire. Il est identique au champ ligne d'entête mais utilise un attribut class
différent. Le code source de sortie ressemble à ceci :
<tr>
Le champ de texte
Ce champ ajoute un champ de texte d'une seule ligne. Vous devriez permettre la validation des entrées de chaque champ
afin d'éviter une mauvaise utilisation du formulaire. Le code source de sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Your name:</label></td>
<td class="col_1"><input type="text" id="ctrl_2" class="text" /></td>
</tr>
<tr>
<td class="col_0"><label for="ctrl_2">Password:</label></td>
<td class="col_1"><input type="password" id="ctrl_2" class="password" /></td>
</tr>
<tr>
<td class="col_0"><label for="ctrl_2_confirm">Confirm password:</label></td>
<td class="col_1"><input id="ctrl_2_confirm" class="password" /></td>
</tr>
La zone de texte
Ce champ ajoute un champ de texte multi ligne au formulaire. N'oubliez pas de définir le nombre de colonnes et de lignes.
Le code source de sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Your message:</label></td>
<td class="col_1"><textarea id="ctrl_2" class="textarea"></textarea></td>
</tr>
Le menu de sélection
Ce champ ajoute un menu déroulant au formulaire permettant aux visiteurs de sélectionner une ou plusieurs options. Le
code source de sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Please choose:</label></td>
<td class="col_1">
<select name="options" id="ctrl_2" class="select">
<option value="item_1">item_1</option>
<option value="item_2">item_2</option>
</select>
</td>
</tr>
<tr>
<td class="col_0"><label for="ctrl_2">Please choose:</label></td>
<td class="col_1">
<tr>
<td class="col_0"><label for="ctrl_2">Please choose:</label></td>
<td class="col_1">
<div id="ctrl_2" class="checkbox_container">
<span><input type="checkbox" class="checkbox" />
<label>item_1</label></span>
<span><input type="checkbox" class="checkbox" />
<label>item_2</label></span>
</div>
</td>
</tr>
L'envoi de fichier
Ce champ ajoute un champ d'envoi de fichier au formulaire. Vous pouvez définir une liste des fichiers dont le type est
autorisé, la taille maximale de fichier ainsi que le dossier où seront sauvegardés les fichiers envoyés. Le code source de
sortie ressemble à ceci :
<tr>
<td class="col_0"><label for="ctrl_2">Your file:</label></td>
<td class="col_1"><input type="file" id="ctrl_2" class="upload" /></td>
</tr>
<tr>
<td class="col_0"><label for="ctrl_10">Security question</label></td>
<td class="col_1">
<input type="text" class="captcha" maxlength="2" />
<span class="captcha_text">Please calculate 4 plus 8.</span>
</td>
</tr>
Le bouton de soumission
Ce champ ajoute un bouton de soumission au formulaire. Le code source de sortie ressemble à ceci :
<tr>
<td class="col_0"></td>
<td class="col_1">
<div id="submit_container">
<input type="submit" id="ctrl_2" class="submit" value="Submit form" />
</div>
</td>
</tr>
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).
{{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é).
<span lang="de" xml:lang="de">Ich denke nie an die Zukunft. Sie kommt früh
genug.</span>
{{last_update}}
Cette balise d'insertion sera remplacée par la date et l'heure de la dernière mise à jour selon le format de date global.
{{last_update::format}}
Cette balise d'insertion sera remplacée par la date de la dernière mise à jour selon le format fourni en second argument.
Par exemple, remplacer format par Y/m/d donnera une date du type 2007/03/07. Vous trouverez plus d'informations sur le
formatage des dates sur http://www.php.net/date.
{{link::page}}
Cette balise d'insertion sera remplacée par un lien vers une page interne à votre site. Remplacez page par un identifiant de
page ou un alias.
{{link::login}}
Cette balise d'insertion sera remplacée par un lien vers la page d'identification de l'utilisateur courant et il est seulement
montré s'il y a un utilisateur connecté. Vous pouvez aussi l'utiliser avec link_open, link_url et link_title.
{{link_open::page}}
Cette balise d'insertion sera remplacée par la balise d'ouverture d'un lien vers une page interne à votre site. Donc vous
pouvez utiliser un texte personnalisé ou une image comme lien :
{{link_open::page}}mon texte</a>
{{link_url::page}}
Cette balise d'insertion sera remplacée par l'URL d'une page interne. Donc vous pouvez faire un lien sur une page interne :
{{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 » :
{{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}}
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.
20. Crédits 56
21. Licence
Creative Commons
Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported
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.
21. Licence 57