DU CMS FEDERAL AU CMS ONE

Transcription

1 DU CMS FEDERAL AU CMS ONE Guide-utilisateur pour les webmasters Octobre 2012 Version Date Auteur Commentaire 1.0 Juin 2012 F Boyer Création du document 1.1 Juillet 2012 F Boyer Mise à jour 1.1b Octobre 2012 F Boyer Sommaire et précisions de formats page 8 1.1c Octobre 2012 F Boyer Précisions sur page 5 (portail accueil) Page 1 12/10/2012 F BOYER DOSI

2 Sommaire Table des matières 1 Le CMS One Le CMS One Les nouvelles fonctionnalités du CMS ONE les data_maquette - les data_fed - les perspectives à venir 1.2 La maquette du CMS One - présentation la page d'accueil - la page portail rubriques - la page portail de notes - la bandeau du haut du site - ouverture d'une vidéo en Pop-up - le data_fed applications - les images dans le corps d'une note Vos notes Page 2 12/10/2012 F BOYER DOSI

3 1 Le CMS One 1.1 Le CMS One Le CMS One est une nouvelle version du CMS Fédéral. Il propose des nouvelles fonctionnalités et une nouvelle maquette qui répondent davantage aux standards actuels du Web : - un design plus actuel - l utilisation de médias - une approche par espaces - des possibilités plus larges - de nouvelles fonctionnalités Les nouvelles fonctionnalités du CMS ONE Le CMS One introduit les fonctionnalités suivantes : Les DATA_MAQUETTE La finalité des DATA_MAQUETTE est de répondre à des besoins observés sur les sites existants en termes d agencement, de mise en forme du contenu, et d utilisation des espaces du site. Cette nouvelle fonctionnalité reste fidèle au principe de simplicité du CMS : il suffit d insérer un code spécifique dans une note. Les DATA_MAQUETTE facilitent l utilisation du CMS tout en permettant l organisation et le pré-formatage des données. Les DATA_MAQUETTE permettent à ce jour de créer : -une page d accueil avec une animation flash (cela remplacera à terme les longues pages d actualités au profit de pages d informations indépendantes, non actives et plus détaillées) -des pages portail de rubriques -des pages portail de notes -des pages de newsletters (en création) Page 3 12/10/2012 F BOYER DOSI

4 -des pages portail d applications (exemple pour les applications métiers) (en création) Les DATA_FED Les DATAFED ont été mis en place afin d assurer la transmission et la conformité de données fédérales. (Ils remplacent les anciennes notes «pré-remplies» qui peuvent être supprimées) Cette fonction permet aux sites CMS d avoir à leur portée des informations produites au préalable au niveau national (ou régional fonctionnalité à venir). Ils sont utilisés comme les DATA_MAQUETTE par l insertion d un code de type DATAFED_ , dans une note. Le contenu correspondant au code apparait dans la note de façon transparente pour l internaute. Ce contenu peut être de type texte, image, vidéo, formulaire etc. Un catalogue existant permet d ores et déjà de lister tous les DATAFED disponibles, par type de contenu (dans «Mémo Aide» au moment de la rédaction d une note) Une interface de création et de gestion des DATAFED sera mise en place pour permettre aux «webmasters» intervenant à différents niveaux (webmasters de ligue, directions du siège, etc.) de proposer du contenu. La mise à disposition de contenu via les DATA_FED est une avancée majeure de cette version. Les perspectives à venir A titre d information, le CMS One proposera : - Interface d administration multi-browser - Des mini-sites promotionnels pour accompagner le lancement d un évènement - L intégration de Twitter - Des DATA_MAQUETTE supplémentaires (newsletter, etc.) A plus long terme, une application Smartphone pourrait répondre à une tendance d actualisation des sites en temps réel. Page 4 12/10/2012 F BOYER DOSI

5 1.2 La maquette du CMS One - présentation 1 : Partie haute : Un bandeau fin comportant un onglet accueil et un onglet flux RSS, espace de recherche 2 : Un bandeau élargit 1000 x 200 pixels - Permettant un visuel de qualité - Possibilités d y insérer plusieurs bandeaux qui s animeront automatiquement sous la forme d un défilement, et ce, à partir du second bandeau. 3 : Un espace de promotion : les brèves Page 5 12/10/2012 F BOYER DOSI

6 - Permettant de faire défiler des informations, un fil d actualité, et de rediriger vers un article. 4 : Les rubriques - Un nouveau système de navigation dynamique - Une seule rubrique est déployée à la fois pour plus d espace, de clarté et une meilleure visibilité de l ensemble du site en une page (notion de «ligne de flottaison» du site) 5 : Un espace newsletter - Pour fidéliser l internaute et le tenir informé des différentes activités du club, de la ligue. 6 : Espace liens - Pour mettre en avant un partenariat et permettre une redirection vers le site partenaire. 7 : Cinq espaces de promotion et/ou un kakémono - Peut être décliné de plusieurs manières, en une image unique (kakémono), ou 5 images différentes. - Cet espace offre de larges possibilités à l utilisateur qui pourra choisir d y mettre une vidéo, le logo d un partenaire, une image 8 : L espace de communication central - Plus large. - Cet espace est personnalisable. L utilisateur peut choisir d y insérer divers type de contenus. - Les DATA_MAQUETTE permettent d adopter la mise en en forme de son choix, selon le type de page et le rendu souhaité. La nouvelle maquette est proposée avec les couleurs «CORPORATE» du site.fr. Ces couleurs permettent de tirer le meilleur parti du site pour une visualisation et une lisibilité de qualité des contenus. La personnalisation du site pourra se faire grâce aux fonctionnalités DATA_MAQUETTE et aux bandeaux de grande largeur. Page 6 12/10/2012 F BOYER DOSI

7 >>Les nouveautés du CMS One : La page d «accueil» Le DATA_MAQUETTE ACCUEIL permet de générer automatiquement une animation flash permettant de mettre en avant les articles souhaités. Page 7 12/10/2012 F BOYER DOSI

8 Insertion dans un bloc texte de DATA_MAQUETTE_CMSONE_ACCUEIL_suivi des ID des notes à mettre en avant. Exemple : Au préalable, dans ma note à mettre en avant, je choisis : -de mettre dans la zone «chapô» le texte de synthèse qui apparaîtra à droite de l image d uploader une image (jpeg, gif format : 290 pixels de largeur x 250 pixels de hauteur pour avoir une image entière au-delà de ces dimensions le CMS «rognera» sur la hauteur et la largeur afin d afficher l image) qui illustrera ma note dans le mur d images. Cette image portera OBLIGATOIREMENT le nom de : accueil (afin de ne pas apparaître dans les «fichiers à télécharger») Le mur d images affiche le chapeau des notes choisies et redirige vers les notes. La note contient en pièce jointe une photo nommée accueil. A noter : les notes apparaissent selon l ordre des N ID saisi. Important : republier le site (menu «mon site», rechercher le site et dans le menu déroulant choisir republier) et sur le site «public», rafraichir le navigateur Page 8 12/10/2012 F BOYER DOSI

9 >> Les nouveautés du CMS One : La page «portail rubrique» (correctif du 20/07/2012) Le DATA_MAQUETTE Portail Rubrique permet de générer automatiquement des pages portails pour les rubriques du site, facilitant la navigation de l internaute. D un simple coup d œil, toutes les sous rubriques associées à une image, un visuel, apparaissent sur une note. Page 9 12/10/2012 F BOYER DOSI

10 Insertion dans un bloc texte de : DATA_MAQUETTE_CMSONE_PORTAIL_RUBRIQUE_ suivi de l ID de la rubrique. La page portail affiche des liens vers toutes les sous-rubriques de la rubrique mère, 105 dans cet exemple ci-après en 3 étapes : Exemple : Dans ma note portail rubrique (dont le N ID est : par exemple) Au préalable, dans les sous-rubriques : Etape 1) Je renseigne la zone «Nom» de mes sous-rubriques. Cette information sera celle présente sous l image illustrant ma sous-rubrique (exemple : dans la page précédente, sous le logo LACOSTE est indiqué : Liste des partenaires) Etape 2) J upload une image (dans l exemple précédent : le logo LACOSTE) A noter : il n est pas précisé de taille minimum ou maximum, le CMS ONE se charge du cadrage. Le fichier doit toutefois être au format JPEG (format 150x171 pixels pour avoir le format exact sinon plus petit ou plus grand et dans ce cas le CMS One tronque l image. Dans le cas du logo LACOSTE sur cet exemple, la taille est de 150x150 pixels) Important : ne pas oublier de décocher «Conserver le même fichier» lors de la première mise en place de l image Page 10 12/10/2012 F BOYER DOSI

11 Etape 3) Dans le menu «les rubriques de mon site» j indique dans le champ de description de la rubrique mère, le N ID de la note qui va contenir mon portail rubrique, avec le code : BYPASS_ code ID de note (exemple : BYPASS_ ) Important : Ma note peut être désactivée pour ne pas apparaître en pied de page. Page 11 12/10/2012 F BOYER DOSI

12 >> Les nouveautés du CMS One : La page «portail de notes» Le DATA_MAQUETTE Portail Note permet de générer automatiquement des pages portails pour les notes souhaitées. Page 12 12/10/2012 F BOYER DOSI

13 Insertion dans un bloc texte de DATA_MAQUETTE_CMSONE_PORTAIL_NOTES_ suivi des ID des notes de ma page portail. Dans ma note portail de note: (exemple) Au préalable, dans mes notes mises en avant, je choisis : -de mettre dans la zone «chapô» le texte de synthèse qui apparaîtra au bas de l image d uploader une image qui illustrera ma note dans le mur d images. Cette image portera OBLIGATOIREMENT le nom de : accueil (afin de ne pas apparaître dans les «fichiers à télécharger») En cliquant sur la vignette on est redirigé vers la note concernée. L image qui s affiche est celle qui est en pièce jointe dans la note et l intitulé correspond au chapô de la note. A noter : A noter : les notes apparaissent selon l ordre des N ID saisi. Page 13 12/10/2012 F BOYER DOSI

14 >> Les nouveautés du CMS One : Le bandeau du haut du site Je peux insérer sur ce même espace un ou plusieurs bandeaux 1000x200 pixels format JPEG. Dès le second bandeau, le CMS comprend que l association des deux fichiers entraine un défilement automatique des bandeaux. Vous pouvez joindre ainsi plusieurs bandeaux en haut de page. Le format 1000x200 pixels est largement utilisé aujourd hui sur les sites web. Il permet de s exprimer graphiquement pour donner une tonalité sportive, régionale, évènementielle, institutionnelle de votre site. IMPORTANT : Lors de l ajout d un bandeau, il est vivement conseillé de «republier» le site (menu «mon site «) pour activer le défilement avec ce nouvel élément. Les Newsletters disposent désormais de leur propre bandeau. Ceci permet une communication ciblée par ing. La taille du bandeau des newsletters est proposée en 1000x200 pixels comme le format du bandeau du site. Le rendu sur ordinateur est alors plus large et permet une mise en page optimisée. A noter : si vous souhaitez offrir la possibilité d imprimer ces newsletters à vos internautes, il est recommandé de «retailler» le bandeau en 700x140 pixels (taille homothétique du 1000x200 pixels). Page 14 12/10/2012 F BOYER DOSI

15 >> Les nouveautés du CMS One : Ouverture d une vidéo en pop-up (Sur le site cliquer sur le logo Roland-Garros) Page 15 12/10/2012 F BOYER DOSI

16 Insertion du lien de la vidéo + ajout d un attribut spécifique CMS (en gras ci-dessous : &cms_target=popup) pour ouverture en popup. Exemple sur une adresse Youtube : Ajouter cette url à la zone URL de la description de votre image (menu «mes bandeaux») (exemple du logo Roland-Garros sur le site de «démo») Important : republier le site (menu «mon site», rechercher le site et dans le menu déroulant choisir republier) et sur le site «public», rafraichir le navigateur En cliquant sur le logo Vous déclenchez la vidéo Page 16 12/10/2012 F BOYER DOSI

17 >> Le DATA_FED_applications Ce DATA_FED permet d insérer dans une note, l ensemble des applications métiers illustrées par des pictos : Voici le code à intégrer dans une note: DATA_FED_ : Page 17 12/10/2012 F BOYER DOSI

18 >> Les images dans le corps d une note Désormais les images dans le corps d une note peuvent aller jusqu à une largeur de 550 pixels (au lieu de 400 sur l ancien CMS FEDERAL) Une affiche de 550x600 est envisageable pour faire un zoom sur un évènement important (tournoi, animation ). Exemple ci-dessous. Page 18 12/10/2012 F BOYER DOSI

19 Vos notes Page 19 12/10/2012 F BOYER DOSI