Trucs et astuces – TYPO3 – Version 6reynies.fr/.../trucs_et_astuces_typo3_version_6.2.pdf ·...

20160727 1948 149 Trucs et astuces ndash TYPO3 ndash Version 62

WikiCDG82 - http4610515773dokuwiki

Trucs et astuces ndash TYPO3 ndash Version 62

Sommaire

1 - Conseils pratiques au deacutemarrage avec Mozilla Firefox hellip page 2

Savoir naviguer dans les onglets est indispensable hellip page 2 Acceacuteder au site visible par les internautes (frontend) helliphellip page 3 Acceacuteder agrave la partie administration (backend) hellip page 3 Le backend de TYPO3-62 helliphellip page 4 Preacuteparer son environnement helliphellip page 5 Copiercoller des textes de Word vers TYPO3 helliphellip page 5

2 - Creacuteation des pages - Arborescence du site helliphellip page 6

Quest ce quune page dans un site web helliphellip page 6 Arborescence - types de page helliphellip page 6 Creacuteer une page standard - nommer - renommer helliphellip page 7 Cacher montrer une page helliphellip page 8 Supprimer une page helliphelliphellip page 9 Deacuteplacer copier une page helliphellip page 10 Creacuteer une page type raccourci helliphellip page 10 Creacuteer une page hors menu helliphellip page 12 Creacuteer une page en lien direct vers une URL externe (site exteacuterieur) helliphellip page 12

3 - Creacuteation dune page - Reacutedaction helliphellip page 14

Choisir la preacutesentation de la page helliphellip page 14 Acceacuteder agrave la reacutedaction dune page helliphellip page 15 Choisir la preacutesentation des eacuteleacutements de contenu (ou blocs ou paragraphes) helliphellip page 15 Deacutetails du bandeau drsquoun bloc et de son menu deacuteroulant helliphellip page 18 Eleacutements de contenu Titre seulement - Eleacutement de texte helliphellip page 19 Comment creacuteer modifier supprimer un lien helliphellip page 22 Fichier (ou lieu de stockage des photos et PDF) helliphellippage 26 Mettre les documents au format PDF helliphellip page 29 Les photos - redimensionnement et compression helliphellip page 30 Eleacutement de contenu Texte amp Images helliphellip page 35

4 - La page daccueilhellip page 38

Quest ce quune actualiteacute hellip page 39 Creacuteation dune actualiteacutehellip page 39

Last update 20160727 1947 typo3guide_user_typo3_62 http4610515773dokuwikidokuphpid=typo3guide_user_typo3_62

http4610515773dokuwiki Printed on 20160727 1948

Quest ce que lAgenda (eacuteveacutenements) hellip page 43 Exemples de liens directs en un clic liens pratiqueshelliphellip page 44 Exemples de services en lignehellip page 44

5 - Infos pratiqueshellip page 44

Quest ce que les flux RSS hellip page 44 Charte reacutedactionellehellip page 45 Consignes importanteshellip page 46 Conseils divershellip page 46 Suggestionshellip page 47 Liens utileshellip page 48 Optimisation de votre sitehellip page 48

Conseils pratiques au deacutemarrage avec Mozilla Firefox

(le navigateur avec lequel vous travaillerez)

Il est conseilleacute de travailler sur Mozilla Firefox

httpswwwmozillaorgfrfirefoxnew

Les internautes peuvent consulter votre site depuis drsquoautres navigateurs sans problegraveme (InternetExplorer Google Chrome Safari ou autres hellip) toutefois si vous rencontrez des problegravemes agrave lalecture faire remonter linformation au technicien

Savoir naviguer dans les onglets est indispensable

X pour fermer lrsquoonglet (1)+ pour ouvrir un nouvel onglet (2)

iexcl Pour faire une recherche sur Internet en mecircme temps quon travaille ouvrir toujours un nouvelonglet en premier pour ne pas perdre son travail

iexcl Quand on travaille sur plusieurs onglets il arrive parfois de tout fermer par inadvertance en cliquantsur la croix rouge en haut agrave droite il est possible de parameacutetrer que tous les onglets restent ouvertsau deacutemarrage Dans la barre en haut Outils gt Options gt Geacuteneacuteral gt Deacutemarrage gt Audeacutemarrage de Firefox gt Afficher les derniers onglets et fenecirctres utiliseacuteesVous pourrez par la suite revenir agrave Afficher ma page drsquoaccueil



Acceacuteder au site visible par les internautes (frontend)

Ouvrir un nouvel onglet dans le navigateur pour acceacuteder au site visible par les internautes(appeleacute aussi frontend)

Dans la barre dadresse (1) eacutecrire ladresse du site (ex httpnomdelacommunedevcdg82fr

Lorsque le site sera opeacuterationnel vous aurez un site propre qui ne passera plus par le CDG vouschangerez donc dadresse ex httpnomdelacommunefr

Acceacuteder agrave la partie administration (backend)

Ouvrir un nouvel onglet pour acceacuteder agrave la partie administrationtravail de Typo3 - (appeleacutee aussibackend)

Dans la barre dadresse (1) ajouter typo3 agrave la fin de ladresse de votre site par exhttpwwwnomdelacommunedevcdg82frtypo3

Lorsque vous serez opeacuterationnel pour ecirctre en ligne vous changerez dadresse en enlevant cdg82 parex httpwwwnomdelacommunefrtypo3

Rentrer vos codes Utilisateur (2) et Mot de passe (3)



Le backend de TYPO3-62

3 colonnes (1) Le menu agrave gauche - les tacircches les plus utiliseacutees sont

partie WEB on utilise principalement les modules suivants Page (creacuteation eacutedition gestion des pages)Voir (permet de voir le site - dans la barre en haut loption Width donne les diffeacuterentesoptions de lecture en fonction de la taille de leacutecran ordinateur - tablette - smartphone)Liste (pour lrsquoaccegraves aux Actualiteacutes ndash Agenda)

partie FICHIERle module Fichiers (est utiliseacute pour stocker tous les fichiers images PDFhellip sur leserveur)

partie OUTILS UTILISATEURSle module Configuration utilisateur (est utiliseacute pour changer si besoin votre motde passe tout en le conservant complexe)



(2) Larborescence des pages au centre elle repreacutesente la hieacuterarchie des pages du site(3) La zone drsquoeacutedition agrave droite ou zone de travail

3 icocircnes importants sur les barres supeacuterieures (4 ) Au-dessus de larborescence icocircnes pour creacuteer des pages (page normale page raccourci pagelien vers un URL)(5) Au-dessus de la zone deacutedition icocircnes pour pour eacutediter (le crayon) fermer sans enregistrerenregistrer et visualiser les pages (page+œil) enregistrer simplement mettre agrave la poubellehellip(6) A droite de la barre noire zone pour se deacuteconnecter - nettoyer et vider les caches (eacuteclair jaune) -vider les caches geacuteneacuteraux - faire des recherches

Preacuteparer son environnement

iexcl Deux outils indispensables - les avoir agrave porteacutee de main (en bas sur la barre de tacircches de votreordinateur)

Loutil Bloc-notes pour enlever les mises en forme et faire les copier-coller (voir amp suivant )Votre logiciel pour reacuteduire les photos (on en parlera plus tard)

iexcl Mettre agrave jour Flash Player (sans oublier de deacutecocher au tout deacutebut lrsquooffre facultative MCAfreesecurity Scan plus) httpsget3adobecomfrflashplayerupdateplugin

iexcl ATTENTION les Cookies et JavaScript doivent ecirctre autoriseacutes dans le navigateur

Copiercoller des textes de Word vers TYPO3

Il est important de savoir que tout logiciel de traitement de texte a sa propre mise en forme et queTYPO3 a aussi sa propre mise en forme pour qursquoil nrsquoy ait pas de conflit vous devez effacer toute miseen forme Lorsque vous reacutecupeacuterez un texte agrave partir drsquoun document quelconque (Internet word workswriterhellip ) vous devez impeacuterativement passer par le filtre du Bloc-notes avant drsquoinseacuterer votre textedans TYPO3 Ougrave le trouver Bouton Deacutemarrer gt Tous les programmes gt Accessoires gt Bloc-notesIl faut seacutelectionner votre texte original le copier puis le coller dans Bloc-notesDans Bloc-notes il faut re-seacutelectionner le texte le copier et le coller dans TYPO3Pour eacuteviter que le paragraphe reste une seule ligne et aller tregraves loin sur la droite il faut aller danslonglet Format et choisir Retour automatique agrave la ligne

iexcl Il faudra utiliser les raccourcis clavier Ctrl+A pour tout seacutelectionner Ctrl+C pour copierCtrl+V pour coller Pour sen rappeler vous cliquez sur Edition dans la barre de menu deMozilla ou de Bloc-notes vous y trouverez tous les raccourcis clavier les plus utiliseacutes



Creacuteation des pages - Arborescence du site

Quest ce quune page dans un site web

Un site web est constitueacute de plusieurs pages qui sont placeacutees agrave des niveaux diffeacuterents comme dansune arborescence windows

Chaque page est constitueacutee deacuteleacutements de texte etou de photos de documents de videacuteos

Arborescence - types de page

Larborescence (la colonne verteacutebrale de votre site)

En mode Page dans la colonne du centre apparaicirct lrsquoarborescence du site(1) Le 1er niveau correspond au titre de votre site(2) Le 2e niveau correspond aux onglets du menu(3) Le 3e niveau correspond aux sous-menus agrave lrsquointeacuterieur des onglets(4) Le 4e niveau correspond aux sous-pages agrave lrsquointeacuterieur des sous-menusetchellip

iexcl Il faut cliquer sur le petit triangle pour quapparaissent les sous-pages



Types de page

Page standard (icocircne cadre normal)1Page type raccourci (icocircne cadre avec flegraveche en bas agrave droite)2Page hors menu (icocircne cadre pointilleacute)3Page lien direct vers une URL externe - site exteacuterieur (icocircne maillon)4

Creacuteer une page standard - nommer - renommer

Les onglets - les sous-menus - les sous-pages se travaillent tous en mode Page sur le mecircme scheacutema

Pour creacuteer une page (1) cliquer sur lrsquoicocircne en haut (rond vert avec la croix) Creacuteer de nouvellespages gt apparaissent dessous les 3 types de pages que vous allez principalement utiliser (2) Page standard (utiliseacutee majoritairement)(3) Page raccourci avec une flegraveche (dirige vers une autre page)(4) Page avec un lien (dirige vers une Url externe - site exteacuterieur)

Une fois la page choisie faire glisser lrsquoicocircne de la page dans lrsquoarborescence agrave lrsquoemplacement souhaiteacute apparaicirct un rectangle bleu (OK) ou rose (NON) suivre lrsquoemplacement souhaiteacute indiqueacute sur la gauche(entre 2 pages ou sur ou sous une page)Apparaicirct Titre par deacutefaut (avec un sens interdit) gt inscrivez lrsquointituleacute de la page agrave la place



Comment nommer ou renommer une page

Plusieurs accegraves possibles (1) Cliquer dans larborescence 2 fois dans le Titre par deacutefaut - il devient bleu - eacutecrire dedans letitre de votre page ou la renommer(2) Cliquer en haut dans la barre sur la page avec le crayon Editer les proprieacuteteacutes de lapage(3) Clic droit dans larborescence sur le Titre par deacutefaut ou le texte de votre page et dans lemenu contextuel qui apparaicirct choisissez laquo eacutediter raquo(4) Dans la partie de droite Titre par deacutefaut ou Modifier lenregistrement Titre pardeacutefaut eacutecrire le titre de votre page dans la fenecirctre correspondante ou la renommer

iexcl Pour modifier les infos que lrsquoon a mises sur une page (titre type de page cacher la page date deparution ou de fin de parutionhellip) Revenir sur lrsquoeacutedition des proprieacuteteacutes de la page Seacutelectionner la pagedans larborescence gt clic droit gt Editer

Cacher montrer une page



Lorsque le site est ouvert au public il est possible de Cacher une page en attendant de finir de latravaillerSeacutelectionner la page dans lrsquoarborescence gt clic droit gt Deacutesactiver (un sens interdit se met danslrsquoarborescence sur lrsquoicocircne de la page)Degraves qursquoon souhaite mettre la page en circulationFaire la manipulation en sens inverseSeacutelectionner la page dans lrsquoarborescence gt clic droit gt Activer le sens interdit est enleveacute

Supprimer une page

Seacutelectionner la page gt clic droit gt Actions pour la page gt Supprimer

iexcl Attention srsquoil y a des blocs remplis ou des sous-pages il faut drsquoabord les supprimer



Deacuteplacer copier une page

Comment deacuteplacer une page

Dans lrsquoarborescence faire glisser la page vers lrsquoemplacement souhaiteacuteApparaicirct un rectangle bleu (OK) ou rose (NON) suivre lrsquoemplacement souhaiteacute et indiqueacute sur lagauche (entre 2 pages ou sous une page)

Comment copier une page

Dans lrsquoarborescence seacutelectionner la page gt clic droit gt (1) Action pour la page gt (2) Copiergt revenir dans lrsquoarborescence choisir lrsquoemplacement de la page agrave copier seacutelectionner (3) gt clic droitgt Action pour la page (4) gt Coller dans (5)

Apparaicirct dans larborescence une nouvelle page avec le titre de la page copieacutee en bleu (possibiliteacute dechanger le texte) et un sens interdit

Comment changer le titre cliquer 2 fois sur le texte gt le texte est bleu gt eacutecrire le nouveau titre ou clic droit gt Editer gt rempliravec le nouveau titre de la page

Creacuteer une page type raccourci

Quest ce quune page de type raccourci

Le raccourci permet agrave llsquointernaute de ne pas tomber sur une page vierge Dans le menu crsquoest



souvant la page de base que lrsquoon met en laquo raccourci raquo vers la premiegravere sous-pageIl permet aussi de diriger vers une page deacutejagrave eacutecrite On les utilise beaucoup pour les liens direct parexemple Ccedila permet de ne pas avoir agrave reacuteeacutecrire la page

Comment proceacuteder

Il faut changer le Type de la page Standard en type Raccourci

Dans larborescence cliquer sur la page qui vous inteacuteresse gt clic droit gt Editer gt agrave droite danslrsquoonglet Geacuteneacuteral (1) gt dans la rubrique Type gt deacutecocher la flegraveche gt choisir Raccourci agrave laplace de Standard

iexcl Possibiliteacute de creacuteer directement une page Raccourci dans larborescence faire glisser lrsquoicocircnede la page Raccourci dans lrsquoarborescence comme on la vu plus haut pour creacuteer une pageStandard

Lorsque vous changez de type de page apparaicirct le message ce changement va affecter leschamps disponibles dans le formulaire Voulez-vous sauver maintenant afin depouvoir rafraicircchir leacutecran gt cliquer sur OK

A cocircteacute de Type apparaicirct Mode de raccourci (3) gt deacutecocher la flegraveche (4) gt 2 choix principaux

1 - choisir Premiegravere sous-page (4) gt ici Vie municipale La page est devenue un raccourci etlorsque lrsquointernaute cliquera dans le menu sur cette page il sera dirigeacute vers la 1egravere sous page danscet exemple Mairie)

2 - ou choisir Page seacutelectionneacutee (5) vous choisirez une page de votre site vers laquelle vousvoulez diriger linternaute Dans Cible du raccourci agrave droite gt cliquer sur le dossier (6)Naviguer dans les enregistrements Souvre une fenecirctre avec larborescence de vospages choisir la page souhaiteacutee La page seacutelectionneacutee apparaicirct dans la Cible du raccourciDans cet exemple la page Vie municipale est devenue un raccourci et lorsque lrsquointernautecliquera dans le menu sur cette page il sera dirigeacute vers la page Urbanisme



(7) Donner un titre agrave la page gt Enregistrer

(8) Dans lrsquoarborescence lrsquoicocircne de la page de type Raccourci apparaicirctra avec une petite flegraveche surle coin de la page en bas agrave droite

Creacuteer une page hors menu

Dans le menu il existe des pages et des sous-pages qui sont visibles par les internautes et il peut yavoir aussi des pages qui ne sont pas visibles qui sont dites hors-menu licocircne de la page apparaicirctraen pointilleacute

On peut guider les internautes vers ces pages en utilisant les liens (voir plus loin)

Pour mettre une page hors menu On procegravede de la mecircme faccedilon que pour creacuteer une page normale seacutelectionner la page dans larborescence (1) gt clic droit gt Editer gt onglet Accegraves (2) gt Dansles menus (3) gt Cocher Cacher gt lrsquoicocircne de la page apparaicirctra en pointilleacute dans lrsquoarborescence Onfera un lien pour diriger lrsquointernaute vers cette page

Creacuteer une page en lien direct vers une URL externe (site exteacuterieur)

Afin deacuteviter de faire une page de preacutesentation et diriger ensuite vers un site exteacuterieur qui seratoujours mis agrave jour ex Service Public Marcheacute PublicOffice de Tourisme Communauteacute decommunes Cineacutema Meacutediathegravequehellip il est conseilleacute de faire un lien directement depuis le menu vers



le site exteacuterieur (URL externe)

Pour cela vous devez ouvrir la page du site concerneacute dans un nouvel onglet de votre navigateur (1)

Il est recommandeacute de copier (Ctrl+C) directement lrsquoadresse du site (URL) depuis la barre drsquoInternet(vous serez certain de ne pas faire drsquoerreur ) (2)

Pour creacuteer ce type de page gt 2 accegraves

1 - Comme pour creacuteer une page Standard dans lrsquoarborescence sur la barre grise du haut choisirlrsquoicocircne de la page Lien vers une URL externe (icocircne maillon) (1) gt la faire glisser agravelrsquoemplacement souhaiteacute gt agrave la place de la page apparaicirctra le maillon et un sens interdit (2)gt clic droit sur Titre par deacutefaut gt menu deacuteroulant Editer

2 - Vous souhaiter changer le type drsquoune page Standard gt dans lrsquoarborescence cliquer sur lapage qui vous inteacuteresse gt clic droit gt Editer gt agrave droite dans lrsquoonglet Geacuteneacuteral gt Type gt choisirLien vers une URL externe agrave la place de Standard (3)Dans ce dernier cas apparaicirct une fenecirctre Ce changement va affecter les champsdisponibles dans le formulaire Voulez-vous sauver maintenant afin de pouvoirrafraichir leacutecran Cliquer OK

Que vous utilisiez lun ou lautre des accegraves vous allez dans la zone eacutedition agrave droite dans la fenecirctre URL(4) gt agrave la place du triangle jaune coller lrsquoadresse du site (Ctrl+V) mais en commenccedilant par www carle choix http ou https se fait juste avant dans la fenecirctre Protocole (5) (Attention ccedila feradoublon et le lien ne marchera pas)

(6) eacutecrire le Titre de la page

Enregistrer

Pour activer la page et enlever le sens interdit (1) clic droit gt Activer (3)IMPORTANT pour que lrsquointernaute ne quitte pas votre site il faut que ce site srsquoouvre dans un nouvelonglet du navigateur gt dans la zone deacutedition gt dans longlet Comportement (2) gt dansCible des liens taper _blank (3)



iexcl CONSEILS Attention les sites exteacuterieurs peuvent changer et ne plus ecirctre drsquoactualiteacute Veacuterifierreacuteguliegraverement ces liens exteacuterieurs

Creacuteation dune page - Reacutedaction

Choisir la preacutesentation de la page

Se mettre en mode WEB gt module Page (1) gt dans lrsquoarborescence seacutelectionner la page (2) gtclic droit Editer gt dans la partie eacutedition agrave droite ouvrir longlet Apparence (3) gt par deacutefaut lapage se met au format Default Subnavigation Left la 8e proposition cest agrave dire unecolonne plus eacutetroite agrave gauche (griseacutee) ougrave apparaicirctra sur toutes les pages inteacuterieures le menu du siteune colonne plus large agrave droite ougrave se trouveront les eacuteleacutements qui constitueront la page et 3 cadres enbas qui correspondront agrave un fond de page

Les autres formats de mise en page sont sur la mecircme logique

La mecircme Mise en page sapplique sur la page principale et sur ses sous-pages Si vous souhaitezchanger la preacutesentation choisir parmi les diffeacuterentes propositions de Mise en page backend dans(cette page uniquement) (4) et eacuteventuellement dans les (sous-pages de cette page) (5)



Acceacuteder agrave la reacutedaction dune page

Dans lrsquoarborescence seacutelectionner la page (1) gt apparaicirct agrave droite la partie eacutedition avec en haut lenom de la page (2)

Si vous avez choisi la preacutesentation par deacutefaut les cadres se preacutesenteront ainsi

Une partie griseacutee agrave gauche qui correspond au menu visible dans les sous-pages

Une partie Normal (3) ougrave on integravegrera les divers eacuteleacutements de contenu qui constitueront la page (voirci-apregraves)

Et 3 cadres en bas Footer Left - Center - Right (4) qui correspondent au fond de pagePar deacutefaut cest le mecircme fond de page que celui de la page daccueil qui apparaicirctra sur toutes lespages inteacuterieures du site Il est possible de le modifier et de personnaliser une page

(5) Dans chaque cadre licocircne (disquette avec le + dans un rond vert) Ajouter un nouvelenregistrement agrave cet emplacement permet de creacuteer un nouveau bloc de texte etou photohellip

En cliquant sur cet icocircne plusieurs possibiliteacutes de preacutesentations deacuteleacutements de contenu de la pagesoffrent agrave vous voir le amp suivant

Selon votre choix de preacutesentation de page plusieurs cadres sont disponibles Left - Normal - Rightqui correspondront agrave lemplacement de vos textes dans la page (gauche - normal - droite)

Choisir la preacutesentation des eacuteleacutements de contenu (ou blocs ou paragraphes)

En regravegle geacuteneacuterale une page normale est composeacutee de diffeacuterents blocs

toujours un titre de pagedes contenus de texte qui seront agreacutementeacutes ou non dune ou plusieurs images (agrave droite agravegauche dessus dessous)une ou plusieurs photos sans texteun diaporama une videacuteohellipdes preacutesentations particuliegraveres comme un caroussel un accordeacuteon etc



Exemple dune page

Dans lexemple ci-dessous il y a 5 blocs un 1er bloc avec le titre de la page (Titre2) un 2e blocavec un sous titre (Titre3) et uniquement du texte un 3e bloc avec un sous titre (Titre3) + unephoto agrave droite et du texte agrave gauche un 4e bloc avec un sous titre (Titre4) + 2 photos agrave gauche sur2 colonnes et du texte un 5e bloc sans texte juste 3 photos sur 3 colonnes

Pour choisir leacuteleacutement de contenu cliquer sur licocircne Ajouter un nouvel enregistrement agravecet emplacement (disquette avec le + dans un rond vert)

Dans la partie eacutedition souvre Nouvel eacuteleacutement de contenu (1) (image ci-dessous) gt plusieursonglets sont disponibles

Chaque onglet fait des propositions diffeacuterentes

On sattardera sur les onglets Contenu de page et Bootstrap qui seront les onglets les plusutiliseacutes



1 - Onglet Contenu de page

Longlet Contenu de page (2) propose 6 possibiliteacutes de blocs ou eacuteleacutements de contenu

(3) Eleacutement utiliseacute uniquement pour eacutecrire un bloc titre (ex le titre de la page)

(4) Eleacutement utiliseacute pour eacutecrire un bloc texte simple

(5) Eleacutement utiliseacute pour eacutecrire un bloc texte avec une ou plusieurs images (agrave droite agrave gauchedessus dessous)

(6) Eleacutement utiliseacute pour mettre uniquement des images (sur 1 - 2 - 3 jusquagrave 6 colonnes)

(7) et (8) Les blocs Liste agrave puce et Tableau sont utiliseacutes de cette faccedilon mais on peut les inseacutererdirectement agrave linteacuterieur des textes

2 - Onglet Bootstrap

Longlet Bootstrap (1) propose 7 possibiliteacutes de blocs avec des preacutesentations un peuoriginales

(2) Bloc utiliseacute pour mettre un icocircne - pictogramme avec un texte (agrave gauche agrave droite en bas)

(3) Bloc utiliseacute pour faire un carrousel avec des contenus qui deacutefilent de gauche agrave droite (entecircteentecircte-texte-photos photos hellip)

(4) Bloc utiliseacute pour preacutesenter plusieurs textes qui sempilent comme un accordeacuteon avec mise enavant des titres sur une ligne et le texte se deacuteplie dessous

(5) Bloc utiliseacute pour preacutesenter des titres comme des onglets dun tableau et le texte apparaicirct souslonglet seacutelectionneacute

(6) Bloc utiliseacute pour preacutesenter un titre et son texte dans un cadre

(7) Bloc utiliseacute pour preacutesenter une liste de texte dans un cadre (comme une liste agrave puces)

(8) Bloc utiliseacute pour inseacuterer une videacuteo



iexcl CONSEILS Nheacutesitez pas agrave les essayer pour constater par vous-mecircme les diffeacuterentes propositions

Deacutetails du bandeau drsquoun bloc et de son menu deacuteroulant

1 - Le bandeau du bloc

(1) Licocircne Ajouter un nouvel enregistrement agrave cet emplacement agrave utiliser agrave chaque creacuteationde bloc (voir choix ci-dessus) Vous choisissez vous-mecircme lrsquoemplacement avant ou apregraves un autrebloc On peut toujours inseacuterer un bloc entre deux par la suite

(2) Sils ne sont pas seacutelectionneacutes les blocs sont gris sans icocircnes

(3) Pour eacutecrire dans le bloc cliquer sur le crayon gt Editer

(4) Pour ne pas faire apparaicirctre votre travail si vous ecirctes en ligne cliquer sur lrsquoampoule gt Masquer(apparaicirct un sens interdit sur lrsquoicocircne du bloc et lampoule devient grise) A contrario si le bloc estcacheacute pour le rendre visible cliquer sur lrsquoampoule gt Afficher

(5) Pour supprimer un bloc cliquer sur la poubelle gt Supprimer

(6) Clic gauche sur licocircne du bloc pour acceacuteder aux autres fonctionaliteacutes via un menu deacuteroulant (voirci-dessous)



2 - Le menu deacuteroulant

Lorsquon fait un clic gauche sur licocircne du bloc (6) (image ci-dessus) apparaicirct un menu deacuteroulant quiregroupe les principales fonctionnalteacutes (dans Typo 3 plusieurs entreacutees sont souvent possibles)

Visualiser cette seacutelection ouvre un nouvel onglet et vous permet dacceacuteder au site vu parlinternaute

Editer le crayon vous permettra de rentrer et deacutecrire dans le bloc

Nouveau cet icocircne vous permet de creacuteer un nouveau bloc

Info vous trouverez des informations sur le bloc (creacuteationhellip)

Copier - Couper possibiliteacute de copier couper un bloc et de le coller partout dans le site Si voussouhaitez annuler le copier couper recliquer sur lrsquoicocircne

Plus doptions - deacuteplacer leacuteleacutement possibiliteacute de deacuteplacer le bloc (on peut aussi sur le blocmaintenir la souris qui devient un + avec 4 flegraveches et faire glisser le bloc )

Cacher possibiliteacute de cacher le bloc via ce menu deacuteroulant (sens interdit) et le rendre visible encliquant sur lampoule

Options de visibiliteacute possibiliteacute de faire apparaicirctre ou faire disparaicirctre le bloc agrave une date preacutecise

Supprimer possibiliteacute de supprimer le bloc

Historique annuler vous y trouverez tout lhistorique de votre travail possibiliteacute de reacutecupeacuterer unbloc supprimeacute

Eleacutements de contenu Titre seulement - Eleacutement de texte

1 - Le bloc Eleacutement de titre

Chaque page (ou sous-page) doit avoir un titre de page qui sera toujours en Titre 2

Cliquer sur lrsquoicocircne Ajouter un nouvel enregistrement agrave cet emplacement



Souvre Nouvel eacuteleacutement de contenu gt choisir longlet Contenu de page gt choisir Titreseulement

Souvre Creacuteer un nouvel enregistrementhellip

Onglet geacuteneacuteral gt dans Titre on eacutecrit le titre de la page

dans Type on choisit H2 (eacutequivalent du Titre 2)

on peut eacutecrire un Sous-titre

2 - Le bloc Eleacutement de texte


Souvre Nouvel eacuteleacutement de contenu gt choisir longlet Contenu de page gt choisir Eleacutementde texte




Onglet geacuteneacuteral

(1) Dans Titre gt on eacutecrit le titre du bloc

(2) Dans Type gt on choisit lrsquooption Cacheacute agrave la place de Par deacutefaut sinon il apparaicirct en doubleCrsquoest important de nommer son bloc afin de le retrouver plus aiseacutement par la suite surtout en modeListe lorsqursquoil y a plusieurs blocs qui se succegravedent

(3) Dans Texte gt on tape son texte dans le cadreImportant il y a tregraves peu de possibiliteacutes de mises en forme nrsquoheacutesitez pas agrave tester les icocircnes qui sontdans le menu au-dessus du texte

(4) Dans le menu au-dessus du texte dans la fenecirctre Aucun format de bloc il y a plusieurs



options de taille drsquoeacutecriture Titre1 il sert pour les moteurs de recherche crsquoest le nom officiel du site (on ne lrsquoutilise jamais)Titre2 on conseille de mettre un titre en deacutebut de chaque page en utilisant leTitre 2 (vue auparagraphe preacuteceacutedent)Titre3 on le conseille pour les sous-titres (ex ici ldquoParagraphe avec un eacuteleacutement de texterdquo)EtchellipParagraphe on lrsquoutilise pour lrsquoeacutecriture normale (ex ici ldquoVoici mon paragraphe avec seulement dutextehelliprdquo)

iexcl Agrave savoir que les couleurs taille police puces etchellip tout est parameacutetreacute degraves le deacutepart pour toutesvos pages afin de garder une uniteacute agrave votre siteOn peut les changer par la suite (voir lors des reacuteglages techniques)

Dans lrsquoonglet Accegraves il est possible de programmer la date drsquoouverture au public de votre bloc(utiliser le calendrier dans la fenecirctre de publication)

iexcl IMPORTANT

Nous vous conseillons drsquoappliquer une charte reacutedactionnelle commune agrave tous les utilisateurs(voir le paragraphe deacutedieacute agrave la fin de ce document)Il est possible de reacutecupeacuterer un texte drsquoun document Word et de faire un copier-coller pour cela ilfaut passer par le laquo Bloc-notes raquo afin de supprimer toutes les mises en forme Il faut utiliser lesraccourcis clavier Ctrl+C pour copier Ctrl+V pour coller et pas utiliser le clic droit de la sourisPour revenir agrave la ligne sans creacuteer un paragraphe dans le texte sur le clavier faire laquo MAJ +entreacutee raquoPour eacuteviter des espaces entre les blocs pensez agrave remonter votre curseur jusqursquoagrave la fin dudernier motNrsquoutiliser les tableaux que pour des informations tregraves simples et courtes car la mise en formeest tregraves limiteacutee sinon utiliser des documents existants et les inseacuterer soit au format PDF soit entant quimage et ensuite on fera un lien (voir le paragraphe comment creacuteer les liens)

Comment creacuteer modifier supprimer un lien

1 - Comment creacuteer un lien

Il est possible de diriger lrsquointernaute vers 4 destinations principales diffeacuterentes en utilisant des laquo Liensraquo (1) vers une autre page du site(1) bis vers un bloc dans une Page(2) vers un Fichier (PDF- image)(3) vers une URL externe (site exteacuterieur)(4) ou encore vers un E-mail

Pour faire un lien dans le texte seacutelectionner le mot ou le groupe de mots sur lequel on souhaite faireun lien (surligneacute) (5)Dans le menu cliquer sur la laquo mappemonde raquo Inseacuterer un lien (6) gt apparaicirct la fenecirctre Inseacutererun lien

Il y a 5 onglets on retiendra 4 possibiliteacutes



1-1 Comment creacuteer un lien vers une page du site ou vers un blocparagraphe dans unepage

Cliquer sur longlet Page (1) on descend dans lrsquoarborescence de votre menu et on choisit la pageen question (7) gt la fenecirctre se ferme gt on revient dans le texte gt et la selection apparaicirct en couleurqui signifie que le lien fonctionne

Ne pas oublier d Enregistrer

(1) bis Depuis lrsquoonglet Page on peut eacutegalement faire un lien vers un bloc agrave lrsquointeacuterieur drsquoune page(lien drsquoancrage) Afin de faire apparaicirctre le bloc agrave seacutelectionner deacutecocher la flegraveche rouge au niveau dela page (8) et agrave droite choisir le bloc dans Eleacutements de contenu (1) bis A utiliser par exemple sila page est longue faire un sommaire en haut avec des liens vers les blocs du dessous


iexcl Lorsquon fait un lien vers une page du site il nrsquoest pas neacutecessaire de demander lrsquoouverture drsquounenouvelle fenecirctre car on reste toujours sur le siteIl est toujours possible de revenir au menu gracircce au laquo fil drsquoAriane raquo situeacute en haut de la page sous lemenu

1-2 comment creacuteer un lien vers un fichier (PDF - image)



Dans le texte seacutelectionner le mot ou le groupe de mots sur lequel on souhaite faire un lien (surligneacute)(2)

Cliquer sur longlet Fichier (2) quand la fenecirctre souvre on retrouve sur la gauche lrsquoarborescencede tous vos fichiers que vous avez stockeacutes au preacutealable dans vos Fichiers

IMPORTANT avant de choisir un PDF dans la colonne de droite sur la ligne Cible dans la fenecirctrede droite (qui est vide) (3) gt deacutecocher la flegraveche gt choisir Nouvelle fenecirctre gt et dans la fenecirctre agravegauche srsquoinscrit _blank gt agrave droite la fenecirctre reste vide

Dans lrsquoarborescence des dossiers agrave gauche gt choisir le dossier dans lequel se trouve votre fichier gtapparaicirct dans la partie de droite Fichiers tous les documents stockeacutes dans votre dossier (4) gtcliquer sur le PDF ou la photo en question gt la fenecirctre se ferme gt on revient dans le texte gt et laselection apparaicirct en couleur qui signifie que le lien fonctionne

Ne pas oublier d Enregistreriexcl Toujours veacuterifier que les liens soient corrects et qursquoils srsquoouvrent dans un nouvel onglet sur InternetEn fermant son onglet lrsquointernaute ne doit pas quitter votre site

1-3 comment creacuteer un lien vers une URL externe (site exteacuterieur)



Cliquer sur longlet URL externe (1)

Dans la fenecirctre URL (2) mettre lrsquoadresse du site (il est recommandeacute de la reacutecupeacuterer dans la barre dusite directement sur Internet et de faire un Copier Coller clavier pour ne pas faire drsquoerreur

Sur la ligne Cible dans la fenecirctre de droite (qui est vide) (3) gt deacutecocher la flegraveche gt choisirNouvelle fenecirctre gt et dans la fenecirctre agrave gauche srsquoinscrit _blank gt agrave droite la fenecirctre reste vide

Ce nest quapregraves quil faut cliquer sur Attribuer le lien (4) gt la fenecirctre se ferme gt on revientdans le texte gt et la selection apparaicirct en couleur qui signifie que le lien fonctionne


iexcl Dans votre texte lorsque vous voulez faire le lien vers la page du site crsquoest bien de mettre lrsquoadressedu site en entier car si le lien ne se fait pas lrsquointernaute peut toujours copier lrsquoadresse (sauf si le lienest trop long)

1-4 comment creacuteer un lien vers une adresse mail



Cliquer sur longlet E-mail (1)

Dans la fenecirctre Adresse e-mail (2) gt rentrer lrsquoadresse mail il est conseilleacute de faire un Copier Coller clavier pour ne pas faire drsquoerreur(3) Cliquer Attribuer le lien

la fenecirctre se ferme gt on revient dans le texte gt et la selection apparaicirct en couleur qui signifie quele lien fonctionne

Ne pas oublier d Enregistreriexcl Quand on fait un lien vers une adresse mail lrsquo se transformera tout seul en (at) dans le textevisible par lrsquointernaute (eacutevite les Spams)Il est conseilleacute de laisser lrsquoadresse mail en entier car tous les internautes nrsquoont pas un logiciel demessagerie (Outlook Thunderbirdhellip) possibiliteacute ainsi de relever lrsquoadresse

2 - Comment supprimer ou modifier un lien

Dans le texte gt re-seacutelectionner les mots correspondants au lien que vous voulez supprimer gt cliquersur lune des 2 ldquomappemondesrdquo modifier un lien ou supprimer un lien gt

Pour modifier un lien une fois corrigeacute compleacuteteacute gt cliquer sur Mettre agrave jour


iexcl INFO si vous souhaitez avoir le titre de votre lien laquo en survol raquo crsquoest possible en lrsquoinscrivant dans lafenecirctre laquo Titre raquo gt Mettre agrave jour gt Enregistrer

Regravegle geacuteneacuterale = toujours veacuterifier les liens

Fichier (ou lieu de stockage des photos et PDF)

1 - Pourquoi utiliser le mode Fichier

Tout ce qui sera utiliseacute dans votre site tels les images et les PDFhellip doivent toujours ecirctre enregistreacutesdans TYPO3 dans votre site

Une fois que les documents images et PDF sont traiteacutes (reacuteduction principalement - traiteacute plus loin) ilfaut les inseacuterer dans le lieu de stockage de votre site appeleacute Fichier

2 - Comment se preacutesente le mode Fichier

Colonne de gauche se mettre en mode Fichier (1) gt au centre apparaicirct une arborescence (2) quise traite comme dans Windows

Pour lrsquoarborescence (2) il est conseilleacute de creacuteer des dossiers eacutequivalents aux pages du site danslesquels on retrouvera les documents correspondants dossiers 1er niveau (les onglets du menu



dans lexemple ci-dessous 02_Vie_municipale ) et dossiers 2e niveau (les sous-menus danslexemple Conseil_municipal )

CONSEIL Numeacuteroter les dossiers du 1er niveau (dans lexemple 02_Vie_municipale) pour laquo collerraquo exactement agrave lrsquoarborescence du site

iexcl Degraves le deacutepart vous penserez agrave bien classer votre arborescence agrave bien nommer etou dater(AAMMJJ) les fichiers dans vos dossiers pour les retrouver plus facilement - le classement se fait parordre alpha (mecircme les majuscules et minuscules sont prises en compte)

iexcl Attention par la suite si vous souhaitez renommer un dossier il faudra refaire le lien depuis vospages du site (le lien sera coupeacute et il ne reconnaicirctra plus lrsquoemplacement de votre fichier ) Si voussouhaitez deacuteplacer un dossier il faudra deacuteplacer vos photos et PDF un par un et refaire eacutegalement lesliens

Ce nrsquoest pas une perte de temps que de bien nommer un fichier et de bien le classer degraves ledeacutepart

3 - Comment creacuteer un dossier dans Fichiers

En mode Fichiersgt (1) dans larborescence (2) seacutelectionner le dossier dans lequel vous souhaitezcreacuteer un ou plusieurs sous-dossiers gt dans la partie droite sur la barre grise en haut cliquer surlrsquoicocircne (disquette avec + dans un rond vert) agrave droite Nouveau (3)

Autre accegraves gt mode Fichiers gt arborescence au centre gt clic droit sur le dossier concerneacute gtNouveau



Apparaicirct dans la partie de droite Nouveau fichier ou dossier (1) gt Nombre de dossiers (2)gt choisir 1 dossier (ou plus si vous souhaitez en creacuteer plusieurs agrave la fois dans un mecircme niveau) gt leurdonner un titre (3) gt cliquer Creacuteer des dossiers (4)

Il apparaicirctra dans lrsquoarborescence (1) lagrave ougrave vous avez souhaiteacute son emplacement et se placera parordre alphabeacutetique

Dans lexemple ci-dessus (1) on vient de creacuteer un sous-dossier Les_commissions dans le dossier02_Conseil_municipal qui se placera en 2e niveau avant Les_elus

Faire la mecircme chose pour creacuteer des sous-dossiers gt seacutelectionner dans lrsquoarborescence le sous-dossierdans lequel vous voulez qursquoil soit et ainsi de suitehellip

iexcl Ne rien mettre ni enlever dans les dossiers Template ou Graphisme car ils contiennent lesaspects graphiques les formats les fichiers neacutecessaires au fonctionnement du site

4 - Comment stocker une image ou un PDF dans Fichier

On va chercher les fichiers (images et PDF) dans notre ordinateur pour les stocker dans Typo3

En mode Fichiersgt (1) dans larborescence (2) seacutelectionner le dossier ou sous-dossier dans lequelvous souhaitez inseacuterer la photo ou le PDF gt dans la partie droite sur la barre grise en haut cliquer surlrsquoicocircne du milieu (feuille avec une flegraveche verte) Envoyer des fichiers (3)

Autre accegraves gt mode Fichiers gt arborescence au centre gt clic droit sur le dossier concerneacute gtEnvoyer des fichiers

Vous acceacutedez ainsi agrave votre ordinateur vous pouvez choisir plusieurs images ou PDF agrave la fois



4 - Comment renommer une image ou un PDF dans Fichier

Placer la souris sur lrsquoicocircne du PDF (1) ou de limage (2) gt clicdroit gt apparaicirct un menu deacuteroulant (3)- mecircmes informations sur la ligne du fichier (4)

Editer (cliquer gt possibiliteacute de modifier lenregistrement du fichier agrave la racine)Renommer (cliquer gt possibiliteacute de Renommer uniquement le fichier)Info (informations geacuteneacuterales du fichier fichier visible teacuteleacutechargementhellip)CopierCouperSupprimer

5 - Comment deacuteplacer une image ou un PDF dans un autre dossier de Fichiers

Choisir dans le menu deacuteroulant Copier ou Couper puis aller dans lrsquoarborescence et choisir ledossier ougrave vous souhaitez le mettre gt clic droit gt Coller dans

iexcl Attention si vous renommez ou si vous coupez une photo un PDF alors que vous lrsquoutilisez deacutejagravedans un bloc le lien de la photo ou PDF vers Fichier sera laquo perdu raquo il faudra le refaire (voirinsertion photo ou Comment creacuteer modifier supprimer les liens)

Mettre les documents au format PDF

Ne jamais mettre sur le site des documents sous Word ou Excel mais les enregistrer au format PDFqui est seacutecuriseacute sauf srsquoil srsquoagit de formulaires agrave remplir

En geacuteneacuteral lrsquooutil PDF est deacutejagrave inteacutegreacute dans Word ou Writer Enregistrer sous gt Type gt1choisir PDFConseil afin de reacuteduire le poids de vos documents choisissez dans Optimiser pour gtTaille minimale (publication en ligne)

Il est conseilleacute drsquoinstaller PDFCreator logiciel gratuit car il a des possibiliteacutes supeacuterieures au2preacuteceacutedent Il est facile drsquoutilisation et srsquoinstalle comme une imprimante virtuelle (crsquoest dans lemenu imprimante que vous irez le chercher lorsqursquoil sera installeacute)httpwwwcommentcamarchenetdownloadtelecharger-128-pdf-creator (voir la deacutemo) Quandvous lrsquoinstallez pensez agrave deacutecocher PDF Architecte et images 2PDF il faut eacuteviter les logicielsadditionnels (malwares)Pour reacuteduire un document vous pouvez installer le logiciel gratuit doPDF3httpwwwdopdfcomfr il fonctionne comme PDFcreator (principe de lrsquoimprimante) et il esttregraves efficace pour reacuteduire le poids drsquoun PDF (bulletin par ex) gt proprieacuteteacute gt reacutesolution gt



choisissez 96 DPI ccedila suffitNous vous conseillons eacutegalement 2 logiciels gratuits en ligne tregraves faciles agrave utiliser smallpdf ou4ilovepdfhttpsmallpdfcomfr ou httpwwwilovepdfcomfr en faisant simplement glisser votre fichierdans leur site Ils proposent plusieurs possibiliteacutes compresser PDF (reacuteduire la taille des fichiersPDF) convertir une image JPEG en PDF fusionner plusieurs fichiers PDF en un seul fichier (avecpossibiliteacute de supprimer des pages) convertir Word Excel PPT en PDF

iexcl Pour votre bulletin si vous passez par un imprimeur nrsquoheacutesitez pas agrave lui demander un formatoptimiseacute pour le web (basse reacutesolution) preacutecisez-le dans votre marcheacute degraves le deacutepart

Les photos - redimensionnement et compression

1 - Les photos ndash taille dimension format proportion

En preacuteambule il est impossible pour un internaute drsquoattendre des heures avant que srsquoouvre undocument ou se deacuteroule une photo hellip Il quittera votre site Lrsquointernaute est un consommateur presseacute La premiegravere des choses agrave faire crsquoest donc de reacuteduire vos photos et vos PDF On va donctravailler sur son ordinateur avant de les installer sur son site

Comment connaicirctre la taille et le poids de sa photo Clic droit sur la photo lt information surlrsquoimage ou proprieacuteteacutes de lrsquoimage lt Onglets Geacuteneacuteral et Deacutetails

la Taille de la photo (ou encore son poids) Quand elle sort directement de lappareil photos1elle peut atteindre 449Mo ou 4449 Ko et mecircme plus Cest beaucoup trop lourd Si crsquoest troplourd crsquoest trop long agrave srsquoouvrir et ccedila prend beaucoup de place sur votre ordinateur la Dimension de votre image (ou le nombre de pixels - petits carreacutes de couleurs qui2constituent lrsquoimage) peut ecirctre importante par ex 3456(largeur) X 2592 (hauteur) - dans ce cascest leacutequivalent dun grand poster mural Pour le site il suffit que la photo remplisse leacutecran(quand elle est agrave 100) sans avoir agrave jouer avec le curseur



Les formats

Les photos sont soit en format paysage (en largeur) et dautres en format portrait (en hauteur)

Lorsquon fait un bloc avec plusieurs photos les 2 types de formats ensemble ne font pas bonmeacutenage

Il faudra toujours dissocier les formats portraits des formats paysage

Pensez-y lorsque vous prenez vos photos

Les proportions - rogner une photo

Souvent les photos ne sont pas prises avec le mecircme appareil photo les dimensions sont doncdiffeacuterentes

Pour eacuteviter ce problegraveme destheacutetisme (photos plus petites ou plus grandes) dans un mecircme page ilfaut ldquorognerrdquo les photos et utiliser la mecircme proportion pour toutes

Comment rogner lrsquoimage et garder les mecircmes proportions pour toutes les photosVoici une marche agrave suivre avec la galerie photo de Windows 2010



Travailler sur une copie de votre image originale (grand format)Cic droit sur la photo gt ouvrir avec Galerie de photos Windows gt cliquer sur longletModifier organiser ou partagerDans Edition gt Rogner gt Proportion gt choisir par ex le format standard 4times3 gt (pour la photoportrait le cadre se met en hauteur automatiquement)Apparaicirct un cadre agrave lrsquointeacuterieur en pointilleacute vous pouvez le faire glisser lrsquoagrandir ou le reacuteduire agrave votreconvenance il gardera toujours cette proportionRevenir dans Rogner gt Appliquer le rognage gt Fermer le fichier

Cest ensuite quon applique la reacuteduction de la photo

Marche agrave suivre

Creacuteer sur le bureau un dossier deacutedieacute laquo photos-docs pour site raquo dans lequel vous mettrez les1photos et PDF reacuteduits et renommeacutes correctement (anneacuteemoisjour et sujet pour les PDF etdeacutesignation pour les photos)Vous devez harmoniser toutes les dimensions des photos du site2

mettre toutes vos photos aux mecircmes proportions (exemple format 4times3)Vous devez reacuteduire vos photos (voir paragraphe suivant) 3

au mecircme format Hauteur 768Largeur 1024

pour la taille (poids)des images ne pas deacutepasser 350ko



2 - Les photos ndash comment reacuteduire

Il existe plusieurs logiciels gratuits tregraves proches de Photoshop comme GIMP ou PaintNET voustrouverez les liens pour les teacuteleacutecharger et des tutoriels pour comprendre leur fonctionnement

GIMP pour le teacuteleacutecharger (download) = httpwwwgimporg1son tutoriel en franccedilais = httpdocsgimporg28frou encore voir les videacuteos de tutocom en franccedilais httpfrtutocomgimptuto-gimp-gratuithtmPaintNET Pour le teacuteleacutecharger httppaintnetfr2Un tutoriel httpfrcalameocomread0000396088f103c4a8175Ou encore httpwwwzapwallpaperfrblogpaint-net-tous-les-tutoriels

Il existe aussi des logiciels convertisseurscompresseurs drsquoimages qui proposent de reacuteduire vosphotos en grand nombre en une seule fois et aussi une par une

Nous vous conseillons drsquoutiliser Light Image Resizer (logiciel gratuit)1Pour teacuteleacutecharger Light Image Resizer httpwwwobviousideacomwindows-softwarelight-image-resizerfrom=Updater (vous ytrouverez la videacuteo de deacutemonstration)NB lors de linstallation nacceptez pas les logiciels additionnels (malwares)

Voici la marche agrave suivre avec Light Image Resizer

Lorsque apparaicirct ce message attendre quelques secondes et cliquer sur Continuer

Cliquer sur option complegravete (accessible aussi depuis proprieacuteteacute gt paramegravetre gt geacuteneacuteral)Une fenecirctre apparaicirct



Conseil ouvrir en 1er lieu votre dossier avec toutes vos images vous pouvez glisser les imagesdirectement drsquoune fenecirctre agrave lrsquoautre (crsquoest lrsquoeacutequivalent dlsquoun copier coller) et mettre les 2 fenecirctres cocircteagrave cocircte Sinon cliquer sur Suivant et aller les reacutecupeacuterer dans lrsquoarborescence de votre bureau

Cliquer sur Suivant et srsquoouvre lrsquoonglet Options

Profil Deacuterouler la flegraveche et choisir 1024times768 (valable pour les formats portraits commepaysage pas la peine de trier )Qualiteacute (crsquoest lagrave qursquoon deacutefini le poids plus on baisse plus la qualiteacute de la photo sera mauvaisedonc il faut tester) vous pouvez laisser la valeur par deacutefaut 90 (vous pouvez baisser et veacuterifier



en utilisant Preacutevisualisation en haut)Nom du masque par deacutefaut crsquoest F (copier)ainsi la photo gardera son appelation (F) et en suivant se rajoutera (copier) A la place de (copier)vous pouvez mettre un intituleacute qui sera le mecircme sur toutes les photos que vous reacuteduirez en mecircmetemps (par ex le nom de votre commune)Action Il est recommandeacute de garder laquo Creacuteer des copies raquo sinon vous eacutecrasez lrsquooriginalDestination choisissez la destination de vos images si vous gardez laquo Mecircme dossier drsquoorigine raquovous y retrouverez votre photo avec (copier) agrave la fin du nomSinon dans la fenecirctre agrave droite descendez la flegraveche gt parcourir gt classez dans votre dossier laquophotos-docs pour site raquo que vous aurez au preacutealable creacuteeacute gt il regroupera toutes vos photosredimentionneacutees Vous pouvez eacutegalement creacuteer un dossier si vous nrsquoen nrsquoavez pas unCliquer sur OK

Une fois reacuteduites vous transfeacuterez les photos dans les Fichiers de Typo3

iexcl Essayez de faire un maximum de reacuteductions au mecircme moment de faccedilon agrave ne pas faire trop drsquoallerset venues

Eleacutement de contenu Texte amp Images

iexcl Rappel vous devez en 1 er lieu inseacuterer dans laquo Fichiers raquo les images et PDF que vous utiliserez

Cliquer sur lrsquoicocircne Creacuteer un nouvel eacuteleacutement gt choisir Texte amp Images

Par rapport agrave la preacuteceacutedente proposition Texte simple ici se rajoute lrsquoonglet Images (crsquoest lagrave qursquoon insegraverera lesimagesPDF)

1 - Onglet Geacuteneacutera l

Remplir lrsquoonglet Geacuteneacuteral comme pour Texte simple

2 - Onglet Images

Ensuite allez dans lrsquoonglet Images (1) puis dans Comportement (2) Activer l agrandissement lors du clicgt Cliquez sur Ajouter une image (3)

Souvre une fenecirctre ougrave se trouve lrsquoarborescence de vos Fichiers



Apparaicirct la fenecirctre Navigateur drsquoeacuteleacutements TYPO3 (1)

Seacutelectionner votre dossier dans lrsquoarborescence (2) apparaissent agrave droite (3) et apparaissent agrave droite tous lesdocuments images etou PDG en miniature que vous avez classeacutes avec sur la mecircme ligne infos et taille en pixels gt cocherAfficher les miniatures (4)

Cocher la ou les imagesPDF choisis et ensuite en haut cliquer sur Importer la seacutelection (5)

Retour dans lrsquoonglet Images



Sur le bandeau agrave droite (1) vous pouvez supprimer (poubelle) - cacher (ampoule) - faire glisser (3barres) pour deacuteplacer lordre des images A gauche de limage deacutecochez la flegraveche (2) pour avoir les deacutetails lieacutesagrave limage ou PDF

Meacutetadonneacutees de limage (3) 4 informations importantes pour l accessibiliteacuteCocher surcharger pour les remplir

Titre (4) apparaicirctra en laquo sur lignage raquo (lorsque vous passez la souris sur lrsquoimage) Crsquoest aussi la leacutegende visiblesur lagrandissement de limageTexte alternatif (5) description de limage (personnes handicapeacutees)Description (Leacutegende) (6) la leacutegende sera visible sous lrsquoimage dans la pageLien (7) la photo peut souvrir vers un lien (ex sur un logo faire le lien vers le site concerneacute) - voir comment faireles liens dans les paragraphes preacuteceacutedents

Pensez agrave cocher Afficher les miniatures si ce nest pas deacutejagrave fait

3 - Onglet Apparence

Se rendre ensuite dans lrsquoonglet Apparence (1) pour ajuster les images et leur emplacement



Dans Alignement des images (2)

Positionnement et alignement (3) des images par rapport au texte les photos peuvent se situerdessus dessous centreacute agrave droite agrave gauche agrave cocircteacute ou lrsquoentourer (habilleacute)Nombre de colonnes (4) on peut eacutegalement mettre les photos sur plusieurs colonnesAlignement de la leacutegende (5) vous pouvez vous mecircme choisir lrsquoemplacement de la leacutegende agravegauche droite au centre

iexcl INFO Lrsquoalignement la taille et la police des leacutegendes sont agrave deacutefinir lors des reacuteglages techniquesBien sucircr on aura reacuteduit le poids des images et PDF avant de les utiliser dans TYPO3Toujours veacuterifier le comportement de vos choix

La page daccueil

Agenda Actualiteacutes En un clic A la Une En Avant Liens directs Services en lignehelliphellip

Crsquoest LA page que lrsquoon doit travailler tregraves reacuteguliegraverementPrendre lrsquohabitude de lrsquoactualiser au minimum une fois par semaine Elle doit bouger tout letemps Elle doit ecirctre attractive pour donner envie aux personnes de revenir sur votre siteLes laquo actualiteacutes raquo alimentent les flux RSS



Quest ce quune actualiteacute

Crsquoest un communiqueacute de presse que se passe-trsquoil que va-t-il se passer et que srsquoest-il passeacute Annoncer une information une manifestationhellip et reacutediger aussi des comptes-rendus (cf la presse enligne)

Quelques unes sont visibles en page daccueil mais on doit pouvoir retrouver les anciennesinformations dans les actualiteacutes suivantes (donc ne pas les supprimer)

Les actualiteacutes doivent ecirctre eacutecrites comme un communiqueacute de presse cest agrave dire faire des phrasesLes premiegraveres lignes qui apparaissent doivent ecirctre essentielles et suffisamment alleacutechantes pour quela personne aille cliquer sur En savoir plus

Mettre des photos Crsquoest plus dynamique Pour des informations officielles vous pouvez utiliser leslogos des institutions concerneacutees

Exemples drsquoinformations agrave citer dans les actualiteacutes

Des travaux de voirie de lrsquoeacutecole de la mairiehellipLes informations que vous devez afficherInformations venant de la preacutefecturehellipAvis de coupure de courantModification drsquoun sens de circulationLes dates des eacutelectionsRecensement de la populationOuverture des inscriptions pour la cantineInscription pour la rentreacutee scolaireHoraires drsquoeacuteteacute de la Mairie - fermetures exceptionnellesLes menus de la cantine de lrsquoeacutecole sont disponibles sur le site tous les samedishellipLes calendriers de ramassage des deacutechets meacutenagers sont disponibleshellipLa commune honore un(e) centenaireLes vœux du MaireLrsquoassembleacutee geacuteneacuterale des associations localesOuverture des inscriptions pour le vide grenierInfo des associations localesCovoituragehellipDon du sangOn peut aussi annoncer une nouvelle page que lrsquoon met en ligne en faisant un lien vers la pageen question Une fois regardeacutees les internautes retournent rarement sur les pages sauf si vousles y invitezEtchellip

iexcl Les infos dans les actualiteacutes ne doivent pas ecirctre supprimeacutees car elles sont neacutecessaires pour lesrecherches des internautes On doit pouvoir retrouver la chronologie des informations

Creacuteation dune actualiteacute

Dans la colonne de gauche gt se positionner en mode Liste (1)

Dans lrsquoarborescence tout en bas gt Stockage gt Actualiteacutes (2)



Dans la partie de droite gt Cliquer sur lrsquoicocircne Creacuteer un nouvel enregistrement agrave cocircteacute de Titre (3)

(1) Srsquoouvre une fenecirctre Creacuteer un nouvel enregistrement Actualiteacutes sur la page laquo Actualiteacutesraquo (ou Modifier le contenu si on souhaite corriger une actu deacutejagrave eacutecrite) gt Onglet Geacuteneacuteral gt

(2) Titre mettre le titre de lrsquoactu il est conseilleacute de mettre la date de la manifestation agrave ce niveau-lagrave

(3) Veacuterifier que loption Cacher ne soit pas cocheacutee lrsquoactu apparaicirctra de suite en ligne

(4) Type on laisse Actualiteacutes (5) Texte daccroche agrave eacuteviter cest mieux - en page daccueil onverra soit cest le texte daccroche soit le texte normal (dessous)

(6) Nom de lauteur email pas neacutecessaire de remplir

(7) DateHeure crsquoest la date de saisie par deacutefaut Si vous souhaitez faire laquo remonter raquo une actualiteacutedans la page drsquoaccueil crsquoest dans cette fenecirctre quon peut changer la date de saisie (utilisez le petitcalendrier agrave droite de la case ndash Archive pas neacutecessaire de le remplir

(8) Texte gt Ecrire les informations comme dans un bloc normal

En revanche on doit laisser le texte au format paragraphe on ne doit pas utiliser de Titre ni de miseen forme (gras ou italique) ni de liens ni mecircme daller agrave la ligne au moins dans les 45 premiegravereslignes tant que le nombre de caractegraveres visibles dans votre actu sur la page drsquoaccueil ne bascule pasvers laquo en savoir plus raquo

iexcl Quand on est sur la page drsquoaccueil il nrsquoy a que quelques lignes qui apparaissent le reste est visibleavec laquo en savoir plus raquo Donc on peut eacutecrire un communiqueacute relativement long se rappeler toutefoisque les 3 premiegraveres lignes doivent ecirctre suffisamment alleacutechantes pour que la personne aille cliquersur laquo en savoir plus raquo

(9) Aller ensuite sur longlet Relations Cest lespace ougrave on insegraverera les images logos PDFhellip

(10) Fichier meacutedia gt Ajouter un fichier meacutedia (11) gt souvre la fenecirctre Navigateur deacuteleacutements aveclarborescence de vos dossiers dans Fichier gt on choisi la photo preacutealablement classeacutee

(12) Meacutetadonneacutees de limage cest la partie renseignement

Montrer dans les vues de preacutevisualisation cocher la case dessous si on deacutesire que laphoto soit visible sur la page daccueil



Titre (info bulle) et Texte alternatif (description pour laccessibiliteacute de votre site) cocher laquosurcharger raquo et mettre la leacutegende de la photoDescription (Leacutegende) cliquer sur laquo surcharger raquo pour eacutecrire la leacutegende si on souhaitequelle soit visible sous la photoLien en cliquant sur limage possibiliteacute de faire un lien vers un Pdf ou un site exteacuterieurVeacuterifier quagrave la fin du lien il y ait bien espace_blank (pour que quil souvre dans une nouvellefenecirctre)

Si on souhaite mettre plusieurs images cliquer agrave nouveau sur Ajouter un fichier meacutedia Enrevanche choisir la photo quon souhaite mettre en cochant la case Montrer dans les vues depreacutevisualisation

Il est possible de rajouter des fichiers nouvelles et actualiteacutes en relation agrave votre actualiteacute cela setrouvera en dehors du texte en bas de lactualiteacute dans laquo en savoir plus raquo

(13) Fichiers en relation joindre un Pdf comme un bulletin un formulairehellip gt Ajouter un fichieren relation gt mecircme logique que pour les images le chercher dans lrsquoarborescence de votre fichier

(14) Liens en relation lien vers un site exteacuterieur vers une page de votre siteetchellip gt Creacuteernouveau gt apparaicirct un eacuteleacutement [Sans titre] gt deacutecocher le petite flegraveche agrave sa gauche gt cliquer sur lecrayon agrave droite du cadre URL gt fenecirctre classique des liens gt en bas ne pas oublier la cible gt nouvellefenecirctre gt avant daller chercher le lien Il est conseilleacute de remplir le Titre cest mieux car ladresse dulien (souvent tregraves longue ) nrsquoapparaicirctra pas et le lecteur saura exactement ce quil va voir

(15) Actualiteacutes en relation faire reacutefeacuterence agrave des actualiteacutes preacuteceacutedentes qui traitent du mecircmesujet par exemple des travaux sont en cours vous pouvez faire un lien vers les actualiteacutespreacuteceacutedentes qui en parlent pour suivre sa progression gt A droite du premier cade cliquer sur le petitdossier Naviguer dans les enregistrements gt arborescence de vos pages gt stockage gt Actualiteacutes gt agravedroite Seacutelectionnez un enregistrement gt choisir lactualiteacute

(16) Actualiteacutes en relation (inverse) dans les actualiteacutes preacuteceacutedentes que vous aurez mises enrelation apparaicirctra un lien vers cette nouvelle actualiteacute

iexcl Pour la page daccueil onrecommande dans Fichiers de creacuteer un dossier speacutecifique pour lesactualiteacutes avec des sous-dossiers par anneacutee et mois ce qui vous permettra de vous y retrouver + undossier speacutecifique pour les logos

Longlet Accegraves (17) ne sutilise que si on souhaite programmer la publication dune actualiteacuteUtiliser le petit calendrier agrave droite du 1er rectangle pour deacutefinir la date (18) Geacuteneacuteralement onnarrecircte pas la publication dune actualiteacute Donc on laisse de cocircteacute le rectangle suivant

Droit daccegraves par groupe dutilisateurs ne srsquoutilise que dans une grosse collectiviteacute si plusieurspersonnes travaillent sur le site

(19) Longlet option si on souhaite preacuteciser les cateacutegories drsquoactualiteacutes (sport culture loisirspeutecirctre utile pour les recherches (20) Les onglets Meacutetadonneacutees et Event data ne sont pas



neacutecessaires decirctre remplis



Quest ce que lAgenda (eacuteveacutenements)

Crsquoest le calendrier de tous les eacuteveacutenements qui se deacuteroulent dans la commune et qui sontouverts au public

Lrsquoinformation visible est tregraves bregraveve (donc elle doit ecirctre efficace) au minimum une date + un titreon peut rajouter un reacutesumeacute drsquoune ligne (lrsquoinfo compleacutementaire apparaicirctra dans une page deacutedieacutee encliquant sur le titre de lrsquoeacuteveacutenement)

Preacutevoir environ 4 agrave 8 dates visibles ou + en fonction du gabarit

Possibiliteacute drsquoaugmenter le nombre de dates afficheacutees (reacuteglages techniques agrave demander)

On doit inscrire tous les eacuteveacutenements de lrsquoanneacutee que lrsquoon connaicirct deacutejagrave car on pourra toujoursinseacuterer de nouvelles informations gracircce agrave la gestion automatique des dates (possibiliteacute de rajouterVoir tout lrsquoagenda lors des reacuteglages techniques)

Exemple de manifestations agrave citer dans lrsquoagenda

La fecircte du villageUne expositionUn vide-grenierLe loto du foot de lrsquoeacutecole hellipUn tournoi de peacutetanqueUn concertUn spectacleMarcheacute de NoeumllLes vœux du MaireConcours de beloteDes randonneacuteesCoque des roisTheacute dansantCarnaval des eacutecolesReacuteveillon de la St SylvestreEtchellip

Ne jamais laisser en page daccueil rArr AGENDA laquo aucun eacuteveacutenement raquo



Exemples de liens directs en un clic liens pratiques

Ce sont principalement les sujets les plus demandeacutes Le fait de se situer en page daccueillinternaute pourra en mecircme temps voir vos actualiteacutes

Menus de la cantineNumeacuteros durgenceProgramme du CineacutemaGalerie PhotosLe magazine bulletin municipalPlan de la communeLien vers lrsquoOffice de Tourisme localLien vers lrsquoOffice deacutepartemental du tourismeLien vers le site de la Communauteacute de CommunesSi on est CDC faire le lien vers toutes les communesLien vers le site du deacutepartement du TampGLien vers le site de la Reacutegion OccitanieEtchellip

Exemples de services en ligne

Vos droits et deacutemarches - lien vers httpservice-publicfrDeacutemarches en ligne - lien vers httpsipmidipyreneesfr - Service drsquoInformation Publique SIPRechercher sa parcelle sur Internet - lien vers httpwwwcadastregouvfrscpcaccueildoTransport en Midi Pyreacuteneacutees - lien vers httpwwwmobimipyfrMarcheacutes Publics82com - lien vers httpmarchespublics82fraccueilhtmEtchellip

Infos pratiques

Qursquoest-ce que les flux RSS

Sur de nombreux sites on peut voir le lien laquo Flux RSS raquo ou encore les icocircnes ci-dessus

Les flux RSS permettent de se tenir informeacute en temps reacuteel des derniegraveres publications dun site webEn vous abonnant aux RSS des sites qui vous inteacuteressent vous veillez sur leurs actualiteacutes

RSS Lacronyme RSS signifie Really Simple Syndication Les ldquofilsrdquo ou ldquofluxrdquo RSS permettent desuivre les actualiteacutes dun site sans le consulter Cest une sorte de laquo facteur raquo qui va chercher lecourrier agrave lexteacuterieur puis le deacutepose chez lutilisateur eacutevitant agrave ce dernier daller reacuteguliegraverement auxnouvelles en visitant de nombreux sites internet



Comment sen servir

Il existe plusieurs moyens dutiliser les flux RSS En voici deux

directement dans le navigateur Firefox (libre et gratuit) Cliquez sur le lien Flux RSS du site1concerneacute Firefox vous propose de vous abonner au flux en lajoutant comme ldquomarque-pagedynamiquerdquo En cliquant sur ldquoSabonner maintenantrdquo vous avez le choix dajouter le flux RSSdans votre barre personnelle ou dans votre menu de marque-pagesen creacuteant par ex un compte sur Netvibes (version laquo basic raquo gratuite)2httpwwwnetvibescomfr vous pouvez syndiquer les flux RSS de tous les sites que voussouhaitez et ainsi construire une page dinformations personnelles accessibles agrave tout momentsur le net Commencez par vous connecter au service puis cliquez sur ldquoajouter du contenurdquoldquoajouter un fluxrdquo et copiez-collez ladresse du flux

Charte reacutedactionnelle

Si vous ecirctes plusieurs personnes agrave travailler sur les pages de votre site il est conseilleacute de travailler enamont une laquo charte reacutedactionnelle raquo pour avoir une uniteacute de lecture

Il est recommandeacute de faire une page cacheacutee qui serve de modegravele

Il faut deacutefinir la mecircme coheacuterence de lecture et donc drsquoeacutecriture sur toutes les pages lesmenus les sous-menus les titres les sous-titreshellip pour que lrsquointernaute est une lecture agreacuteable

Uniteacute dans la hieacuterarchie des laquo titres raquo utiliseacutes1Titre1 on nrsquoutilise pas ce format il est tregraves gros crsquoest le nom de votre siteTitre2 en geacuteneacuteral on lrsquoutilise comme titre drsquoune page (il est recommandeacute de mettre untitre agrave toutes vos pagesTitre3 en geacuteneacuteral on lrsquoutilise comme sous-titre de la pageTitre4 etc autres tailles allant vers un caractegravere toujours plus petithellipCrsquoest lors des reacuteglages techniques qursquoon peut choisir les couleurs et la grosseurdes titreshellip

Uniteacute dans la preacutesentation des pages2On utilise le gras ou lrsquoitalique pour faire des diffeacuterences (citations signatures etchellip)On peut justifier ou non les paragraphes tout comme sous Word (il est preacuteconiseacute deprendre une mecircme option pour toutes les pages)Une page doit comporter en moyenne une cinquantaine de lignes si elle doit ecirctreplus longue il est recommandeacute drsquoutiliser des sous-pages ou des pages hors-menuToujours passer par le laquo Bloc-notes raquo pour faire les copier coller afin denlevertoute mise en forme Rappel raccourcis clavier Ctrl+C pour copier Ctrl+Vpour coller

Uniteacute dans les majuscules et les minuscules3par exemple nrsquoutiliser les majuscules qursquoen deacutebut de phrase - en geacuteneacuteral tout le mondesrsquoen rappelle) Utiliser les majuscules avec parcimoniehellipTout sigle doit ecirctre expliqueacute une premiegravere fois avant drsquoecirctre employeacute agrave nouveauEx La Reacutegie Autonome des Transports Parisiens (RATP) est une entreprisepubliquehellip La RATP nrsquoest qursquoexploitanthellip

Uniteacute dans les tailles des photos sur toutes les pages du site4En preacutevision des agrandissements on preacuteconise la reacuteduction des images

pour les formats Paysage la taille laquo carte postale raquo L1024 X H768pour les formats Portrait la taille par rapport agrave la hauteur H768 et non la largeur



car elle ne rentrera pas dans la page (permet drsquoeacuteviter de faire glisser sans arrecirct lecurseur)

Consignes importantes

Les photos et documents PDF doivent toujours ecirctre classeacutes dans laquo Fichiers raquo dont1larborescence correspondra au menu du site pour mieux sy retrouver Tous les documents PDFou photos sont nommeacutes etou dateacutesAucun document ne sera preacutesenteacute sous Word ou Excel (les enregistrer au format PDF)2excepteacutes les formulaires agrave compleacuteterNe jamais laisser lrsquoagenda sans aucune information attention de ne pas avoir laquo Aucun3eacuteveacutenement raquo en page drsquoaccueil Il y a toujours une manifestation agrave annoncer mecircme un an agravelrsquoavance Lrsquoadresse complegravete et le numeacutero de teacuteleacutephone doivent ecirctre accessibles depuis toutes les4pages du site Les internautes ont souvent besoin de ces informations fondamentales Faitesen sorte qursquoils ne perdent pas de temps agrave les rechercher Il est conseilleacute que chaque numeacutero deteacuteleacutephone soit preacuteciseacute au format international Ex France (+33) 5 63 21 62 00 ndash ou (00 33) 563 21 62 00 ndash ou +33 (0)5 63 21 62 00 ndash ou 00 33 (0)5 63 21 62 00Si on fait un lien vers un fichier un site exteacuterieur toujours choisir laquo Nouvelle fenecirctre raquo si5on ne veut pas que linternaute quitte le site Regravegle geacuteneacuterale = toujours veacuterifier les liens6Veacuterifier reacuteguliegraverement que les liens vers les sites exteacuterieurs soient toujours dactualiteacute7

Conseils divers

Si vous faites vous-mecircme vos bulletins eacutevitez drsquoy mettre des photos trop lourdes Ccedilane sert agrave rien car elles nrsquoauront jamais le format qui sort de lrsquoappareil photo Sachez garderune bonne reacutesolution moyenne Vos bulletins seront beaucoup plus facilement laquotransportables raquo et utilisables pour le webhellip (Voir comment reacuteduire les photos)Suggestion pour citer artisans commerccedilants entrepriseshellipLes citer par corps demeacutetier (cf les Pages Jaunes) laquo Je cherche un plombier une pharmaciehellip et non Monsieur XeacutelectricienhellipraquoSi vous avez une page trop longue avec plusieurs paragraphes vous pouvez inseacuterer agravela fin drsquoun bloc une info laquo vers le haut raquo qui permet agrave lrsquointernaute de remonter directementen haut de pagePour cela eacutediter le bloc concerneacute se rendre dans lrsquoonglet Accegraves et cocher Ajouter un lienvers le haut de la page

Pensez agrave veacuterifier systeacutematiquement lrsquoaperccedilu de vos pages degraves la moindre modification



mise agrave jour (texte images hellip) et avec tous les navigateurs (Firefox Chrome Internet ExplorerSafari hellip) Signaler tout problegraveme agrave serviceinternetcdg82fr ou 0563216200

Suggestions

Utiliser Google Maps pour guider les visiteurs touristes agrave partir de toutes lesadresses de votre site lieux touristiques gicirctes hocirctels restaurants museacutees lieux drsquoexpoMairie etchellipComment faire

Ouvrir un onglet Google Maps httpsmapsgooglefrRentrer lrsquoadresse du lieu - Cliquer sur la loupe RechercherDans le panneau agrave gauche cliquer sur PartagerDans la nouvelle fenecirctre choisir Partager le lienReacutecupeacuterer lrsquoURL (Copier lrsquoadresse dans le cadre httpshellip)Coller dans TYPO sur ladresse concerneacutee en faisant le lien vers un URL externe

Quelques sites gratuits pour creacuteer tregraves facilement des diaporamasKIZOA httpwwwkizoafrcreer-diaporama(animations possibles)PICASA Albums Web chez Google httpssupportgooglecompicasaanswer157000hl=FLICKR chez Yahoo httpwwwflickrcom(attention au-delagrave de 200 photos stockeacuteescrsquoest payant )

Quelques sites gratuits pour inseacuterer tregraves facilement des videacuteos YOU TUBE httpssupportgooglecomyoutubeanswer161805hl=fr Deacutemohttpswwwyoutubecomwatchv=UA2WFcJzXMgDAILY MOTION httpwwwdailymotioncomupload

Possibiliteacutes de lecture des publications page agrave page (site gratuit)CALAMEO pour preacutesenter vos publications wwwcalameocom(lire les bulletins entournant les pages) Voir la deacutemo httpwwwdailymotioncomvideox5spvr_publish-a-document-on-calameo_techfrom=embed



ATTENTION pour visualiser ces animations le navigateur doit ecirctre eacutequipeacute du plugin FlashPlayer (problegraveme avec certaines tablettes) Drsquoautres ne permettent pas desenregistrements ou impression si lrsquointernaute nrsquoest pas inscrit (ex Calameo)

Pensez agrave toujours proposer une alternative (galerie photos pour les diaporamas ou PDFpour les bulletins)

Liens utiles

Tous les sites UTOPIA du deacutepartement en ligne via le CDG82 Nrsquoheacutesitez pas agrave lesconsulter pour avoirdes ideacuteeshttpwwwcdg82frfrpole-informatiquecreation-de-sites-internetliste-des-sites-utopiahtmlVous trouverez les liens vers toutes les communes qui ont choisi UTOPIA du 82 mais aussi du 46et du 47 Le classement est fait par ordre chronologique de creacuteationPhotos libres de droit Il est toujours plus correct de citer ses sources

WIKIMEDIA COMMONS Meacutediathegraveque de contenus (images sons et videacuteos) relevantdu domaine public ou publieacutes sous licence libre donc librement reacuteutilisables httpcommonswikimediaorgwikiAccueiluselang=fr5 astuces pour trouver facilement des images libres de droits sur Internet httpdailygeekshowcom201401295-astuces-pour-trouver-facilement-des-images-libres-de-droits-sur-internetutm_source=newsletteramputm_medium=e-mailamputm_campaign=PATRIMOINE Reacutegion Midi Pyreacuteneacutees toutes les photos releveacutees par le service dupatrimoine de la Reacutegion en ligne et libres de droit httppatrimoinesmidipyreneesfr

Optimisation de votre site

Comment faire connaicirctre son site = outil de communication

panneaux lumineuxbulletins municipauxjournaux locauxradios localesreacuteunion publiqueinauguration officielleflyersaffichage lieux publicsinformer les partenaires OT CDC Pays hellip (lien vers votre site)utiliser un laquo QR Code raquo sur tout support de communication Crsquoest tregraves facile agrave creacuteer par ex voir httpswwwunitagfrqrcode

Le faire eacutevoluer le mettre en valeur

traductionameacutelioration de la charte graphique actuelleanimation du bandeaunouveau site refonte de la charte graphique avec lrsquoaide drsquoun graphisteenrichir le contenu (ajout drsquoimages de documents respect charte reacutedactionnellehellip)diaporamas preacutesentation des publications



enrichir la liste des liens externes avec reacuteciprociteacuteicocircnes reacuteseaux sociauxService drsquoInformation Publique (SIP) httpsipmidipyreneesfrTitres Payables sur Internet (TIPI) paiement seacutecuriseacute en ligne (cantine piscine etchellip)

Evaluer son site

statistiquesquestionnaire (papier ou en ligne)sondage

Demain les reacuteseaux sociaux hellip

En attendanthellip une astuce pour savoir tout ce qui se dit sur votre commune sur lespersonnaliteacutes de votre commune (maire adjoints) autrehellip Inscrivez-vous sur Google AlertesAvec les alertes de Google vous ecirctes averti par e-mail lorsque de nouveaux reacutesultatscorrespondants aux termes que vous recherchez sont publieacutes httpwwwgooglecomalertshl=fr

Fromhttp4610515773dokuwiki - WikiCDG82

Permanent linkhttp4610515773dokuwikidokuphpid=typo3guide_user_typo3_62

Last update 20160727 1947


Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles




Quest ce que lAgenda (eacuteveacutenements) hellip page 43 Exemples de liens directs en un clic liens pratiqueshelliphellip page 44 Exemples de services en lignehellip page 44

5 - Infos pratiqueshellip page 44

Quest ce que les flux RSS hellip page 44 Charte reacutedactionellehellip page 45 Consignes importanteshellip page 46 Conseils divershellip page 46 Suggestionshellip page 47 Liens utileshellip page 48 Optimisation de votre sitehellip page 48



Il est conseilleacute de travailler sur Mozilla Firefox

httpswwwmozillaorgfrfirefoxnew

Les internautes peuvent consulter votre site depuis drsquoautres navigateurs sans problegraveme (InternetExplorer Google Chrome Safari ou autres hellip) toutefois si vous rencontrez des problegravemes agrave lalecture faire remonter linformation au technicien


X pour fermer lrsquoonglet (1)+ pour ouvrir un nouvel onglet (2)

iexcl Pour faire une recherche sur Internet en mecircme temps quon travaille ouvrir toujours un nouvelonglet en premier pour ne pas perdre son travail

iexcl Quand on travaille sur plusieurs onglets il arrive parfois de tout fermer par inadvertance en cliquantsur la croix rouge en haut agrave droite il est possible de parameacutetrer que tous les onglets restent ouvertsau deacutemarrage Dans la barre en haut Outils gt Options gt Geacuteneacuteral gt Deacutemarrage gt Audeacutemarrage de Firefox gt Afficher les derniers onglets et fenecirctres utiliseacuteesVous pourrez par la suite revenir agrave Afficher ma page drsquoaccueil











































Types de page















Supprimer une page














































Enregistrer


























Exemple dune page












































































iexcl IMPORTANT

































































































Les formats












































2 - Onglet Images






















La page daccueil


































































Infos pratiques







Comment sen servir

















Conseils divers






Suggestions










Liens utiles











Evaluer son site








Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles












































Types de page















Supprimer une page














































Enregistrer


























Exemple dune page












































































iexcl IMPORTANT

































































































Les formats












































2 - Onglet Images






















La page daccueil


































































Infos pratiques







Comment sen servir

















Conseils divers






Suggestions










Liens utiles











Evaluer son site








Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles











Supprimer une page














































Enregistrer


























Exemple dune page












































































iexcl IMPORTANT

































































































Les formats












































2 - Onglet Images






















La page daccueil


































































Infos pratiques







Comment sen servir

















Conseils divers






Suggestions










Liens utiles











Evaluer son site








Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles













































Enregistrer


























Exemple dune page












































































iexcl IMPORTANT

































































































Les formats












































2 - Onglet Images






















La page daccueil


































































Infos pratiques







Comment sen servir

















Conseils divers






Suggestions










Liens utiles











Evaluer son site








Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles


























Exemple dune page












































































iexcl IMPORTANT

































































































Les formats












































2 - Onglet Images






















La page daccueil


































































Infos pratiques







Comment sen servir

















Conseils divers






Suggestions










Liens utiles











Evaluer son site








Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles








































































iexcl IMPORTANT

































































































Les formats












































2 - Onglet Images






















La page daccueil


































































Infos pratiques







Comment sen servir

















Conseils divers






Suggestions










Liens utiles











Evaluer son site








Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles




























































































Les formats












































2 - Onglet Images






















La page daccueil


































































Infos pratiques







Comment sen servir

















Conseils divers






Suggestions










Liens utiles











Evaluer son site








Sommaire













Types de page




Supprimer une page













Exemple dune page
























La page daccueil






Infos pratiques




Conseils divers

Suggestions

Liens utiles


Trucs et astuces – TYPO3 – Version 6reynies.fr/.../trucs_et_astuces_typo3_version_6.2.pdf ·...

Documents

Transcript of Trucs et astuces – TYPO3 – Version 6reynies.fr/.../trucs_et_astuces_typo3_version_6.2.pdf ·...