Support formation TYPO3

Support formation TYPO3 Connexion : http://decotec.caribara.com/ login : redacteur mdp : redacteurmdp SOMMAIRE GENERALITES...page 2 DESCRIPTION DES PICTOS DE TYPO3...page 4 MISE A JOUR DES CONTENUS...page 5 INSERTION D'UN LIEN DANS UN BLOC TEXTE...page 7 TELECHARGER UN FICHIER...page 9 MISE A JOUR DES PAGES DE TYPE «Article»...page 10 1èrepage...page 11 2ème page...page 14 MISE A JOUR DES PAGES DU SITE...page Bandeau accueil...page Collection...page Historique...page Valeurs...page Engagements...page Savoir-faire...page Matériaux...page Trouver nos produits...page Envoyer un message...page Evènements...page On parle de nous...page Campagnes publicitaires...page Contact Presse...page Contacts...page Crédits...page Mentions légales...page 16 16 17 17 17 17 17 18 18 18 18 18 18 18 19 19 19 MISE A JOUR DES IMAGES DU SITE...page 20 MISE A JOUR DES LATITUDES/LONGITUDES DES NOUVEAUX POINTS DE VENTE / INSTALLATEURS...page 21 NEWSLETTER...page Importation des emails des clients...page Modification de la Newsletter dans typo3...page Envoi de la Newsletter en mode test...page Envoi de la Newsletter en mode réel...page 22 22 23 24 26 MULTI-LANGUAGE...page 28 page 1

GENERALITES Typo3 se décompose en 3 colonnes. Colonne de gauche : Le mode Page permet de travailler sur les pages du site. Le mode View permet de travailler et de visualiser directement les pages du site. Le mode List permet de travailler sur le base de données du site. Le module newsletter_upload permet d'importer un fichier csv d'adresses email dans la base de données. Les adresses email importées recevront la newsletter. Le module suivi_geoloc permet d'affecter les latitudes/longitudes aux nouveaux points de vente ou installateurs. Le mode Filelist permet de télécharger des fichiers/images dans des dossiers particuliers. Toute la partie Direct Mail permet de gérer l'envoi de la Newsletter. Colonne du milieu : Suivant le mode sélectionné (dans la colonne de gauche), cette colonne affiche l'arborescence du site ou l'arborescence des dossiers. Dans le cas de l'arborescence du site, les titres des pages correspondent aux différents menus et sous-menus du site. Colonne de droite : Suivant le mode sélectionné (dans la colonne de gauche) affiche le contenu de la page / du répertoire / du module. Pour les pages, 4 colonnes apparaissent (Left, normal, right et border). La plupart des informations sont dans la colonne Normal. Tout en haut de la colonne de droite, 2 listes gèrent l'affichage de la page. La 1ère liste le mode d'affichage (Columns ou Languages). La 2ème liste la langue affichée. Le mode «Columns» permet de visualiser la langue sélectionnée dans la 2ème liste. page 2

Le mode «Languages» permet de visualiser toutes les colonnes de toutes les langues. page 3

DESCRIPTION DES PICTOS DE TYPO3 Pictos de bloc créer un bloc de contenu modifier le bloc rendre visible/invisible supprimer le bloc déplacer le bloc (avant, après un autre bloc) Pictos à l'intérieur d'un bloc (idem dans les propriétés de la page) fermer (sans enregistrer) enregistrer enregistrer et visualiser la page enregistrer et fermer enregistrer et créer un nouveau bloc supprimer le bloc Pictos de page créer une nouvelle page créer un bloc de contenu dans la page visualiser la page modifier les propriétés de la page déplacer la page afficher l'historique de la page Pictos de répertoire télécharger un fichier Pictos de bloc texte insérer un caractère spécial insérer ou supprimer un lien (externe ou interne) insérer un tableau trouver / remplacer des caractères voir le code source html (utile pour rajouter certains paramètres comme la taille d'une colonne) supprimer le formatage du texte (en totalité ou en partie, permet de nettoyer le code) Pictos de tableaux afficher les bordures du tableau (c'est juste un repère visuel dans typo3) propriétés du tableau (rien de très utile pour nous) propriétés de la ligne (permet de définir qu'une ligne est une ligne de titres des colonnes) insérer une ligne avant la ligne courante insérer une ligne après la ligne courante supprimer une ligne dégrouper un ensemble de cellules d'une ligne insérer une colonne avant la colonne courante insérer une colonne après la colonne courante supprimer une colonne dégrouper un ensemble de cellules d'une colonne propriétés de la cellule (permet de définir qu'une cellule est une cellule de titre) insérer une cellule avant la cellule courante (ne pas utiliser car instable) insérer une cellule après la cellule courante (ne pas utiliser car instable) supprimer une cellule (ne pas utiliser car instable) dégrouper toutes les cellules du tableau grouper les cellules sélectionnées page 4

MISE A JOUR DES CONTENUS Accès colonne de gauche : Web -> Page Accès colonne du milieu : cliquer sur la page à modifier Modifier les propriétés d'une page (nom, cacher, montrer, alias) Cliquer sur le picto «Edit page properties» tout en haut de la colonne de droite et sélectionner l'onglet «General». Modifier le champ «Pagetitle» pour changer le titre de la page (change le libellé du menu correspondant). Cocher/décocher les cases «Hide page» et/ou «Hide in menu» pour cacher/montrer la page. Modifier le champ «alias» pour changer l'alias de la page. Créer un bloc de contenu Cliquer sur le picto de création de bloc et sélectionner le type de contenu à créer. Trois choix possible : Bloc de type «Text» Texte seul Bloc de type «Text w/image» Texte avec image Bloc de type «Image» Image seule page 5

Modifier le contenu d'un bloc Cliquer sur le picto «crayon» du bloc à modifier. Bloc de type texte Si le texte vient d'un «copier» d'une page web, faire un «coller» dans un bloc-notes pour supprimer les balises html. Refaire un «copier/coller» du bloc-notes vers le bloc typo3. Fonctionne comme un éditeur de texte. Possibilité de faire un lien (vers une page du site, un site externe, un document téléchargé ou une adresse email) sur une partie du texte. page 6

INSERTION D'UN LIEN DANS UN BLOC TEXTE Accès colonne de gauche : Accès colonne du milieu : Web -> Page cliquer sur la page à modifier Insérer/Supprimer un lien sur un mot Cliquer sur le picto «crayon» du bloc à modifier. Sélectionner un mot dans le texte et cliquer sur le picto «Insert Link» La fenêtre ci-dessous s'ouvre : L'onglet Remove Link : permet de supprimer le lien sélectionné. L'onglet Page : permet de faire un lien sur une page ou sur un bloc d'une page. Pour faire un lien sur une page, cliquer sur la page dans l'arborescence. Pour faire un lien sur un bloc dans une page, cliquer sur la petite flèche à droite de la page concernée afin de déployer l'arborescence de cette page ; puis cliquer sur le bloc souhaité. Attention : si le site est en plusieurs langues, tous les blocs dans toutes les langues seront présentés (dans l'ordre des langues) ; on ne peut faire un lien que vers un bloc dans la langue dans laquelle on insère le lien. L'option Target permet de spécifier si le site s'ouvrira dans la fenêtre courante ou dans page 7

une nouvelle fenêtre. ouvre le site dans la fenêtre courante. «Top» ouvre le site dans la fenêtre courante. «New window» ouvre le site dans une nouvelle fenêtre. L'option Open in a window permet de spécifier une taille pour la nouvelle fenêtre qui va s'ouvrir. L'option Style permet de spécifier si le site s'ouvrira dans la fenêtre courante (internal-link) ou dans une nouvelle fenêtre (internal-link-new-window). L'option Title permet de saisir un texte qui apparaîtra en roll-over sur le lien. Une fois toutes les options remplies, sélectionner la page concernée. L'onglet File : permet de faire un lien sur un fichier téléchargé. L'option Target permet de spécifier si le fichier s'ouvrira dans la fenêtre courante ou dans une nouvelle fenêtre. ouvre le fichier dans la fenêtre courante. «Top» ouvre le fichier dans la fenêtre courante. «New window» ouvre le fichier dans une nouvelle fenêtre. L'option Open in a window permet de spécifier une taille pour la nouvelle fenêtre qui va s'ouvrir. L'option Style par défaut Download (ne pas modifier). L'option Title permet de saisir un texte qui apparaîtra en roll-over sur le lien. Une fois toutes les options remplies, sélectionner le fichier concerné. L'onglet External URL : permet de faire un lien vers un site externe. L'option URL permet de saisir l'adresse du site vers lequel pointer. L'option Target permet de spécifier si le site s'ouvrira dans la fenêtre courante ou dans une nouvelle fenêtre. ouvre le site dans la fenêtre courante. «Top» ouvre le site dans la fenêtre courante. «New window» ouvre le site dans une nouvelle fenêtre. L'option Open in a window permet de spécifier une taille pour pour la nouvelle fenêtre qui va s'ouvrir. L'option Style permet de spécifier si le site s'ouvrira dans la fenêtre courante (external-link) ou dans une nouvelle fenêtre (external-link-new-window). L'option Title permet de saisir un texte qui apparaîtra en roll-over sur le lien. Une fois toutes les options remplies, cliquer sur le bouton Set Link. L'onglet Email : permet de faire un lien vers une adresse email. L'option Email adress permet de saisir l'adresse du destinataire. L'option Style par défaut mail (ne pas modifier). L'option Title permet de saisir un texte qui apparaîtra en roll-over sur le lien. Une fois toutes les options remplies, cliquer sur le bouton Set Link. page 8

TELECHARGER UN FICHIER Accès colonne de gauche : Accès colonne du milieu : File -> Filelist cliquer sur le dossier dans lequel le fichier doit-être téléchargé Cliquer sur l'icône «Upload Files» en haut de la fenêtre. Sélectionner le nombre de fichiers à télécharger. Cliquer sur le bouton «Parcourir» pour sélectionner le (ou les) fichier(s). Cliquer sur le bouton «Upload Files» pour lancer le téléchargement. Les fichiers téléchargés sont alors visibles dans toutes les pages du site. Pour supprimer un fichier, cliquer sur son picto et sélectionner «delete» dans le menu contextuel. page 9

MISE A JOUR DES PAGES DE TYPE «Article» Les pages de type Article sont : Engagement, Savoir-faire, Matériaux, Evènements et Campagnes publicitaires. Pour une rubrique il y a 2 pages. Une page d'introduction avec la liste des articles (page 1) et une page avec le détail des articles (page 2). page 10

La 1ère page contient : 1) Un bloc de type «Text» (l'introduction) Ce bloc n'a pas de titre (Champ «Header» de l'onglet «General»). Le contenu du bloc (champ «Text» de l'onglet «Text») est un texte simple sans lien, sans style prédéfini. Le gras, italique et souligné peuvent-être utilisé. page 11

2) X blocs de type «Text w/image» Chaque bloc a un titre (Champ «Header» de l'onglet «General») mais pas de contenu texte (champ «Text» de l'onglet «Text»). Chaque bloc a une image (onglet «Media»). L'image doit faire 235 x 160 pixels. L'image est toujours positionnée en «In text, right». L'image doit pointer vers le bloc détail de l'article correspondant. Pour cela, cliquer sur l'icône «Link». page 12

Dans la fenêtre ouverte, sélectionner le bloc dans la page Détail de l'article. page 13

La 2ème page contient : 1) X blocs de type «Text w/image» Chaque bloc contient un titre (champ «Header» dans onglet «General». Chaque bloc contient un texte (champ «Text» de l'onglet «Text») qui peut avoir des liens et des styles prédéfinis : «un_auteur» et «une_date». ATTENTION : les styles prédéfinis ne s'appliquent qu'aux paragraphes et non à un mot dans une phrase. page 14

Chaque bloc contient une ou plusieurs images. Les images ont une largeur de 345 pixels.. Les images sont toujours positionnés en «In text, right». Une légende peut-être ajoutée en dessous de des images (champ «Caption»). Si il y a plusieurs images, elles défileront en slide-show. page 15

MISE A JOUR DES PAGES DU SITE Bandeau accueil (page id = 119) Pour modifier les gammes de la page d'accueil, modifier les blocs de type «plugins» nommés bandeau_home. Dans l'onglet Plugin sélectionner la page de la gamme désirée. page 16

Collection (page id = 27) La page Collection contient le plugin «home_collection» qui peut-être paramétré en cliquant sur le picto crayon. Dans l'onglet «Plugin», plusieurs onglets permettent de modifier le contenu de la page. L'onglet «Chapo de la page» contient le titre de la page dans les 3 langues. Les onglets 1 à 8 contiennent le titre du bloc dans les 3 langues, l'image affiché et la page à ouvrir. L'image est de 235 x 160 pixels. Decotec Historique (page id = 38) La page Historique contient X blocs de type «Text w/image». Chaque bloc contient : un titre (la date) son contenu (texte simple sans liens ni styles prédéfinis) une image de 397 x 298 pixels (position : In text, right). Decotec Valeurs (page id = 40) La page Valeurs est une page de type «Article» (2ème page). Decotec Engagements (page id= 127 et 128) La page Engagements est une page de type «Article». Decotec Savoir-faire (page id= 39 et 124) La page Savoir-faire est une page de type «Article». page 17

Decotec Matériaux (page id = 143 et 144) La page Matériaux est une page de type «Article». Trouver nos produits (page id = 28) La page Trouver nos produits contient : 1 bloc de type «Text» avec un titre seul (le titre de la page) 1 bloc de type «Text» avec titre seul (le titre du bloc de gauche en haut) 1 bloc de type «Text» avec un titre et un contenu texte (pour bloc de gauche en bas) 1 bloc de type «Text» avec titre et contenu texte (pour bloc de droite), le titre correspondant au rollover sur l'image, le contenu correspondant à la phrase qui s'affiche sur l'image) 1 bloc de type «Text» avec un titre et contenu texte (pour bloc en bas) Le contenu du bloc (champ «Text» de l'onglet «Text») est un texte qui peut contenir les styles prédéfinis : «trouver_expo», «trouver_install» et «trouver_nb». ATTENTION : les styles prédéfinis ne s'appliquent qu'aux paragraphes et non à un mot dans une phrase. Envoyer un message (page id = 126) La page Envoyer un message contient : le plugin «home_contact» qui peut-être paramétré en cliquant sur picto crayon. Le paramétrage de ce plugin a été effectué, cependant, certaines informations peuvent-être modifiées : Le titre de la page dans les 3 langues, l'objet du mail, l'adresse email de l'expéditeur du mail et l'adresse email du destinataire du mail. Les pages «Merci message» (page id = 138) et «Message erreur» (page id = 139) sont associées à la page Envoyer un message. Elles contiennent un bloc de type «Text» qui sera affiché après l'envoi du mail. Evènements (page id = 29 et 50) La page Evènements est une page de type «Article». Sauf que sur la 1ère page il n'y a pas de texte d'introduction (donc pas de bloc de type «Text») et les blocs de type «Text w/image» ont un contenu texte (la date) en plus du titre. Presse On parle de nous (page id = 51) La page On parle de nous, contient X blocs de type «Text w/image». Chaque bloc contient : un titre (le titre du magasine) son contenu texte avec la date en style «une_date» et les meubles concernés en gras une image de 235 x 235 pixels (position : In text, right) L'image a un lien vers un pdf (à télécharger dans le dossier : mediatheque/documents/onparledenous). Pour le téléchargement du fichier voir rubrique : TELECHARGER UN FICHIER. Presse Campagnes publicitaires (page id = 52 et 145) La page Campagnes publicitaires est une page de type «Article». Presse Contact Presse (page id = 53) La page Contacts presse est une page de type «Article» (2ème page). page 18

Contacts (page id= 16) La page Contact contient : un bloc de type «Text» avec un titre et son contenu dans la colonne LEFT le plugin «home_contact» dans la colonne NORMAL qui peut-être paramétré en cliquant sur le picto crayon. Le paramétrage de ce plugin a été effectué, cependant, certaines informations peuvent-être modifiées : Le titre de la page dans les 3 langues, l'objet du mail, l'adresse email de l'expéditeur du mail et l'adresse email du destinataire du mail. Les pages «Merci contact» (page id = 17) et «Contact erreur» (page id = 137) sont associées à la page Contact. Elles contiennent un bloc de type «Text» qui sera affiché après l'envoi du mail. Pratique Crédits (page id = 131) La page Crédits contient un bloc de type «Text». Pratique Mentions légales (page id = 132) La page Mentions légales contient un bloc de type «Text». page 19

MISE A JOUR DES IMAGES DU SITE Les images qui ne sont pas téléchargées dans des blocs typo3, doivent-être télécharger dans des répertoires particuliers en utilisant le module Filelist de typo3. Voir la rubrique TELECHARGER UN FICHIER. Voici la liste de ces images avec leur dimension, leur nom respectif et le dossier dans lequel elles doivent-être téléchargées. Vignette d'une gamme dans bandeau d'accueil et vignette d'une gamme dans la page Ma sélection nom accueil.jpg dimensions 235 x 160 pixels dossier mediatheque/collection/nom de la gamme/ (ex : mediatheque/collection/ego/) Image de fond pour une gamme nom n'importe (défini par l'utilisateur) dimensions 1000 x 1000 pixels dossier mediatheque/collection/nom de la gamme/fonds/ (ex : mediatheque/collection/ego/fonds/) Vignette et image de présentation pour une gamme nom n'importe (défini par l'utilisateur) dimensions 400 x 300 pixels dossier mediatheque/collection/nom de la gamme/presentations/ (ex : mediatheque/collection/ego/presentations/) Image d'un produit d'une gamme nom reference du produit (ex : 0108.jpg, 150.L100.jpg etc...) dimensions 130 x 108 pixels dossier mediatheque/produits/autres/ Image d'une finition seule pour une gamme nom finition.jpg dimension 450 x 350 pixels dossier mediatheque/collection/nom de la gamme/ (ex : mediatheque/collection/ego/) Image pour les robinets nom référence du produit dimensions 235 x 274 pixels dossier mediatheque/produits/robinets/ (ex : 002.40708.jpg, 004.11921.jpg etc...) Image pour les armoires nom référence du produit dimensions 235 x 274 pixels dossier mediatheque/produits/armoires/ (ex : angle1.jpg, broadway1.jpg etc...) Image de fond pour les rubriques sans fond blanc nom campagnepub.jpg, collection.jpg, engagement.jpg, entretien.jpg, evenement.jpg, historique.jpg, maselection.jpg, onparledenous.jpg, pressecontact.jpg, savoirfaire.jpg, valeur.jpg dimensions 1000 x 1000 pixels dossier mediatheque/fonds/ page 20

MISE A JOUR DES LATITUDES/LONGITUDES DES NOUVEAUX POINTS DE VENTE / INSTALLATEURS Dans la colonne de gauche de typo3, sélectionner le module «suivi_geoloc». Dans la colonne du milieu de typo3, sélectionner la page «SiteTree». Dans la colonne de droite apparaît la liste des points de vente/installateurs avec leurs informations. Tout en bas de cette page, cliquer sur le bouton «Lancer la génération des latitudes/longitudes». Si toutefois, des latitudes et longitudes restaient vides, recommencer l'opération. page 21

NEWSLETTER A - Importation des emails des clients 1) Les données Le fichier à importer doit-être au format csv contenant les adresses email sans guillemets avec une adresse email par ligne. Exemple : andromar@wanadoo.fr sommef@club-internet.fr joelleylegrand@cegetel.net 2) L'importation Dans typo3, cliquer dans la colonne de gauche sur le module «newsletter_upload». Dans la colone du centre, sélectionner la page «SiteTree». Dans la colonne de droite, sélectionner le fichier csv à importer en cliquant sur le bouton «Parcourir». Saisir l'id du dossier dans lequel les adresses emails doivent-être importées. L'ID du dossier apparaît en passant la souris sur l'icône du dossier. Pour l'instant les adresses email sont enregistrées dans le dossier «data». Cliquer sur le bouton «valider» pour lancer l'importation. Le résultat de l'importation s'affiche dans la fenêtre vous expliquant les adresses email importées ou non. page 22

B - Modification de la Newsletter dans typo3 1) Préparation Dupliquer la précédente Newsletter, page «Newsletter» (id = 20). Pour cela, faire un clic droit sur la page et sélectionner l'option «copy» du menu déroulant. Refaire un clic droit sur cette même page et sélectionner l'option «paste after» du menu déroulant. Dans les propriétés de la nouvelle page, décocher l'option «hide page» et saisir le nom de la Newsletter «Pagetitle» (ce sera l'objet du mail). 2) Modification Cette nouvelle page doit contenir : Un bloc image avec une image de 600 x 227 pixels (position : Above, center). Le bloc plugin «newsletter MENU ou INSCRIPTION ou DESINSCRIPTION». Ce plugin permet d'afficher le menu dans la newsletter. X blocs Text w/image avec le texte (titre et contenu) et l'image (position : Beside text, left). Pour afficher une date, sélectionner la date et appliquer le Block style «une_date». Des liens (internes et externes) peuvent-être ajouter dans le texte. Les blocs peuvent-être séparés par un bloc Text contenant un séparateur ligne (icône Horizontal Rule). Une image de «fin» de 600 pixels de large (position : Above, center). page 23

C - Envoi de la Newsletter en mode test 1) Sélection du module «Direct Mail». Dans la colonne de gauche de typo3, cliquer sur le module «Direct Mail». Dans la colonne du centre de typo3, cliquer sur le dossier «Newsletter». 2) Les 4 étapes. Dans la colonne de droite de typo3 : ETAPE 1, cliquer sur l'option «Internal Pages» pour faire dérouler les différentes newsletters créées. Sélectionner la newsletter à envoyer. ETAPE 2, ne rien modifier, cliquer directement sur le bouton «Next». page 24

ETAPE 3, ne rien modifier, cliquer directement sur le bouton «Next». ETAPE 4, «Testmail Simple», saisir l'adresse email dans la zone de saisie puis cliquer sur le bouton Send. Arrêter à cette étape. La newsletter a été envoyé dans la boîte mail saisie. Remarque : l'envoi de la newsletter en mode test ne remplace pas votre adresse email dans le lien de désinscription dans le bloc de la cnil. C'est normal d'avoir «http://decotec.caribara.com/? id=desinscription&email=###user_email###» sur le lien «en cliquant ici». Lors de l'envoi définitif ce lien sera http://decotec.caribara.com/?id=desinscription&email=dupont@free.fr. page 25

D - Envoi de la Newsletter en mode réel 1) Mise à jour des alias. Enlever l'alias «newsletter» dans les propriétés de la page de l'ancienne newsletter. Mettre comme alias «newsletter» dans les propriétés de la page de la nouvelle newsletter. 2) Les 5 étapes de préparation. Reprendre les 4 étapes de l'envoi en mode test mais à l'étape 4, cliquer sur le bouton «Next» au lieu de saisir une adresse email. ETAPE 5, cliquer sur la liste «Recipient List» et sélectionner la liste «les adresses» qui contient les adresses emails devant recevoir la newsletter. Cliquer ensuite sur le bouton «Send to all subscribers in recipient list». Remarque : A la fin de cette étape, la newsletter n'est toujours pas envoyée, elle est dans la file d'attente. 2) L'envoi de la newsletter. Dans la colonne de gauche de typo3, cliquer sur le module «Mailer Engine Status». Dans la colonne du centre de typo3, cliquer sur le dossier «Newsletter». page 26

La newsletter doit donc apparaître dans la liste avec les colonnes «Delivery begun», «Delivery ended» et «#sent» vides. Pour débuter l'envoi, cliquer sur le texte «Invoke Mailer Engine». L'envoi de la newsletter se fait par paquet de 200. Il faut donc cliquer sur ce texte toutes les 15/20 secondes jusqu'à ce que le nombre dans la colonne «#sent» ne s'incrémente plus. Une fois que ce nombre ne s'incrémente plus, la newsletter a été envoyée à toutes les adresses email de la «Recipient List». page 27

MULTI-LANGUAGE Pour traduire une page dans une nouvelle langue, se placer sur la page concernée, se mettre ensuite en mode «Langages» (liste tout en haut de la fenêtre) puis sélectionner la langue désirée dans la liste de «Make new translation of this page». La fenêtre qui s'ouvre alors permet de saisir les propriétés de la page à traduire. page 28

Une nouvelle colonne apparaît avec le contenu de la nouvelle page. Le bouton «Copy default content elements» permet de dupliquer automatiquement tous les blocs de la version française dans cette nouvelle page. Les textes des blocs dupliqués sont alors préfixés de [Translate to english:]. La version française de tous les textes apparaît sur fond vert en éditant les blocs. Remarque importante : lorsque les blocs sont dupliqués, il faut penser à refaire tous les liens vers les blocs d'une page pour pointer vers le bon bloc de la bonne page. page 29