Guide pour l Editeur du Portail cemac-qualite.org

Transcription

1 Physikalisch-Technische Bundesanstalt (PTB) Coopération Technique Q. 52 Afrique et Asie Elaboration d un portail web en service de l infrastructure de qualité en zone CEMAC Guide pour l Editeur du Portail cemac-qualite.org Annexe au rapport d atelier de formation pour les Editeurs Web et le Webmaster Principal, Libreville, Gabon 26 au 30 avril 2011 Vers. 1 Dr. Julien K. Biere,

2 (1) Valider le contenu Distinguer Lecture d écran Lecture après téléchargement et impression (2) Convertir les fichiers DOC, XLS, PPT en PDF > A partir de MS Office 2010 directement: «enregistrer sous... PDF» > Avec un convertisseur online: parcourir convertir télécharger Donnez un nom significatif/sémantique au fichier PDF. Notez la taille du fichier PDF. (3) Télécharger Allez au CMS : [Après le lancement : Mettez votre nom d utilisateur (user name) + mot de passe. Cliquez le module «Fichiers» Ouvriez la structure des fichiers en cliquant le petit triangle à gauche jusqu à : fichiers/pdf/(pays...)

3 (4) Editer Cliquez le module «Page» Ouvriez l arborescence en cliquant le petit triangle à gauche des icônes de page jusqu à la page cherchée. Cliquez sur le nom de la page (pas l icône!) Dans la troisième colonne, votre canevas de travail, l éditeur RTF (Rich Text File) s affiche. La signification des icônes est indiquée pendant le survol de la souris. Ecrivez un petit commentaire, une introduction, au moins une annotation > Directement (vous-mêmes) dans le champ de texte > Alternativement : Insérez la préface ou le résumé du document >>!!! Ne collez jamais directement un morceau de texte hors du Word dans le champ des textes de l éditeur RTF (Vous risquez d importer des commandes invisibles et seulement fonctionnels en MS Word qui peuvent causer un conflit avec les standards du langage du Web, le HTML, et le feuilles de styles qui gèrent le portail cemac-qualite.org). Par contre, utilisez le filtre:

4 Cliquez dans la première rangée de la barre de menu le quatrième icône [W]. Cela vous donne une fenêtre flottante dans laquelle vous pouvez coller votre texte. Cliquez «Insérer» (en bas) et la fenêtre se ferme. Sauvegarder la page entretemps pour ne pas perdre votre travail en cas de déconnexion Formatez votre article. Donnez un titre (Choisissez la taille «Heading 3» - Nota bene : «Heading 2» est déjà réservé pour le titre de la page, dans la photo d écran ci-haut «Métrologie»). Coupez votre texte en petit morceaux de 5 à max. 10 lignes interrompu par une ligne (= nouveaux paragraphe) Mieux : insérer des sous-titres (Choisissez la taille «Heading 4») Nota bene : ENTREE > Nouveau paragraphe (séparé par une ligne vide) SHIFT + ENTREE > Saut de ligne

5 (5) Créez le lien vers le fichier PDF Ecrivez en bas du texte que vous veniez d insérer : «Télécharger... (titre)... [PDF,... KO]» en mettant la taille du fichier que vous avez noté d ailleurs. Sélectionnez le contenu entre les parenthèses [PDF,... KO] Cliquez la 2ème icône de chaine (dans la deuxième rangée du menu) Cliquez le 2ème onglet dans la fenêtre qui s ouvre nommé «fichiers» Sélectionnez le chemin: fichiers/pdf/(pays)... Cliquer sur le nom du fichier (pas l icône) qui s'affiche sur la droite Cliquez "Appliquez ce lien" La fenêtre flottante se ferme et vous êtes retour dans le champ de texte de l éditeur RTF et vous voyez que la partie PDF, KO est devenu bleu et souligné. Cela indique que le lien est fonctionnel. Sauvegarder la page!! De la même manière vous pouvez créer d autres types de lien : > Premier onglet «Page» : hyperlien interne vers une autre page dans l arborescence

6 > Troisième onglet «URL externe» vers un autre site web > Adresse électronique (6) Editer un nouvel élément type «Actualités» Nota bene : Les dernières trois actualités sont affichées sur la page d accueil, l ensemble des actualités jamais publiées peuvent être consulté dans le premier lien du menu le plus haut : «Actualités» (L archive des actualités). Préparez votre article en deux partie dans un document MS Word, c.-à-d. offline. Créer une accroche d environ 5 lignes et un article complet. Enregistrez le tout sous «.txt» (pas.doc ou docx). Sélectionnez et copiez la première partie, l accroche (teaser text). Allez au CMS Typo3 et cliquez le module «Page» et «NEWS». Dans le canevas vous voyez une liste avec toutes les actualités.

7 Cliquez sur l icône au-dessous à gauche de «ID : Titre»» (Un + dans un cercle vert): L éditeur RTF s affiche avec une particularité qui est seulement valable pour ce module. 1. Mettez un titre pour la nouvelle dans le champ «Titre» 2. Insérez dans le champ «Sous-titre» l accroche (teaser text). 3. Mettez l article complet dans le grand champ «Texte» en bas. Sauvegarder la page. Cliquez le module «Page» et dans le canevas sur la droite vous voyez la liste des actualités actualisée avec le symbole rouge qui indique que le nouveau article est encore désactivé pour des raisons de protection pendant le processus d édition.

8 Pour vérifier et éditer un article cliquez l icône de crayon. Après la vérification finale cliquez l icône rouge et cliquez dans le menu flottant qui s affiche le lien «Activer». Alternativement vous pouvez décocher la case «Cacher» déjà dans le moment de la création du nouvel élément (voir photo d écran sur la page 7). (7) Configuration de votre compte Votre compte est déjà configuré et fonctionnel mais vous pouvez ajuster des détails :

9 Fonctions avancées (8) Préparation et insertion des photos 8.1 Préparation Allez vers le site Cliquez «Open image from computer» = parcourir et sélectionner le fichier concerné Ouvriez la palette «Basic» et cliquez «Crop» (= recadrer)

10 Mettez une valeur approximatif dans les deux champs Width (= largeur) et height (= hauteur), en respectant les proportions, normalement 4 : 3. Dans l exemple nous avons mis 800 x 600 px. Automatiquement un rectangle avec ces dimensions est super-imposé sur la photo. Tirez le point droit en bas pour agrandir le cadre comme vous voulez. Vous pouvez également cliquez dans le rectangle et bouger le cadre au-dessus de la photo. Finalement ajustez encore une fois les valeurs et cliquez «Apply» (= appliquer).

11 Après cette procédure de recadrage il faut diminuer la taille à un maximum de 800 px dans le menu suivant «Resize» (= redimensionner) Vous pouvez basculer entre les deux pas, c.-à-d. revenir sur le menu «Crop» pour une recadrage si vous n êtes pas encore satisfait avec le résultat. Dès la vous pouvez optimiser les paramètres de la photo : Cliquez «Adjustments» : Red eye removal = anti-rouge des yeux Teeth whitening = blanchier les dents Auto levels = optimiser la gradation Brightness & Contrast = luminosité & contraste Sharpen = appointer Après cliquez «Save» et sauvegardez le résultat sur votre disque dur. Donnez un nom significatif et exhaustif, comme titre d exemple «XYZ_atelier_formation_webmaster_Libreville _avril11» Avec cet outil online vous n avez pas besoin d un logiciel d imagerie numérique sur votre PC. Dans quelques secondes vous allez convertir même une image de 4 MO cela veut dire : KO à une superbe image Web optimisé dans une taille idéale de 800 px et un poids d environ 50 KO (!!) Nota bene : Le CMS a définie 800 px comme taille maximale du clic zoom.

12 8.2 Editer une image dans le CMS Sous le premier onglet vous trouvez l éditeur RTF pour l édition des titres, textes et liens. A côté vous trouvez un onglet «Images» mais seulement si vous avez choisi «Textes avec images» comme type de page. Si vous êtes sur une page type «Textes» il fallait d abord changer le type de page à «Textes avec images» : Vous cliquez la liste roulante et choisissez «Texte & images». Cliquez sur le nom du classeur et les fichiers des images déjà stockées s affichent sur la droite. Cliquez sur la flèche verte en haut «Télécharger des fichiers». Parcouriez votre PC et sélectionnez le fichier de l image.

13 Cliquez sur l icône de classeur pour naviguer dans la liste des fichiers : cliquez sur «image» et le sous-répertoire correspondant : Si vous avez-vous trompé vous pouvez sélectionner le nom du fichier et cliquer «x». Cochez la case «Activer» de Comportement «Agrandir lors du clic». Mettez un texte alternatif et un titre au survol de la souris. Outre ce deux titres obligatoires vous pouvez mettre un lien externe vers un site web (typiquement pour un logo) ; dans ce cas il n est pas possible d activer le comportement «Agrandir lors du clic».

14 Finalement définissez dans le menu «Apparence» (quatrième onglet) : - La taille de l onglet de l image : 180 px (il suffit de mettre la largeur, l auteur et calculé par le CMS en respectant les proportions) - La position de l image dans le texte. Sélectionnez «Habillé gauche» Sauvegardez votre travail et contrôlez le résultat dans le «frontend» :

15 8.3 Création d une galerie photo Dans le menu «Apparence» sélectionnez «Dessus, gauche» comme alignement et «3» comme nombre des colonnes, et pour tout le reste suivez le chapitre 8.2 ci-haut. Parcouriez votre la liste des fichiers «images» et sélectionnez une image après l autre. Mettez d titres pour les photos diverses l un au-dessous l autre dans le champ «Titres alternatifs» et les»titres au survol». Si vous voulez créer une galerie avec une légende individuelle par photo, sélectionnez comme type de contenu «Images» (au lieu de «Textes & images» ). Dans le canevas pour ce type vous trouvez le champ «Légende» dans lequel vous mettez, une ligne au-dessous l autre, la légende pour chaque image.