sites web clé en main - cnerta supportcnerta-support.fr/aides/typo3/guide_typo3_201501.pdf · un...

p.1/159

Sites web clé en main

Guide d'utilisation – version janvier 2015

Gestion du contenu des sites avec Typo3

SOMMAIRE

A- ORGANISATION ET FONCTIONNEMENT DU SITE ……………………………………….

2

B- RECOMMANDATIONS EDITORIALES ……………………………………………………

5

C- FICHES D'UTILISATION TYPO3 …………………………………………………………

01 – Présentation de Typo3 ………………………………..…………………………………..… 13 02 – S'identifier et se repérer dans le "Backend" ……………...…………………………….… 14 03 – Charte graphique ………………………………………………………...……………….…. 23 03 bis – Charte graphique – Spécificités des sites clés en main …………….………………. 24 04 – Créer ou modifier une page ………………………………………………………………… 38 05 – Gérer les pages (copier, couper, supprimer, …) ……………………………...…………. 47 06 – Gérer les ressources (PDF, images, …) dans l'arborescence des fichiers ……...……. 53 07 – Créer ou modifier des éléments de contenus dans une page ……………………..…… 57

> Titre …………………………………………………………………………………………. 61 > Texte ………………………………………………………………………………………... 63 > Texte avec image / image seule …………………………………………………………. 75 > Lien ……………………………………………………………………………………….… 81 > Tableau …………………………………………………………………………………..… 86 > Enregistrement …………………………………………………………………………….. 90 > Référence ………………………………………………………………………………….. 93 > Modèle de contenu (Contenu flexible) ………………………………………………….. 97 > Menu ………………………………………………………………………………….…….. 100 > HTML ……………………………………………………………………………………….. 102 > Vidéo ………………………………………………………………………………….…….. 104 > Média ……………………………………………………………………………………….. 107 > Cartographie ……………………………………………………………………..………… 109 > Formulaire de contact ………………………………………………………..…………… 116 > Galerie photos ………………………………………………………………...…………… 121

08 – Gérer les éléments de contenus d'une page (copier, couper, supprimer, …) …….….. 131 09 – Gérer les actualités ………………………………………………………………………….. 136 10 – Flux RSS ……………………………………………………………………………………... 141 11 – Gérer un glossaire …………………………………………………………………………... 142 12 – Gérer la création et les droits des utilisateurs ……………………………………………. 144 13 – Générer les statistiques de fréquentation du site ………………………………………... 152 14 – Aide au référencement ……………………………………………………………………… 156

GUIDE TYPO3 A – Organisation et fonctionnement

p.2/159

A – ORGANISATION ET FONCTIONNEMENT DU SITE

� Structure du site � Etapes préalables à la conception du site � Acteurs � Mentions légales

STRUCTURE DU SITE Un site est structuré, de manière générale, en 4 grandes parties :

� une page d'accueil � un menu principal comprenant toutes les pages du site autre que celle d'accueil : ces pages constituent

l'arborescence du site et sont déclinées généralement sur 3 niveaux � un menu "outils" comprenant par exemple les pages suivantes :

� le retour à page d’accueil du site � la page des actualités � le plan du site � la page contact (coordonnées de l'organisme et formulaire de contact par exemple)

� un pied de page comprenant au moins les mentions légales du site Il existe 2 types de pages :

� la page d'accueil � toutes les autres pages appelées "pages de descente"

Un exemple d'arborescence d'un site d'un organisme quelconque pourrait être le suivant :


p.3/159

ETAPES PREALABLES A LA CONCEPTION DU SITE Avant de saisir le contenu du site, il est indispensable de réfléchir à l’architecture de celui-ci. Voici quelques indications afin d’optimiser la construction du site :

1. Définir le contenu brut du site Web c’est-à-dire réfléchir aux textes et images qui constitueront le site, sans mise en forme. 2. Définir le scénario de consultation (ou de navigation) pour l’ensemble des contenus du site. Cette étape aide à définir l’architecture des pages avant de réfléchir à celle des contenus au sein de chaque page. Il s’agit de définir le nombre de pages à construire, le lien entre ces pages et leur enchaînement. 3. Schématiser l’arborescence du site sur papier en s’aidant de l’exemple présenté précédemment. 4. Réunir les contenus des pages (textes, documents, images), il s’agit là d’organiser les contenus bruts en fonction du scénario imaginé. 5. Cas particulier Il est possible que certaines pages n’aient pas de contenu. En effet, les informations nécessaires à ces rubriques sont contenues dans leurs sous pages. Pour ne pas laisser de page blanche, il est judicieux de faire apparaître un menu composé de liens vers les différentes sous pages. Par exemple une page "Présentation » comme ci-dessous :

ACTEURS Il existe, de manière générale, deux types de profils sur les sites : administrateur et rédacteur La tâche des rédacteurs est de créer et saisir de nouveaux contenus, de les adapter et les intégrer au site Web. L’administrateur attribue au préalable des droits aux rédacteurs. Dès lors, ils accèdent à un espace de travail qui correspond aux tâches et aux ressources qui leur sont allouées. Il est conseillé de limiter le nombre de rédacteurs afin de conserver une homogénéité éditoriale. Il ne faut pas qu'au fur et à mesure que l'on navigue sur le site, on se rende compte nettement que plusieurs rédacteurs interviennent dans la mise à jour des contenus. L’administrateur possède les mêmes droits que les rédacteurs. Il peut en outre gérer les utilisateurs et dans certains cas configurer le site en personnalisant la charte graphique ou d'autres éléments spécifiques du site.

Liens vers les sous pages de

« Présentation »


p.4/159

MENTIONS LEGALES Les mentions légales sont obligatoires dans un site web. Elles permettent d'informer les internautes sur l'identité de l'organisme gérant le site (tant au niveau maintenance éditoriale que technique). Elles sont gérées dans une page du site "Mentions légales" réservée à cet effet. Exemple de mentions légales : Direction de la rédaction Nom et prénom du directeur Adresse de l'organisme Responsabilité éditoriale Nom et prénom du directeur Adresse de l'organisme Conception graphique AGROSUP DIJON – EDUTER -CNERTA 26 bd Docteur Petitjean BP 87999 21079 Dijon Cedex Développement et hébergement AGROSUP DIJON – EDUTER -CNERTA 26 Bd Dr Petitjean, B.P. 87999 21079 Dijon Cedex Ce site web a été réalisé avec le système de gestion de Contenu TYPO3 - get.content.right. Typo3 est un logiciel open source créé par Kasper Skaarhoj et placé sous licence GNU/GPL. Information et contribution : http://www.typo3.com Contenus, droits d'auteurs et liens Malgré tout le soin que nous apportons pour préserver l'intégrité des documents mis en ligne, des erreurs ne peuvent être totalement exclues. Par ailleurs, des liens vers d'autres sites, privés ou officiels, français ou étrangers, sont proposés dans ce site, ils n'engagent en aucun cas les responsables du site quant à leur contenu et ne visent qu'à permettre à l'internaute d'accéder plus facilement à d'autres ressources documentaires sur le sujet consulté. Si vous constatez des erreurs, merci de nous les signaler en nous adressant un message électronique au moyen du formulaire mis à votre disposition. Protection des données personnelles Aucune information personnelle n'est cédée à des tiers. En application de l'article 27 de la loi Informatique et Libertés n. 78.17 en date du 6 janvier 1978, toute personne dispose d'un droit d'accès, de rectification, de modification et de suppression concernant les données qui la concernent. Elle peut exercer ce droit en envoyant un courrier électronique aux responsables du site.

GUIDE TYPO3 Fiche 14

p.5/159

B – RECOMMANDATIONS EDITORIALES

1- Du papier à l'écran : une nécessaire adaptation de l'ecrit 1.1- L'art de la concision 1.2- La règle dite de la "pyramide inversée" 1.3- Structuration des contenus : l'arborescence 1.4- Le réflexe dossier 1.5- Ergonomie et mise en forme

2- Composition d'un document à mettre en ligne 2.1- Titre 2.2- Chapeau 2.3- Développement 2.4- Conclusion 2.5- Sources 2.6- Liens 2.7- Illustrations

3- Rappel de quelques règles typographiques 4- Collecte et traitement des contenus à mettre en ligne

4.1- Collecte des documents 4.2- Règles spécifiques par type de document

5- Aspects juridiques

1- DU PAPIER A L 'ECRAN : UNE NECESSAIRE ADAPTATION DE L 'ECRIT La mise en ligne d'un document initialement prévu pour une diffusion papier ne se réduit pas à effectuer quelques "copier-coller" ou à produire un fichier PDF téléchargeable. Les informations diffusées sur un site web doivent être préparées spécifiquement afin de favoriser leur appropriation par le public cible du site web concerné. 1.1- L'art de la concision Différentes études s'intéressant à la vitesse de lecture et à la compréhension de documents diffusés sur supports papier et numérique ont été menées ces dernières années et parmi les conclusions on note que :

• sur le Web, 80% des lecteurs ont une lecture de typ e "balayage" (qui consiste à parcourir le texte afin de savoir si une information est présente ou pour localiser une information dont on sait qu'elle fait partie du texte) contre seulement 10% environ qui ont une lecture "réceptive" (mot à mot),

• la lecture à l'écran est plus lente que la lecture de documents imprimés de 25% environ à cause de la résolution du moniteur, de la luminosité et du scintillement qui provoquent de la fatigue et peuvent gêner la lecture,

• plus le texte est long, moins l'internaute le lit : concrètement par exemple, un internaute lit en moyenne 50% d'un texte de moins de 111 mots et seulement 20% d'un texte de 600 mots.

Par conséquent, il est fortement recommandé qu'un texte destiné à être mis en ligne soit au minimum 2 5% (voire 2 fois) plus court qu'un texte publié sur support papier. Pour autant, réduire un texte de moitié ne doit pas être synonyme de perte d'information et les recommandations suivantes peuvent aider à la réalisation de documents informatifs de qualité. 1.2- La règle dite de la "pyramide inversée" La lecture à l'écran est exigeante et, pour éviter que l'internaute ne quitte le site par lassitude, il convient de capter son attention dès les premiers mots . Contrairement au lecteur "papier", l'internaute ne peut, lui, feuilleter aussi aisément les pages web pour aller directement à la conclusion. Il s'agit donc de rédiger les articles à la manière des journalistes de presse écrite : en positionnant les éléments essentiels dès les premières lignes et en reléguant au niveau des dernières pages les éléments génériques, de contexte ou de détail.


p.6/159

Ce mode d'écriture remonte à l'invention de l'imprimerie : à cette époque là, compte tenu des contraintes de cette nouvelle technique, ce n'était pas l'auteur qui déterminait la longueur de son texte mais l'imprimeur qui "coupait" ce qui dépassait du cadre de la page, en veillant toutefois à s'arrêter en fin de phrase ou de paragraphe. Les auteurs se sont donc adaptés à cette contrainte en positionnant dès les premiers mots les informations essentielles et en reléguant aux dernières lignes les éléments de détails pouvant être supprimés si besoin par l'imprimeur. Cette pratique est restée et il est possible, encore aujourd'hui, de s'essayer à l'exercice de la "coupe" sur les articles rédigés notamment par les journalistes de l'AFP.

Exemple : Le Musée de l'Homme lance sa rénovation, pour quatre ans (2009-03-03 16:05:53 - PARIS - AFP) Le Musée de l'Homme du Trocadéro à Paris s'engage ce mois-ci dans une profonde rénovation pour devenir un espace présentant l'Humanité dans sa relation à la nature, a annoncé mardi le directeur général du Muséum national d'Histoire naturelle (MnHn), Bertrand-Pierre Galey. Le projet de rénovation, qui durera jusqu'en 2012, représente "un vrai projet scientifique", et devra "faire entrer dans le bâtiment toute l'histoire de l'humanité, son passé et son avenir", a souligné M. Galey au cours d'une conférence de presse. L'Etat a affecté 52 millions d'euros à cette rénovation. Il s'agira, selon M. Galey, d'un "muséum d'histoire naturelle de l'espèce humaine", avec son aspect "culturel et dans sa relation avec la nature". Il devra montrer qu'à ses débuts, "l'Homme a été plutôt façonné par la nature", et qu'ensuite, il est devenu "acteur de l'évolution de la planète", a-t-il noté. A l'issue de la restructuration des 17.000 m2 du Musée, confiée à l'agence bordelaise constituée par Olivier Brochet, Emmanuel Lajus et Christine Pueyo, associés pour l'occasion à Emmanuel Nebout, 6.000 m2 seront réservés au public, dont 3.000 aux galeries permanentes et 1.000 aux expositions temporaires, salle de cinéma, etc. Le visiteur, a précisé le directeur de la rénovation, Jean-Pierre Mohen, suivra un parcours qui les emmènera dans 6 "temps", étapes de l'histoire de l'humanité, de ses débuts à aujourd'hui. Il partira de "l'Humanité, quelle est-elle ?" pour se rendre à "l'observatoire de l'Humanité", en passant par des étapes telles que "l'Homme et son corps" ou "l'Homme façonne son cadre de vie au sein des civilisations". Le Musée, qui dépend du MnHn, conservera par ailleurs ses activités de recherche et de conservation préhistorique et anthropologique, a rappelé M. Galey. Les départements scientifiques (laboratoires, réserves...) se verront ainsi allouer 4.200 m2, tandis que les services administratifs auront à leur disposition 2.100 m2.

L'article construit selon cette règle dite de la "pyramide inversée" démarre impérativement par les informations les plus importantes. L'idéal consiste à consacrer le premier paragraphe (éventuellement une seule phrase) aux réponses aux six questions suivantes (les "6W") :

• Quatre questions principales : 1 - What : de quoi s'agit-il ? 2 - Who : de qui s'agit-il ? 3 - When : quand cela est-il arrivé ? 4 - Where : où l'événement s'est-il produit ?

• Deux questions secondaires : 5 et 6 - Why et hoW : dans quelles circonstances ?

Les paragraphes suivants développeront ensuite une (et une seule) idée chacun. Sur le web, l'effet pyramide peut être obtenu non pas forcément au sein d'une même page, mais au travers de la navigation : ainsi, on pourra proposer, sur la page d'accueil, de brèves accroches, conduisant vers des articles plus complets, conduisant eux-mêmes vers des informations plus détaillées, jusqu'à remonter éventuellement aux sources elles-mêmes. 1.3- Structuration des contenus : l'arborescence La patience de l’internaute est extrêmement limitée, ce qui peut se comprendre dans un contexte où il est saturé d’informations. On ne peut donc pas lui demander d’apprendre à naviguer sur nos sites. D’où l’importance de l'arborescence qui doit être conçue pour lui et non pas en fonction d'un schéma administratif. L’arborescence est la colonne vertébrale du site, son tuteur ; on veillera donc à ce que cette structure soit compréhensible le plus tôt possible. Le nombre idéal des rubriques principales se situe entre 5 et 9 :

• Moins de 5 : l’information est peut être structurée trop en profondeur (l’idéal étant d’accéder à l’information souhaitée en 3 clics)

• Plus de 9 : l’utilisateur risque d’être perdu. Dans le cas d’un contenu long, il peut être utile de fournir à l'utilisateur une navigation supplémentaire (exemple : un sommaire, le pictogramme "remonter en haut"…).


p.7/159

1.4- Le réflexe dossier Très courante sur le web, cette technique permet de morceler un long texte en plusieurs pages et de les relier par un résumé et un sommaire . Cette solution offre l'avantage d'offrir des textes plus courts donc plus attrayants et donne la possibilité de "feuilleter" les pages web à la manière d'un livre. Elle est indispensable dès que le contenu à proposer dépasse la longueur recommandée d'une page web (une page web ne devrait pas dépasser 3 à 4 pages écrans [usage de l'ascenseur] ce qui équivaut à 1,5 voire 2 pages de traitement de texte). Elle ne permet en revanche pas d'accéder à la totalité de l'information en une seule page aussi est-il fréquent de proposer, en complément, l'intégralité du dossier s ous forme de fichier téléchargeable . 1.5- Ergonomie et mise en forme L'internaute "balaye" majoritairement les pages web pour ne s'arrêter que sur la partie qu'il souhaite lire en détail . Afin de faciliter sa lecture, il convient de mettre trois fois plus de mots en relief que dans un texte imprimé, au moyen notamment :

• des titres , sous-titres et intertitres (qui suggèrent les idées principales), • des énumérations verticales (listes ordonnées et listes à puces), • du style "gras " (un ou deux mots en gras par paragraphe permettent de mettre en valeur les idées

essentielles ou de localiser aisément celles à approfondir ; éviter toutefois de mettre en gras des phrases entières, car l'œil humain ne peut saisir plus de trois mots à la fois).

Pour mettre en valeur une information, il conviendra de limiter l'usage :

• des styles italique (difficilement lisible à l'écran et utilisable seulement pour de courtes citations) et souligné (réservé uniquement pour les liens hypertextes),

• des lettres capitales (majuscules) ; en effet, les synthétiseurs vocaux utilisés par exemple par les personnes malvoyantes ne font pas la différence entre un mot en lettres capitales et un sigle qui seront, l'un comme l'autre, lus lettre après lettre.

Informations complémentaires :

• http://blog.60questions.net/ : Le blog qui plaide pour un Web meilleur • http://www.cyberie.qc.ca/jpc/ecrire.html : Ecrire pour le web • http://www.ecrirepourleweb.com/ : Ecrire pour le web • http://www.redaction.be/ : Le site des spécialistes de l'information en ligne • http://www.references.modernisation.gouv.fr/charte-ergonomique : Charte ergonomique (sites internet publics)


p.8/159

2- COMPOSITION D'UN DOCUMENT A METTRE EN LIGNE Les textes et documents à mettre en ligne doivent être informatifs , concrets , factuels , objectifs , sans slogans publicitaires ou superlatifs , sans effets de style promotionnels , rédigés de préférence à la forme active et à la troisième personne (il, elle, ils ou elles). 2.1- Titre Prévoir impérativement un titre pour chaque page .

Le titre sera court (entre 4 et 10 mots ; limiter pour cela l'usage des articles, prépositions, adjectifs, adverbes, etc. non indispensables), explicite (vocabulaire compréhensible par le public visé) et décrivant le mieux possible le contenu de la page car il est susceptible d'être repris de manière autonome dans un sommaire dynamique ou dans un moteur de recherche et les internautes qui le découvrent doivent pouvoir saisir immédiatement le sens du contenu qu'ils liront s'ils cliquent sur le lien qui leur est proposé.

Le titre doit également être cohérent avec celui annoncé dans le sommaire du dossier concerné.

Pour un même dossier, il convient de choisir un "style" de titre (exemple : titre commençant par un nom ou bien au contraire par un verbe ou bien encore titre sous forme de question) et de s'y conformer tout au long du dossier . 2.2- Chapeau Le chapeau est, par définition, le "texte d’introduction qui coiffe un article" et "concentre en quelques lignes l’essentiel de l’information" (http://www.dglflf.culture.gouv.fr./presse/definitions.htm). Autrement dit, il est la première entame du contenu, juste après le titre, et pour cette raison, se doit de donner au lecteur les éléments-clés de l’information ("6W" : Qui, Quoi, Où, Quand, Pourquoi et Comment) et en même temps de lui donner envie de continuer sa lecture. 2.3- Développement C’est dans le développement que sont relatés les faits.

Il est recommandé : • de découper l'information en plusieurs paragraphes et de se limiter à une seule idée par paragraphe qui

apparaîtra dans la première phrase du paragraphe, • de déporter les informations complémentaires à la manière d'un magazine papier (encarts sur les chiffres

clés, page spéciale pour l'interview, etc.), • de limiter la longueur de la page à environ 3 "pages-écrans" , • d'utiliser des phrases courtes (15-20 mots ), au vocabulaire et au style simples, concrets, directs, et concis

(entre deux expressions équivalentes, choisir toujours la plus courte [par exemple, "sauf" plutôt que "à l'exception de"], remplacer les subordonnées relatives par deux phrases, etc.),

• d'utiliser des repères temporels absolus ("en janvier 2009" plutôt que "le mois dernier") pour assurer la pérennité du contenu,

• d'évitez les repères spatiaux propres au support papier ("ci-dessous", notes de bas de page, etc.) qui sont peu compatibles avec la navigation hypertextuelle.

2.4- Conclusion La conclusion peut être une synthèse, une interpellation, un rappel de l’introduction, une question ouverte… 2.5- Sources Un article rigoureusement documenté gagne en crédibilité (à condition que les sources citées soient vérifiables).

Les deux éléments indispensables sont l'auteur et la date (date de mise en ligne ou date de la dernière mise à jour significative du document) mais il est possible également de préciser l'éditeur, le support, etc.


p.9/159

2.6- Liens Relier un document à d'autres documents disponibles sur le web (soit à l'intérieur du même site web, soit avec un autre site web) présente un double avantage :

• d'une part rendre service au lecteur qui peut ainsi poursuivre sa recherche, • d'autre part favoriser le référencement dans les moteurs de recherche (comme Google) qui considèrent

positivement le fait d'être relié au reste de la toile.

Veiller toutefois : • à ce que les liens proposés apportent réellement une information complémentaire au sujet principal de

l’article, • à limiter le nombre de liens à une dizaine par page, • à rédiger les intitulés des liens de manière explicite (éviter les liens du genre "cliquer ici" et privilégier

"consulter le dossier Accessibilité sur le site www.internet.gouv.fr"), • à positionner les liens sur des expressions de 3 à 10 mots maximum (si les liens sont trop courts, ils sont peu

visibles sur la page et s'ils sont trop long, le regard se perd), • à assurer la correspondance de l'intitulé du lien et du titre de la page de destination.

Sauf précision contraire affichée explicitement (dans les pages "Infos site" ou bien "Mentions légales" ou bien encore "A propos du site"), la plupart des sites web sont a priori favorables à l'établissement de liens vers leurs propres sites. Par courtoisie, il est toutefois recommandé d'envoyer un courrier électronique aux responsables du site concerné (webmasters) afin de les prévenir de cette intention et leur donner ainsi la possibilité de refuser. 2.7- Illustrations Les photographies et images utilisées pour agrémenter les pages devront, autant que possible, apporter des éléments d'information complémentaires du texte et/ou d'illustration.

Il conviendra de veiller à dissocier les images de leurs légendes et commentaires (cas des schémas et graphiques scannés) qui seront affichés dans le corps de la page.

Les illustrations doivent être libres de droits ou publiées avec l’accord de leur auteur . Si des personnes sont reconnaissables sur les photos, s'assurer de posséder leur autorisation manuscrite (ou celle des parents dans le cas des élèves mineurs).


p.10/159

3- RAPPEL DE QUELQUES REGLES TYPOGRAPHIQUES Les textes publiés doivent être relus attentivement et frôler la perfection orthographique, syntaxique et typographique . Les noms des personnes seront écrits sans la civilité au format Prénom Nom. Les numéros de téléphone / fax seront écrits par groupe de 2 chiffres séparés par un espace et présenté sous la forme "Tél. : 01 49 55 49 55". Seuls les sigles peuvent être écrits en lettres maj uscules (un titre de page ou un pays commenceront par une lettre majuscule mais le reste de l'expression sera en lettres minuscules). Ils ne comportent en principe pas de caractères de séparation (à quelques exceptions près dont BP [Brevet Professionnel] et B.P. [Boîte Postale], CAP [Certificat d'Aptitude Professionnelle] et C.A.P. [Commission Administrative Paritaire] ou bien encore CDI [Centre de Documentation et d'Information] et C.D.I. [Contrat à Durée Indéterminée]). Le recours à une fonction de "Glossaire" permet d'éviter de dérouler le sigle dans le texte car un simple survol de ce sigle (souligné en pointillé) affiche sa signification. En revanche, si la signification n'apparaît pas, il est nécessaire d'ajouter le sigle dans le glossaire afin que l'ensemble du site puisse bénéficier de cette nouvelle information. Les intitulés des ministères comportent une capitale à l'initiale de leur domaine d'intervention, mais le terme "ministère" reste en minuscule (exemple : "ministère de l'Agriculture et de la Pêche"). L'abréviation de madame est Mme (pluriel = Mmes), celle de mademoiselle est Mlle (pluriel = Mlles) et celle de monsieur est M. (pluriel = MM.) et non pas Mr ("Mister" en anglais). Les abréviations de premier , deuxième , etc. sont 1er, 2e (et non pas "2ème"), etc. Une ponctuation simple (exemple : "point", "virgule", "points de suspensions", etc.) est suivie d'un espace après (et pas avant) alors qu'une ponctuation double (exemple : "point d'exclamation", "point d'interrogation", "point-virgule", etc.) est précédée ET suivie d'un espace. Règles particulières :

• Les parenthèses et guillemets "droits" (utilisés dans le web à la place des guillemets dits "français" ou "anglais") sont collés à l'expression qu'ils encadrent.

• Les points de suspension sont considérés comme une ponctuation simple. • L'apostrophe et le trait d'union sont collés aux caractères qu'ils relient.

L'abréviation etc. est suivie d'un point (et non pas de "trois petits points..."). Informations complémentaires :

• http://www.academie-francaise.fr/langue/index.html : Questions de langue (Académie Française) • http://www.guide-typographie.com/ : Petit guide de typographie • http://j.poitou.free.fr/pro/html/typ/typ-intro.html : Langages, écritures et typographie


p.11/159

4- COLLECTE ET TRAITEMENT DES CONTENUS A METTRE EN LIGNE 4.1- Collecte des documents Les textes, photos et toutes informations utiles seront fournis par les auteurs aux rédacteurs sous forme numérique (fichiers textes, tableaux, photographies numériques, mél, CD-Rom…).

Chaque auteur devra veiller à ne transmettre que des fichiers "propres" (se doter d'un anti-virus à jour ).

Les noms choisis pour les fichiers devront être explicites et courts , ne comporter ni caractère accentué , ni majuscule, ni signe de ponctuation, ni espace .

Tous les documents transmis doivent être structurés logiquement et comporter titre, date et mention d'auteur . Un fichier n'ayant pas ces indications perd sa valeur informationnelle et documentaire.

Les documents transmis sont des documents finalisés et validés par les auteurs : aucune retouche ne sera possible pendant la période de réalisation des pages afin de ne pas alourdir cette phase de publication.

Les indications quant au positionnement du nouveau contenu seront données aussi précisément que possible : URL de la page, indication de position dans celle-ci ("insérer après/avant le paragraphe..."), intitulé à utiliser, etc. 4.2- Règles spécifiques par type de document

Documents rédigés

Pour les documents rédigés, les formats à privilégier sont les formats de type texte (doc, txt, rtf, odt). Le recours aux documents mis en forme à l'aide de logiciels de PAO (type Xpress ou InDesign) sera exceptionnel et devra être justifié.

Lorsque le document doit donner lieu à la fabrication d'un fichier PDF, il est conseillé de répéter les indications "titre / auteur / date de création" en bas de page afin qu’elles soient indiquées sur toutes les pages du document (en cas d’impression partielle).

Les fichiers livrés aux auteurs doivent être exempts de fautes d'orthographe et de syntaxe et correctement mis en forme (structuration en paragraphes avec préparation d'un sommaire pour les dossiers volumineux, cohérence dans l'organisation des données de tableaux, etc.).

Les polices de caractères du site (ainsi que leurs tailles) sont imposées par la charte graphique et gérées automatiquement (feuilles de style), ceci afin de garantir l'homogénéité et la cohérence graphique, notamment lorsque plusieurs rédacteurs travaillent sur les contenus du site. Les rédacteurs n’ont donc pas à se soucier du choix de la police lors de la mise en page de leurs contenus.

De même, lors de la préparation des fichiers, préférer le style "gras" pour mettre en valeur une information plutôt que l' "italique" peu lisible sur le web (à réserver pour de courtes citations de 2 lignes maximum) ou bien le "souligné", habituellement consacré aux liens hypertextes.

Tout lien à effectuer sera signalé simplement en soulignant le mot (ou l'expression) sur lequel l'internaute cliquera et juste derrière le mot souligné (ou l'expression), l'adresse vers laquelle le lien pointe, sera mise entre parenthèses.

Tableaux

Le recours aux tableaux doit être réservé aux donné es chiffrées (exemple : évolution des effectifs d'apprenants par filière entre 2005 et 2008) et non pas être une astuce de mise en page. Chaque tableau devra être accompagné d'un titre explicite et éventuellement d'une légende complémentaire.

Illustrations

Toutes les illustrations (images, photos, graphiques) devront être accompagnées : • d'une légende (servant à renseigner le "texte alternatif", court descriptif visible au survol de la souris), • des tableaux de données chiffrées originales (uniquement dans le cas des graphiques).

Deux hypothèses d'affichage sont possibles : • illustration habillée par le texte : l'image ne devra pas dépasser une largeur équivalente à la moitié de la

largeur de la page afin que l'équilibre des deux colonnes image/texte soit respecté, • illustration sur toute la largeur de la page : la largeur de l'image pourra utiliser toute la largeur de la page.

Les illustrations devront être retouchées avant leur mise en ligne sur le site afin : • d'une part de ne pas alourdir le poids total de la page web (pour cela, il est souhaitable d'optimiser les images

au moyen d'un logiciel spécifique et de choisir une résolution de 72dpi),


p.12/159

• d'autre part de s'intégrer dans la charte graphique du site (les graphiques issus de logiciels type "excel" devront être retravaillés dans des nuances de couleurs s'accordant à la charte graphique).

Les formats à privilégier sont le jpeg pour les photos et le gif (ou le png ) pour les logos , schémas et graphiques . Le poids des illustrations ne devra pas excéder 50Ko pour une photo, 20Ko pour un schéma ou un graphique et 5Ko pour un logo.

Documents téléchargeables

Des documents téléchargeables peuvent être proposés aux internautes (le poids ne devra pas excéder 5Mo ).

Il sera porté une attention particulière à ce que ces documents soient proposés dans des formats accessibles au plus grand nombre d'internautes (formats ne nécessitant pas l'acquisition d'un logiciel payant notamment).

Chaque fois qu'un fichier sera proposé en téléchargement, une phrase indiquera clairement le format et le poids du fichier ainsi que le logiciel qui permet de le lire (exemple : fichier PDF (36Ko) lisible avec le logiciel Acrobat Reader). Un lien sera proposé en complément pour télécharger une visionneuse gratuite permettant de lire le fichier.

Remarque spécifique aux documents PDF Le recours aux documents PDF proposés en téléchargement est une pratique de plus en plus répandue pour une mise en ligne rapide de documents souvent initialement prévus pour une diffusion papier. Le format PDF présente les avantages d'être peu coûteux à produire et d'offrir de bons résultats à l'impression (hormis s'il s'agit d'un document "scanné" et converti en PDF). En revanche, certaines études d'ergonomie ont démontré que la lecture d'un document PDF reste fort peu conviviale (en moyenne, un document PDF est trois fois plus difficile à lire qu'une page HTML classique). Il est donc recommandé de réserver les fichiers PDF à des documents de "compl ément" (exemple : complément réservé à une impression de qualité, formulaire CERFA, note de service, complément d'une information dite "de 1er niveau", etc.). Une bonne pratique peut être de proposer une page web composée :

• d'un résumé du contenu, • du sommaire du document, • du document complet lui-même, imprimable au format PDF.

5- ASPECTS JURIDIQUES Les auteurs sont responsables des contenus qu'ils proposent (véracité, pertinence, authentification, correction orthographique et syntaxique). Ils restent entièrement propriétaires de leurs écrits, photos, éléments graphiques, etc. qui ne peuvent en aucun cas être utilisés par autrui, revendus ou distribués contre rémunération, sans leur accord préalable. S'ils ne sont pas les auteurs des documents qu'ils proposent, ils s'assurent de posséder les autorisations des propriétaires (auteurs de textes, éditeurs, graphistes, photographes) ainsi que les autorisations des personnes reconnaissables sur les photos et vidéos (ou de leurs responsables légaux dans le cas de mineurs). Informations complémentaires :

• http://www.legifrance.gouv.fr • http://www.cnil.fr


p.13/159

FICHE 01 - PRESENTATION DE TYPO3

Typo3 est un système de gestion de contenu de sites Internet basé sur une interface Web. Il offre un ensemble de fonctionnalités pour la création, l’administration, la gestion et la mise à jour de sites Internet. Ses possibilités de paramétrage et son interface lui

permettent d’être utilisé par tous les rédacteurs à condition de connaître le fonctionnement de base d’un explorateur (explorateur Windows par exemple) et de maîtriser un logiciel de traitement de texte (tel que Microsoft Word ou Open Office) et la navigation sur Internet. L'interface Typo3 de gestion du site se nomme le "Backend". Il s'agit d'une zone d’administration pour la gestion des pages et des contenus offrant un environnement de travail complet. Ce guide présente l'utilisation de cette interface de gestion. L’utilisation de Typo3 ne nécessite pour le rédacteur que de disposer d’un navigateur et de l’adresse Internet à laquelle se connecter. Typo3 fonctionne avec différents navigateurs tels que Internet Explorer ou Mozilla Firefox. Le navigateur doit accepter les cookies et le JavaScript doit être activé. La gestion du cache du navigateur doit être configurée de telle façon qu’à chaque visite de la page, le système vérifie s’il en existe une version plus récente. Il convient de solliciter l'aide de votre administrateur pour réaliser ces réglages en cas de difficultés.


p.14/159

FICHE 02 - S'IDENTIFIER ET SE REPERER DANS LE "B ACKEND"

L’accès aux fonctionnalités de Typo3 est réservé aux rédacteurs possédant un identifiant et un mot de passe de connexion attribués par l'administrateur ou par le responsable éditorial. L'accès au "Backend" se fait après identification sur la page http://www.nomdusite.fr/typo3.

La partie "Backend" de Typo3 est un environnement de travail complet, comportant de nombreuses fonctionnalités pour gérer et administrer les pages et leurs contenus. Après identification, Typo3 propose d'accéder directement aux différents espaces de travail suivants :

� la liste des modules, � l'arborescence, � la vue détaillée.

Dans la partie supérieure droite, un espace permet à chaque rédacteur de :

� se déconnecter et fermer sa session, � accéder aux pages pour lesquelles il aura "créé un raccourci", � vider le cache (mémoire temporaire) de typo3, � passer d'un espace de travail à un autre (fonctionnalité avancée activée seulement en mode

administrateur), � accéder aux pages récemment modifiées, � effectuer une recherche d'une page ou d'un élément (recherche sur le texte ou bien par identifiant).


p.15/159

ZONE � LISTE DES MODULES

La liste des modules ("Web", "Fichier " et "Outils utilisateur ") constitue le menu principal de l’application. Elle regroupe tous les outils d’édition du "Backend" auxquels l’utilisateur connecté est autorisé à accéder. La description des modules est présentée sur le 1er écran d'accueil de Typo3 (en 1re page de cette fiche).

ZONE � ARBORESCENCE L’arborescence des dossiers et des pages correspond aux contenus du site.

Comme dans un explorateur de fichiers, les différents niveaux de l’arborescence peuvent être étendus à l’aide des icônes "�" et "�".

Un survol avec la souris, des icônes des pages permet de connaître : � le numéro ("id ") de la page � le numéro de la page et son statut "Hors menu " (tour de l'icône

en "pointillés") � le numéro de la page et son statut "Caché " (icône avec un

panneau "sens interdit")


p.16/159

Au dessus de l'arborescence, 3 icônes permettent d'accéder à 3 fonctionnalités distinctes : � "Créer une nouvelle page ", � "Recharger l'arborescence "

(lorsque l'on a fait une modification qu'on ne voit pas apparaître immédiatement),

� Rechercher une page à partir d'un mot de son titre.

Remarque : Au moment de la recherche, l'arborescence se déroule automatiquement si une page comportant la chaîne de caractères a été trouvée et les lettres apparaissent surlignées en orange. Pour supprimer le filtre et afficher à nouveau toute l'arborescence, il suffit de cliquer sur la croix à droite de l'indication "Filtre activé".

Un simple "clic" sur l'icône de la page permet d'accéder aux menus contextuels successifs suivants :


p.17/159

Détail des fonctionnalités des menus contextuels :

� Visualiser : afficher la page telle que l’internaute peut la consulter, � Désactiver : cacher la page, c’est-à-dire la mettre hors-ligne. Elle n’est donc pas visible par n’importe quel

internaute. Seuls les utilisateurs se connectant en Backend peuvent la visualiser, � Editer : modifier les propriétés de la page (titre, description, mots-clés, droits d'accès, etc.), � Info : visualiser les informations sur la page, � Historique / Annuler : afficher l’historique des modifications et éventuellement en annuler certaines. � Actions pour la page :

▫ Nouveau : créer une nouvelle page, ▫ Couper : couper la page et ses contenus et stocker dans le presse papier en attendant de les

coller, ▫ Copier : copier (dans le presse-papier) la page et ses contenus, ▫ Coller dans : ajouter le contenu du presse-papier comme sous page de la page actuelle, ▫ Coller après : ajouter le contenu du presse-papier comme page en dessous de la page actuelle

(au même niveau de l’arborescence), � Actions pour la branche :

▫ Zoomer sur la rubrique : lorsque le site est dense, permet de ne se concentrer que sur une partie spécifique de l'arborescence (pour revenir à la structure complète, un message sur fond bleu indique comment "annuler le point de montage temporaire")

▫ Déplier / Replier la branche : déplier / replier tous les niveaux de l'arborescence qui découle de cette page

▫ Exporter vers un .t3d et Importer depuis un .t3d sont des fonctionnalités réservées à des rédacteurs expérimentés ; elles ne seront pas détaillées dans ce document,

Remarque : Un double clic sur le nom de la page dans l'arborescence permet désormais de renommer celle-ci sans passer par l'édition des propriétés. ZONE � VUE DETAILLEE La vue détaillée constitue l’espace de travail actif dans lequel le contenu est affiché et géré. En mode "Page", un simple clic sur le nom de la page (et non pas sur son icône) dans l'arborescence de la zone � permet d'afficher son contenu dans la zone � :

Remarque : Un "clic droit" sur le nom de la page affiche le menu contextuel. La largeur de chacun des 3 espaces est ajustable en saisissant la double flèche (visible au survol de la souris) avec la souris et en la déplaçant à sa convenance.


p.18/159

Par défaut, les éléments cachés n'apparaissent pas en mode "Page". Pour changer ceci, il suffit de :

� cliquer sur l'onglet "Fonctions avancées ", � puis de cocher la case "Montrer les éléments cachés ", et les éléments cachés s'afficheront comme en �.


p.19/159

Description des icônes de la zone � en mode "Page" :

Une fois la page préparée, un simple "clic" sur le mode "Voir " dans la zone � permet de prévisualiser la page créée :

Le passage en mode "Liste " diffère visuellement en ce qui concerne la zone � mais propose des fonctionnalités similaires. Le choix de travailler dans l'un ou l'autre de ces modes appartient à chaque rédacteur selon ses préférences.


p.20/159

Description des icônes de la zone � en mode "Liste" :

Le module "Fichiers " de la zone � permet la gestion des différents fichiers composant les pages : images, PDF, etc. Le fonctionnement de ce module est très proche du fonctionnement du module "Web" vu précédemment.


p.21/159

Un simple "clic" sur l'icône du dossier à ouvrir affiche le menu contextuel :

Un simple "clic" sur le nom du dossier affiche son contenu dans la zone � :

Le module "Outils Utilisateurs > Configuration Utilisateur " est un module de paramétrage de fonctionnalités avancées qu'il est recommandé d'utiliser avec de nombreuses précautions. Il est demandé aux rédacteurs de ne pas opérer de modifications dans les autres onglets que celui des "Données personnelles " qui permet de modifier son nom, son mél, son mot de passe et la langue utilisée dans le "backend" de Typo3.


p.22/159


p.23/159

FICHE 03 – CHARTE GRAPHIQUE Une charte graphique est définie pour chaque site internet. L'intérêt d'avoir une charte graphique est double :

� l'identité graphique est homogène quelle que soit la personne rédigeant les contenus. La charte graphique est appliquée sur toutes les pages du site afin d'assurer cette cohérence.

� la charte graphique participe à l'identification de l'organisme par ses publics cibles (clients, prospects, partenaires). Cela crée des repères visuels immédiatement reconnaissables.

La mise en place d'une charte graphique aboutit généralement à la création de modèles de pages (en anglais "templates"), servant de gabarits pour la création du site web. Ces modèles sont des pages web représentant le squelette graphique d'une page type. Il existe deux principaux modèles :

� un modèle pour la page d'accueil � un modèle pour les autres pages dites "pages de descente"

Suivant les particularités du site, d'autres modèles peuvent être mis à disposition des rédacteurs. La charte graphique permet de définir la position des différents éléments qui constituent les pages du site. La structure traditionnelle d'une page web est la suivante :

� un en-tête contenant au moins le nom du site et un logo, la plupart du temps cliquable et menant à la page d'accueil

� une zone de navigation principale (menu principal) � une zone de navigation secondaire (menu outils comprenant par exemple l'accès au plan du site, aux

actualités, à un formulaire de contact, …) � un corps de page, contenant l'essentiel de l'information � un pied de page regroupant des informations utiles (mentions légales, logos de partenaires, …).

Les polices de caractères du site ainsi que leurs tailles et leurs couleurs sont imposées par la charte graphique et gérées automatiquement (feuilles de style), ceci afin de garantir l'homogénéité et la cohérence graphique, notamment lorsque plusieurs rédacteurs travaillent sur les contenus du site. Les rédacteurs n’ont donc pas à se soucier du choix de la police lors de la mise en page de leurs contenus et ne doivent pas, par divers moyens, en utiliser d'autres. Les rédacteurs et administrateurs du site n'ont pas à s'occuper de la mise en place d'une charte graphique sur leur site. Ce travail est à la charge de l'équipe développement. Leur seul rôle est, dans certains cas, de choisir le modèle utilisé lorsqu'ils créent une page.

GUIDE TYPO3 Fiche 03bis

p.24/159

FICHE 03BIS – CHARTE GRAPHIQUE SPECIFICITES DES SITES CLES EN MAIN

� Que faire si les changements de configuration ne so nt pas pris en compte ? � Choisir le modèle de charte graphique

Les différents modèles de charte graphique Eléments et dimensions des pages suivant les modèles de charte Choisir le modèle et la couleur de charte

� Changer le nom du site � Changer les logos du site � Changer le bandeau photos de la page d'accueil � Ajouter un bandeau photos sur des pages de descente

Remarque : Les fonctionnalités listées ci-dessous, peuvent n’apparaître que pour certains profils d’utilisateurs ayant des droits plus étendus (l'administrateur en l'occurrence). QUE FAIRE SI LES CHANGEMENTS DE CONFIGURATION NE SONT PAS PRIS EN C OMPTE ? Il est possible qu’après avoir fait des changements de configuration du site, ces modifications ne se répercutent pas immédiatement en naviguant sur celui-ci. En effet, Typo3 ainsi que le navigateur peuvent garder en mémoire l’ancienne configuration. Pour pouvoir visualiser les changements effectués :

� Dans Typo3, vider les caches en cliquant sur le lien suivant en haut à droite de l'interface de gestion :

� Actualiser la page du site dans le navigateur. Si les modifications ne sont toujours pas prises en compte, passer à l’étape suivante.

� Vider le cache et éventuellement l’historique du navigateur, puis actualiser de nouveau la page du site

dans le navigateur. CHOISIR LE MODELE DE CHARTE GRAPHIQUE Cette partie concerne les organismes ayant opté pour les chartes graphiques standards. Les autres organismes possèdent une charte graphique qui leur est propre et n’ont donc pas la possibilité d’en changer. LES DIFFERENTS MODELES DE CHARTE 4 modèles de chartes sont disponibles, déclinés chacun en plusieurs couleurs. Charte MAP (Ministère de l’Agriculture et de la Pêc he) Cette charte graphique est conforme à la charte du Ministère de l’Agriculture et de la Pêche version 2005. Couleurs disponibles et codes couleurs associés :

� bleu (#749DD2) � framboise (#660033) � kaki (#424716) � orange (#FF6600)

� violet (#330066) � rouge (#990100) � vert (#2B525D)


p.25/159

Charte Eole Couleurs disponibles : bleu (#344D6B), rouge (#8B0007), vert (#669900)


p.26/159

Charte Gaia Couleurs disponibles : marron (#FF6600), bleu (#1184B3), orange (#E34A00), vert (#376804)

Charte Yemanja Couleurs disponibles : jaune (#FED035), turquoise (#14B5DF), vert anis (#B8D322), fushia (#E25975)


p.27/159

ELEMENTS ET DIMENSIONS DES PAGES SUIVANT LES MODELES DE CHARTES Le tableau ci-dessous récapitule les caractéristiques des différents éléments constituant les chartes. Pour vous aider à les repérer, ces éléments ont été numérotés et positionnés sur les différents modèles se trouvant après le tableau.

MAP Eole Gaia Yemanja Logo établissement � Largeur 150 px maxi 150 px maxi 150 px maxi 150 px maxi Hauteur 98 px 98 px 100 px 98 px Nom logo.jpg

ou logo.gif logo.jpg ou logo.gif

logo.jpg ou logo.gif

logo.jpg ou logo.gif

Nom du site � Nombre de lignes 2 lignes maxi 2 lignes maxi 2 lignes maxi 5 lignes maxi Largeur 330 px maxi 620 px maxi 220 px maxi 380 px maxi Hauteur 40 px maxi 40 px maxi 56 px maxi 100 px maxi Logo partenaire � Largeur 150 px maxi 132 px maxi 150 px maxi 150 px maxi Hauteur 98 px 100 px 100 px 100 px Nom logod.jpg

ou logod.gif

logod.jpg ou logod.gif



Bandeau photos Largeur 776 px 724 px 768 px 433 px Hauteur 80 px mini 154 px 105 px 267 px Nom photo.jpg

ou photo.gif

photo_eole.jpg ou photo_eole.gif

photo_gaia.jpg ou photo_gaia.gif

photo_yemanja.jpg ou photo_yemanja.gif

Contenu page accueil Largeur 350 px 291 px 500 px 420 px Hauteur -- -- -- -- Images 350 px maxi 291 px maxi 500 px maxi 420 px maxi Contenu autres pages Largeur 540 px 545 px 545 px 652 px sans la

colonne photo 430 px avec la colonne photo

Hauteur -- -- -- -- Images 535 px maxi 545 px maxi 545 px maxi 652 px maxi sans la

colonne photo 430 px maxi avec la colonne photo

Pour chacune des chartes Eole, Gaia et Yemanja des gabarits sont mis à disposition dans la partie "Accès réservé" du site www.cle-en-main.educagri.fr Ils permettent de réaliser plus facilement les bandeaux photos personnalisant le page d'accueil.


p.28/159

Charte MAP

Charte Eole

1 2

4

5

3

1 2

3

4

5


p.29/159

Charte Gaia

Charte Yemanja

1

2

3

4

5

1 2

3

4

5


p.30/159

CHOISIR LE MODELE ET LA COULEUR DE CHARTE En mode "Page", sélectionner la page "Accueil" puis éditer les propriétés de la page.

Se positionner sur l'onglet "Etendu" et compléter les champs suivants :

� "Utiliser le design de gabarit" : choisir le modèle d’accueil souhaité. Dans l’exemple, la charte Gaia est choisie, le modèle "Gaia_Accueil" est donc sélectionné.

� "Pour les sous-pages – Utiliser le design de gabarit" : choisir le modèle de descente associé à la charte

choisie. Dans l’exemple, le modèle "Gaia_descente" est donc sélectionné.

Descendre plus bas dans le formulaire pour accéder au champ "Sélection de feuille de style".

Commencer par supprimer de la colonne de gauche le style qui ne convient plus en le sélectionnant puis en cliquant sur la croix.


p.31/159

Sélectionner ensuite dans la colonne de droite un nouveau style. Attention à toujours bien choisir la couleur correspondant à la charte retenue.

Enregistrer les modifications. Remarques : Les modifications de charte faites à ce niveau-là vont se répercuter automatiquement sur toutes les pages du site. Si un modèle de charte avait été redéfini pour des pages de descente, il faut penser à le supprimer sur celles-ci. Définir le modèle sur la page d’accueil suffit pour qu’il soit répercuté dans l’intégralité du site.


p.32/159

CHANGER LE NOM DU SITE

En mode "liste", sélectionner le dossier "stockage" en bas de l’arborescence puis éditer les propriétés de l'élément "Nom du site".

Dans l'onglet "Texte", modifier le nom du site, puis enregistrer.

CHANGER LES LOGOS DU SITE Deux logos peuvent être mis en place dans le bandeau du haut : le logo de l’établissement et le logo d’un partenaire (la région par exemple).


p.33/159

Caractéristiques Le logo de l’établissement doit :

� être une image de format gif ou jpg de bonne qualité � se nommer obligatoirement "logo.gif" ou "logo.jpg" � avoir des dimensions définies suivant le modèle de charte choisi :

o charte MAP � hauteur : 98 px / largeur : 150 px maximum o charte Eole � hauteur : 98 px / largeur : 150 px maximum o charte Gaia � hauteur : 100 px / largeur : 150 px maximum o charte Yemanja � hauteur : 98 px / largeur : 150 px maximum

Lorsque l’on clique sur le logo de l’établissement, on accède à la page d’accueil. La charte graphique est définie ainsi. Le logo partenaire doit :

� être une image de format gif ou jpg de bonne qualité � se nommer obligatoirement "logod.gif" ou "logod.jpg" � avoir des dimensions définies suivant le modèle de charte choisi :

o charte MAP � hauteur : 98 px / largeur : 150 px maximum o charte Eole � hauteur : 100 px / largeur : 132 px maximum o charte Gaia � hauteur : 100 px / largeur : 150 px maximum o charte Yemanja � hauteur : 100 px / largeur : 150 px maximum

Contrairement au logo de l’établissement, il est possible de définir un lien vers lequel va pointer ce logo. Par exemple, si ce logo est celui de la région, l’adresse internet du lien sera certainement celle du conseil régional correspondant. Modifier les logos Sélectionner le mode "Fichiers" et se placer dans le dossier "Dossier de ressources"

Supprimer ou renommer le fichier "logo.jpg" ou "logo.gif" pour le logo de l’établissement Supprimer ou renommer le fichier "logod.jpg" ou "logod.gif" pour le logo du partenaire Télécharger le nouveau fichier en respectant bien les conventions de nommage définies précédemment. Note : En cas de besoin pour effectuer ces différentes actions, se reporter à la Fiche 06 "Gérer les ressources"


p.34/159

Définir le lien sur le logo partenaire Il faut définir deux champs qui composent le lien :

� la cible : adresse Internet vers laquelle le lien va pointer � le titre : info bulle s’affichant au passage de la souris sur le logo

En mode "liste", sélectionner le dossier "stockage" en bas de l’arborescence puis éditer les propriétés de l'élément "Cible du lien".

Dans l'onglet "Général", modifier la cible du lien puis enregistrer. Attention : la cible du lien doit obligatoirement commencer par "http://". Remarque : il ne faut pas faire un lien sur l’adresse saisie, celui-ci se fera automatiquement.

Recommencer la manipulation pour le titre du lien.


p.35/159

CHANGER LE BANDEAU PHOTOS DE LA PAGE D 'ACCUEIL Caractéristiques La photo de la page d’accueil du site doit :

• être une image de format jpg ou gif de bonne qualité • se nommer obligatoirement :

o "photo.jpg" ou "photo.gif" pour le modèle de charte MAP o "photo_eole.jpg" ou "photo_eole.gif" pour le modèle de charte Eole o "photo_gaia.jpg" ou "photo_gaia.gif" pour le modèle de charte Gaia o "photo_yemanja.jpg" ou "photo_yemanja.gif" pour le modèle de charte Yemanja

• avoir des dimensions définies suivant le modèle de charte choisi : o charte MAP � hauteur : 80 px minimum / largeur : 776 px o charte Eole � hauteur : 154 px / largeur : 724 px o charte Gaia � hauteur : 105 px / largeur : 768 px o charte Yemanja � hauteur : 267 px / largeur : 433 px

Il faut adapter la taille de la photo afin d’obtenir le meilleur rendu graphique sur la page d’accueil du site. Il est possible de ne pas mettre de photo. Modifier le bandeau photos de la page d'accueil Sélectionner le mode "Fichiers" et se placer dans le dossier "Dossier de ressources"

Supprimer ou renommer le fichier "photo.jpg" ou "photo_eole.jpg" ou … suivant le modèle de charte choisi. Télécharger le nouveau fichier en respectant bien les conventions de nommage définies précédemment. Note : En cas de besoin pour effectuer ces différentes actions, se reporter à la Fiche 06 "Gérer les ressources" AJOUTER UN BANDEAU PHOTOS SUR DES PAGES DE DESCENTE Il est possible de définir un bandeau photo pour chaque page de descente, c’est-à-dire toutes les pages du site sauf celle d’accueil.


p.36/159

Caractéristiques Le bandeau photo doit :

• être une image de format jpg ou gif de bonne qualité • avoir des dimensions définies suivant le modèle de charte choisi :

o charte MAP � hauteur : 80 px minimum / largeur : 776 px o charte Eole � hauteur : 154 px / largeur : 724 px o charte Gaia � hauteur : 105 px / largeur : 768 px o charte Yemanja � largeur 200 px maxi (le bandeau se positionne en hauteur à droite du contenu

de la page) Stockage des photos Avant d'associer une photo à une page, il faut la charger sur le serveur en utilisant le module "Fichiers". Note : En cas de besoin pour effectuer ces différentes actions, se reporter à la Fiche 06 "Gérer les ressources" Ajouter le bandeau photo En mode "Page", sélectionner la page "Accueil" puis éditer les propriétés de la page.

Se placer sur l'onglet "Etendu"


p.37/159

Remarque : Si la page vient tout juste d'être créée, il faut compléter a minima son titre et enregistrer une première fois pour que les champs nécessaires apparaissent dans l'onglet "Etendu". Descendre dans le formulaire pour atteindre le champ "Bandeau photo"

Si un bandeau photo a déjà été défini, le sélectionner en cliquant sur son nom et cliquer sur la croix pour le supprimer.

Cliquer sur l’icône , l’arborescence des fichiers s’affiche. Choisir la photo souhaitée en cliquant sur son nom.

Le champ "Bandeau photo" se complète.

Enregistrer les modifications.


p.38/159

FICHE 04 – CREER, MODIFIER ET VISUALISER UNE PAGE

� Créer une page – étape commune à tous les types de pages � Créer et paramétrer une page "Standard" � Créer et paramétrer une page "Raccourci" � Créer et paramétrer une page "URL externe" � Visualiser une page � Modifier une page

Dans Typo3, une page est composée d’éléments de contenus qui lui sont associés. La hiérarchie des pages est représentée sous forme d’une arborescence comme expliquée dans la Fiche 02 "S’identifier et se repérer dans le backend". Pour insérer une page, le rédacteur doit connaître la position, l’ordre et le type de la page qu’il veut créer dans l’arborescence. Le rédacteur doit définir, préalablement à la saisie des contenus dans Typo3, la position, l’ordre et le type des nouvelles pages et sous pages de l’arborescence qu’il va créer. Des contenus seront ensuite ajoutés à chaque page. Il peut s’agir de texte, d’images, de tableaux, … CREER UNE PAGE – ETAPE COMMUNE A TOUS LES TYPES DE PAGES

� Sélectionner le mode "Page"

� Cliquer sur l’icône pour créer une nouvelle page

Un choix de styles de page apparaît.

Standard Raccourci Lien vers une url externe Dossier (non décrit dans cette fiche)

� Sélectionner l'icône selon le type de page à créer

� Puis faire un glisser-déposer à l'endroit où placer la page

dans l’arborescence, défini par un trait bleu.

Une aide s'affiche pour le positionnement de la page : � Insérer la nouvelle page avant ou après une page

� Insérer la nouvelle page en tant que sous-page

1

2


p.39/159

� Entrer le titre de la page

Ce titre doit être à la fois bref et clair car il sera utilisé dans le menu de navigation du site et dans l’URL de la page.

� Cliquer sur l'icône de la page pour ouvrir le menu contextuel

� Cliquer sur l'option "Activer" afin d'afficher la page

Remarque : description des icônes servant à enregistrer les modifications sur les pages

Fermer le formulaire sans sauvegarder les éventuelles modifications effectuées

Enregistrer la page

Enregistrer la page et fermer le formulaire

Enregistrer et visualiser le résultat des modifications

Supprimer la page

Effacer la dernière modification effectuée

CREER ET PARAMETRER UNE PAGE "STANDARD" Créer un page "standard" Suivre la procédure commune à tous les types de page en choisissant l'icône "Standard".


p.40/159

Paramétrer la page créée


� Cliquer sur l'option "Editer" afin d'afficher la page

Onglet "Général"

� Le type de page doit être "standard" � Compléter / modifier le titre de la page

Onglet "Accès"

� Visibilité de la page Décocher ou cocher la case "Désactiver" selon le besoin. Si la case est cochée, la page est cachée (icône dans l’arborescence). Cela permet au rédacteur de construire sa page sans qu’elle puisse être visualisée par tous les internautes. Lorsque la page est complète, le rédacteur pourra la rendre visible en décochant cette case. � Positionnement hors menu Décocher ou cocher la case "Cacher" selon le besoin Exemple d’utilisation dans le cas où la case est cochée : cela peut permettre une validation de la page par un commanditaire sans pour autant que l'internaute puisse "voir" la page dans l'arborescence du site. La page n'apparaissant pas dans l'arborescence, le rédacteur devra transmettre l'URL de consultation au commanditaire (l'URL sera de type "http://www.nomdusite.fr/index.php?id=24").

1

2

1 2


p.41/159

Onglet "Apparence"

L'option "Afficher le contenu de la page" permet d'afficher le contenu d'une autre page dans la page qui vient d'être créée.

Pour choisir la page dont le contenu doit être affiché, cliquer sur l'icône afin d'afficher l'arborescence puis sélectionner la page.

Onglet "Etendu"

Dans la partie "Contenu", l'ensemble des contenus de la page sont listés. En général, cet onglet n'a pas besoin d'être modifié. Il est possible d'ajouter des contenus déjà créés sur d'autres pages en cliquant sur l'icône


p.42/159

CREER ET PARAMETRER UNE PAGE "RACCOURCI" L'intérêt de ce type de page est double : il s'agit soit de ne pas "doublonner" une page déjà rédigée par ailleurs dans le site soit de proposer à l'internaute un lien plus rapide (exemple : www.nomdusite.fr/rapide au lieu de http://www.nomdusite.fr/dossier/section/page.html). Comme précédemment, il convient de ne pas abuser de cette possibilité qui peut, à la longue, dérouter l'internaute. Créer un page "Raccourci" Suivre la procédure commune à tous les types de page en choisissant l'icône "Lien vers une url externe".




Compléter / modifier le titre de la page créée puis choisir, en naviguant dans les enregistrements, la page de destination du raccourci avant d'enregistrer.


p.43/159

CREER ET PARAMETRER UNE PAGE "URL EXTERNE" L'intérêt de ce type de page est de pouvoir proposer un lien directement vers un autre site à partir de l'arborescence même du site principal et ce, quel que soit le niveau dans l'arborescence. Il convient de ne pas abuser de cette possibilité qui peut, à la longue, dérouter l'internaute. Dès qu'un certain nombre de liens doivent être proposés, on privilégiera une page "sommaire" dans laquelle les différents liens seront proposés, éventuellement accompagnés de copies d'écrans des sites de destination ainsi que d'une courte description du site. Créer un page "URL Externe" Suivre la procédure commune à tous les types de page en choisissant l'icône "Lien vers une url externe".




Compléter / modifier le titre de la page créée puis l'URL de destination avant d'enregistrer.


p.44/159

VISUALISER UNE PAGE Il existe 4 solutions possibles pour visualiser une page. Solution 1

Dans l’arborescence, cliquer sur l’icône de la page à visualiser. Sélectionner le menu "Visualiser". La page s’affiche alors dans un nouvel onglet ou une nouvelle fenêtre suivant le paramétrage du navigateur.

Solution 2

� Sélectionner le mode "Voir" � Cliquer sur le nom de la page à visualiser

La page s’affiche alors à droite dans la vue détaillée. Solution 3

1

2

3

2

1


p.45/159

� Sélectionner le mode "Page" � Cliquer sur le nom de la page à visualiser

� Cliquer sur l’icône pour visualiser la page La page s’affiche alors dans un nouvel onglet ou une nouvelle fenêtre suivant le paramétrage du navigateur. Solution 4

Si la page est en cours de création ou modification : Cliquer sur l’icône permettant d’enregistrer et

visualiser la page.

MODIFIER UNE PAGE Il existe 2 solutions possibles pour modifier une page. Solution 1

� Sélectionner le mode "Page" � Cliquer sur le nom de la page à modifier

� Cliquer sur l’icône pour éditer les propriétés de la page et modifier ses informations

3

2

1


p.46/159

Solution 2

Cliquer sur l’icône de la page à visualiser pour ouvrir le menu contextuel puis choisir "Editer".


p.47/159

FICHE 05 – GERER LES PAGES (COPIER, COUPER, SUPPRIMER…) � Copier / Couper une page � Cacher / Afficher une page � Page Hors menu � Supprimer une page � Récupérer une page supprimée récemment

COPIER / COUPER UNE PAGE

Solution 1 : clic droit + menu contextuel

Pour couper ou copier une page, se mettre en mode Page.

Dans l’arborescence de pages, cliquer droit sur le nom de la page à déplacer (ou sur l’icône à gauche). Dans le menu contextuel, positionner la souris sur "Actions pour la page", puis sélectionner l’option appropriée

� "Copier " ou � "Coller ".

Ensuite, se positionner sur la page de destination et cliquer droit sur son nom (ou sur l’icône à gauche) : Dans le menu contextuel, positionner la souris sur "Actions pour la page ", puis choisir "Coller dans " : la page sera positionnée en fin de liste des sous-pages (arborescence de niveau inférieur). ou "Coller après " : la page sera placée immédiatement après la page sélectionnée.


p.48/159

Solution 2 : glisser-déposer

"Couper/ Coller dans " � Cliquer gauche sur le nom de la page à couper. � Maintenir le clic de la souris et faire glisser la page

jusqu'à la page de niveau supérieur. � Relâcher le clic de la souris. "Copier/coller dans " � Cliquer gauche sur le nom de la page à copier, � Maintenir le clic de la souris, appuyer sur la touche Ctrl

et faire glisser la page jusqu'à la page de niveau supérieur.

� Relâcher le clic de la souris.

"Couper/ Coller après " � Cliquer gauche sur le nom de la page à couper. � Maintenir le clic de la souris et faire glisser la page à

l’endroit où elle doit être insérée (matérialisé par une ligne bleue de séparation).

� Relâcher le clic de la souris. "Copier/Coller après " � Cliquer gauche sur le nom de la page à copier. � Maintenir le clic de la souris, appuyer sur la touche Ctrl

et faire glisser la page à l’endroit où elle doit être insérée (matérialisé par une ligne bleue de séparation).

� Relâcher le clic de la souris.

Remarque : Pour la fonction "Copier", Typo3 donne à la page créée le même nom et rajoute la mention copie 1 entre parenthèses. Par défaut, la page est cachée (sens interdit rouge).

CACHER / AFFICHER UNE PAGE

Solution 1 : menu contextuel

Cacher une page Se mettre en mode Page. Dans l'arborescence de pages, cliquer droit sur le nom de la page (ou sur l’icône à gauche) pour faire apparaître le menu contextuel. Sélectionner "Désactiver " dans la liste.

☺ Un "sens interdit rouge" sur l'icône signale que la page est cachée.

Afficher une page Se mettre en mode Page Dans l'arborescence de pages, cliquer droit sur le nom de la page (ou l’icône à gauche) pour faire apparaître le menu contextuel. Sélectionner "Activer " dans la liste.


p.49/159

Solution 2 : éditer les propriétés de la page

1re étape Se positionner Se mettre en mode Page. � Dans l'arborescence de pages, cliquer gauche sur le nom de la page. � Cliquer sur l’icône crayon pour éditer les propriétés de la page.

2e étape Cacher une page � Cliquer sur l’onglet "Accès " � Cocher la case "Désactiver " � Enregistrer.

OU 2e étape Afficher une page � Cliquer sur l’onglet "Accès " � Décocher la case "Désactiver " � Enregistrer.

2

3

1

2

3

1

1

2


p.50/159

PAGE HORS MENU La fonctionnalité "hors menu " est utile lorsqu'une page ne doit pas apparaître dans les menus automatiques du site (rubriques, outils, sommaire…) mais qu'elle doit quand même rester accessible pour les internautes.

Se mettre en mode Page � Dans l'arborescence de pages, cliquer gauche sur le nom de la page, � cliquer sur l’icône crayon pour éditer les propriétés de la page.

� Cliquer sur l’onglet "Accès " � Cocher la case "Cacher – dans les menus " � Enregistrer.

Exemple : la page "Recherche", rattachée à la rubrique "outils" est accessible mais n'apparait pas à l’écran dans la liste des "outils" du site. Affichage à l'écran

L'icône de la page "Recherche" est grisée et limitée par des pointillés, cela signifie qu'elle est "Hors menu".

2

3

1

1

2


p.51/159

SUPPRIMER UNE PAGE

Solution 1 : menu contextuel

Se mettre en mode Page Dans l'arborescence de pages, cliquer droit sur le nom de la page (ou sur l’icône à gauche), Dans le menu contextuel, positionner la souris sur "Actions pour la page", puis sur la fonction "Supprimer".

Remarque : Seules les pages de dernier niveau peuvent être supprimées (La fonction "Supprimer" n’est pas disponible ).

� Confirmer la suppression

Solution 2 : éditer les propriétés de la page

Se mettre en mode Page � Dans l'arborescence de pages, cliquer gauche sur le nom de la page, � Cliquer sur l’icône crayon pour éditer les propriétés de la page.

Cliquer sur l’icône "poubelle".

1

2


p.52/159

RECUPERER UNE PAGE SUPPRIMEE RECEMMENT (PAR ERREUR...) Remarq ue : cette opération, bien pratique en cas d’erreur, doit cependant être utilisée avec précaution. Elle est plus facile à réaliser quand elle est effectuée rapidement après la suppression.

Dans l'arborescence de pages, cliquer droit sur le nom de la page "parente" (niveau supérieur) de la page qui vient d'être supprimée puis choisir l'option "Historique / Annuler "

Demander à afficher les sous-éléments. Les dernières actions effectuées sont listées.

Cliquer sur l'icône à partir de laquelle il est envisagé d'annuler les modifications.

Cliquer ensuite sur l'icône pour "Restaurer l'élément ".


p.53/159

FICHE 06 - GERER LES RESSOURCES (PDF, IMAGES, ETC.) DANS L 'ARBORESCENCE DE FICHIERS

� Gérer les répertoires � Gérer les fichiers

Les ressources peuvent être des fichiers de toutes sortes (images, documents PDF, documents textes, etc.). Elles sont enregistrées sur le serveur Web et disponibles dans Typo3 pour être traitées et intégrées en tant que lien sur les pages désirées. Les ressources sont gérées dans l'option "Fichiers " du module "Fichiers ". Remarque : Il est recommandé de créer une structure de répertoires la plus claire et la plus logique possible :

� grouper les fichiers selon le type de médias (fichiers PDF, fichiers images, fichiers texte, …), � ou structurer des dossiers de façon similaire à l’arborescence du site Web, � ou bien encore de combiner les 2 manières dans l'ordre qui satisfait le mieux à l'usage.

☺ Exemple d’extensions de fichiers autorisés à être t éléchargés sous Typo3 :

� Fichiers images : gif, jpg, tif, bmp, png, � Fichiers texte : doc, txt, pdf, rtf, odt, � Autres fichiers : ppt, xls, ods, odp.

GERER LES REPERTOIRES

Pour créer un répertoire il suffit de : � repérer le répertoire à l'intérieur duquel

on souhaite créer le nouveau, � se positionner sur celui-ci, � cliquer sur l'icône, � choisir "Nouveau" dans le menu

contextuel. Remarque : Eviter de mettre des accents ou des espaces dans les noms des répertoires : les accents seront automatiquement supprimés (le "é" deviendra "e") et les espaces seront remplacés par un "tiret-bas" ("_").

Il ne reste plus, alors, qu'à saisir le nom du (ou des puisqu'on peut créer plusieurs répertoires/dossiers en une seule manipulation) et de cliquer sur "Créer des dossiers" pour valider la création. Réitérer l'opération autant que de besoin ou sélectionner « Nombre de dossiers » pour en ajouter plusieurs d’un seul coup.


p.54/159

GERER LES FICHIERS

Pour ajouter des fichiers, choisir l'entrée "Envoyer des fichiers" dans le menu contextuel du répertoire dans lequel doivent être ajoutés les fichiers ou bien cliquer dans la zone "Vue détaillée " sur l'icône "Envoyer des fichiers" lorsque l'on est déjà dans le répertoire.

Il est possible de sélectionner plusieurs fichiers et de les ajouter. Cliquer sur "Ouvrir" afin de valider le téléchargement.

Remarque : Les noms de fichiers insérés dans Typo3 répondent aux mêmes règles que celles des explorateurs (en matière de longueur, caractères spéciaux, espaces, …).

Une barre de progression s’affiche pour suivre l’état de téléchargement de chaque fichier.

Le fichier apparaît alors dans le répertoire :


p.55/159

Remarque : Si un fichier portant le même nom existe déjà dans le répertoire, une fenêtre d’alerte demande confirmation pour les écraser.

Une fois téléchargé, le fichier peut-être renommé, déplacé ou supprimé à partir du menu contextuel :

Remarque : Si on déplace un fichier qui était attaché à une page, alors, il faut aller refaire le lien sur la page car celui-ci aura été "cassé" lors du déplacement du fichier. Pour éviter ces désagréments, il est important de bien penser l'arborescence du site et celle des fichiers, en amont du projet.


p.56/159

Il est possible de modifier les informations relatives au fichier transféré :

Cliquer sur Editer .

Renseigner les champs désirés : Title : Titre du document, peut être utilisé au survol des liens ou dans une galerie photos ; Description : Description du document ; Alternative Text : Texte de substitution si le fichier est manquant.


p.57/159

FICHE 07 - CREER OU MODIFIER DES ELEMENTS DE CONTENU DANS UNE PAGE

� Créer un élément de contenu � Editer / Modifier un élément de contenu

CREER UN ELEMENT DE CONTENU

Pour ajouter du contenu dans une page :

� Sélectionner le mode "Page". � Cliquer sur le nom de la page dans laquelle doit être inséré le contenu.

� Cliquer sur l’icône pour créer un nouvel élément de contenu dans la page.

Une liste des principaux types de contenu est alors proposée : Cliquer sur l’élément de contenu correspondant au besoin.

Remarque : Cette fiche présente uniquement les fonctions ou paramétrages communs à tous les types d’éléments. Les spécificités des différents types d’éléments de contenu sont détaillées dans les fiches suivantes.

3

2

1


p.58/159

1 - Onglet Général

Certains types d'éléments de contenu ne sont accessibles que dans le contenu lui-même. Pour y accéder : � cliquer sur un type d'élément quelconque (exemple

"Elément texte "), � se positionner sur l’onglet général, � dérouler la liste des types proposés, � sélectionner un nouveau type de contenu (exemple

"Titre").

☺ Selon son contenu, il est recommandé (mais non obligatoire) de diviser une page en plusieurs éléments car cela facilite, par la suite, les liens, les mises à jour et les éventuels "copier-coller". Par exemple, lorsqu’on veut faire un lien depuis une page vers une partie spécifique comprenant un texte long, on peut faire pointer ce lien directement sur le bloc que l’on souhaite pour éviter à l’internaute de devoir chercher dans toute la page.

Bloc titre

Titre : titre du contenu, pour l’internaute s'affiche au-dessus du contenu ; Type : associé au titre, détermine le style d'affichage du Titre ; choisir en fonction du niveau de titre (Disposition1 = Titre de niveau 1, Disposition2 = Titre de niveau 2 et ainsi de suite – Veiller à respecter l'ordre de structuration globale de la page). Remarque : l'option "Par défaut " s'affiche en fait en style "Titre1". Le type "Caché" masque l'en-tête pour les internautes. Alignement : ne pas utiliser sauf cas particulier (l'alignement est géré par la charte graphique - feuille de style - pour harmoniser la mise en page)

☺ Renseigner le titre est un "plus" pour la structura tion future de la page. � c’est l’intitulé du paragraphe ou de la section � il peut également n'être qu'une indication de contenu

(sommaire, note de service) utile pour faire des liens à l'intérieur de la page mais qui n'aurait aucun intérêt à être affiché pour l'internaute ; auquel cas, il est possible de lui affecter le type "Caché"

� le titre de l’élément de contenu permet également de repérer plus facilement les contenus dans l’interface d’administration Typo3.


p.59/159

Lien : le titre peut être un lien et pointer vers une page interne du site ou un autre site. Pour en savoir plus sur les liens, voir la Fiche 07 "Liens".

Remarque : Si les options du titre ("alignement", "type" et "lien") ne sont pas affichées, il suffit de cocher la case "Afficher les options secondaires (palettes)" en bas de la page.

2 - Onglet Accès

Visibilité : Cacher un contenu.

L'option "Élément de contenu - Désactiver " permet de cacher provisoirement l'élément soit parce qu'il est en cours de préparation et qu'il n'est pas souhaitable que les internautes le voient avant finalisation, soit parce qu'il est destiné à un affichage ultérieur (annonce d'ouverture d'un concours par exemple).

☺ Lien vers le haut Si l'élément saisi est le dernier de la page, penser à cocher la case "Ajouter un lien vers le haut de la page - Activer "

3 - Terminer la saisie Une fois l'ensemble des informations saisies, il est possible, au moyen des icônes placées dans le bandeau supérieur de :

� Fermer le document sans l'enregistrer, � Enregistrer l'élément (avec 4 options possibles), � Supprimer l'élément, � Annuler / Rétablir le dernier changement.


p.60/159

EDITER / MODIFIER UN ELEMENT DE CONTENU Il existe 3 possibilités pour éditer/modifier un élément de contenu :

� Cliquer sur l'icône (en haut à droite). � Cliquer sur l'icône de l'élément en haut à gauche (2a) pour afficher le menu contextuel puis choisir "Editer" (2b). � Cliquer simplement dans la zone de texte.

L’élément de contenu s’affiche avec ses données, prêt à être modifié.

Remarque : Si on modifie le type de l'élément (exemple : "Texte" en "Texte + Image"), un nouvel onglet "Média" est ajouté. A l'inverse, si on passe par exemple d'un type "Texte + Image" à un type "Texte", l'onglet "Média" disparaît (mais les données sont toujours stockées et si on revient à "Texte + Image", elles réapparaissent).

1 2a a

2b 3

GUIDE TYPO3 Fiche 07 - Titre

p.61/159

FICHE 07 – ÉLEMENT DE CONTENU : TITRE Le principal intérêt du contenu de type "Titre " est d'être associé à un contenu particulier qui ne possède pas de titre (élément "HTML", Sommaire…).

Pour ajouter un élément de type Titre dans une page :

� sélectionner dans l'arborescence la page dans laquelle le contenu va être enregistré, � cliquer sur l'icône permettant d'ajouter un nouvel élément de contenu dans une page.

Le type "Titre " n’est pas accessible directement dans la liste des types de contenus. Choisir un autre type par défaut, exemple : "Elément de texte ".

Puis, dans l’onglet "Général" , dérouler la liste des types d’élément de contenu et sélectionner "Titre ".

Un message signale que cette opération va modifier le formulaire. Confirmer en cliquant sur le bouton "OK".

GUIDE TYPO3 Fiche 07 - Titre

p.62/159

� renseigner le "Titre ",

� sélectionner le "Type " (mise en forme du titre),

� enregistrer la saisie (icônes dans le bandeau supérieur). Affichage à l'écran

[Titre]

GUIDE TYPO3 Fiche 07 - Texte

p.63/159

FICHE 07 – ELEMENT DE CONTENU : TEXTE

� Créer un contenu texte � Mettre en forme du texte à l'aide de l'éditeur � Insérer une image dans le texte

CREER UN CONTENU TEXTE

� En mode "Page", cliquer sur le nom de la page où ajouter un contenu : la vue détaillée s'actualise à droite.

� Sélectionner l'icône à l'endroit où insérer le nouvel élément.

Dans l'exemple ci-dessus, la page "Objectifs" est composée de 3 contenus : le nouvel élément sera inséré entre le 1er et le 2e élément.

Choisir le type de contenu "Elément texte ".

1 2


p.64/159

Onglet "général"

Comme pour la plupart des types de contenu : � renseigner le "Titre ", � sélectionner le "Type "

(mise en forme du titre). Pour plus d'informations sur l'onglet "Général" et la description des champs, se référer à la "Fiche 07 générale ".

Sous la zone "Titre", apparaît une zone "Texte " comportant un éditeur de texte spécifique (appelé RTE : Rich Text Editor ou Éditeur de texte avancé). ☺ Il permet également d’insérer des liens, des images ou des tableaux.


p.65/159

Saisir le texte, le mettre en forme puis l’enregistrer. Ne pas hésiter à enregistrer régulièrement car il n’y a pas de sauvegarde automatique ! METTRE EN FORME LE TEXTE A L 'AIDE DE L 'EDITEUR L’éditeur permet de mettre en forme le texte sans avoir besoin de connaissances en langage html. On retrouve dans cet éditeur les grandes lignes d’un traitement de texte. Ses fonctionnalités sont détaillées ci-après.

Une brève description de chaque fonctionnalité apparaît en positionnant la souris sur chacune des icônes.

Fonctionnalités de base

Met le texte sélectionné en caractères gras

Met le texte sélectionné en caractères italiques

Met le texte sélectionné en indice

Met le texte sélectionné en exposant

Insère une ligne horizontale

Insère un caractère spécial (exemple : majuscule accentuée)

Fonction "rechercher/remplacer"

Annule la dernière action effectuée sur le texte

Réitère la dernière action effectuée sur le texte

Réduit l’indentation du paragraphe sélectionné (une tabulation en moins)

Augmente l’indentation du paragraphe sélectionné (une tabulation en plus)

Liste numérotée (voir ci-dessous "Cas particulier : liste à 2 niveaux")

Liste à puce (voir ci-dessous "Cas particulier : liste à 2 niveaux") Fonctionnalités particulières

Insère une image (voir paragraphe ci-dessous "Insérer une image dans le texte")

Ouvre l'assistant de création de liens pour le texte sélectionné (Se référer à la fiche 07 "Lien")

Ouvre l’assistant de création de tableau (Se référer à la fiche 07 "Tableau")

Édite le texte en code HTML (pour les rédacteurs expérimentés)

Enlève tout le formatage du texte (voir paragraphe ci-dessous "Copier-coller de texte")

Cette icône située à droite du bloc texte permet d'agrandir la zone de saisie pour plus de confort. Subtilité des sauts de ligne dans l'éditeur de text e RTE

� la touche "Entrée" crée un nouveau paragraphe (saut de ligne avec espace), � les touches "Shift" + "Entrée" génèrent un retour à la ligne (sans créer un nouveau paragraphe).


p.66/159

Cas particulier : liste à 2 niveaux Etape 1 - Saisir l'énumération (sans retrait et sans puce)

Remarque s : � les "tirets" ou puces provenant de copier-coller

depuis un logiciel de traitement de texte doivent être effacés ;

� ne pas ajouter de ligne vide (touche "entrée" du clavier) entre chaque item de l'énumération.

Etape 2 - Sélectionner cette liste brute et cliquer sur :

"Liste à puces "

ou "Liste ordonnée "

Etape 3 - Sélectionner les sous-entrées et cliquer sur "Augmenter le retrait".

Copier-coller du texte à partir d'un autre éditeur Lors d'un copier-coller à partir d'un autre éditeur, la mise en forme (ou formatage) est conservée. Cela présente deux inconvénients :

� non-respect de la charte graphique du site, � code HTML surchargé.

☺ "Raccourcis claviers standards " pour couper, copier, coller du texte dans un éditeur de texte :

� couper : "Ctrl" + "X", � copier : "Ctrl" + "C", � coller : " Ctrl" + "V".

Il existe 2 solutions pour "nettoyer" le formatage du code provenant d’un autre éditeur.


p.67/159

Solution 1

� sélectionner le texte à épurer

� cliquer sur l'icône "Enlever le formatage"

Dans la fenêtre qui s’ouvre : � cocher les cases correspondantes à la situation, � valider en cliquant sur le bouton "OK". Exemple Zone à nettoyer : Tout Type de formatage à supprimer : Formatage MS Word Si le résultat n’est pas satisfaisant, revenir en arrière avec la

fonction et essayer d’autres paramètres ou tester la deuxième solution ci-dessous.

Solution 2

� copier le texte d’origine dans un éditeur de texte basique tel que le bloc-notes , � enlever toute mise en forme particulière : couleur, tabulations, caractères spéciaux… (ne garder que les

retours à la ligne), � copier ce texte épuré du bloc-notes vers le contenu Texte de typo3, � refaire la mise en page du texte avec les fonctionnalités de Typo3 (puces, gras...).

Remarque s :

� lors de la suppression de toute mise en forme du texte dans le bloc-notes, les caractères spéciaux tels que : "’ é è œ ê ô ù …" doivent être ressaisis au clavier ; sinon des points d’interrogation apparaîtront à la place de ces caractères spéciaux sur le site car leur format n'est pas reconnu (cela se produit fréquemment lorsque les textes originaux sont issus de Microsoft Word),

� il conviendra de veiller à ne pas ajouter de lignes vides superflues (touche "entrée" du clavier) par inadvertance afin de ne pas déséquilibrer l'affichage de la page,

� il est nécessaire de se référer aux règles de typographies rappelées dans la première partie de ce guide d’utilisation.


p.68/159

Titres et sous-titres (hiérarchie du texte)

Une bonne utilisation des titres permet de comprendre tout de suite la structure de l'information comme dans tout document. Par ailleurs, pour des raisons d'accessibilité, il doit y avoir un et un seul "Titre1 " (ou "disposition 1 ") dans toute la page html. Il doit être placé juste avant le début du texte, c'est le titre de la page .

Affichage à l'écran :

Deux hypothèses ensuite :

� il y a un sous-titre pour cette page (qui sera automatiquement un "Titre2 " (ou "disposition 2 ") et par conséquent, le "1er" intitulé de section qui sera rencontré dans le contenu de la page ne pourra être qu'un "Titre3 " (ou "disposition 3 "),

� il n'y a pas de sous-titre pour cette page et par conséquent, le "1er" intitulé de section qui sera rencontré dans le contenu de la page ne pourra être qu'un "Titre2 " (ou "disposition 2 ").

[Titre 1]

[Titre 2]


p.69/159

Il faut ensuite veiller à structurer le document en une suite logique et hiérarchique de "Titre2" à "Titre6".


p.70/159

INSERER UNE IMAGE DANS LE TEXTE Le contenu de type "Texte " offre la possibilité d’insérer une ou plusieurs images au fil du texte. Remarque : Il existe également un contenu de type "Texte avec image " (Se référer à la Fiche 07 "Texte avec image") qui gère les images indépendamment du texte et qui offre plus de fonctionnalités (affichage d'une légende sous l'image, agrandir l'image…). Dans l'élément "Texte avec image ", les images sont gérées en bloc (soit toutes à gauche, soit toutes à droite…) et ne peuvent être positionnées de manière indépendante. Dans le cas d’une seule image à insérer, le rendu des deux types de contenu est pratiquement identique. Le choix de l'un ou l'autre type s'affine avec la pratique. L'image doit être importée auparavant dans l'arborescence de fichiers (Se référer à la Fiche 06 "Gérer les ressources"). Il est nécessaire d'être très attentif à la taille des photos pour les raisons suivantes :

� elles doivent être acceptées au téléchargement dans Typo3, � elles doivent s’insérer dans la charte graphique du site et ne pas perturber la mise en page, � elles ne doivent pas être un frein au chargement de la page dans le navigateur.

� Dans le contenu texte, positionner le curseur à l'endroit où l'image doit être insérée.

� Cliquer sur l'icône "Insérer une image ".

Une nouvelle fenêtre s'ouvre proposant 3 onglets : Nouvelle 'Magic' Image (sélectionné par défaut) : permet de sélectionner n'importe quel format d'image. Nouvelle 'Plain' Image : n'autorise que les formats d'image web (jpg,jpeg,gif,png) jusqu'à une résolution maximale de 640x680 pixels (c'est déjà beaucoup). Glisser-Déposer : Dépose l’image sélectionnée où l’on veut dans le texte. ☺ Cocher la case "Afficher les miniatures " pour avoir un aperçu des images.

1

2


p.71/159

Onglets "Nouvelle 'Magic' Image" et "Nouvelle 'Plain' Image" Nouvelle 'Magic' Image est plus permissif que Nouvelle 'Plain' Image mais les images sont renommées et dupliquées dans un répertoire racine auquel les rédacteurs du site n'ont pas accès. Cela peut être contraignant en cas de modification de l’image car il faudra, en plus de recharger l’image dans le répertoire, la recharger aussi dans le contenu texte pour qu’elle soit prise en compte.

� Sélectionner le dossier dans l’arborescence de dossiers, � Cliquer sur l'icône ou le nom de l'image. (Cliquer sur l’image l’ouvre dans une autre fenêtre, mais ne la charge pas dans le texte).

L'image est insérée à l'emplacement du curseur.

Remarque : Un clic sur la miniature affiche une image un peu plus grande, dans une nouvelle fenêtre…

… et donne des informations sur la taille et le format. Un clic sur le nom du fichier ouvre l’image grandeur réelle dans un navigateur.


p.72/159

☺ Il est toujours possible de redimensionner l'image dans le bloc Texte (penser à utiliser les angles pour garder la proportion). Typo3 affiche la taille en temps réel. Cette fonctionnalité est à utiliser avec modération car cela ne réduit pas le poids de l’image de départ.

Pour régler les paramètres de l’image (position par rapport au texte, espacement…), sélectionner l’image, puis choisir une des 2 solutions ci-dessous Solution 1 Cliquer sur l'icône qui s’appelle maintenant "Modifier une image".

Ou Solution 2 Cliquer droit sur l’image et sélectionner "Modifier une image " dans le menu contextuel.


p.73/159

Une nouvelle fenêtre permet de modifier les paramètres de l'image :

Largeur : en pixel, renseigné par défaut. Hauteur : en pixel, renseigné par défaut. Afin de ne pas déformer l'image, il convient de veiller à conserver les proportions (largeur/hauteur) Bordure : cadre extérieur à l'image. Flottaison : habillage du texte

� non spécifié : paramétrage par défaut, � sans flottaison : pas d'habillage du texte, � à gauche : le texte s'ajuste à droite de

l'image, � à droite : le texte s'ajuste à gauche de

l’image. Espace intérieur haut/droit/bas/gauche : espace libre entre le texte et l'image ; en pixel. Titre / Texte de remplacement : à renseigner si l'image est significative (mettre le même intitulé). Cliquer pour agrandir : permet à l’internaute d'agrandir l'image si elle a été réduite.

Rendu à l’écran

Remarque : Le titre et le texte de remplacement sont à renseigner impérativement si l'image a un sens, c'est-à-dire qu'elle apporte une information complémentaire. L’intitulé apparaît lors du passage de la souris sur l'image. ☺ D'autre part, le texte est lu par les synthétiseurs vocaux.

Rendu à l’écran

C’est également cet intitulé qui s’affiche si l’image est introuvable (par exemple, si elle a été supprimée).

Valider les modifications en cliquant sur le bouton "Mettre à jour ".

Enregistrer la saisie dans Typo3 (icônes dans le bandeau supérieur).


p.74/159

Onglet "Glisser-déposer"

Si la fenêtre "Insérer une image " masque la zone texte, la déplacer en cliquant sur la barre menu pour utiliser la fonctionnalité du glisser-déposer.

Ensuite, se positionner dans l’arborescence de fichier, sélectionner l’image de votre choix puis glisser l’image dans l’éditeur de la fenêtre principale.

GUIDE TYPO3 Fiche 07 – Texte avec image

p.75/159

FICHE 07 – CONTENU IMAGES (TEXTE AVEC IMAGE OU IMAGES SEULES)

� Sélectionner le type de contenu � Onglet Images � Onglet Apparence

Les contenus "Texte avec image" ou "Images seules" sont traités dans cette même fiche car ils présentent de nombreux éléments communs. Ils permettent de mettre en forme aisément un bloc image avec ou sans bloc texte. SELECTIONNER LE TYPE DE CONTENU

Pour ajouter un élément de type "Texte avec image" ou "Images seules" dans une page, il faut :


Choisir le type d'élément selon le besoin.

Remarque : Les onglets "Général" et "Accès" sont identiques aux contenus de type "Elément texte" : voir Fiche 07 "Texte". Seuls les onglets spécifiques "Images" et "Apparence" sont donc présentés dans cette fiche. L’onglet "Images " concerne l’image (téléchargement, légende, accessibilité…) tandis que l’onglet "Apparence " concerne le positionnement de l'image par rapport au texte (taille des images et alignement).


p.76/159

ONGLET IMAGES L'onglet "Images " permet d'insérer des images et d'y associer légendes et titres.

☺ Dans la zone Comportement, cocher la case pour que, lors du clic sur l’image, une « pop-up » s’ouvre avec l’image en taille réelle.

Pour ajouter une image de l’ordinateur, cliquer sur le bouton Select & upload files ou glisser/déposer le fichier dans la zone "Drag & drop to upload files ".

Si le fichier existe déjà dans le module « Fichiers », cliquer sur le bouton Ajouter une image :

Une nouvelle fenêtre affiche l'arborescence de dossiers :

� Sélectionner dans le dossier de ressources (colonne de gauche) le répertoire où sont stockées les photos ; � Si nécessaire, cocher la case "Afficher les miniatures" pour voir les vignettes des photos ; � Puis dans la liste des fichiers (colonne de droite), cliquer sur le nom de l'image à importer ou cocher la

case de l’image désirée et cliquer sur "Importer la sélection". ☺ Cocher plusieurs cases images pour importer plusieurs photos en même temps.


p.77/159

L’aperçu des images apparaît dans la zone "Images" dans l'ordre de téléchargement et dans l'ordre dans lequel elles s'afficheront.

Déplacer une image : Glisser-déposer les images entre elles pour modifier l’ordre d’apparition.

Supprimer une image : Permet de supprimer l’image du bloc d'images (mais ne la supprime pas de l’arborescence de fichiers).

Cacher une image : Permet de désactiver l’image du bloc d'images.

Afficher le détail de l’image : Cliquer sur la flèche pour dérouler les informations complémentaires de l'image :

- Titre ( s'affiche au survol de la souris) - Texte alternatif ( s'affiche à la place de l’image si elle est introuvable) - Lien (si l’image renvoi vers une page ou autre document) - Description (légende de l’image)

Note : Par défaut, les champs sont désactivés, cliquer sur la case « Surcharger » pour les activer.


p.78/159

ONGLET APPARENCE

Les champs "Largeur " et "Hauteur " permettent de réduire la taille d'affichage à l'écran de l'image (valeur en pixel) sans que les dimensions originales ne soient modifiées afin de permettre d'agrandir celle-ci par un simple clic (si la case "Agrandissement lors du clic" a bien été cochée dans le bloc Comportement de l'onglet Images). ☺ Il est possible de ne renseigner que la largeur ou la hauteur, l’image gardera ses proportions. Cela offre l’avantage d’un affichage harmonisé des images au cas où les tailles d’origine seraient différentes. Si les images sont alignées horizontalement, il est préférable de fixer la hauteur et inversement dans le cadre d'un alignement vertical c'est la largeur qui doit être fixée. Pour ajouter un cadre autour de l’image, cocher la case "Activer " sous "Bordure". Affichage à l’écran :

Hauteur fixée à 300 (pixels) : affichage harmonisé Hauteur non renseignée : affichage libre

Qualité et type / Effet : Typo3 propose quelques retouches d'images mais les effets s’appliquent globalement à toutes les images du contenu et sont effectuées en temps réel ce qui peut augmenter le temps de chargement de la page de façon significative. Il est recommandé d'utiliser un logiciel spécialisé.


p.79/159

Bloc Alignement des images

Cas d'un contenu "Texte avec image "

Cas d'un contenu "Images seules "

Position et alignement permet de gérer l’affichage des images par rapport à la page et au texte :

� avant ou après le texte et aligné à droite, à gauche ou centré,

� à droite ou à gauche du texte et avec ou sans habillage.

Positio n et alignement permet de positionner les images par rapport à la page :

� centre, � droite, � gauche

Nombre de colonnes : permet de positionner plusieurs images sur une même ligne. Par défaut, les images sont affichées sur 1 colonne à raison d'une seule image par ligne. Lignes horizontales : permet l'alignement vertical des photos affichées sur plusieurs lignes.


p.80/159

Alignement de la légende : centré / droite / gauche. Positionnement de la légende par rapport à l’image (relatif à la zone Légende de l'onglet Images). Affichages à l’écran : Paramètres :

Largeur : vide Hauteur : 150 (pixels) Dessous, gauche Nombre de colonnes : 3

Largeur : 200 (pixels) Hauteur : vide Habillé, droite Nombre de colonnes : 1

GUIDE TYPO3 Fiche 07 - Liens

p.81/159

FICHE 07 – LIENS

� Créer un lien Étape 1 : Sélectionner le texte Étape 2.a : Lien vers une page interne du site Étape 2.b : Lien vers un fichier à télécharger Étape 2.c : Lien vers une URL externe Étape 2.d : Lien vers une adresse mél (E-mail)

� Modifier un lien � Supprimer un lien

Les liens hypertextes, base de la navigation sur internet, se répartissent en quatre groupes : Page (lien interne au site web), Fichier (document à télécharger au format pdf, odt, word…), URL externe (sur un autre site web) et E-mail (adresse mél). CREER UN LIEN Quel que soit le lien, la création s'effectue en deux étapes : sélection du texte puis choix du type de lien.

Étape 1 : Sélectionner le texte

Éditer le contenu de la page concernée (Texte ou Texte avec image…) et se placer sur l'onglet "Général".

� Surligner la partie de texte à transformer en

lien. � Cliquer sur l’icône "Insérer un lien ". Une nouvelle fenêtre s’ouvre, donnant accès aux différents types de liens.

L'icône "Insérer un lien" reste grisée tant qu'aucun texte n'est sélectionné.

Étape 2.a : Lien vers une page interne du site

L’onglet "Page" est celui sélectionné par défaut. Renseigner le champ "Titre" pour personnaliser le lien (obligatoire pour l’accessibilité). ☺ Sur le site, le texte du champ "Titre" s'affiche au passage de la souris et est lu par les synthétiseurs vocaux.

2

1


p.82/159

Lien vers une page � sélectionner dans l'arborescence du site

la page de destination , � cliquer sur le nom de la page. ☺ Déplier une sous-arborescence en cliquant sur la flèche grise à gauche de la page.

ou

Lien vers un élément de contenu d'une page � cliquer sur la flèche orange à droite du

nom de page, � puis sur un contenu dans la page pour

un lien direct sur cet élément.

Après avoir sélectionné la page ou l’élément de contenu, le lien se crée automatiquement. Il apparaît souligné et de couleur bleue (mais s'affichera aux couleurs de la charte graphique dans le site).

Affichage à l'écran

Étape 2.b : Lien vers un fichier à télécharger

� Sélectionner l'onglet "Fichier ". � Sélectionner "Nouvelle fenêtre"

dans la zone "Cible" (ouvre le fichier dans une autre fenêtre).

� Personnaliser le "Titre"

(obligatoire pour l’accessibilité). � Choisir dans "Arborescence de

dossiers" le répertoire contenant le fichier puis, dans la colonne de droite "Fichiers", cliquer sur le nom du fichier à télécharger.

Les liens vers les fichiers ne sont pas relatifs . Si on déplace un fichier dans l'arborescence de dossiers, les liens pointant sur ce fichier ne fonctionneront plus. Il faudra les modifier dans le texte.

1

2

3

4


p.83/159

Remarques : � l'ajout de fichiers en téléchargement (PDF, diaporama, etc.) se fait également en utilisant les modèles de

contenu (voir Fiche 07 "Modèle de contenu") ; leur usage permet de prévenir l'internaute du format de fichier proposé, du logiciel éventuellement nécessaire et du poids du fichier,

� le poids des fichiers peut être indiqué pour renseigner l'internaute avant le téléchargement. Il peut être

exprimé soit en kilo-octets (abrégé Ko : "K" majuscule et "o" minuscule) et dans ce cas là, les nombres seront des entiers ou bien en méga-octets (abrégés Mo : "M" majuscule et "o" minuscule) et dans ce cas là, l'indication de poids peut être plus précise en ayant recours à un nombre décimal (veiller à utiliser la "virgule" comme séparateur et non pas le "point").

Étape 2.c : Lien vers une URL externe

� Sélectionner l'onglet "URL externe ",

� Renseigner l'adresse du site

externe, � Sélectionner "Nouvelle fenêtre"

dans la cible, � Renseigner le titre (obligatoire

pour l’accessibilité), � Valider le lien en cliquant sur le

bouton "Attribuer le lien ".

Étape 2.d : Lien vers une adresse mél (E-mail)

� Sélectionner l'onglet "E-mail ", � Renseigner l'adresse mél, � Renseigner le titre (obligatoire

pour l’accessibilité), � Valider le lien en cliquant sur le

bouton "Attribuer le lien ".

Remarque :

Pour ne pas rendre l’adresse mél visible sur le site, remplacer le texte [email protected] par "Nous contacter". Procéder de même pour créer le lien.

1 2

3

4

1 2

3

4

5


p.84/159

MODIFIER UN LIEN

Pour modifier un lien � Le surligner et au choix � a - Cliquer sur l'icône "Insérer/Modifier un lien"

� b - Cliquer droit sur le texte surligné, puis sélectionner "Modifier un lien" dans le menu contextuel.

La fenêtre de modification affiche le lien enregistré : les zones de saisie sont modifiables. Pour enregistrer les modifications, selon le type de lien, cliquer sur le bouton "Attribuer le lien ",

ou "Mettre à jour ".

1

2a

2b


p.85/159

SUPPRIMER UN LIEN

Pour supprimer un lien � Le surligner. � Cliquer sur l'icône "Insérer/Modifier un lien".

Dans la fenêtre "Modifier un lien", sélectionner l'onglet "Supprimer le lien ".

2

1

GUIDE TYPO3 Fiche 07 - Tableau

p.86/159

FICHE 07 - TABLEAU

� Créer un tableau � Saisir, mettre en forme et modifier un tableau � Supprimer un tableau

Il est possible d'insérer un tableau dans un contenu "Elément texte" ou "Texte avec image" ou une actualité. Pour créer ces types de contenus, se référer aux Fiches 07 correspondantes. Le tableau est exclusivement réservé aux données ta bulaires (informations structurées en lignes et/ou en colonnes). En aucun cas un tableau ne peut servir à mettre en page des textes ou des images. CREER UN TABLEAU

Après avoir créé ou édité un élément de contenu, cliquer sur l'icône "Insérer un tableau ". Une nouvelle fenêtre s’ouvre proposant 4 onglets pour définir le tableau.

Onglet "Général"


p.87/159

Description L'élément "légende " est le titre du tableau. Il est indispensable pour ceux qui utilisent un navigateur lisant à voix haute le contenu d'une page (dans le cas d'un tableau, il est bien plus efficace pour le référencement qu'un titre de contenu en "disposition 1" ou "titre 1"). L’élément "résumé ", complémentaire de la légende, est un peu plus complet. Il permet la compréhension du tableau aux déficients visuels. Dimensions et entêtes :

� choisir le nombre de lignes et de colonnes, � sélectionner le positionnement des entêtes du tableau.

Style : laisser à "Aucun" ; l’aspect graphique du tableau est défini dans la feuille de style. Onglet "Disposition"

L'espacement (en pixels) permet d'aérer le texte. Bloc Disposition

Largeur : valeur numérique Unité de largeur : à associer avec Largeur

Dans l'exemple ci-contre "Largeur 100%" signifie que le tableau occupera toute la largeur de la page.

Il est possible de donner une largeur fixe au tableau. Par exemple : - Largeur : 500 - Unité de largeur : pixels Dans l'exemple ci-contre, la hauteur s'ajustera au contenu. Flottaison (à droite et à gauche) signifie que le texte de la page va s'ajuster autour du tableau (si la largeur du tableau est inférieure à celle de la page, évidemment).

Onglet "Alignement / Bordure"

Ces paramètres gèrent : � l'alignement du texte (horizontal et

vertical), � les cadres et bordures.


p.88/159

Onglet "Arrière-plan et couleurs"

Il est possible de mettre un peu de couleur dans le tableau (couleur de fond de préférence) en restant en harmonie avec les couleurs de la charte graphique. Mais il faut veiller à rester sobre… Cliquer enfin sur le bouton " Ok " pour valider la création du tableau. SAISIR, METTRE EN FORME ET MODIFIER UN TABLEAU

Après avoir créé le tableau, une structure vide apparaît. Saisir les données dans les cases du tableau.

Pour mettre en forme ou modifier un tableau : Solution 1 Utiliser la barre d'outils dédiée aux tableaux.

La première ligne (en-têtes de colonnes) et la dernière (mais seulement s'il s'agit d'une ligne de "total") sont en gras .


p.89/159

Solution 2 Cliquer droit sur des éléments du tableau pour accéder aux options de gestion via le menu contextuel. ☺ Pour en savoir plus sur les tableaux et l’accessibilité : http://www.pompage.net/pompe/autableau/ http://accessibilite.web.free.fr/index.php?page=cat_tableaux&css=css_0


SUPPRIMER UN TABLEAU

Pour supprimer un tableau dans un contenu Texte : � sélectionner le tableau, � cliquer droit pour afficher le menu

contextuel, � cliquer sur la fonction "Retirer l’élément

<table> ".

[Légende]

[En-tête haut et gauche ]

GUIDE TYPO3 Fiche 07 - Enregistrement

p.90/159

FICHE 07 - ENREGISTREMENT Par souci de cohérence dans le site, il est important que les fichiers (PDF par exemple) soient toujours introduits de la même manière (ex : "Les documents suivants sont téléchargeables au format PDF"). Pour faciliter cette harmonisation, il est possible d'avoir recours à un "enregistrement". Remarque : Le type "référence" et le type "enregistrement" ont comme intérêt commun de servir la cohérence du site. Leur différence repose sur la modification :

� pour modifier un enregistrement (et répercuter les modifications sur l'ensemble des pages qui l'utilisent), il faut se rappeler dans quelle page est positionné l'enregistrement source (mais dans le même temps, il peut être avantageux de stocker tous les enregistrements dans une seule et même page clairement identifiée),

� pour modifier une référence (et répercuter les modifications sur l'ensemble des pages qui l'utilisent), il suffit d'ouvrir la référence sur n'importe quelle page l'utilisant.

Pour cela, il faut, au préalable, préparer des "formulations-types" dans une page qui n'apparaîtra pas dans le menu (cocher la case "hors-menu").

Se positionner ensuite sur la page dans laquelle on souhaite que la "formulation-type" apparaisse et créer un nouvel élément de type "Elément texte".


p.91/159

Modifier le type d'élément en choisissant "Insérer enregistrements" et valider le message d'alerte de Typo3.

Dans la première partie de l'écran, renseigner le nom de l'élément puis "naviguer dans les enregistrements" pour sélectionner l'enregistrement souhaité :

Puis :

� dérouler l'arborescence, � afficher les éléments de la page, � choisir l'enregistrement à ajouter.


p.92/159

Le nom de l'enregistrement s'affiche et après avoir enregistré cet élément, il apparaît dans les contenus de la page avec une icône particulière.

Pour modifier un enregistrement (et répercuter les modifications sur l'ensemble des pages qui l'utilisent), il faut se rappeler dans quelle page est positionné l'enregistrement source. Une fois cet "enregistrement-source" modifié et enregistré, la répercussion sera automatique sur toutes les pages l'utilisant. Remarque : Si on supprime l'élément "source" (ici, une des "formulations-types" de la page Enregistrements), l'enregistrement de la page de "destination" (ici la page Téléchargements) existera toujours mais il sera vide et n'affichera aucun contenu. Si on supprime l'élément "enregistrement" sur la page de destination, cela n'aura aucun impact sur l'élément source.

GUIDE TYPO3 Fiche 07 - Référence

p.93/159

FICHE 07 - REFERENCE Par souci de cohérence dans le site, il peut être important, par exemple, qu'un même élément soit répété de manière identique sur différentes pages du site (ex : un slogan ou bien une annonce de portes ouvertes, etc.). Pour faciliter cette harmonisation, il est possible d'avoir recours à une "référence". Remarque : Le type "référence" et le type "enregistrement" ont comme intérêt commun de servir la cohérence du site. Leur différence repose sur la modification :

� pour modifier un enregistrement (et répercuter les modifications sur l'ensemble des pages qui l'utilisent), il faut se rappeler dans quelle page est positionné l'enregistrement source (mais dans le même temps, il peut être avantageux de stocker tous les enregistrements dans une seule et même page clairement identifiée),

� pour modifier une référence (et répercuter les modifications sur l'ensemble des pages qui l'utilisent), il suffit d'ouvrir la référence sur n'importe quelle page l'utilisant.

Pour cela, il faut commencer par créer un élément (de type "Elément de texte normal" par exemple dans une page) que l'on considèrera être la référence "principale".

Renseigner le titre de l'élément et saisir le contenu.


p.94/159

Après avoir enregistré, l'élément s'affiche dans la page.

Cliquer sur l'icône "Créer une référence"

Ouvrir la page dans laquelle l'élément ("référence") doit également apparaître et le coller à l'endroit approprié.


p.95/159

L'élément collé (référence "secondaire") n'a pas tout à fait la même apparence qu'un élément "normal" : en effet, son intitulé ("Slogan") est en italique et le fond grisé est plus foncé.

Pour modifier une référence (et répercuter les modifications sur l'ensemble des pages qui l'utilisent), il suffit d'ouvrir la référence sur n'importe quelle page l'utilisant (qu'il s'agisse de la principale ou d'une secondaire).

Dans l'exemple, l'élément ouvert était sur la page "Ingénierie" mais en éditant la référence, une redirection est effectuée de manière transparente sur l'élément "référence-source" dans la page "Administratif".


p.96/159

Une fois la modification effectuée et enregistrée, la répercussion sera automatique sur toutes les pages utilisant la référence.

Remarque :

Suppression de la référence "principale" : le fait de "disjoindre" ( ) la référence "principale" n'a pas de répercussion sur les références "secondaires" puisque la référence "principale" est toujours présente dans Typo3

même si elle n'est plus visible sur la page ; en revanche, la suppression définitive ( ) de celle-ci (en mode liste) supprime automatiquement toutes les références "secondaires". Suppression des références "secondaires" : le fait de "disjoindre" une référence secondaire n'a aucun impact sur les autres ni sur la référence "principale".

GUIDE TYPO3 Fiche 07 - Modèle de contenu

p.97/159

FICHE 07 – MODELE DE CONTENU (CONTENU FLEXIBLE ) Les contenus flexibles sont des modules pré-formatés permettant d'appliquer un style identique aux informations similaires et de formater de manière homogène, par exemple, des téléchargements de fichiers PDF, des mentions d'auteurs, des alertes, des aides, des contacts … Des types standards de contenus prédéfinis sont disponibles sur la plupart des sites. La couleur des icônes associées et des liens dépendent de la charte graphique du site. Quelques exemples de contenus prédéfinis Document PDF

Document texte

Contact

Feuille de calcul

Document présentation

Lien internet

En savoir plus …

Alerte

Aide

Créer un contenu à partir d'un modèle

� En mode "Page", cliquer sur le nom de la page dans laquelle va être inséré le contenu � Cliquer sur l’icône pour créer un nouvel élément

La liste des types de contenus possibles s'affiche.

2

1


p.98/159

Choisir le type de contenu flexible "Bloc texte avec picto"

Le formulaire de création de contenu flexible apparaît.

1

2

3

4

5

6

7

8


p.99/159

� Le type est rempli par défaut avec "contenu flexible" � La rubrique "Titre" peut être remplie pour information mais elle ne s'affichera pas � L' "ObjectGabarit" est rempli par défaut avec "Bloc texte avec picto" � Sélectionner la taille du titre dans le champ "Type titre" (inutile si aucun titre n'est défini dans le champ

suivant �) � Saisir le titre (facultatif) � Dans la liste déroulante "Choix du picto", choisir le type de contenu souhaité � Saisir le texte souhaité dans la partie "Contenu". Pour les contenus permettant de mettre en avant un

fichier en téléchargement ou un lien internet, bien penser à créer un lien hypertexte sur l’élément (voir Fiche 07 "Lien")

� Enregistrer Rendu à l’écran

GUIDE TYPO3 Fiche 07 - Menu

p.100/159

FICHE 07 - MENU Dans le cas d'une rubrique particulièrement volumineuse, il est intéressant de présenter à l'internaute un "sommaire" ou "menu" lui permettant d'avoir un aperçu du contenu de la rubrique. Il est techniquement possible de réaliser ce sommaire au moyen, par exemple, d'une liste à puces agrémentée de liens vers les pages de la rubrique mais Typo3 propose aussi une fonctionnalité automatique de menu basée sur l'arborescence des pages. Pour cela, il faut commencer par créer un élément (de type "Elément texte" par exemple) dans une page.

Modifier le type d'élément en choisissant "Menu / Plan du site" et valider le message d'alerte de Typo3.

Renseigner le titre de l'élément et éventuellement son style dans la partie haute de l'écran.

GUIDE TYPO3 Fiche 07 - Menu

p.101/159

Dans la partie inférieure de l'écran, ouvrir le menu déroulant des pages sélectionnées pour choisir le type de menu (ici : "Menu des sous-pages sélectionnées") et naviguer dans les enregistrements pour choisir le point d'entrée du menu (dans l'exemple, le menu sera composé de toutes les pages placées sous la page "Equipe").

Le nom du point d'entrée s'affiche et après avoir enregistré cet élément, il apparaît dans les contenus de la page avec une icône particulière.

Sur le site, le menu automatique s'affichera exactement à l'endroit où l'élément avait été positionné (dans l'exemple ci-dessus, après le titre) et les liens seront automatiquement faits vers les pages de la rubrique :

Remarque : L'utilisation de cette fonctionnalité automatique montre à quel point il est important de définir des noms de pages à la fois concis et précis pour que l'internaute ait une vision claire des contenus qu'il trouvera en ouvrant les pages.


p.102/159

FICHE 07 – CONTENUS HTML Le HTML ("HyperText Mark-up Language") est un langage conçu pour représenter les pages web, structurer et mettre en page les contenus. Il n'est pas nécessaire de connaître ce langage pour mettre à jour le site, c'est justement l'objectif de l'utilisation d'un système de gestion de contenus tel que Typo3. Néanmoins, ce langage peut être utilisé dans différents cas comme par exemple :

� pour un usage plus avancé destiné aux connaisseurs � pour inclure des vidéos ou des cartes interactives dont le code HTML à intégrer est fourni sur le site

d'origine.

Exemple détaillé des vidéos Lorsqu'on visualise une vidéo sur un site spécialisé (ex : Youtube, DailyMotion, …), il est possible de récupérer le code HTML de celle-ci afin de l'intégrer et de la visualiser directement sur une page de son propre site plutôt que sur le site d'origine. Les fonctionnalités pour récupérer le code HTML sont semblables à celles-ci :

Le code récupéré ressemble à ceci : <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/B8MZoonL_Ec?fs=1&hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/B8MZoonL_Ec?fs=1&hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Il suffit alors de copier ce code et de l'intégrer dans un contenu HTML dans la page souhaitée. Créer un contenu HTML


La liste des types de contenus possibles s'affiche.

2

1


p.103/159

Choisir le type de contenu "HTML Brut"

Dans l'onglet "Général", • Compléter éventuellement le "Nom" du contenu. A noter que celui-ci ne s'affichera pas sur la page. Il s'agit

simplement d'une indication pratique. • Dans le champ "Code HTML", insérer le contenu HTML • Enregistrer

Remarque : Il faut adapter la taille de la vidéo à l’espace disponible sur la page (comme pour une image). Les sites Youtube et Dailymotion proposent lors de la récupération du code HTML de le personnaliser en choisissant plusieurs tailles de lecture d’une vidéo. Rendu à l'écran de cet exemple :

GUIDE TYPO3 Fiche 07 – Vidéo

p.104/159

FICHE 07 – VIDEO

� Insérer une vidéo à l'aide d'un contenu HTML � Insérer une vidéo issue de Youtube, Vimeo ou Dailym otion

Il n'est pas possible de stocker des vidéos dans le module "Fichiers" du site. Cela prendrait beaucoup trop d'espace. Les vidéos à insérer sur le site doivent être hébergées sur d'autres sites. Il suffit ensuite de les intégrer dans la page souhaitée. Pour cela il existe 2 solutions :

� Pour les vidéos stockées sur le site Youtube , Viméo ou Dailymotion , un module spécifique permet de simplifier la démarche d'intégration dans la page.

� Pour toutes les vidéos stockées sur d'autres sites, il est nécessaire de créer un contenu HTML dédié, si le

service de la vidéo le permet. INSERER UNE VIDEO A L 'AIDE D'UN CONTENU HTML Pour insérer une vidéo à l'aide d'un contenu HTML, se reporter à la fiche "Fiche 07 – HTML". INSERER UNE VIDEO ISSUE DE YOUTUBE, VIMEO OU DAILYMOTION Récupérer l’url de la vidéo Afin d’insérer une vidéo provenant d’un des trois services supportés, il est nécessaire de récupérer l’URL de la vidéo :


p.105/159

Insérer la vidéo sur une page du site :

Pour ajouter un élément de type "Vidéo" dans une page, il faut :


Choisir le module " Vidéo " Remarque : Les onglets "Général" et "Accès" sont identiques aux contenus de type "Elément texte" : voir Fiche 07 "Texte". Seuls les onglets spécifiques "Videos" et "Apparence" sont donc présentés dans cette fiche.


p.106/159

ONGLET VIDEOS L'onglet "Videos " permet d'insérer des vidéos et d'y associer des titres.

Dans la partie liens, il est possible d’ajouter plusieurs vidéos en sautant une ligne après chaque URL. Ajouter un titre pour chaque vidéo en gardant ce même principe. ONGLET APPARENCE

Position des titres : Permet d’aligner le titre de chaque vidéo à gauche, centré ou à droite (gauche par défaut). Tailles des vidéos : Pour modifier les tailles d’affichage des vidéos, par défaut, elles s’adaptent au contenu. La case Agrandissement lors du clic permet d’ajouter bouton pour voir la vidéo dans une nouvelle fenetre, adaptée à l’écran de l’internaute.

GUIDE TYPO3 Fiche 07 – Média

p.107/159

FICHE 07 – MEDIA Ce contenu permet d'insérer un élément de type Média comme une animation Flash. Etape préalable Le média doit auparavant être enregistré dans le module Fichiers. (Voir "Fiche 06 – Gérer les ressources (PDF, Image, etc …) dans l'arborescence de fichiers") Créer un contenu Média


La liste des types de contenus possibles s'affiche. Choisir le type de contenu "Média"

Dans l'onglet "Général", compléter le titre du contenu.

2

1

GUIDE TYPO3 Fiche 07 – Média

p.108/159

Dans l'onglet "Média", compléter les champs du formulaire puis enregistrer.

� Cliquer sur l'icône pour sélectionner l'animation flash en parcourant la liste des fichiers. � Décocher la case "Utiliser un lecteur" � Remplir éventuellement ces champs selon les besoins. Ceci n'est pas obligatoire, la configuration par défaut

suffit. Dans l'onglet "Comportement", remplir le contenu alternatif. Celui-ci permet d'avoir un descriptif de l'animation soit pour les personnes malvoyantes soit dans le cas où l'animation ne s'affiche pas dans le navigateur.

1

2

3

GUIDE TYPO3 Fiche 07 – Cartographie

p.109/159

FICHE 07 – CARTOGRAPHIE

� Insérer une carte simple Ajouter le plugin de la carte

� Insérer une carte multipoints Ajouter des adresses Ajouter le plugin de la carte

� Paramètres Ce service de cartographie et de plan en ligne utilise l'outil Google Map . Il permet de localiser sur une carte dynamique une ou plusieurs adresses selon les besoins.


p.110/159

INSERER UNE CARTE SIMPLE

Pour insérer une carte simple (un seul point), il faut :

� sélectionner, dans l'arborescence, la page dans laquelle la carte va être enregistrée, � cliquer sur l'icône permettant d'ajouter un nouvel élément de contenu dans une page.

Dans l’onglet "Plugins ", sélectionner "WEC carte simple ". Remarque : Les onglets "Général" et "Accès" sont identiques aux contenus de type "Elément texte" : voir Fiche 07 "Texte". Se positionner sur l’onglet "Plugin " et dans "Options du plugin ", remplir les informations relatives au point à géo localiser.

Enregistrer les modifications. Par défaut, une carte, centrée sur le point localisé, s’affiche sur la page. La personnalisation de la carte est détaillée dans la 3ème partie "Paramètres ".


p.111/159

INSERER UNE CARTE MULTIPOINTS Pour ajouter une carte avec plusieurs points, il est nécessaire d’enregistrer les adresses au préalable. Créer le dossier système

En mode "Liste", se positionner sur la page qui va contenir la carte, puis cliquer sur l'icône "Créer un nouvel enregistrement".

Choisir "Page (Dans)"

Choisir le type "Dossier" Confirmer le message d'alerte qui s'affiche


p.112/159

Dans l'onglet "Général" : � Saisir le titre "Adresses"

Dans l'onglet "Accès" : � Décocher la case "Désactiver"

Enregistrer la page

Le dossier apparait maintenant dans l'arborescence.

Ajouter une adresse

En mode "liste", se positionner sur le dossier système créé précédemment et cliquer sur "Créer un nouvel enregistrement ".


p.113/159

Choisir l’enregistrement de type "Adresse"

Remplir le formulaire avec les coordonnées puis enregistrer .

Note : Enregistrer et entrer directement une nouvelle adresse en cliquant sur enregistrer et ajouter un nouveau. Ajouter le plugin de la carte

En mode "Page", se placer sur la page qui doit contenir la carte et créer un nouvel élément.

Dans la liste des modules, choisir l’élément de contenu "WEC Carte par table ".


p.114/159

Dans l'onglet "Plugin ", vérifier que la "Table de données " est bien sur "Adresse (tt_adress) ".

Le plus important est de définir le point d’entrée pour que le module puisse trouver les adresses et les afficher sur la carte.

Cliquer sur Naviguer dans les enregistrements

Sélectionner le dossier dans la fenêtre qui apparaît (dans notre exemple le dossier Adresses).

Le point d’entrée doit maintenant cibler le bon dossier.

Enregistrer les modifications.


p.115/159

Par défaut, une carte, centrée sur les points localisés, s’affiche sur la page. La personnalisation de la carte est détaillée dans la 3ème partie "Paramètres ".

PARAMETRES Pour paramétrer la carte, deux onglets permettent de modifier l’apparence de la carte.

L’onglet Détails de la carte permet de modifier le rendu, il est ainsi possible de définir la taille de la carte (Largeur & Hauteur) mais aussi de définir le type de carte à afficher (par défaut, Normal ). L’onglet Contrôle de carte permet de modifier l’interface de la carte, comme changer la taille des contrôles ou encore afficher des informations supplémentaires comme l’échelle.

GUIDE TYPO3 Fiche 07 – Formulaire

p.116/159

FICHE 07 – FORMULAIRE DE CONTACT

� Ouvrir les propriétés du formulaire de contact � Modifier le destinataire du mail généré à la valida tion du formulaire � Modifier les champs du formulaire

La rubrique "Contact" est un formulaire par lequel les visiteurs du site peuvent contacter l'organisme. Lorsque l'internaute a rempli les différents champs et validé les informations, un mail est automatiquement envoyé à la personne définie en tant que contact. Remarque : Les fonctionnalités listées ci-dessous, peuvent n’apparaître que pour certains profils d’utilisateurs ayant des droits plus étendus (type administrateur). Cela dépend de la configuration du site. OUVRIR LES PROPRIETES DU FORMULAIRE DE CONTACT

� En mode "Page", cliquer sur le nom de la page dans laquelle se trouve le formulaire de contact. Ici la page "Contact" � Cliquer sur l’icône "Editer cet élément" pour modifier le "Formulaire de contact"

MODIFIER LE DESTINATAIRE DU MAIL GENERE A LA VALIDATION DU F ORMULAIRE Dans la vue détaillée

� sélectionner l'onglet "Comportement" � modifier le champ "E-mail du destinataire" � puis enregistrer les modifications.

Remarque : Il est possible de définir plusieurs adresses destinataires. Dans ce cas, il suffit de les saisir à la suite les unes des autres séparées uniquement par une virgule. Exemple : "[email protected],francois.martin@ organisme.fr"

2 1


p.117/159

MODIFIER LES CHAMPS DU FORMULAIRE Dans la vue détaillée, sélectionner l'onglet "Général", puis cliquer sur l'icône à droite du champ "Assistant de formulaire".


p.118/159

Descriptif des icônes

Déplacer le premier élément du formulaire en dernière position

Supprimer l'élément du formulaire

Déplacer l’élément du formulaire d’un rang vers le bas

Déplacer l’élément du formulaire d’un rang vers le haut

Insérer un nouvel élément dans le formulaire

Ajouter un élément

Cliquer sur l'icône pour insérer un nouvel élément à l'endroit souhaité

Compléter les caractéristiques du nouvel élément : � Type de l'élément � Etiquette : intitulé de l'élément qui apparaîtra sur le site (mettre un astérisque " * " à la suite de l'étiquette si

ce champ doit obligatoirement être rempli) � Obligatoire : cocher la case si la saisie de l'élément est obligatoire

Enregistrer le formulaire sans le fermer. Remarque : La configuration détaillée de l’élément dépend du type défini. Par conséquent, elle ne s’affiche qu’après un premier enregistrement de l’élément. Compléter la configuration détaillée de l'élément puis enregistrer. A noter que la rubrique "Champ" se complète automatiquement en fonction de l'étiquette définie. Bien faire attention à ce que deux éléments du formulaire n'aient pas le même "Champ" ; cela engendrerait des conflits.

Cliquer ici pour ajouter ou modifier des champs sur le formulaire.


p.119/159

Les différents types d'élément

Champ texte : texte sur une ligne

Zone de texte : bloc de texte

Liste déroulante : liste de choix prédéfinis

Rendu à l'écran :

Case à cocher

Rendu à l'écran :

Envoi de fichier : permet de proposer à l’internaute de joindre un fichier à son message

Rendu à l'écran :


p.120/159

Boutons 'radio'

Rendu à l'écran :

GUIDE TYPO3 Fiche 07 – Galeries photos

p.121/159

FICHE 07 – GALERIES PHOTOS

� Créer une galerie � Créer un album photos � Afficher une galerie photos sur une page

Avant d’afficher des images sur une page, il est nécessaire de créer préalablement une galerie. Cette dernière contiendra alors un ou plusieurs albums de photos qui pourront être affichés de façon groupée ou individuelle. CREER UNE GALERIE

En mode "Page", cliquer sur le bouton Créer de nouvelles pages .

Selectionner Dossier et glisser le à l’endroit désiré et renommer le (ici "Galerie photos ").


p.122/159

Cliquer ensuite sur Éditer les propriétés de la page .

Dans l’onglet Comportement , sélectionner le plugin MediaGalleries et enregistrer . Note : afin de rendre ce dossier visible, décocher la case Visibilité dans l’onglet Accès .

Le dossier Galerie photos est maintenant symbolisé par l’icone .


p.123/159

CREER UN ALBUM PHOTOS

En mode "Fichiers ", cliquer sur le dossier contenant les photos (ici le dossier album ).

Cliquer sur le bouton Créer un album dans Galerie photos.

Enregistrer le document.

Le dossier « album » est maintenant symbolisé par l’icône et toutes les photos incluses dans ce dossier constituent un album de photos de la galerie. Réitérer l’opération pour ajouter de nouveaux albums dans la galerie. Remarque : Pour ajouter des dossiers et des images ou pour modifier les informations des photos : voir Fiche 06 "Gérer les fichiers".


p.124/159

AFFICHER UNE GALERIE PHOTOS SUR UNE PAGE

En mode "Page", cliquer sur la page désirée et cliquer sur Créer un nouvel élément .

Dans l’onglet "Plugins ", sélectionner "Galerie photos ".

Remarque : Les onglets "Général " et "Accès " sont identiques aux contenus de type "Elément texte" : voir Fiche 07 "Texte". Dans l’onglet "Plugin ", puis "Options du plugin ", renseigner l’encadré "Point d’entrée " (dossier source des albums photos) :


p.125/159

Cliquer sur l’icône et ajouter le dossier Galerie photos contenant les albums à afficher.

Sélectionner ensuite l’entrée "Display mode " pour choisir le mode de galerie : Albums sélectionnés : affiche plusieurs albums choisis ; Liste d’albums : affiche tous les albums ; Album seul : affiche un seul album choisi. Mode Album simple :

Sélectionner l’album à afficher via l’explorateur ou via le champ de recherche :


p.126/159

Enregistrer la page. Résultat sur la page :

Mode Liste d’albums :

Sélectionner les préférences de tri des albums.



p.127/159

Mode Albums sélectionnés :

Sélectionner les albums à afficher ainsi que les préférences de tri.


A noter : Pour les modes Listes d’albums et Albums sélectionnés , lorsque l’utilisateur clique sur un album, un page affiche les éléments comme Album seul :


p.128/159

Pour chaque mode de vue, il est possible de modifier le rendu sur la page via les onglets Liste d’albums , Album et Vue détaillée . Liste d’albums (mode Listes d’albums et Albums sélectionnés seulement) :

Nombre d’albums par page : limite le nombre d’albums affichés sur la page, une pagination s’affiche si la limite est atteinte. Largeur et hauteur des aperçus : permet de changer la taille de l’aperçu des albums. Vignette d'aperçu aléatoire : affiche aléatoirement une image de l’album comme aperçu. Mode de redimensionnement : redimensionne les vignettes des albums de façon proportionnelle (par défaut) ou par recadrage (découpe l’image) ou de taille exacte (sans redimensionnement, risque de soucis de mise en page). Cacher les albums vide : affiche uniquement les albums contenant au moins une image (Oui par défaut).


p.129/159

Album :

Nombre d’images par page : limite le nombre d’images affichés sur la page, une pagination s’affiche si la limite est atteinte. Largeur et hauteur des miniatures : permet de changer la taille de la miniature des images. Mode de redimensionnement : redimensionne les miniatures des images de façon proportionnelle (par défaut) ou par recadrage (découpe l’image) ou de taille exacte (sans redimensionnement, risque de soucis de mise en page). Utiliser LightBox/Colorbox à la place de la vue dét aillée : utilise une popup pour afficher les images lors du clique (oui par défaut). Exemple de popup :

Vue détaillée (uniquement si Utiliser LightBox/Colorbox est à Non ) :


p.130/159

Largeur et hauteur des images : permet de changer la taille des images. Mode de redimensionnement : redimensionne les images de façon proportionnelle (par défaut) ou par recadrage (découpe l’image) ou de taille exacte (sans redimensionnement, risque de soucis de mise en page).


p.131/159

FICHE 08 – GERER LES ELEMENTS DE CONTENUS D 'UNE PAGE (COPIER, COUPER, SUPPRIMER…) � Généralités � Copier / coller un contenu � Couper / coller un contenu � Déplacer un contenu sur une même page � Cacher un contenu

� Rendre visible un contenu � Disjoindre un contenu avant suppression � Supprimer un contenu � Historique/ Annuler

GENERALITES

Les contenus sont gérés grâce à : � Une série d'icônes, � Un menu contextuel. Tous deux possèdent des fonctions communes.

� Editer cet élément (modification) � Cacher l'enregistrement � Copier cet élément � Créer une référence (voir Fiche 07 "Référence") � Couper cet élément � Disjoindre cet élément

Activer le menu contextuel en cliquant droit sur l'icône du contenu.

A Visualiser (pour visualiser la page telle qu’elle s’affiche dans le navigateur)

B Editer l’élément de contenu

C Info

D Plus d'options

E Cacher

F Historique/Annuler

COPIER / COLLER UN CONTENU

Pour copier un contenu , cliquer sur l'icône "Copier cet élément".

La copie en cours est symbolisée par le sens interdit.

Re-cliquer sur l'icône annule la copie.

Une nouvelle icône (flèche verte) se matérialise à côté de chaque icône de création de contenu, en attente de la copie. Cliquer sur cet icône pour insérer le contenu à l'endroit souhaité. Pour copier l'élément dans une autre page, naviguer dans l'arborescence.

1 2 3 4 5 6

A B C D E F

1

2


p.132/159

Typo3 rajoute la mention "(copie 1)" dans le titre du contenu copié afin de le différencier.

COUPER / COLLER UN CONTENU

.

Pour couper un contenu , cliquer sur l'icône "Couper cet élément".

La copie en cours est symbolisée par le sens interdit.

Re-cliquer sur l'icône annule la copie.

Une nouvelle icône (flèche verte) se matérialise à côté de chaque icône de création de contenu, en attente du déplacement. Cliquer sur cet icône pour insérer le contenu à l'endroit souhaité. Pour déplacer l'élément dans une autre page, naviguer dans l'arborescence.

DEPLACER UN CONTENU DANS UNE MEME PAGE

Fonction glisser/déposer pour déplacer un contenu à l'intérieur d'une même page : � cliquer sur l'en-tête de l'élément, � maintenir le clic appuyé, � faire glisser le contenu vers sa

destination, � relâcher le clic.


p.133/159

CACHER UN CONTENU Il est possible de cacher un contenu sans cacher la totalité de la page : 3 solutions possibles.

Solution 1 :

Cliquer sur l'icône .

Solution 2 : Activer le menu contextuel et sélectionner "Cacher".

Solution 3 : � éditer le contenu, � sélectionner l’onglet "Accès", � cocher la case "Désactiver"

(Élément de contenu), � enregistrer.

Le contenu caché est symbolisé par une icône sens interdit rouge.

RENDRE VISIBLE UN CONTENU Pour rendre visible un contenu caché : 3 solutions également.

Solution 1

Cliquer sur l'icône .

Solution 2 Activer le menu contextuel et sélectionner "Afficher".

Solution 3 � éditer le contenu, � sélectionner l’onglet "Accès", � décocher la case "Désactiver"

(Élément de contenu), � enregistrer.


p.134/159

DISJOINDRE UN CONTENU AVANT SUPPRESSION

Pour disjoindre un contenu (c’est-à-dire le masquer), cliquer sur l'icône .

Confirmer en cliquant sur le bouton "OK"

L'élément n'est pas visible pour l'internaute et n'apparaît plus dans la liste des contenus, mais il n'est pas réellement supprimé : il est en attente de suppression.

Pour le supprimer définitivement, cliquer sur l'onglet "Éléments non-utilisés " en haut de l'écran, puis sur l'icône "Poubelle".

Récupérer un élément disjoint non-supprimé

La fonctionnalité "Disjoindre un élément" permet de récupérer une éventuelle erreur de suppression : � sélectionner l'onglet "Éléments

non-utilisés" � cliquer sur l'icône "Créer une

référence" � se positionner sur une icône

"flèche verte" pour récupérer l'élément à l'endroit souhaité.

SUPPRIMER UN CONTENU

Éditer le contenu.

Puis cliquer sur l'icône poubelle (en haut de page).


p.135/159

HISTORIQUE / ANNULER

☺ Cette fonctionnalité permet de revenir en arrière en cas d'erreur : � éditer le menu contextuel. � sélectionner l’option "Historique/Annuler".

L'historique affiche les dernières opérations par date décroissante en spécifiant l'utilisateur. Un formulaire de recherche permet une sélection de l'affichage. Cliquer sur une étape pour prévisualisation.

Enfin, cliquer sur l'opération à annuler.


p.136/159

FICHE 09 – GERER LES ACTUALITES

� Généralités � Ajouter une actualité � Modifier / supprimer une actualité

GENERALITES Les actualités d’un site sous Typo3 sont classées par ordre chronologique inverse : la première actualité affichée est la dernière saisie. Sur la page d'accueil, figurent généralement les 3-4 dernières actualités créées. Une page "Actualités" permet de consulter l'ensemble des actualités publiées sur le site. Remarque : Le nombre maximum d’actualités s’affichant en page d'accueil est spécifique à chaque site. AJOUTER UNE ACTUALITE

� Sélectionner le mode "Liste ". � Sélectionner le dossier "Actualités " dans l'arborescence de pages. � Cliquer sur l'icône "Créer un nouvel enregistrement ". Onglet "Général"

� La case "Cacher " est cochée par défaut : ne pas oublier de la décocher avant publication.

� Type : une actualité est le plus souvent de type "Nouvelles" mais elle peut être un "Lien vers une page interne" ou bien un "Lien vers une page externe".

� et � Quel que soit le type d'actualité, renseigner :

� le titre, � le sous-titre : il s'agit de l'accroche.

A la publication, le titre apparaît sur la page d'accueil ainsi que le sous-titre s'il est renseigné. S'il ne l'est pas, c'est le début du contenu de l'actualité qui prend le relais. ☺ La zone de saisie "Sous-titre" peut être agrandie en étirant le coin droit.

1

2

3

1

2

3

4


p.137/159

Trois "Types" d'actualités Les zones à renseigner sont fonction du type d’actualités choisi. A chaque changement de type, Typo 3 demande confirmation. 1 - Type "Nouvelles" (actualité standard) L'actualité est saisie dans l'éditeur de texte RTE (Rich Text Editor). Comme dans un contenu texte, il est possible d'insérer des images, des fichiers à télécharger, des liens externes…

Pour plus d'infos sur l'éditeur de texte, se référer à la Fiche 07 "Texte".


Les actualités sont affichées (par ordre chronologique inverse) en mode liste en cliquant sur le lien "Actualités" dans le menu. Le lien "Consulter l’article" donne accès au détail de l’actualité. Si le module "Actualité" est installé en page d'accueil, il est alimenté automatiquement.

2 - Type "Lien vers une page interne" Cette option permet de créer un lien vers une page interne du site.

Pour faire le lien vers cette page interne : � cliquer sur l'icône du champ

"Raccourci vers page", � puis sélectionner la page dans

l'arborescence de pages.

Cette icône permet d’annuler le lien vers la page interne.

3 - Type "Lien vers une page externe" Cette option permet de créer un lien vers n'importe quelle page d'un site internet.

Pour faire le lien vers cette page externe :

� Cliquer sur l'icône du champ "URL externe" pour accéder à la fenêtre de saisie des liens,

� et procéder comme pour un lien externe usuel (Se référer à la fiche 07 "Lien").


p.138/159

Onglet "Spécial"

Date/heure de saisie : cette information est renseignée par défaut à la date de création de l'actualité. Elle est modifiable directement dans la zone de saisie ou par clic sur l’icône . ☺ Ce champ détermine l'ordre d'affichage. La date d’archivage : date à laquelle l'actualité sera archivée. Cette actualité n'apparaîtra donc plus dans la liste des actualités, sur la page d'accueil, mais sera toujours consultable dans la liste complète des actualités sur la page "Actualités" (sauf si elle est cachée ou supprimée). Remarque : Une actualité ayant une date d'archivage postérieure à la date du jour ne s’affichera pas dans la liste des actualités. L'auteur de l'actualité et son email peuvent être renseignés si besoin.

Cliquer sur cette icône pour afficher l’Email. Onglet "Media"

L’i mage s'affiche dans le contenu de l'actualité. Elle peut se placer comme vignette de l'actualité sur la page d'accueil si le site est paramétré ainsi. Pour insérer une image, se référer à la Fiche 07 "Texte et image".

Saisir un Titre (facultatif) : s’affiche sous l’image en mode détail.

Cliquer sur cette icône pour afficher Texte et Titre alternatifs. Texte et Titre alternatifs sont à renseigner pour raison d'accessibilité. ☺ Les zones de saisie peuvent être agrandies en étirant le coin droit.


p.139/159

La zone "Lien " permet d’ajouter des liens externes à l’actualité mais il faut écrire précisément en langage html.

Associer un fichier à l'actualité (pour le type "Nouvelles" uniquement). Cliquer sur l'icône pour naviguer dans l'arborescence des fichiers. Pour insérer un fichier, se référer à la Fiche 07 "Fichiers".

Affichage à l’écran

[Titre]

[Sous-titre]

[Texte]


p.140/159

Onglet "Accès"

Typo3 offre la possibilité de programmer l'affichage d'une actualité et donc de définir des dates de début et de fin de publication. Lorsqu'une actualité est programmée, son icône dans la liste des actualités est modifié :

Enregistrer la saisie à l'aide des icônes en haut de la page. Remarque : Il est possible qu’après avoir créé une actualité, celle-ci ne soit pas affichée immédiatement sur la page d'accueil du site. En effet, Typo3 ainsi que le navigateur peuvent garder en mémoire (dans le cache) l’ancienne configuration. Pour visualiser les ajouts ou modifications d'actualités en temps réel :

� Dans Typo3, vider les caches en cliquant sur le lien suivant en haut à droite de l'interface de gestion :

� Actualiser la page du site dans le navigateur. Si les modifications ne sont toujours pas prises en compte, passer à l’étape suivante.

� Vider le cache et éventuellement l’historique du navigateur, puis actualiser de nouveau la page du site

dans le navigateur. MODIFIER / SUPPRIMER UNE ACTUALITE Pour modifier ou supprimer une actualité

� Sélectionner le mode "Liste ". � Sélectionner le dossier "Actualités " dans l'arborescence de pages.

La liste des actualités (Nouvelles) s'affiche.

� Modifier : � cliquer sur l'icône "Editer

l'enregistrement", � modifier les informations, � enregistrer.

� Supprimer : � cliquer sur l'icône poubelle, � confirmer.

Remarque : Les 3 types d'actualités sont différenciables dans la liste par des icônes de couleur différente.

� bleu : nouvelles, � jaune : lien vers une page interne, � rouge : lien vers une page externe.

1

2


p.141/159

FICHE 10 – FLUX RSS

� Définition des flux RSS � Configuration des flux RRS � Visualisation des flux RSS du site

DEFINITION DES FLUX RSS Le standard RSS représente un moyen simple d'être tenu informé des nouveaux contenus d'un site web, sans avoir à le consulter. Le format "RSS" (traduire "Really Simple Syndication") permet ainsi de décrire de façon synthétique le contenu d'un site web, dans un fichier au format XML, afin de permettre son exploitation par des tiers. Le fichier RSS, appelé également flux RSS , canal RSS ou fil RSS , contenant les informations à diffuser, est maintenu à jour afin de constamment contenir les dernières informations à publier. Un fil RSS est un fichier contenant le titre de l'information, une courte description et un lien vers une page décrivant plus en détail l'information. Cela permet à un site web de diffuser largement ses actualités tout en récupérant un grand nombre de visiteurs grâce au lien hypertexte permettant au lecteur de lire la suite de l'actualité en ligne. Le Flux RSS suivra automatiquement les ajouts et modifications d'actualités sur le site. CONFIGURATION DES FLUX RSS Aucune configuration particulière n'est requise, les flux sont activés par défaut sur les sites VISUALISATION DES FLUX RSS DU SITE Pour pouvoir exploiter un fil RSS, un utilisateur doit disposer d'un outil spécifique, appelé "lecteur RSS" ou encore "agrégateur RSS", afin d'exploiter les fils RSS. Ainsi, il est possible de consulter en un seul endroit les dernières actualités de dizaines, et parfois de centaines de sites web, sans avoir à les visiter et sans avoir à communiquer d'informations personnelles. Information : L'adresse du flux des sites web Typo3 est la suivante (dans la majorité des cas) : www.nomdusite.fr/rss.xml (à adapter selon l'adresse du site). Cette adresse peut varier pour certains sites. Pour s'abonner aux flux RSS, il faut:

� soit cliquer sur l’icône mise en place sur certains sites � soit utiliser les fonctionnalités intégrées aux différents navigateurs.


p.142/159

FICHE 11 - GERER UN GLOSSAIRE Le glossaire est une fonctionnalité de Typo3 permettant de faciliter la lecture d'un site pour l'internaute en proposant un "déroulé" des sigles, acronymes, etc. employés dans les textes. La gestion du glossaire (positionné parmi les "outils" dans l'arborescence) se fait en mode "Liste". Pour ajouter un sigle au glossaire, il suffit de "Créer un nouvel enregistrement" et de choisir celui qui est proposé.

Remarque : Par défaut, le "Glossaire" est caché (symbole "sens interdit" sur l'icône) mais cela ne gêne ni l'ajout de nouveaux sigles pour le rédacteur ni l'affichage des déroulés des sigles sur le site pour l'internaute. On peut choisir de l'afficher pour qu'il soit positionné aux côtés des autres outils dans le site et que l'internaute puisse, par exemple, le consulter ou l'imprimer en intégralité comme un "dictionnaire". Dans la fenêtre suivante, il faut alors impérativement renseigner : � le sigle court, � son déroulé, � son type : définition,

acronyme ou abréviation, � sa langue.

Il est aussi possible de cacher l'élément. Les champs "Description" et "Lien" (= Link) rendent les sigles, acronymes, etc. cliquables : l'internaute est alors dirigé vers le glossaire (si la "description" est renseignée) ou bien vers une autre page interne au site ou externe (si le "lien" est renseigné).


p.143/159

Le nouvel élément ajouté apparaît comme cela dans l'interface Backend de Typo3 :

Sur le site, pour l'internaute, le renseignement du glossaire se traduit par un souligné en pointillés du sigle (ici : ABC) ainsi que par une "info-bulle" accompagnée d'un point d'interrogation au survol du sigle avec la souris.


p.144/159

FICHE 12 – GERER LA CREATION ET LES DROITS DES REDACTEURS

� Types de profil � Généralités � Créer un rédacteur ayant accès à toute l'arborescen ce du site � Créer un rédacteur avec des droits restreints sur l 'arborescence et sur les fichiers � Modifier / supprimer un rédacteur

Remarque : Les fonctionnalités listées ci-dessous, n’apparaissent que pour certains profils d’utilisateurs ayant des droits plus étendus (type administrateur). Cela dépend de la configuration du site. Important : Il est impératif de ne pas supprimer ou modifier les groupes d'utilisateurs définis par défaut : Administrateur, Rédacteur_normal et Rédacteur_vide. TYPES DE PROFIL Il existe, de manière générale, deux types de profils sur les sites : administrateur et rédacteur La tâche des rédacteurs est de créer et saisir de nouveaux contenus, de les adapter et les intégrer au site Web. L’administrateur attribue au préalable des droits aux rédacteurs. Dès lors, ils accèdent à un espace de travail qui correspond aux tâches et aux ressources qui leur sont allouées. Il est conseillé de limiter le nombre de rédacteurs afin de conserver une homogénéité éditoriale. Il ne faut pas qu'au fur et à mesure que l'on navigue sur le site, on se rende compte nettement que plusieurs rédacteurs interviennent dans la mise à jour des contenus. L’administrateur possède les mêmes droits que les rédacteurs. Il peut en outre gérer les utilisateurs et dans certains cas configurer le site en personnalisant la charte graphique ou d'autres éléments spécifiques du site. GENERALITES

Dans Typo3, la gestion des utilisateurs se fait dans la partie "OUTILS TC". Description des modules "Gestion des utilisateurs" : permet de créer, modifier et supprimer les utilisateurs "Gestion des groupes" : permet de créer, modifier et supprimer les groupes d'appartenance des utilisateurs "Points de montage" : permet de définir des points de montage. Cela sert à définir la partie de l'arborescence des fichiers à laquelle a droit un rédacteur avec accès restreint.


p.145/159

CREER UN REDACTEUR AYANT ACCES A TOUTE L 'ARBORESCENCE DU SITE Créer un rédacteur

� Sélectionner le mode "Gestion des utilisateurs" � Cliquer sur le lien "Créer un nouvel utilisateur"

Remplir obligatoirement les champs suivants : � l'identifiant de connexion de

l'utilisateur � le mot de passe � Sélectionner le groupe

"Rédacteur_normal" dans la partie "Eléments

� Choisir "French" comme langage

par défaut Enregistrer

2 1

1

2

3

4


p.146/159

L'utilisateur créé apparait alors dans la liste des utilisateurs :

Vérifier le compte créé et la langue de l'interface Il est vivement conseillé de vérifier le fonctionnement du compte créé en se connectant avec le login et le mot de passe définis pour celui-ci. De plus, il faut vérifier si l'interface utilisateur est bien en français, sinon la configurer pour qu'elle le soit. (Il est possible pour diverses raisons que l'interface soit en anglais). Une fois connecté avec le compte créé, si l'interface n'est pas en français :

� Sélectionner le mode "User settings" � Dans le champ Language, sélectionner "French" � Cliquer sur Save Configuration

CREER UN REDACTEUR AVEC DES DROITS RESTREINTS SUR L 'ARBORESCENCE ET LES FICHIERS Quatre étapes sont nécessaires :

� Créer un point de montage � Créer un groupe � Créer un rédacteur � Vérifier le compte créé et la langue de l'interface

Créer un point de montage Créer un point de montage sert à définir la partie de l'arborescence des fichiers à laquelle a droit un rédacteur avec accès restreint. Remarque : Si le rédacteur créé peut avoir accès à toute l'arborescence, cette étape n'est pas nécessaire. Important : Il est impératif de ne pas supprimer le point de montage défini par défaut : "Dossier de ressources"

3 2

1


p.147/159

Dans l'exemple qui suit, on créé un compte rédacteur qui ne devra s'occuper que de la rubrique "Infos pratiques" et n'aura accès qu'au répertoire contenant les fichiers en relation avec cette rubrique.

� Sélectionner le mode "Points de montage" � Cliquer sur le lien "Créer un nouveau point de montage"

Compléter : � le libellé � le chemin

Il commence obligatoirement par "/user_upload/" suivi du chemin complet du répertoire (dans notre exemple "infospratiques/", l'arborescence de fichiers étant celle-ci : )

Le point de montage "InfosPratiques" a été créé. Il n'est pas possible de modifier un point de montage ; il peut simplement être supprimé.

2

1


p.148/159

Créer un groupe

� Sélectionner le mode "Gestion des groupes" � Cliquer sur le lien "Créer un nouveau groupe"

� Compléter l'intitulé du groupe � Cette option permet de choisir la ou les parties de l’arborescence des pages que le groupe a le droit de

modifier.

Cliquer sur l’icône , puis cliquer sur le nom de la page autorisée pour le groupe. Celui-ci aura alors accès à cette page ainsi qu’à toutes ses sous-pages.

2

1

1

2

3

4


p.149/159

Renouveler la manipulation pour définir d’autres pages ou parties d’arborescence accessibles par ce groupe. Note : par défaut, le groupe n’a accès à rien. S’il doit avoir accès à tout, il faut au moins lui définir la page d’accueil.

� Cette option permet de choisir la ou les parties de l’arborescence des fichiers que le groupe a le droit de

modifier. Sélectionner : - soit "Dossier de ressources" pour que le groupe ait accès à l'ensemble des fichiers" - soit un autre point de montage spécifique aux droits définis. (Dans l'exemple, il s'agit du point de montage créé précédemment "InfosPratiques"). Note : par défaut, le groupe n’a accès à rien, il faut donc définir obligatoirement un point de montage

� Définir obligatoirement le groupe "Rédacteur_vide" dans la partie "Sous groupes". Enregistrer Créer un rédacteur

� Sélectionner le mode "Gestion des utilisateurs" � Cliquer sur le lien "Créer un nouvel utilisateur"

2

1


p.150/159

Remplir obligatoirement les champs suivants : � l'identifiant de connexion de l'utilisateur � le mot de passe � dans la partie "Eléments", sélectionner

le groupe créé précédemment ("Rédacteur_infospratiques" dans l'exemple)

� choisir "French" comme langage par

défaut Enregistrer

L'utilisateur créé apparait alors dans la liste des utilisateurs :

Vérifier le compte créé et la langue de l'interface Il est vivement conseillé de vérifier le fonctionnement du compte créé en se connectant avec le login et le mot de passe définis pour celui-ci. De plus, il faut vérifier si l'interface utilisateur est bien en français, sinon la configurer pour qu'elle le soit. (Il est possible pour diverses raisons que l'interface soit en anglais). Une fois connecté avec le compte créé, si l'interface n'est pas en français :

1

2

3

4


p.151/159

� Sélectionner le mode "User settings" � Dans le champ Language, sélectionner "French" � Cliquer sur Save Configuration

MODIFIER / SUPPRIMER UN REDACTEUR

Pour modifier un utilisateur, sélectionner le mode "Gestion des utilisateurs" puis cliquer sur l'icône correspondante.

Pour supprimer un utilisateur, cliquer sur l'icône

3 2

1


p.152/159

FICHE 13 – GENERER LES STATISTIQUES DE FREQUENTATION DU SITE

� Paramétrer le site � Consulter les statistiques

PARAMETRER LE SITE Le module de consultation des statistiques s'appuie sur Google Analytics, outil complet permettant de connaître entre autre le nombre de visiteurs, leur provenance et leur comportement sur le site. Pour tous les sites dont le trafic est inférieur à 5 millions de pages vues par mois ce service est gratuit. Pour activer ce service sur le site, se rendre à l’adresse suivante : http://www.google.com/intl/fr/analytics/, puis se connecter en cliquant sur le bouton "Se connecter". Si vous n’avez pas de compte Google, vous trouverez sur la page un lien "Créer un compte" pour vous inscrire. Remarque : Il vaut mieux créer une adresse Gmail générique pour l'organisme plutôt que d’utiliser une adresse personnelle. Cela évite de recommencer la manipulation à chaque mutation de personnel et de perdre ainsi régulièrement l’historique des statistiques de consultation. Une fois connecté, cliquer sur le bouton "Inscription".

Passer les différentes étapes en remplissant les formulaires, jusqu’à la dernière étape "Créer un compte". Récupérer uniquement le code entouré en rouge dans l'exemple suivant ; il va servir à activer le service de statistiques. Puis cliquer sur le bouton "Enregistrer" en bas de page.


p.153/159

Se connecter à l’interface backend du site, aller dans le module "Fichiers" puis cliquer sur le répertoire nommé, selon les sites, soit "Dossier de ressources", soit "user_upload", soit "racine".

Dans la liste de dossiers et de fichiers qui s’affiche, cliquer sur l’icône du fichier "googleanalyticsaccount.txt", puis choisir l'option "Editer".

Coller le code Google obtenu précédemment puis enregistrer. Attention à ne pas mettre d’espace ou de retour à la ligne avant ou après la clé.


p.154/159

Le site est prêt à être suivi par Google Analytics. CONSULTER LES STATISTIQUES Remarque importante : Les premières statistiques de consultation ne seront visibles que 24h après le paramétrage qui vient d'être effectué. Durant cette période, il est normal que dans l'interface Google Analytics, un panneau "Attention" apparaisse dans la colonne "Etat" du site. Se rendre à l'adresse suivante http://www.google.com/intl/fr/analytics/ et se connecter. Déplier l'arborescence affichée et cliquer sur le nom du site pour afficher le rapport statistique.


p.155/159

Aperçu d'un rapport :

L'interface de gestion des rapports est complète et intuitive. Différents menus permettent d'accéder à divers données statistiques du site.


p.156/159

FICHE 14 – AIDE AU REFERENCEMENT

� Généralités � Balises META � Sitemap � URL propres

Remarque : Les fonctionnalités listées ci-dessous, peuvent n’apparaître que pour certains profils d’utilisateurs ayant des droits plus étendus (type administrateur). Cela dépend de la configuration du site. GENERALITES Qu’est-ce que le référencement ? Le référencement d’un site est la démarche d’inscription du site web dans les moteurs de recherche. En effet, pour rechercher un site, les internautes vont, dans leur très grande majorité, se servir d’un moteur de recherche (exemples : www.google.fr, www.yahoo.fr). Le terme référencement regroupe également l'ensemble des actions entreprises pour positionner un site dans les premières pages des moteurs de recherche. Quel est l’intérêt du référencement ? Il ne suffit pas d’avoir un site Internet pour avoir des visiteurs. Tout comme on doit assurer la distribution d’une plaquette de présentation, il faut faire connaître un site pour obtenir des visiteurs. Pour cela, il est possible d’inscrire l’adresse du site sur des documents, d’utiliser la communication publicitaire, l’information par email… et le référencement qui regroupe plusieurs outils décrits dans cette fiche. Les principes de base Afin d’améliorer le référencement d’un site, il est important de :

� définir du contenu texte sur les pages � bien structurer les pages en définissant des titres porteurs de sens pour les paragraphes � avoir des liens externes qui pointent vers le site (ce point est très important : plus des sites externes feront

référence au site, mieux il sera référencé) � avoir des liens externes de qualité

Des outils, détaillés ci-dessous, sont mis à disposition dans les sites pour l’aide au référencement : � gestion des métadonnées (mots-clés et description) � mise en place de Google Sitemap : ajout automatique d'un fichier à la racine du site permettant à Google

de mieux indexer les contenus du site � mise en place d'url compréhensibles : les adresses des pages sont compréhensibles, cela augmente

l'efficacité de l'indexation par les moteurs de recherche Le référencement "naturel" d'un site peut être long (plusieurs mois). BALISES META Les balises META sont des balises HTML spéciales, situées dans l'en-tête de la page, donnant des informations supplémentaires sur celle-ci et son contenu. Elles ne sont pas destinées aux visiteurs du site mais aux moteurs de recherche. Il est possible de remplir les deux balises META suivantes :

• balise META description (meta tag description) : cette balise sert à donner une description de la page. Il s’agit d’une ou plusieurs phrases correctement construites et non d'une série de mots-clés.

• balise META keywords (meta tag keywords) : cette balise contient une liste de mots-clés, séparés par des virgules. Les mots-clés les plus importants peuvent apparaître sous plusieurs formes : au singulier, au pluriel ou même avec des fautes d'orthographe qui peuvent être commises par les internautes procédant à la recherche. Les mots-clés doivent être pertinents et leur liste ne doit pas être exhaustive (une dizaine par page, suivant le contenu de celle-ci)

Il est conseillé de définir des balises META différentes sur chaque page afin qu’elles soient le plus adaptées au contenu de celle-ci.


p.157/159

Les manipulations qui suivent concernant les mots-clés ou la description sont propres à chaque page. Il faudra donc faire ces manipulations sur toutes les pages sur lesquelles il est souhaité d’activer les balises META. Les mots-clés En mode "page", se positionner sur la page souhaitée et éditer ses propriétés.

Cliquer sur l’onglet "Métadonnées", saisir les mots-clés puis enregistrer.

Attention : Il faut obligatoirement saisir un espace après chaq ue virgule. Remarque : Dans la gestion manuelle le nombre de mots-clés n'est pas limité. Il faut essayer de ne pas trop en mettre (une vingtaine maximum semble raisonnable). La description En mode "page", se positionner sur la page souhaitée et éditer ses propriétés.


p.158/159

Cliquer sur l’onglet "Métadonnées". Remplir le champ "Description" avec une description du contenu de la page puis enregistrer. Le champ doit être rempli avec une ou plusieurs phrases correctement construites plutôt qu’avec une série de mots-clés. Il n’est pas non plus utile d’en écrire trop. SITEMAP Un plan sitemap, dans sa forme la plus simple est un fichier XML qui répertorie les adresses des pages d’un site ainsi que des informations complémentaires sur chaque page (date de dernière modification, fréquence de révision et importance relative par rapport aux autres pages du site), afin de favoriser une exploration plus intelligente du site par les moteurs de recherche. L'utilisation du protocole Sitemap ne garantit pas la prise en compte des pages Web dans les moteurs de recherche, mais permet de fournir des indications aux robots d'exploration et ainsi d'optimiser leur fonctionnement. Paramétrer le sitemap Cliquer sur "GoogleSitemap" dans la liste des modules, puis sur la page Accueil. La liste de toutes les pages apparaît dans la vue détaillée.

Pour chaque page, trois actions sont réalisables : � Enlever la page du sitemap en cochant la case "disabled" � Modifier le champ "Priority" qui va déterminer la priorité d’une page par rapport aux autres. (max 1, min 0,

défaut 0.5) � Modifier le champ "Period" qui est la fréquence probable de modification de la page.

Valeur de la période Fréquence de modification de la page always à chaque accès hourly plusieurs fois par jours daily tous les jours weekly toutes les semaines monthly tous les mois yearly tous les ans never utilisée pour les pages archivées ou cachées


p.159/159

Lorsque les modifications sont réalisées, cliquer sur le bouton "Envoyer" en bas de la vue détaillée. Remarque : Les informations "Priority" et "Period" ne sont que des indications pour les moteurs de recherche. Ce n’est pas parce qu’une page est en Period "Daily" que le robot d’indexation passera tous les jours, et ce n’est pas non plus parce qu’une page à une Priority de "1" qu’elle aura un meilleur positionnement. Ce sont seulement des indications. Il est également inutile de mettre toutes les Priority à 1 puisque c’est une priorité relative entre les pages du site. Il est possible de soumettre le sitemap dans le centre d'outils pour Webmaster de Google par exemple, il suffit de fournir l’url suivante : http://www.nomdusite.fr/sitemap.xml URL PROPRES OU "URL REWRITING" L'URL Rewriting est une technique utilisée pour optimiser le référencement des sites dynamiques. Les pages dynamiques sont caractérisées par des URL complexes, comportant en général un point d'interrogation, éventuellement le caractère & ainsi que des noms de variables et des valeurs. Exemple : www.monsite.com/index.php?id=115 Le problème est que certains moteurs n'indexent pas les pages ayant des URL de ce type. Google par exemple n'indexe en général que les pages ayant au maximum 2 paramètres dans l'URL : il n'indexe donc pas une page comme celle de l'exemple. Grâce à l'URL Rewriting, Google, ainsi que n'importe quel robot, va pouvoir indexer les pages dynamiques. Un système d’URL rewriting est mis en place sur les sites. Aucune configuration n’est requise. L’exemple cité ci-dessus devient alors : www.monsite.fr/contacts.html.