Introduction Bienvenue dans le guide d'utilisateurs de NéoCMS. Ce document a pour vocation de vous aider dans l'utilisation de votre CMS et vous est communiqué dans le cadre de nos formations. Vous y trouverez aussi bien des informations pour les néophytes (la manière de modifier la structure de votre site, d'éditer des contenus) que des actions réservées aux utilisateurs confirmés. En fonction des composants installés sur votre site pour répondre à vos besoins, il est possible que certaines fonctionnalités ne soient pas déployées sur votre site. Dans chaque partie, vous trouverez une introduction qui vous familiarisera avec l'interface que vous devrez utiliser. Vous serez ensuite guidé pas à pas dans l'utilisation des différents modules de NéoCMS. Nous vous souhaitons une bonne utilisation de NéoCMS. Votre nom de domaine : Le serveur de développement : 1
Table des Matières Introduction... 1 Table des Matières... 2 Connexion à l'interface d'administration... 4 L'interface d'administration... 5 Bouton EDITEUR : le contenu des pages... 6 Insertion/modification du texte... 7 Insertion/modification de tableaux... 7 Insertion ou modification de liens... 8 Insertion/modification d'images... 9 Créer une lightbox sur une image... 10 Insertion d une vidéo embarquée... 10 Insertion de composant... 11 Modification du code HTML... 11 Bouton PAGES : la structure de votre site... 12 Création d'un dossier... 13 Création d'une page... 14 Insertion des propriétés... 15 Les permissions des pages... 16 Copier-coller une page... 17 Coller... 17 Coller comme lien de contenu... 17 Coller comme raccourci... 17 Déplacement des pages et des catégories... 18 Afficher ou masquer une page dans le menu... 18 Bouton FICHIERS : des fichiers sur le serveur... 19 Envoyer un fichier... 21 Bouton PROPRIETES : particularité des pages... 22 Les propriétés générales de la page... 22 Les permissions... 22 Les datas... 22 Les métadonnées... 23 Bouton HISTORIQUE : la vie des pages... 24 Bouton TEMPLATES : le look des pages... 25 Ajouter des couleurs à l éditeur... 25 En utilisant les couleurs hexadécimales... 25 En utilisant ColorZilla... 25 En utilisant le sélecteur de couleurs... 25 Bouton COMPOSANTS : des fonctions en plus... 26 Gestion des News... 27 Création/modification d'un formulaire... 29 Gestion des galeries photos... 31 2
Bouton UTILISATEURS : membres et admin... 32 Créer un nouvel administrateur... 32 Créer un nouvel utilisateur enregistré... 32 Création du groupe... 33 Création de l utilisateur... 33 Modifier un mot de passe (ou les infos d un utilisateur)... 33 Paramètres techniques pour mémoire... 35 Votre identifiant d administration... 35 Google Analytics... 35 Paramètres FTP... 35 Paramètres Plesk... 36 Paramètres OVH... 36 3
Connexion à l'interface d'administration La première étape pour administrer votre site avec NéoCMS est de vous connecter à l'interface d'administration. 1. Cliquez sur le cadenas. Il se trouve généralement au bas des pages de votre site. Si vous ne le voyez pas, c est que nous l avons caché pour des raisons techniques. Vous pouvez alors accéder à l interface en écrivant /admin immédiatement derrière votre nom de domaine. Par exemple : http://www.easy-concept.com/admin 2. Insérez votre login et votre mot de passe dans la fenêtre qui s'affiche. Nous vous avons communiqué ces deux éléments lors de la première formation à la gestion de votre site. Si vous l avez oublié, contactez-nous afin que nous vous en communiquions un nouveau. 3. Cliquez sur le bouton Entrer. Vous accédez à l'interface d'administration de votre site. Vous pouvez voir que vous êtes identifié car la barre bleue de gestion de NéoCMS est apparue en haut de l écran (plus d info à la page suivante). Le cadenas, quant à lui, a disparu et ne réapparaîtra qu à partir du moment où vous vous déconnecterez Petites astuces : 1. Si vous travaillez sur votre propre ordinateur, vous pouvez demander à NéoCMS de retenir votre mot de passe afin de ne pas devoir l encoder à chaque identification. 2. Vous pouvez également choisir, par le biais du bouton déroulant, la langue dans laquelle vous souhaitez afficher l interface d administration de votre site. Vous avez le choix entre le français (par défaut), l anglais, le russe et le néerlandais. 4
L'interface d'administration Lorsque vous êtes connecté à NéoCMS, vous accédez à l'interface d'administration de votre site. Cette interface vous permet d'accéder aux différentes fonctionnalités de NéoCMS. Ce bouton permet de réduire en hauteur la barre d'administration. Le bouton Editeur (Plus d infos à la page 6) donne accès au menu d'édition du contenu des pages et permet donc d en changer le contenu. Le bouton Pages (plus d infos à la page 12) permet de travailler sur la structure du site (Ajout de dossiers, ajout, suppression ou déplacement de pages,...). Le bouton Fichiers (plus d infos à la page 19) donne accès au gestionnaire des fichiers. Il permet de placer des photos, images et tout autre type de document sur le serveur Le bouton Propriétés (plus d infos à la page 22) permet des modifier les propriétés générales d'une page, d en préciser les permissions et d'inclure les métadonnées. Le bouton Historique (plus d infos à la page 24) permet de voir toutes les étapes des modifications apportées à la page et par qui ces modifications ont été apportées. Le bouton Expressions globales vous permet d avoir accès à tous les composants linguistiques du site (utilisateurs avancés) Le bouton Templates permet de modifier les pages modèles du site et de déterminer les couleurs utilisables sur le site (utilisateurs avancés) Le bouton Composants (plus d infos à la page 25) permet de gérer les composants du site tels que les news, les formulaires, les galeries photos, Le bouton Utilisateurs (plus d info à la page 32) d'ajouter des utilisateurs et de gérer des groupes d'utilisateurs (administrateurs ou visiteurs) Le bouton Utilitaires permet d'accéder aux utilitaires : backup, corbeille, code Google Le bouton Support permet de faire une demande de support. Ce bouton déroulant permet d avoir un accès rapide aux dernières pages éditées. Ce bouton apparaît uniquement lorsque des mises à jour de NéoCMS sont proposées. Fermer NéoCMS après la mise à jour. Ce bouton permet de vous déconnecter de l interface d administration. 5
Bouton EDITEUR : le contenu des pages Pour insérer du contenu dans vos pages (textes, images, tableaux, composants, ) vous devez passer par le menu Editeur Lorsque vous cliquez sur le bouton Editeur de la barre d'outils de NéoCMS, vous obtenez une nouvelle barre d'outils. Elle vous permet de réaliser un grand nombre d'action sur votre contenu. Voici la signification de chacun des boutons : Permet de quitter l'édition et revient au menu général Couper le texte sélectionné Coller le texte sélectionné Copiez un contenu de Word, ensuite coller le dans le pop-up auquel vous accédez depuis cette icône. Annuler la dernière action effectuée Refaire la dernière action annulée Rechercher un mot dans la page en cours Remplacer un mot dans la page en cours Effacer la mise en forme Mettre en gras le texte sélectionné Mettre en italique le texte sélectionné Mettre en indice le texte sélectionné Mettre en exposant le texte sélectionné Liste numérotée Liste à puces Appliquer un retrait à gauche ou à droite du texte sélectionné Aligner le texte à gauche, au centre, à droite et justifié Appliquer ou supprimer un lien hypertexte à l'élément sélectionné Insérer une ancre à l'emplacement du curseur Insérer une image à l'emplacement du curseur Insérer une vidéo à l'emplacement du curseur Insérer une animation Flash (swf) à l'emplacement du curseur Insérer une animation Flash (flv) à l'emplacement du curseur Insérer un tableau à l'emplacement du curseur Insérer une ligne séparatrice Insérer un caractère spécial 6
Insérer une image drag and drop 22 Insérer un composant Insérer un template Insérer une news Affiche la source HTML de la page Enregistre les modifications Donner un style au texte sélectionné Changer la couleur du texte sélectionné Changé la couleur de fond du texte sélectionné Demande de support Quitte le mode connecté Certaines fonctionnalités particulièrement utilisées vous sont expliqué ci-dessous : Insertion/modification du texte Avec NéoCMS, il est très simple d'inclure du texte et de le mettre en forme. L'insertion et la modification se fait comme dans un éditeur de texte classique. 1. Placez le curseur dans la zone ou vous souhaitez ajouter du texte en faisant un clic gauche. 2. Tapez directement votre texte ou coller un texte que vous avez copié d'un document. Pour ce faire, utilisez les boutons Coller un texte ou Collez un texte depuis Word. Ces outils suppriment toutes les mises en page des textes que vous avez copiés. 3. Mettez en page votre texte en utilisant les outils de l'éditeur de texte Insertion/modification de tableaux NéoCMS vous offre la possibilité d'intégrer des tableaux dans les zones de contenu des pages. Avant toute chose, il est nécessaire de rappeler que l'utilisation de tableaux doit se limiter au classement et à la présentation des données. Ce n'est donc pas un outil de mise en page même s'il est souvent employé, par erreur, à cet effet. Veuillez également noter qu un tableau HTML s ajuste toujours à son contenu (et pas l inverse) 7
1. Placer le curseur, avec un clic droit, dans la zone où vous souhaitez intégrer le tableau. 2. Cliquez sur l'onglet Insérer un tableau de la barre d'outils de l'éditeur pour insérer un tableau. 3. Introduisez les propriétés du tableau. 4. Cliquez sur OK. Insertion ou modification de liens Pour faire un lien vers un autre site, vers une autre page de votre site, ou vers une adresse mail, il vous suffit de procéder comme suit : Tous ces liens se gèrent de la même manière : 1. Sélectionnez le texte ou l'image qui doit servir de base au lien 2. Cliquez sur le bouton Hyperlien de la barre d'outils de l'éditeur. 3. Complétez les champs qui vous sont demandés par rapport au type de lien que vous choisissez : 1. URL pour un lien vers une page, que ce soit une page de votre site ou d'un autre 2. Anchor pour un lien vers une ancre dans la page active, 3. Email pour une adresse mail Pour indiquer l'url de destination : 1. Sélectionnez le Protocole, il s'agit dans la plupart du temps du protocole http. 2. Remplissez le champ URL avec l'adresse de la page 1. soit en explorant les pages de votre site (pour les liens internes) Au niveau de ce contenu vous avez accès à 3 types d affichage en fonction de vos besoins. Vous les visualisez en cliquant sur la flèche verte du sélecteur : L affichage des dossiers de votre site L affichage des news de votre site L affichage des pages de votre site 8
2. soit en ajoutant l'url d'une page Web. 3. Sélectionnez la page de Destination. Déterminez si la page liée s'ouvrira dans une la fenêtre du site ou dans une nouvelle fenêtre. Laisser la destination <Par défaut> pour que la page s'ouvre dans la fenêtre du site, préférez l'option <Blank> pour que le page s'ouvre dans une nouvelle fenêtre. 4. Donnez un Nom au cadre de destination. 5. Remplissez le champ Titre indicatif pour ajouter un titre à l'url et améliorer le référencement. Pour supprimer un lien existant, il suffit de cliquer sur le bouton voisin : Insertion/modification d'images NéoCMS vous permet d'intégrer facilement des images dans vos contenus. Vous pouvez les placer facilement dans vos textes et tableaux en leur apportant un certain nombre de propriété. 1. Placer le curseur, avec un clic droit, dans la zone où vous souhaitez insérer une image. 2. Cliquez sur la petite icône Image de la barre d'outils. 3. Dans le champ URL, indiquez l'adresse ou se trouve l'image. Cliquez sur parcourir le serveur pour sélectionner une image déjà chargée sur votre serveur. 4. Ajoutez un Texte de remplacement. Ce texte s'affichera si l'image est inaccessible. 5. Ajoutez un Titre indicatif à votre image. Ce texte s'affichera au passage de la souris sur l'image. 6. Si vous souhaitez que votre image serve de lien vers une autre image de plus grande taille, indiquez l'url de cette seconde image dans le champ "URL pour la Lightbox" (Voir plus bas) 7. Par défaut, l'image est affichée à sa taille réelle dans la page. Vous pouvez en diminuer la taille en indiquant, en pixels, la dimension souhaitée pour la largeur ou la hauteur. 8. Choisissez une Bordure et une Couleur si vous souhaitez que votre image soit entourée. 9
9. Déterminez un Alignement de l'image par rapport à votre texte. 10. Remplissez les champs Margin pour déterminer l'espace entre votre image et le texte (haut, bas, gauche et droite) ou, plus globalement, un espacement horizontal et/ou vertical. 11. Cliquez sur OK pour valider. Créer une lightbox sur une image Si vous disposez d une petite image et que vous souhaitez que vos visiteurs puissent l agrandir en cliquant dessus, l idéal est d utiliser la lightbox. Le principe est très simple. Lors de l insertion de votre image comme décrit plus haut, vous complétez, de la même manière, le champ URL pour la Lightbox. Insertion d une vidéo embarquée Si vous souhaitez insérer une vidéo dans votre site, le plus simple est de profiter des services que rendent les sites comme YouTube, DailyMotion Pour illustrer mon propos, je partirai ici de la manière de procéder pour insérer une vidéo de YouTube, ce dernier faisant partie des sociétés rachetées par Google. 1. Rendez-vous sur le site de Youtube.com 2. Dans le moteur de recherche situé en haut de page, cherchez la vidéo qui vous intéresse 3. Dans les résultats affichés, cliquez sur la vidéo qui vous intéresse 4. Si cette vidéo est destinée à être publiée, vous devriez voir les liens suivants en dessous de la vidéo 5. Cliquez sur le bouton Partager 6. Cette action fait apparaître une section supplémentaire 7. Cliquez sur le bouton Intégrer 8. Si ce n est pas déjà le cas, décocher la première case Afficher les suggestions de vidéos à la fin de la lecture 9. Si vous souhaitez une taille de vidéo personnalisée, utilisez le bouton prévu à cet effet. Si la taille par défaut vous convient, copier le texte surligné en bleu 10. Revenez dans l interface de gestion de votre site 10
11. Collez le code dans la fenêtre 12. Modifier le code de cette manière http ://www.youtube.com/v/t_zeqsucyac?hl=fr_fr& 13. Validez en cliquant sur le bouton OK. Vous ne pourrez pas voir la vidéo tant que vous êtes en édition. Revenez au menu CMS pour voir l effet sur votre page Insertion de composant L'insertion d'un composant préalablement créé comme un formulaire, une galerie photo, se fait en quelques clics. 1. Placer le curseur, avec un clic droit, dans la zone où vous souhaitez intégrer un composant. 2. Cliquez sur la petite icône Insertion de composant de la barre d'outils. 3. Sélectionnez un composant dans la liste. Modification du code HTML Cette partie s'adresse à des utilisateurs avancés. Vous avez la possibilité de modifier le contenu d'une page en passant par le code source HTML. 1. Placez-vous dans la zone que vous souhaitez éditer. 2. Cliquez sur l'icône Voir le code HTML de la barre d'outils. 3. Apportez les modifications que vous souhaitez. 11
Bouton PAGES : la structure de votre site NéoCMS est un CMS... Il est donc tout à fait logique que vous puissiez changer la structure de votre site afin qu'elle corresponde exactement à vos attentes. A cette fin, il suffit de cliquer sur le bouton Pages Pour déplacer une page dans la structure de votre site, il suffit de la glisser à l endroit où vous souhaitez qu elle apparaisse. Toutes les possibilités à propos de la structure de votre site sont expliquées dans les pages qui suivent. A partir de cette interface, vous pouvez : Créer un nouveau menu (utilisateurs avertis) Créer un nouveau dossier. Celui-ci ne peut être vide et doit au moins contenir une page (voir page 13) Créer une nouvelle page (voir page 14) Effacer une page ou un dossier (l élément effacé est envoyé à la corbeille) Afficher les propriétés d un élément (Voir page 15) Couper, copier et coller un élément (Voir page 17) Coller un élément comme lien de contenu Coller un élément comme un raccourci 12
Création d'un dossier NéoCMS vous permet de créer de nouveaux dossiers dans la structure de votre site. Un dossier a la même signification que dans Windows Vide il ne sert à rien. Pour être correctement affiché, un dossier doit donc au moins contenir une page. Gérer des dossiers permet de structurer l'information que vous donnez à vos visiteurs. Cette structure sera particulièrement visible dans les URL de votre site et dans le chemin de progression, comme l'illustre cette copie d'écran. 1. Dans l'interface d'administration de NéoCMS, cliquez sur le bouton Pages. 2. Choisissez le menu dans lequel le nouveau dossier sera créé. (FONCTIONNALITES dans notre exemple) 3. Cliquez sur le bouton Créer un nouveau dossier (niveau). Une nouvelle fenêtre s'affiche 4. Sélectionnez la ou les langues dans lesquelles le dossier doit être disponible (uniquement si votre site est multilingue). 5. Donnez un nom au dossier dans le champ Menu name autant de fois que nécessaire selon le nombre de langues du site. Ce nom sera visible dans le menu de navigation. Le Nom du dossier sera auto incrémenté. Si vous voulez insérer un autre nom de dossier, vous devez décocher la case Auto et proposer un nouveau nom. 6. En cochant la case Publier, vous publiez cette catégorie et la rendez accessible aux visiteurs de votre site. 7. Cocher la case Autoriser les moteurs de recherche à référencer cette page/ce dossier pour référencer votre catégorie 8. Cliquez sur Appliquer pour confirmer la création de la catégorie. 9. La catégorie est créée dans le menu sélectionné. Vous pouvez à tout moment la déplacer avec l'outil Drag and Drop (Voir page 18) 13
Création d'une page Dans cette partie, nous abordons la création d'une nouvelle page du site dans un dossier déjà existant ou à la racine du menu. Dans cette nouvelle page, vous pourrez intégrer tout ce que vous souhaitez : du texte, des images, des vidéos et des composants. 1. Dans l'interface d'administration de NéoCMS, cliquez sur le bouton Pages. 2. Dans l'interface de gestion de la structure, sélectionnez le dossier dans lequel vous souhaitez créer une page en cliquant avec le bouton gauche de la souris. La catégorie sélectionnée est alors entourée de pointillés rouges, comme la catégorie "La société" illustrée ci-dessus. 3. Cliquez sur le bouton Nouvelle page. Une nouvelle fenêtre s'affiche dans la partie droite de l'écran. Remplissez les champs afin de déterminer les propriétés de la nouvelle page, comme expliqué ci-dessous. 14
Insertion des propriétés Les différents onglets de cette interface vous permettent de gérer : Général : Les propriétés générales de la page, comme lors de la création d'une page Permissions : Les restrictions d'accès de chaque page à un groupe particulier de visiteur (accès réservé par login et mot de passe) Voir page Data : insérer un texte supplémentaire dans l'entête de page ou lui assigner une image (cette fonctionnalité doit avoir été prévue dans le template) Méta : Les métadonnées Descriptions et Mots clés de l'entête de page 15
Voici les éléments à compléter au niveau des propriétés lorsque vous créez une nouvelle page : 1. Cochez les langues dans lesquelles vous souhaitez qu'une nouvelle page soit créée - Cette option n'est active que si vous avez demandé un site multilingue. Si ce n'est pas le cas, seul la case "FR" sera alors affichée 2. Indiquez le texte apparaissant dans le menu qui appellera cette page dans le champ Menu name. Par défaut, Néo CMS propose un nom de fichier HTML en rapport avec le nom de la page. Si vous souhaitez une autre dénomination pour le nom du fichier, décochez la case Auto et écrivez le nom souhaité (pas de caractères accentués ni d'espace). Attention : Pour des raisons de navigabilité, les noms de chaque page d'une même catégorie doivent être différents. 3. Si vous souhaitez changer le dossier ou le menu dans lequel la page va être ajoutée, sélectionnez-en une autre dans la liste. 4. Vous pouvez demander que votre page ne s'affiche qu'à partir d'une date précise (Date de publication) et soit retirée à une autre date (Date de retrait). Si ce n'est pas nécessaire, laissez ces champs vides. 5. Sélectionnez un template dans la liste proposée. Lorsque nous avons intégré votre site, nous avons créé autant de templates que nécessaire au bon fonctionnement de votre site. Nous avons également indiqué un template par défaut. Ces templates déterminent la présentation de votre page (Page d'accueil, page de contenu,...). 6. Ajoutez un texte dans le champ Titre pour attribuer un titre à votre page. Par défaut, ce champ se remplit automatiquement en tenant compte du nom proposé dans le champ "Menu name". Choisissez ce titre avec précaution car il est très important pour le référencement 7. Cochez la case Publier pour rendre cette page visible sur Internet. Dans le cas contraire, la page sera accessible pour les administrateurs du site mais pas pour les visiteurs. 8. Cochez la case Page par défaut pour définir cette page comme page par défaut, c'est à dire comme page d'accueil de la catégorie. 9. Cochez la case Autoriser les moteurs de recherche à référencer cette page/ce dossier pour les autoriser à en référencer le contenu. (La case est cochée par défaut) 10. Si vous souhaitez faire afficher la page dans une liste de documents récents (cette fonctionnalité doit avoir été développée), cochez la case Ajouter ce fichier à la liste des documents récents 11. Cliquez sur le bouton Appliquer pour confirmer la création d'une page. Les permissions des pages Pour réserver des pages particulières à des utilisateurs enregistrés (Voir page 32), vous devez cliquer sur l onglet Permissions de la page en question. 1. Cliquer sur le bouton Ajouter utilisateur 2. Vous voyez s afficher deux groupes : Administrators et Everyone. Cliquez sur Everyone 3. La liste des groupes s affiche. Si vous souhaitez autoriser l accès à tout le groupe, cliquer sur le bouton Sélectionner. 4. Si, par contre, vous voulez choisir un membre en particulier, cliquer sur le nom du groupe, et ensuite, sélectionner l utilisateur en question. 16
Copier-coller une page A partir de la structure (bouton Pages), il est possible de faire un copier-coller d'une page déjà existante. 5. Sélectionnez une page dans la structure. Un cadre rouge entoure la page pour montrer qu elle est bien sélectionnée. 6. Cliquez sur le bouton Copier. 7. Sélectionnez le dossier dans lequel vous souhaitez coller la page 8. Vous avez alors 3 possibilités : Coller En effectuant ce choix, vous dupliquez la page. Autrement dit, dans votre site vous avez deux pages contenant exactement le même contenu. Ces deux pages peuvent être modifiées séparément ultérieurement, mais il faudra les modifier également toutes les deux si le contenu doit être modifié et rester similaire Coller comme lien de contenu En collant comme lien de contenu on crée physiquement deux pages qui peuvent être affichées avec un template différent. La page cible et la page source ont exactement le même contenu. Toute modification apportée à la page cible sera automatiquement reproduite sur la page source. Coller comme raccourci Avec cette technique, on crée un lien dans le menu qui va pointer vers une page située à un autre endroit dans le site. Par exemple, cela permet d afficher la page de formulaire ou de contact à plusieurs endroits tout en ayant qu une page à réellement entretenir 17
Déplacement des pages et des catégories NéoCMS inclut la fonction très utilisée "drag and drop" (glisser et déposer). Vous pouvez déplacer très facilement une catégorie ou une page dans la structure de votre site. 1. Maintenez le bouton gauche de la souris enfoncé sur le nom d'un dossier ou celui d'une page. 2. Glissez cet élément dans le niveau du menu souhaité. 3. Relâchez le bouton gauche de la souris. L'élément est déplacé. Afficher ou masquer une page dans le menu Il vous est possible de masquer une page ou un dossier dans le menu de votre site grâce au petit carré de couleur qui suit son nom. Vert, l élément est affiché dans le menu Rouge, il est masqué Quelle que soit la couleur, la page existe bel et bien et est trouvable par les moteurs de recherche ou les liens hypertextes. Pour modifier une page masquée, il suffit de 1. cliquer avec le bouton droit de la souris, 2. cliquer ensuite sur la langue choisie dans la section Prévisualisation pour afficher une instance de la page dans le navigateur 18
Bouton FICHIERS : des fichiers sur le serveur Pour mettre des fichiers (images, photos, documents Word, Excel, PDF ) à disposition de vos visiteurs il faut les envoyer sur le serveur (on dit les Uploader) Pour les Images, utilisez l un des 3 formats suivants : GIF : Très pratique pour les dessins et images simples, avec peu de nuances, ainsi que pour les logos. Peut contenir 256 couleurs ou moins. Ce qui veut dire qu une image de plus de 256 couleurs enregistrée au format GIF ne va en retenir que 256. Gère la transparence et les animations. JPG ou JPEG : Format idéal pour les photos et les illustrations compliquées. Contient des millions de couleurs. La Compression de l image se fait avec une perte de qualité qui va de 0% à 99% (à choisir pour chaque image en fonction de son poids final). PNG : Format libre de droits. Convient pour tout type d image, la transparence mais pas les animations. Il existe en 8 bits (type GIF, 256 couleurs) et en 24 bits (type JPEG, millions de couleurs, mais pas de compression). Pour les autres fichiers, il n y a aucune possibilité de les afficher directement dans le navigateur. Autrement dit, le visiteur pourra les télécharger, mais il devra disposer du logiciel ad hoc pour les lire. Nous vous recommandons d utiliser PDF qui est un format universellement reconnu. En cliquant sur bouton, vous ouvrez une fenêtre depuis laquelle vous pourrez gérer la totalité des vos fichiers 19
Voici les fonctions des différents boutons accessibles : Un clic sur ce bouton vous permet de remonter d un niveau dans la structure des dossiers Après une action menée, force le site à recharger le dossier pour vérifier son contenu Si le dossier contient des images, un clic sur ce bouton les présente sous forme de vignette au lieu de listes. Notez que l intitulé du bouton a changé Permet de choisir un fichier sur votre ordinateur pour l envoyer sur le serveur. Créer un nouveau dossier (répertoire) à l endroit où vous vous trouvez Affiche une fenêtre contenant l URL de l élément sélectionné Permet de prendre un élément sélectionné sur le serveur pour le reprendre sur votre ordinateur Changer le nom de l élément sélectionné. Attention JAMAIS d espace, de caractères accentués ou de caractères spéciaux Mettre un élément en mémoire Changer un élément de place sur le serveur Effacer un élément 20
Envoyer un fichier Pour envoyer un fichier depuis votre ordinateur sur le serveur, vous disposez de deux techniques : Utiliser le bouton Envoyer 1. Cliquez sur le bouton Envoyer 2. Dans la fenêtre qui s ouvre, cliquez sur le bouton Parcourir 3. Parcourez votre disque dur à la recherche du fichier 4. Sélectionnez-le et cliquez sur Ouvrir Utiliser le glisser-déposer 1. Ouvrez une fenêtre de votre navigateur à côté de la fenêtre de gestion des fichiers et glissezle fichier 21
Bouton PROPRIETES : particularité des pages Pour chaque page de votre site Internet, vous avez la possibilité d'ajouter et de modifier les propriétés. Cette fenêtre vous permet de gérer : - Les propriétés générales de la page - Les permissions - Les datas - Les métadonnées Les propriétés générales de la page Nous avons déjà abordé toutes les possibilités de cet onglet un peu plus haut. Pour plus de détails, se référer à la page 15 Les permissions Cette partie ne vous est destinée que si vous avez des pages privées sur votre site (des pages que vous réservez à des utilisateurs enregistrés. 1. Ouvrez l onglet Permissions 2. Cliquez sur Ajouter utilisateur 3. Choisissez le ou les utilisateurs à qui vous réservez la page sur laquelle vous travaillez 4. Cliquez sur le bouton Sélectionner Dès le moment où une page est réservée à une personne ou un groupe particulier, seules ces personnes pourront voir la page une fois qu elles se seront identifiées. Les datas Pour peu que cette fonctionnalité ait été utilisée dans le template de votre site, vous pouvez ici indiquer une image ou une photo qui servira à illustrer la page ou le dossier dont vous éditez les propriétés. 22
Dans la zone de texte, vous pouvez également ajouter un texte qui sera exploité de la même façon. Les métadonnées Dans les propriétés de la page, vous avez la possibilité d'intégrer des métadonnées. Ce sont des informations qui sont invisibles pour les utilisateurs mais qui aident les moteurs de recherche à référencer votre site. On distingue deux types de métadonnées : la description et les mots- La méta description : Remplissez le champ avec une courte description de la page. Ce texte s'affichera sous les résultats d'une recherche dans un moteur de recherche. Les méta mots clés : Remplissez le champ avec les mots sur lesquels vous souhaitez que votre site soit référencé. Il est à noter que Google n'en tient plus compte. Beaucoup d autres moteurs de recherche suivent son chemin mais il est toujours utile d'en mettre si vous souhaitez référencer votre site dans les annuaires. 23
Bouton HISTORIQUE : la vie des pages Quand une page est modifiée, NéoCMS garde en mémoire les versions précédentes dans sa base de données. En cas d'erreur majeure d'encodage de contenu, vous pouvez revenir aux états précédents des pages grâce à un simple clic. Signification des onglets : Visualisez la page dans l'état où elle était à la date indiquée. Remplacez la page actuelle par la page dans l'état à laquelle elle était à la date indiquée. Supprimez la sauvegarde d'une page. 24
Bouton TEMPLATES : le look des pages C est grâce à cette section que nous avons donné le look des pages de votre site. Vous pouvez, selon vos besoins, disposer de plusieurs templates. Normalement, à moins d avoir de bonnes connaissances en HTML et à propos de NéoCMS, il vous est FORTEMENT déconseillé de ne pas toucher à cette section du site. C est ici, cependant que vous pourrez augmenter la quantité de couleurs disponibles dans l éditeur Ajouter des couleurs à l éditeur En utilisant les couleurs hexadécimales Chaque couleur sur un site Web est séparée en trois composantes (Rouge, Vert, Bleu). Chacune des composantes est exprimée sur une échelle de 00 à FF en hexadécimal, soit 255 possibilités. Ainsi, une couleur rouge à 100% aura la valeur FF0000 (soit tout rouge et rien dans les autres couleurs) Le site suivant donne une belle quantité de couleurs hexadécimales : http://fr.wikipedia.org/wiki/liste_de_couleurs En utilisant ColorZilla ColorZilla est un module qui permet d ajouter une pipette dans le navigateur Firefox https://addons.mozilla.org/fr/firefox/addon/colorzilla/ Si vous ajoutez ce module, il vous suffira de cliquer sur la pipette affichée dans la barre d outils de Firefox, de pipeter la couleur souhaitée sur votre page pour en connaître la valeur hexadécimale et la copier en mémoire de l ordinateur afin de l utiliser ultérieurement. En utilisant le sélecteur de couleurs Pour ajouter une nouvelle couleur procédez comme suit : 1. Cliquez sur le bouton Templates 2. Au-dessus de la fenêtre, cliquez sur le dernier bouton coloré 3. Ecrivez la valeur hexadécimale souhaitée sous cette forme #123456. Soit vous connaissez la valeur en ayant utilisé l une des deux techniques décrites ci-dessus, soit vous utilisez la suivante : a. Recliquez sur le même bouton b. Dans la nouvelle fenêtre, choisir la gamme de couleur dans la colonne de droite c. Affiner la clarté de la couleur avec la colonne de gauche d. Validez en cliquant sur la coche verte située en bas à droite. e. Cliquez sur le bouton Ajouter 25
Bouton COMPOSANTS : des fonctions en plus Certains éléments de votre site sont des composants. Il s'agit d éléments complémentaires qui ont été ajoutés à votre site afin de le doter de fonctions supplémentaires comme des formulaires, des news, des agendas ou des galeries photos. Le contenu de ces composants ne s édite pas comme des pages normales. Ils ont chacun un système de gestion spécifique que nous allons décrire dans cette rubrique. 26
Gestion des News Bien que cette partie du site reprenne, comme le contenu classique, du texte, des liens, des images, sa gestion est un peu différente car elle présente un peu plus de possibilités, surtout au niveau de la gestion des dates. Pour ajouter une nouvelle "NEWS", cliquez sur ce composant dans la rubrique "composants". Dans la liste des news, cliquez sur "ajouter une nouvelle news" et vous obtenez le cadre suivant : 27
Sélectionnez les langues pour les versions multilingues de votre site. Ajoutez un Titre à votre news. Sélectionnez une Catégorie à votre news. (Uniquement si votre composant news possède plusieurs catégories) Vous pouvez sélectionner une date de mise en ligne et une date de mise hors ligne pour votre news. Cochez la case Publier pour publier votre news. Insérez du contenu pour la Brève. C'est-à-dire le chapeau de l'article. Vous pouvez intégrer une Description et des Mots-clés pour augmenter le référencement. Cliquez sur le bouton Contenu complet de la news pour ajouter le contenu de l'article. Ajoutez le contenu de la news. Cliquez sur Appliquer. Votre news est en ligne. 28
Création/modification d'un formulaire Dans ce chapitre, nous allons voir comment créer et modifier un composant formulaire. Demande de création d'un nouveau composant : 1. Dans la fenêtre des composants, cliquez sur Nouveau composant. 2. Attribuez un Nom au composant 3. Sélectionnez Form Manager dans le champ Type de composant 4. Cochez la case Afficher dans le menu déroulant pour avoir un accès rapide à votre composant. Configurez le formulaire : 1. Définissez l'adresse mail à laquelle seront envoyés les formulaires dans les champs Destinataire et CC 2. Donner un Titre. Ce titre s'affichera dans le champ objet des mails que vous recevrez. 3. Remplissez le champ Message de confirmation. Ce texte s'affichera lors de l'envoi du formulaire. 29
4. Donnez un nom au Bouton effacer. 5. Attribuez un nom au Bouton envoyer. 6. Sélectionnez un Alignement des titres. 7. Cochez la case Ajouter une copie à la DB pour que les formulaires envoyés soient enregistrés dans la base de données du composant. 8. Cochez la case Sécurité pour obliger les utilisateurs à taper un code de sécurité aléatoire avant d'envoyer le formulaire. 9. Cochez la case Ajouter une news pour que le formulaire envoyé soit automatiquement transformé en une news. Créez les champs du formulaire : 1. Les onglets : Champ E-mail Champ de sélection multiple Champ texte Agenda Champ texte mixtiligne Case à cochée Texte 2. Sélectionnez le champ que vous voulez ajouter à votre formulaire. 3. Ajoutez un Titre au champ. 4. Ajoutez une Valeur par défaut si vous souhaitez que le champ soit prérempli. 5. Changez si vous le souhaitez la largeur du champ L. Pour certains types de champs, il est possible de modifier la hauteur H. 6. Sélectionnez la case Req pour que le remplissage du champ soit obligatoire. 7. Cliquez sur le bouton Appliquer pour ajouter le champ au formulaire. 30
Gestion des galeries photos Dans Néo CMS, les galeries photos se gèrent depuis le composant "Galerie". Voici la méthode à suivre pour créer une nouvelle galerie 1. Ouvrir le composant "Galerie" 2. Créer un nouveau répertoire en cliquant sur le 5ème bouton "Nv. Rép". Il est à noter que ce nom ne peut contenir ni espace, ni caractère accentué d'aucune sorte Pour ce faire, remplacer les espaces par des tirets et les lettres accentuées par leur équivalent sans accent. Attention, si vous oubliez de créer un répertoire, les photos seront placées directement à la racine 3. Une fois le répertoire créé, dans la partie inférieure gauche de la fenêtre, compléter facultativement les deux lignes suivantes : 1. Title pour donner un titre à toute la galerie 2. Tags : une série de mots clés invisibles du visiteur, mais utile pour les moteurs de recherche, en séparant chaque mot clé par une virgule 3. Validez en cliquant sur OK 4. Double-cliquez sur le répertoire récemment créé pour en afficher le contenu. Logiquement, celui-ci doit encore être vide 5. Vous disposez alors de deux possibilités pour envoyer les photos sur le serveur : 1. Méthode 1 1. Cliquez sur le bouton "Envoyer" 2. Cliquez sur "Parcourir" 3. Rechercher et sélectionner le fichier photo sur votre disque dur 4. Cliquer sur "Ouvrir" 5. Répéter l'opération autant de fois que nécessaire en fonction du nombre de photos à télécharger 6. Cliquer sur "Fermer" 2. Méthode 2 1. Ouvrir une fenêtre Windows affichant le dossier photo de votre disque dur 2. Faire glisser les photos de votre disque dure dans la fenêtre 3. Laisser le programme travailler tant que toutes les photos ne sont pas passées (une animation vous montre que le serveur travaille et disparaît lorsque tout est passé.) 6. Une fois toutes les photos envoyées sur le serveur, vous pouvez également compléter, pour chaque photo, le titre et/ou les tags comme expliqué au point 3 Remarques : A tout moment, vous pouvez rouvrir une galerie existante et y envoyer de nouvelles photos afin de la compléter en commençant au point 3 de cette explication. 31
Bouton UTILISATEURS : membres et admin Le bouton utilisateur est celui que vous utilisez pour ajouter un utilisateur enregistré (clients, prospects, personnel ) ou des administrateurs du site. Cliquez sur : le premier bouton pour créer un utilisateur le second bouton pour en supprimer un le troisième pour modifier les paramètres d un utilisateur existant Créer un nouvel administrateur 1. Introduisez le nom d utilisateur (doit être unique est sensible à la casse) 2. Donnez un mot de passe (min 8 caractères mélangeant chiffres, lettres majuscules et minuscules) 3. Répétez le mot de passe 4. Assignez le nouvel utilisateur au groupe administrators 5. Cliquez sur la case à cocher Autoriser l'accès à l'interface d'admin Créer un nouvel utilisateur enregistré Il est possible, si vous avez demandé cette fonctionnalité, que votre site dispose d une section sécurisée. Dans ce cas, vous avez la possibilité de réserver certaines informations à des utilisateurs particuliers. Par exemple, des fournisseurs, des clients, des partenaires Pour voir le contenu qui leur est réservé, ils doivent obligatoirement s identifier. Ce n est qu à partir de ce moment qu ils verront les pages qui leur sont réservées dans le menu. 32
Voici la manière de procéder pour créer ce type d utilisateur. Création du groupe 1. Cliquer sur le bouton Utilisateurs 2. Ouvrez l onglet Groupes 3. Cliquez sur le premier bouton Ajouter groupe 4. Compléter obligatoirement le nom du groupe (et les autres informations de manière facultative) 5. Validez votre choix en cliquant sur Appliquer Veuillez noter que, pour ce type d utilisateur (à l inverse des administrateurs) la case à cocher Autoriser l accès à l interface d admin n est pas coché! En effet, vos visiteurs ne doivent pas modifier votre site Création de l utilisateur 1. Introduisez le nom d utilisateur (doit être unique est sensible à la casse) 2. Donnez un mot de passe (min 8 caractères mélangeant chiffres, lettres majuscules et minuscules) 3. Répétez le mot de passe 4. Assignez le nouvel utilisateur au groupe que vous avez créé dans l étape précédente Une fois cette description faite, vous devrez modifier les paramètres de la page comme expliqué à la page Modifier un mot de passe (ou les infos d un utilisateur) 1. Sélectionner l utilisateur dont il faut modifier le mot de passe 33
2. Cliquez sur 3 ème bouton Propriétés 3. Dans la fenêtre qui s ouvre, introduire le nouveau mot de passe et le répéter pour vérification. 4. Valider la modification effectuée. 34
Paramètres techniques pour mémoire Votre identifiant d administration Veuillez noter que nous n avons pas la possibilité de retrouver votre mot de passe si vous l oubliez La seule chose que nous pourrons faire, c est de le changer Voici donc un bon endroit pour le sauvegarder : Login : Mot de passe : Google Analytics Google Analytics est un service d'analyse d'audience d'un site Web. C est en se connectant à son interface que vous pourrez suivre les statistiques de visite de votre site. Page d accès : http://www.google.com/analytics/ Login : Mot de passe : Paramètres FTP Le FTP est donc un protocole de communication (FTP signifie "File Transfer Protocol", c'est-à-dire "Protocole de Transfert de Fichiers"). C'est un moyen d'échanger des fichiers entre ordinateurs. C est grâce à ce protocole que nous avons placé tous les fichiers du site sur le serveur. Serveur : Login : Mot de passe : Dossier distant : httpdocs 35
Paramètres Plesk Plesk est une interface graphique conviviale et facile d'accès, permettant la gestion de l'ensemble des fonctionnalités de votre hébergement. Page d accès : Login : Mot de passe : Paramètres OVH OVH est une société française indépendante basée à Roubaix. C est par son intermédiaire que nous avons réservé votre nom de domaine. Pour gérer vous-même vos domaines, vous devez vous identifier sur le manager. Page d accès : https://www.ovh.com/managerv3/ Identifiant : Mot de passe : 36