Table des matières ! "

Transcription

1 Table des matières Introduction...1 But... 1 Principes généraux...1 Interface d'administration et mode «Aperçu»... 1 Arborescence... 3 Pages spéciales... 5 Contenu de page... 9 L'édition et la création de pages et de contenu...10 Édition de pages Mode de sauvegarde Nouvelle page Paramètres de visibilité Pages cachées, apparitions programmées, etc Rédaction dans l'éditeur de texte : Gras, italique, liste à puces, insertion d images Insérer des liens Options secondaires «Palettes» Rédaction en mode «Aperçu» Ce didacticiel vous présentera les principes de base de TYPO3 et il vous aidera lors de la création de votre premier site Web TYPO3. Après la lecture de ce didacticiel, vous aurez une bonne base pour travailler avec TYPO3. D'autres didacticiels seront disponibles pour présenter les fonctionnalités plus avancées.! " TYPO3 a deux aspects : l'interface d'administration et le mode «Aperçu». Tandis que le mode «Aperçu» est visible par tous sur le Web (c'est le site Web généré par TYPO3), seuls les auteurs de site (c est-à-dire vous) ont accès à l'interface d'administration, l'édition du site Web. Un nom d'usager et un mot de passe sont toujours exigés. Connexion Maintenant, tapez votre nom d'usager et votre mot de passe. Vous avez reçu cette information par courriel lors de la création de votre compte TYPO3 : Débuter avec Typo3 - partie 1 1

2 ASTUCE : Assurez-vous que l'utilisation des cookies soit acceptée dans votre navigateur! Si vous avez désactivé les cookies, vous ne pouvez pas vous connecter! Si votre nom d'usager et le mot de passe sont validés, votre écran devrait ressembler à ceci : Modules de l'interface d'administration Dans l'interface d'administration, il y a plusieurs modules dans le menu de gauche. Lorsque vous voulez éditer et créer des pages, choisissez le module «Page». Chaque module a son propre contenu à afficher. Vous avez accès à tous les modules choisis par votre administrateur pour vous! Essayez de cliquer sur les divers modules dans le menu pour voir comment la zone de contenu change. Débuter avec Typo3 - partie 1 2

3 L'en-tête «Web», dans le menu, est appelé module principal et tous les modules inscrits en dessous sont des sous modules. Tous les modules, sous le module principal Web, montreront une vue double dans le cadre de contenu : l'arborescence (gauche #1) et le contenu de la page de l'arborescence (droite #2). L'arborescence peut être étendue en cliquant sur l'icône plus/moins (#3). Cela fonctionne exactement comme des dossiers sur votre propre ordinateur. En réalité, vous pouvez comparer l arborescence des pages à une structure de répertoires où les pages Web sont organisées dans une hiérarchie avec des pages principales, des sous pages, des sous sous-pages, etc. (Voir page suivante) Clic sur titres et icônes Une autre chose importante à savoir sur l'arborescence des pages est que vous pouvez cliquer tant sur l icône de la page que sur le titre de la page, mais il y a une différence! Si vous cliquez sur le titre de la page, vous verrez que le module actuel affiche un certain contenu dans le cadre de droite : Dans ce cas, le module «Page» est actif et vous verrez ensuite le contenu de la page apparaître dans le cadre de droite. D'ici, vous pouvez l'éditer etc. Nous verrons ceci plus loin. Débuter avec Typo3 - partie 1 3

4 Si vous cliquez sur l'icône de la page, au lieu du titre, un petit menu contextuel apparaîtra. Remarque : Si vous utilisez des navigateurs plus vieux, le menu n'apparaîtra pas près de l'icône, mais dans le cadre supérieur de l'interface d'administration. Le menu peut prendre quelques secondes pour apparaître. Dans le menu contextuel, vous pouvez choisir les options offertes pour cette page. Pour la plupart d'entre elles, leur fonction est évidente. Par exemple, Visualiser signifie qu'une nouvelle fenêtre de navigateur s ouvrira, affichant cette page spécifique visible en mode «Aperçu» : Remarquez la façon dont cette page est affichée. Dans TYPO3, chaque page est stockée dans la base de données et chaque enregistrement a un numéro unique. Ici le paramètre appelé id (*1) prend la valeur 1020 et fait référence à la page choisie. Vous pouvez voir que le contenu de pages (*2) est le même que celui dans le cadre de droite du module de Page lorsque l'on clique sur le titre. Remarquez le titre de page (*3). C'est le nom que vous avez donné à votre page et qui apparait dans votre arborescence. Débuter avec Typo3 - partie 1 4

5 La dernière chose à remarquer est le menu dans le cadre de gauche. Il reflète clairement la hiérarchie que nous avons aussi vue dans l'arborescence des pages : En maintenant la souris sur l'icône d'une page pendant une seconde, vous verrez l'id de cette page apparaître : Ce ID vous permettra de retrouver rapidement un page à éditer en saisissant ce chiffre dans la boite ci-dessous (située au bas de votre écran). # Il existe plusieurs types de pages possibles et celles-ci seront représentées de différente façon dans l'arborescence de page. C'est sous «Éditer l'entête de page» que vous pourrez choisir le type d'une page. Absent du menu Dans notre exemple, la page Courriel n est pas affichée car elle a le type Absent du menu. C'est utile si vous voulez créer une page qui ne doit pas apparaître dans le menu. Vous pouvez tout de même avoir accès à la page en créant un lien manuellement, ou en tapant juste son numéro d'identification dans l'url (l'adresse Internet) directement. Une icône de page grise apparaîtra à coté de la page dans l'arborescence indiquant que c'est une page de type Absent du menu. Débuter avec Typo3 - partie 1 5

6 Le type Absent du menu peut être affecté en cliquant sur «Éditer l'entête de page» : Dossier système Par défaut, les pages créées dans TYPO3 contiennent du contenu Web et apparaissent dans le menu. Mais les pages peuvent aussi servir de conteneurs d éléments qui n ont pas pour but d être affichés. Les «Dossier système» sont donc des dossiers qui organisent des éléments à l'intérieur de TYPO3. Par exemple, un Dossier système «Users» pourrait contenir les utilisateurs Web pouvant se connecter sur votre site. Vous pouvez voir le contenu du Dossier système en utilisant le mode «Liste», qui est l'explorateur à l'intérieur de TYPO3, si votre administrateur vous en a donné le droit. Débuter avec Typo3 - partie 1 6

7 Raccourcis En plus des types de pages qui ne sont pas visibles dans le menu, il y a aussi une icône de Raccourci : Un raccourci est une fonction qui, si vous avez une page vide (sans contenu), saute simplement à une autre page. Voilà une fonction très pratique si vous voulez toujours que le lien apparaisse dans le menu par exemple. Dans notre cas, la première page du site saute à la page d'accueil. Vous utilisez le «Navigateur d'éléments» pour choisir la page à laquelle vous voulez vous référer. Le «Navigateur d'éléments» est utilisé pour créer des relations entre des enregistrements et des fichiers dans les fenêtres TYPO3. Débuter avec Typo3 - partie 1 7

8 Mount Page Le type «Mount page» permet de faire voir le contenu d'une autre page à l'intérieur de notre page. Ce lien peut aussi se faire entre deux sites qui nous appartient. Cela peut faciliter l affichage de la même page plusieurs fois sans être obligé de la dupliquer. On n'a donc qu'une seule page à mettre à jour, facilitant ainsi grandement l'entretien de notre site. On reconnaît une page de type «Mount page» par l'icône rouge. Lors de la création d'une page de type «Mount page», on doit choisir quelle page on veut faire afficher au lieu de la page actuelle: Aide directe! Maintenant, que permettent de faire tous les autres types de pages? Vous pouvez le découvrir directement si vous cliquez sur l'icône «?» près du champ Type. Alors une fenêtre comme celle-là apparaît : Débuter avec Typo3 - partie 1 8

9 Elle est appelée Aide contextuelle et peut être affichée pour presque tous les éléments dans TYPO3 où vous avez besoin d'une certaine information sur sa fonction. Utilisez-là! C'est facile et rapide d accès quand vous travaillez à l'intérieur du système. NOTE : l'aide contextuelle n'est disponible qu'en anglais pour l'instant. $ Maintenant que nous avons regardé l'arborescence des pages, vu comment l'arborescence est reflétée dans la hiérarchie de menu du site Web et comment les pages peuvent être vues etc, vous devez sûrement vous questionner sur l organisation du contenu d une page? Le contenu de la page est composé de différents blocs de contenu. Comme chaque bloc de contenu peut avoir un type différent, vous pouvez créer des pages avec des structures très flexibles. Ordre des blocs de contenu Revenons aux blocs de contenu de la page Web et jetons un coup d'oeil à l'interface d'administration. Vous pouvez réorganiser les blocs de contenu de l'interface d'administration en les déplaçant vers le haut ou vers le bas en cliquant sur les flèches : Débuter avec Typo3 - partie 1 9

10 % # & Nous savons que les pages sont divisées en plusieurs blocs de contenu. Donc, la rédaction d'une page passe par l édition d'un bloc de contenu. Il est vraiment facile d'éditer le contenu d'une page dans TYPO3. Choisissez le module de Page (*1), cliquez sur le titre de la page que vous voulez éditer (*2) et cliquez sur l'icône d'édition (*3) du bloc de contenu de page que vous voulez changer. Vous pouvez aussi cliquer sur le texte du bloc de contenu ou encore sur le bouton «Éditer dans l'éditeur de texte». Alors apparaît cette fenêtre de saisie : Tout d'abord le champ Type (*1) vous dit le type du contenu de page; dans ce cas «Texte». Ce pourrait aussi être «Image» ou «Texte et Image» etc. Chaque type de bloc de contenu a une apparence et des champs qui lui sont propres et en insérant des blocs différents, vous pouvez réaliser des pages très différentes sur votre site Web. En général, plus un élément se situe en bas de la liste moins il est utilisé et compliqué à mettre en œuvre. L'élément le plus utilisé est le «Texte» ou le «Texte et image». Débuter avec Typo3 - partie 1 10

11 Le champ «Titre» (*2) contient le titre du bloc de contenu et le champ «Texte» (*3), le corps de la page. Sur la page Web cela correspond à : ' Si vous utilisez Enregistrer et visualiser le document, la fenêtre du mode «Aperçu» apparaît automatiquement au bout de quelques secondes. TYPO3 a envoyé le changement au serveur, mis à jour la base de données avec la nouvelle information, effacé le cache de la page et a régénéré la page. Le changement est immédiatement mis en ligne. Il est aussi facile que cela de maintenir des pages Web avec TYPO3! Débuter avec Typo3 - partie 1 11

12 Si vous utilisez Enregistrer le document (la disquette seule), cela vous permet de sauvegarder sans voir le résultat mais en conservant la fenêtre d'édition ouverte. Cela est bien pratique lorsqu'on veut faire des sauvegardes par sécurité. La disquette avec un X, Sauvegarder et fermer le document, permet de faire une mise à jour sans visualiser la page et en quittant le mode «Édition». À utiliser lors de modifications mineures seulement, car il est toujours préférable de valider nos modifications, juste au cas où... ( ## La création de nouvelles pages est très facile puisque celles-ci sont toujours organisées dans la hiérarchie de l'arborescence des pages. Vous devrez d'abord sélectionner une position pour la page. Évidemment, vous pouvez la changer plus tard si vous le souhaitez. Pour créer une nouvelle page, utiliser le module «Page», cliquer sur «Nouvelle Page» pour démarrer l assistant de création d une nouvelle page qui vous aidera à définir la position de la nouvelle page. Alors un sélecteur de position apparaîtra. Puis vous choisissez la position en cliquant : Débuter avec Typo3 - partie 1 12

13 Puis, la fenêtre pour la création d une nouvelle page apparaît et vous pouvez donner un titre à votre page. Sauvegardez et quittez. L'arborescence est mise à jour automatiquement. La page est par contre encore blanche (vierge), nous devons alors créer quelques blocs de contenu de page. La création de contenu Dans le module «Page», cliquez sur le titre de la page à éditer dans l'arborescence des pages et ensuite sur le bouton «Créer un contenu dans la page» ou sur «Nouveau contenu» : Immédiatement apparaîtra le formulaire suivant vous permettant de choisir un type de contenu de page. Exemple de création avec «Texte et image en dessous» : Nous obtenons cette fenêtre. Saisissez du texte et choisissez une image à partir de votre disque dur en cliquant sur «Parcourir» : Débuter avec Typo3 - partie 1 13

14 Si votre image se trouve déjà dans votre banque d'images, cliquez plutôt sur l'icône et choisir l'image désirée. Appuyez sur le bouton Enregistrer le document. L'image est téléchargée sur le serveur et attachée au nouveau bloc de contenu. Cela devrait ressembler à ceci : Insertion d'un autre élément de contenu De retour dans le module «Page», est affiché clairement le nouvel élément de contenu : Cliquez sur le bouton Nouveau contenu pour créer un autre contenu de type (exemple: liste à puces) : Débuter avec Typo3 - partie 1 14

15 Nous devons également définir où placer ce nouveau contenu. Avant ou après le contenu existant? Il ne reste qu'à saisir le contenu de la liste; une ligne équivaut à une puce. Remarquez que le «Type» a été prédéfini à «Liste à puces»; cela aurait pu être choisi manuellement. Vous pouvez aussi le changer plus tard. Si vous voulez connaître les différents types de contenus disponibles, utilisez l icône «?». Nous avons maintenant une page a deux éléments de contenu, le type «Texte et image» et un type de «Liste à puces» dans cet ordre. Dans le module Page cela ressemble à : Gestion des blocs de contenu Nous avons utilisé l'assistant de création de contenu pour créer de nouveaux contenus. Cependant, les assistants dans TYPO3 exécutent une tâche rapide et simple en validant directement les options importantes. Mais toutes les fonctions peuvent être choisies, réglées et contrôlées manuellement. Prenez votre temps pour explorer les boutons et les options. Il y a beaucoup de possibilités et vous ne les maîtriserez qu en manipulant les diverses fonctionnalités de TYPO3. Voici quelques exemples de fonctions de l'interface que vous pouvez essayer : Débuter avec Typo3 - partie 1 15

16 (*1) Créer un nouveau bloc de contenu de page après celui-ci. Vous arriverez par défaut à un élément de type «Texte», puis changer ce type pour celui que vous souhaitez ajouter. (*2) Le bouton Déplacer vers le bas peut être utilisé pour changer l'ordre des blocs de contenu dans la même page (*3) Le bouton Masquer/Afficher est une façon rapide de changer le statut de visibilité du contenu. (*4) La poubelle vous permet de supprimer totalement le bloc de contenu (en réalité, il peut être restauré si vous le supprimez par accident). (*5) Si vous désirez éditer le contenu d'un bloc de contenu, vous pouvez utiliser le bouton Éditer dans l'éditeur de texte. Ceci affichera une fenêtre «plein écran» pour éditer le texte; agréable s'il y a beaucoup de texte. (*6) En cliquant sur l'icône Type de bloc de contenu, vous pouvez faire apparaître le menu contextuel. (*7) Vous pouvez éditer non seulement un élément de contenu de page à la fois, mais deux (ou plus) en cliquant sur l'icône Éditer la colonne. (*8) Vous pouvez utiliser les fonctions «Copier», «Couper» et «Coller après» du menu de contextuel. Celles-ci vous permettent même de faire des copies et des déplacements à partir d autres pages! Déplacement de pages Le déplacement d'une page est aussi très simple avec l'assistant disponible dans le module Page. Débuter avec Typo3 - partie 1 16

17 Vous verrez une partie de l'arborescence des pages. En cliquant sur la page supérieure, vous montez d un niveau : Et par un simple clic, vous avez déplacé la page à sa nouvelle position : L'arborescence des pages est immédiatement mise à jour. L'utilisation du copier/coller pour déplacer une page L'assistant Déplacer la page est un outil intuitif pour les débutants. Cependant, pour déplacer des blocs de contenu ou des pages, vous devriez utiliser le presse-papiers interne. Il travaille sensiblement comme sous Windows. Le même principe est mis en oeuvre dans TYPO3. Cliquez sur l'icône de page ou sur l'icône du type d'un bloc de contenu pour faire apparaître le menu contextuel. Choisissez «Couper», sélectionnez le dossier où vous voulez l'insérer et utilisez «Coller après» ou «Coller dans» selon le cas, du menu contextuel. «Coupez» la page : «Coller après» la page : Débuter avec Typo3 - partie 1 17

18 Remarque : des concepts cohérents! Les mêmes principes de copier/couper/coller peuvent être utilisés non seulement avec des pages, mais aussi des blocs de contenu de page. C'est un exemple démontrant que TYPO3 utilise les mêmes concepts partout dans le système. Ainsi, une fois que vous avez assimilé une fonction, beaucoup d'autres fonctions vous semblent évidentes! ) #* +,,- Une fonction disponible pour beaucoup d'éléments, en particulier les pages et les blocs de contenu. Ils utilisent les champs de contrôle de publication ou les paramètres de visibilité. Ils ressemblent à ceci pour les pages : Pour les blocs de contenu, ils ont cette forme : Masquage d'une page Cochez «Page cachée» : Débuter avec Typo3 - partie 1 18

19 L'icône de page devient sombre et il y a une petite croix rouge qui apparaît. La page est maintenant cachée! Il est donc impossible pour les internautes de voir la page: Il est très important de choisir Visualiser du menu contextuel de votre page cachée si vous voulez la voir, car elle n'apparaîtra pas non plus dans vos menus. En effet, quand vous êtes authentifié dans l'interface d'administration, les pages cachées peuvent être vues mais un carré rouge nommé Preview vous indiquera que cette page est cachée et visible que par vous. Débuter avec Typo3 - partie 1 19

20 Programmation de l affichage des pages et des blocs de contenu Décacher des pages et des blocs de contenu est probablement l option la plus utilisée de la visibilité. Elle est si commune, qu'elle a son propre lien dans le menu contextuel. De plus, vous pouvez déterminer le moment (la date) où une page doit être publiée. Cette fonction est aussi disponible directement dans le menu sous Options de visibilité. Par exemple, saisissez «d+10» dans le champ Lancement : Automatiquement la date est transformée à la date actuelle plus 10 jours. En sauvegardant la page et en maintenant la souris sur l'icône, vous pouvez aussi voir cette programmation : Cette page n'est pas visible actuellement et sera automatiquement visible le 28 mai de l'année 2004, 10 jours plus tard! C'est aussi simple que ça de programmer des publications. Les mêmes principes sont valables pour le champ «Arrêt». Vous pouvez aussi utiliser cette technique sur les blocs de contenu.. # /0, #1,# 2, 3 Lorsque vous travaillez avec le corps du texte de vos pages, vous pouvez utiliser les mêmes principes de formatage que ceux utilisés dans votre traitement de texte. Si vous utilisez TYPO3 avec Microsoft Internet Explorer, vous avez accès à un Éditeur de texte pour le corps du texte. Débuter avec Typo3 - partie 1 20

21 NOTES Idéalement, vous ne devriez pas toucher aux fonctions de formatage de texte (grosseur, police et couleur) à moins d'un besoin spécifique, car votre gabarit à été configuré pour fournir une mise en page constante de votre texte. De même, pour l'insertion d'image, vous devriez plutôt utiliser un bloc de contenu de type «texte et image»; vous aurez ainsi un meilleur contrôle du résultat final. Considérations sur «Éditeur de texte» Comme vous pouvez le constater, vous pouvez : a) créer des listes à puces intégrées dans les champs de corps du texte ou b) créer un bloc de contenu de type liste. Vous pouvez combiner les deux approches. Personnellement, je préfère créer la liste à puces à l'intérieur du corps du texte, avec l'éditeur de texte, mais si un usager sans Microsoft Internet Explorer ou qui utilise un ordinateur Macintosh doit éditer la liste, il ne pourra le faire! C'est donc à vous de choisir la technique la plus convenable. # Les liens hypertextes sont la base de l Internet. Dans TYPO3, des liens sont créés automatiquement, puisque la structure hiérarchique des pages crée vos menus. Dans l éventualité de vouloir créer des liens vers un autre bloc de texte d'une autre page, un fichier, un autre site Web ou une adresse électronique, c'est très facile si vous utilisez l'éditeur de texte. Sélectionnez simplement le texte et appuyez sur «Insérer un lien». Débuter avec Typo3 - partie 1 21

22 Cliquez alors sur le titre de la page désirée :... et le lien est créé : Autres sortes de liens Vous pouvez créer des liens vers des fichiers et des sites Web externes, ou encore des liens vers un contenu spécifique d une autre page. Finalement, des liens pour envoyer un courrier électronique peuvent aussi être créés. Choisissez alors dans le menu et indiquez une adresse électronique : Essayez les autres, vous verrez que c'est très simple. 4 * # " Jusqu ici, TYPO3 s'en est tenu au concept de champs primaires et secondaires. Les fenêtres de rédaction dans TYPO3 contiennent plusieurs champs et d autres peuvent y être ajoutés. Or, avec trop de champs visibles, il n est plus évident de travailler pour l'utilisateur moyen; en particulier si vous êtes un débutant et que vous avez beaucoup de nouvelles choses à apprendre. Le concept de champs primaires et secondaires signifie que, normalement, vous ne voyez que les champs les plus importants et généralement utilisés (primaires). Les options plus détaillées sont cachées dans les champs secondaires que l'on dévoile à la demande. Considérez cette fenêtre : Débuter avec Typo3 - partie 1 22

23 Deux champs visibles vue d'ensemble facile. Par contre, si vous cliquez sur une des icônes à côté des champs, vous trouverez les options secondaires visibles dans la palette (le cadre supérieur) : C'est pratique - nous avons beaucoup d'options et de détails mais ils sont masqués jusqu'à ce que nous en ayons besoin. Par contre, quand l'une de ces options secondaires vous est nécessaire et que vous ne pouvez pas vous souvenir derrière quelle icône elle est (ou si vous utilisez le champ régulièrement), il pourrait alors être ardu ou long de les trouver. C'est pourquoi vous pouvez activer l'option Afficher la palette d'options secondaires au bas de toutes les fenêtres d'édition. Ceci donne une grande fenêtre à plusieurs champs. Mais toutes les options sont disponibles immédiatement : Remarquez que chaque rangée d'options correspond exactement à ce que vous aviez dans la palette (dans le cadre supérieur) lorsque vous cliquiez sur l icône «Plus d'options». Débuter avec Typo3 - partie 1 23

24 .! " Le dernier point concerne la rédaction de pages avec la fonction d'édition en mode «Aperçu». C'est une autre façon de procéder que vous découvrirez et utiliserez si vous trouvez cette technique plus appropriée à votre façon de travailler. Mais la rédaction depuis l'aperçu n'est pas juste un nouveau bouton, cela pourrait être une véritable révolution dans la façon que vous aurez de travailler. Vous avez probablement remarqué les petites icônes d'édition (crayon) qui sont apparus sur la page Web. Essayez de cliquer sur l'un d'entre eux : Vous êtes immédiatement redirigé vers une fenêtre où seulement le champ titre et d'autres informations appropriées peuvent être éditées. La rédaction depuis l'aperçu est très intuitive et parfaite pour corriger de petites erreurs et faire de petits ajustements, excellent pour les débutants de votre équipe. Donc, tout le monde peut éditer mes pages? Non, seulement si vous êtes identifiés et connectés dans l'interface d'administration. Autrement, les icônes sont cachées Fin de la première partie Débuter avec Typo3 - partie 1 24

25 Pour obtenir plus de renseignements, il est possible d'acheminer une demande à l'une ou l'autre des personnes suivantes selon vos besoins. Besoin d'un site, de formation ou de soutien pour intégrer cette technologie à votre pédagogie? Jean-Guy Fallu Conseiller pédagogique aux technologies éducatives Service du développement pédagogique et institutionnel Direction des études Téléphone : , poste 4276 Besoin de soutien technique? Annie Raymond Webmestre institutionnel Service des télécommunications et de l informatique Direction des services administratifs Téléphone : , poste 3825 Extension Key: doc_tut_quickstart - Copyright 2003,, <> Traduction : Raphaël Geyer / Benoît Chambard < Adaptation: Annie Raymond pour le Cégep de Sainte-Foy This document is published under the Open Content Licenseavailable from The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from Débuter avec Typo3 - partie 1 25