Votre système de gestion de contenu est accessible en ligne en tapant l adresse de votre site Internet suivie de /extranet.asp

Transcription

1 Pycna Update, Aide en ligne Votre système de gestion de contenu est accessible en ligne en tapant l adresse de votre site Internet suivie de /extranet.asp Il est impératif pour assurer un bon fonctionnement de votre logiciel de mise à jour Pycna Update d autoriser l ouverture de fenêtre popup dans votre navigateur. Une page sécurisée avec un identifiant et un mot de passe vous permet d accéder à la liste des rubriques qui correspond aux différents menus de votre site. La liste des rubriques résume le contenu de chaque page et vous donne la date de la dernière mise à jour. Vous pouvez modifier un article, le rendre invisible sur le site ou/et ajouter un nouvel article. La description des différentes fonctions de traitement de textes ou d images présentée ci-dessous est identique pour les fonctions de modifications ou d ajouts de nouveaux articles. Contenu d une page Pycna Update Le système de gestion de contenu a été épuré au mieux pour vous faciliter la gestion de votre site Internet sans connaissances techniques particulières. A partir de la liste des rubriques si votre site est vide vous n avez accès qu à la fonction "Ajouter un nouvel article". Dès la première saisie, dans la même page de liste des rubriques vous aurez accès à la fonction "Modifier". Ajouter un article La page contient une liste en menu déroulant de vos "catégories" qui correspond au choix que vous nous avez communiqué lors de la commande de votre site en choisissant une catégorie vous dirigerez votre article vers le menu de cette catégorie dans le site. Le bouton "en ligne" vous permet de rendre visible l article que vous allez saisir sur le site. Cette fonction a pour but de vous faciliter la gestion de vos articles. Un article saisi avec l option en ligne décochée sera visible sur votre système de gestion de contenu mais pas sur votre site. L espace réservé au "titre" est invisible sur le site, il sert simplement à identifier votre article dans la liste des rubriques. L espace "contenu" est la visualisation de votre page Vous pouvez rédiger du texte directement dans cet espace ou effectuer des copier/coller à partir d un logiciel de traitement de texte. Il est toutefois important de vérifier que le texte collé dans l espace contenu ne prend pas les styles qui auraient été importé par la fonction coller. Afin d éviter tout problème de ce genre, vous pouvez utiliser le bloc note de votre ordinateur qui est paramétré pour ne pas prendre en compte les styles de textes. Sous l espace de saisie "contenu" se trouve la barre d outils pour maîtriser la mise en page de votre article

2 Détail des fonctions de la barre d outils Cette barre d outils au design proche de votre logiciel de traitement de texte est votre moyen direct d intervention sur votre mise en page, vous allez pouvoir maîtriser l enrichissement de texte en taille, couleur, placement. Vous allez pouvoir insérer des photos, créer des tableaux, gérer des liens Texte gras (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Texte italique (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Texte souligné (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Coller Insérer : Modifier un tableau (détaillé ci-dessous *1) Afficher plein écran Texte aligné à gauche (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Texte centré (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Texte aligné à droite (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Texte justifié (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Taille du texte (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) si vous ne choisissez pas de taille de texte particulière, le texte prendra par défaut la taille standard prévue pour votre site. Couleur du texte (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Insérer la date Insérer l heure Liste à puces (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Liste numérotée (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Diminuer le retrait (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Augmenter le retrait (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Annuler la ou les dernières fonctions Restaurer la ou les dernières fonctions Insérer : modifier un lien (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction. Une fenêtre de dialogue "gestionnaire d hyperliens" s ouvre. Dans Propriétés générales >> Lien URL, tapez le lien que vous voulez attribuer à l expression sélectionnée dans votre texte.) Supprimer le lien (Sélectionnez le texte à modifier et cliquez sur le l icône de la fonction) Insérer / Modifier une ancre Une ancre dans une page Internet est un point de fixation pour un lien ex : Vous avez une pages qui contient plusieurs chapitres avec chacun un titre particulier. Cliquez au début de chaque titre pour insérer une ancre à qui vous attribuez un nom unique à chaque fois sans accent, sans espace. En tête de page vous rédigez sous forme de liste l ensemble des titres. Sélectionnez chacun de ces titres pour leur attribuer un lien avec le bouton "Insérer : modifier un lien". Dans la case Lien URL taper # suivi du nom de votre ancre. Concrètement, votre page Internet, une fois en ligne vous permettra en cliquant sur un des noms de la liste d ouvrir la page au début de l article qui correspond à ce titre. Insérer / Modifier une image (détaillé ci-dessous *2) Nettoyer le code (En sélectionnant une partie ou tout un texte et en cliquant sur cet outils vous supprimerez l ensemble des styles attribué à ce texte.)

3 (*1) Insérer / Modifier un tableau Cliquez dans votre page à l endroit où vous désirez insérer un tableau, une fenêtre "Gestionnaire de tableau"apparaît elle va vous permettre de définir le nombre de rangées, le nombre de colonnes et l ensemble des paramètres spécifiques à la construction de votre tableau. La grille de votre tableau apparaît dans la page sous forme de pointillés il ne vous reste plus qu à compléter le contenu du tableau en rédigeant dans chaque cellule les attributs textes qui correspondent à vos besoin. Un clic droit à partir de n importe quelle cellule vous ouvrira un menu complémentaire comme celui représenté ci-contre qui vous permettra d enrichir votre tableau avec des fonds couleurs, des bordures Pour effacer le tableau il suffit de cliquer dessus et de sélectionner dans ce menu l option "Effacer le tableau".

4 (*2) Insérer / Modifier une image Avant d insérer une image dans vos pages il faut vérifier un minimum de paramètres propres aux images destinées à un site Internet. Ces paramètres ne peuvent se vérifier qu avec un logiciel de traitement d image du type Adobe Photoshop ou plus simplement avec Photofiltre dont les performances sont suffisantes pour les vérifications courantes. La taille maximum conseillée pour les images de votre site Internet set de 300 px de large Utilisation de Photo Filtre PhotoFiltre est gratuit pour une utilisation privée, non commerciale ou éducative (incluant les organisations à but non lucratif). Toute utilisation commerciale ou professionnelle nécessite un enregistrement Lien pour téléchargement d une version gratuite PhotoFiltre permet d effectuer des réglages simples ou avancés sur une image et de lui appliquer un large éventail de filtres. L'application propose les fonctions basiques de réglage (luminosité, contraste, teinte, saturation, correction gamma) et des filtres artistiques (aquarelle, pastels, encre de chine, pointillisme, effet puzzle). PhotoFiltre est fourni avec plusd'une centaine de filtres! La palette est composée essentiellement des outils de dessin tels que la pipette, le curseur de déplacement, le traçage de ligne, la fonction de remplissage, l'aérographe, le pinceau, la goutte d'eau et le tampon de clonage (ou duplicateur). Différentes formes de pinceau sont disponibles, des formes standards (cercles et carrés de différentes tailles) mais également des formes plus variées (ligne oblique, feuille, étoile, etc.) Le module PhotoMasque permet de réaliser des effets de contour et de transparence avancés sur vos images à l'aide de masques prédéfinis. Le module d automatisation permet quant à lui de traiter toutes les images d un répertoire de façon automatique avec les fonctions de bases (conversion, taille de l image, encadrement, réglages, etc.) PhotoFiltre comporte également un explorateur d'images, une gestion des modules externes, une gestion des scanneurs, des effets de texte, etc. Vérification de la taille et de la résolution de l image Introduction Les images présentes sur votre site doivent toutes être de couleur RVB, et devront toutes être à une résolution de 72 pixels par pouce. Une erreur de résolution aurait pour effet de ralentir l affichage de votre page en ligne et risquerait de déformer la page. Le chapitre Utilisation de Photo Filtre présente essentiellement l aspect paramétrage de la taille et de la résolution de vos images. Une aide en ligne est disponible sur le logiciel en cliquant sur (?) Vérification du paramétrage de vos images Vos images doivent être paramétrées en couleur RVB. Pour vérifier ce paramètre, après avoir ouvert votre image, dans le logiciel PhotoFiltre sélectionnez le menu Image puis mode et vérifiez ou changez le mode de l image selon le résultat affiché. Les dernières vérifications à effectuer avant d enregistrer et de transférer votre image sur le serveur seront sa taille et sa résolution. La taille des images utilisées dans l exemple traité ci-dessous est de 250 pixels de large par 150 pixels de haut. (Taille : dimension de l image largeur x hauteur) Pour vérifier la taille de l image que vous venez d ouvrir ou de scanner, Cliquez sur le menu Image, Taille de l image. Un tableau apparaîtra sur votre écran et vous indiquera la taille actuelle de votre image. Si les paramètres indiqués ne correspondent pas, commencez par changer le paramètre de résolution en tapant 72, puis indiquez la largeur ou la hauteur de votre image.

5 Exemple : Votre image est de largeur 1600, hauteur 1200, résolution 180 (taille classique pour des photo numériques). Tapez 72 en résolution puis 250 en largeur, le tableau indiquera que la hauteur est de 188 Cliquez sur OK l opération suivante va vous permettre de recadrer votre image sur la hauteur. Vous allez effectuer un recadrage de l image. Cliquez sur le menu Image, Taille de la zone de travail. Un tableau apparaît sur votre écran et vous indique la taille actuelle de votre image. Selon l exemple utilisé la taille est de 250 x 188. Nous voulons une image correspondant à une taille de 250 x 150, il faut donc impérativement recadrer l image sur 150 de hauteur. Tapez 150 à la place de 188, l autre dimension ne change pas. Le quadrillage Position vous permet de choisir la partie de l image que vous allez supprimer (recadrer). En laissant la position au centre, votre image sera recadrée équitablement en haut et en bas. En cliquant sur la position en haut, votre image sera recadrée en bas. Une fois le choix de la position de recadrage effectué, cliquez sur OK. Votre image est de bonne dimension et de bonne résolution. La prochaine étape est l enregistrement de l image au format.jpg qui reste le format le plus simple à gérer pour la publication sur Internet. Enregistrement de vos images Votre image est maintenant à la dimension 250 x 150 et de résolution 72ppp. Il faut enregistrer cette image sur votre ordinateur avant de la transférer sur le serveur (emplacement de votre site Internet). Cliquez sur fichier, Enregistrer sous. Une fenêtre s ouvre et vous indique en haut le dossier dans lequel l enregistrement se fera. Sélectionnez le dossier de votre choix, Indiquez le nom de l image dans la case Nom de fichier sans utiliser d accents, d apostrophes ou d espace. Sélectionnez JPEG dans la case Type, cliquez sur enregistrer, une fenêtre vient de s ouvrir et vous propose un taux de compression, glisser le curseur sur une position entre 70 et 50. Validez sur OK Votre image est sauvegardée sur votre ordinateur et, est prête à être transférée sur le serveur. La taille maximum conseillée pour les images de votre site Internet set de 300 px de large

6 Préparation des graphiques pour le Web A propos de l'optimisation Utilisation de Photoshop L'optimisation consiste en la mise au point de la qualité d'affichage et de la taille des images pour leur utilisation sur le Web. Adobe Photoshop est doté d'une gamme de commandes très efficaces pour la compression des fichiers d'images tout en optimisant leur qualité d'affichage en ligne. Taille et résolution d'image Une fois l'image numérisée ou importée, vous pouvez régler sa taille. Dans Photoshop, la commande Taille de l'image vous permet de régler les dimensions en pixels, les dimensions d'impression et la résolution d'une image Résolution d'image Il s'agit du nombre de pixels affichés par unité de longueur imprimée dans une image, généralement exprimé en pixels par pouce (ppp). Le logiciel Photoshop vous permet de changer la résolution d'une image. Les images pour des supports en ligne sont en 72 ppp. Dans Photoshop, la résolution d'image et les dimensions en pixels sont interdépendantes. Le niveau de détail d'une image dépend de ses dimensions en pixels, tandis que sa résolution détermine la taille de la zone d'impression des pixels. Par exemple, vous pouvez modifier la résolution d'une image sans modifier ses données de pixel actuelles. Vous ne modifiez dans ce cas que la taille de l'image à l'impression. Toutefois, pour conserver les mêmes dimensions en sortie, vous devez modifier le nombre total de pixels lorsque vous modifiez la résolution de l'image. Modification de la taille de l'image et de la résolution Pour recadrer une image avec l'outil Recadrage : Sélectionnez l'outil Recadrage. Définissez le rectangle de sélection de la zone recadrée en faisant glisser le pointeur sur la partie de l'image à conserver. Ce rectangle n'a pas besoin d'être précis, car il peut être rajusté par la suite. Si nécessaire, ajustez le rectangle de sélection de la zone recadrée Pour mettre le rectangle de sélection à l'échelle, faites glisser l'une de ses poignées. Pour contraindre les proportions, maintenez la touche Maj enfoncée tout en faisant glisser une poignée d'angle Appuyez sur la touche Entrée (Windows) ou Retour (Mac OS), cliquez sur le bouton de validation dans la barre d'options ou cliquez deux fois dans le rectangle de sélection de la zone recadrée Modification des dimensions en pixels d'une image Avant tout, il est important de consulter la taille de l image dans le contenu de votre site. Une image trop grande pourrait détruire l aspect de votre mise en page. Lors de la préparation d'images pour une diffusion en ligne, il est utile de spécifier la taille d'image en dimensions en pixels. N'oubliez pas que la modification des dimensions en pixels agit non seulement sur la taille d'une image à l'écran, mais également sur sa qualité et ses caractéristiques d'impression, notamment ses dimensions à l'impression ou sa résolution (72 ppp).

7 Pour consulter la taille de votre image, ouvrez la page contenant l image à remplacer, effectuez un clic droit sur votre image, sélectionnez propriétés, vous pouvez consulter les dimensions de l image. Ces dimensions vous indiquent la largeur ou la hauteur de l image de remplacement selon votre choix. Modification de la taille de l image dans Photoshop Choisissez Image > Taille de l'image. Vérifiez que l'option Rééchantillonnage est sélectionnée Pour conserver le rapport L/H en pixels, sélectionnez l'option Conserver les proportions. Cette option permet de mettre automatiquement à jour la largeur lorsque vous modifiez la hauteur, et vice versa. Dans la zone Dimensions de pixel, entrez les valeurs correspondant à la largeur ou à la hauteur. Pour entrer ces valeurs sous la forme de pourcentage des dimensions actuelles, sélectionnez % comme unité de mesure. La nouvelle taille de fichier de l'image s'affiche en haut de la boîte de dialogue Taille de l'image, l'ancienne taille étant spécifiée entre parenthèses. Une fois votre image paramétrée à la bonne taille et bonne résolution, vous devez l enregistrer et la transférer sur le serveur distant contenant toutes les images du site. Dans Photoshop, utilisez la boîte de dialogue Enregistrer pour le Web pour sélectionner les options d'optimisation et afficher un aperçu de l'illustration optimisée. Affichage de la boîte de dialogue Enregistrer pour le Web Choisissez Fichier > Enregistrer pour le Web. Aperçu des images Cliquez sur un onglet dans la zone supérieure de l'image pour sélectionner une option d'affichage : Original pour visualiser l'image sans optimisation, Optimisé pour visualiser l'image avec les paramètres d'optimisation actuels appliqués, 2 vignettes pour visualiser deux versions de l'image côte à côte ou 4 vignettes pour visualiser quatre versions de l'image côte à côte. Si l'ensemble de l'illustration n'est pas visible dans la boîte de dialogue Enregistrer pour le Web, utilisez l'outil Main pour afficher d'autres parties de l'image. Sélectionnez l'outil Main (ou maintenez la barre d'espace enfoncée) et faites glisser le pointeur dans la zone d'affichage pour que l'image se déplace. Vous pouvez également utiliser l'outil Zoom pour agrandir ou réduire la vue. Sélectionnez l'outil Zoom, puis cliquez sur une vue pour effectuer un zoom avant ; maintenez la touche Alt (Windows) ou Option (Mac OS) enfoncée et cliquez dans une vue pour effectuer un zoom arrière. Vous pouvez également spécifier un taux d'agrandissement dans la zone de texte Zoom située dans la partie inférieure de la boîte de dialogue Enregistrer pour le Web. Sélection d'une vue Cliquez sur un autre panneau de la boîte de dialogue Enregistrer pour le Web pour sélectionner une nouvelle vue. Si vous travaillez en mode d'affichage 2 vignettes ou 4 vignettes, vous devez sélectionner une vue avant d'appliquer les paramètres d'optimisation. Un contour noir délimite la vue sélectionnée. Options d'optimisation pour le format JPEG

8 Le format JPEG est le format standard de compression d'images à tons continus, telles que les photographies. L'optimisation d'une image au format JPEG repose sur une compression avec perte qui ignore des données de manière sélective Panneau d'optimisation pour le format JPEG A. Menu Format de fichier optimisé B. Menu Qualité de compression C. Menu Optimiser Qualité Choisissez une option dans le menu de la qualité de compression ou spécifiez une valeur dans la zone de texte Qualité. Plus la valeur de qualité est élevée, plus les détails sont préservés par l'algorithme de compression. Notez cependant que le choix d'un paramètre de qualité élevé entraîne la création d'un fichier plus volumineux qu'avec une qualité basse. Affichez l'image optimisée avec différents paramètres de qualité afin de choisir le meilleur compromis entre qualité et taille de fichier. (Valeur conseillée : entre 50 et 70) Votre image est sauvegardée sur votre ordinateur et, est prête à être transférée sur le serveur. La taille maximum conseillée pour les images de votre site Internet set de 300 px de large

9 Transfert de vos images sur le serveur Le transfert va s effectuer directement à partir de Pycna Update dans votre page en même temps que sont intégration à votre mise en page. Votre système de gestion de contenu Pycna Update vous permet d utiliser autant d images que vous désirez dans votre mise en page en les positionnant où bon vous semble. Ce chapitre part du principe que vos images sont classées dans un dossier de votre ordinateur en mode de couleur RVB, à une taille maximum de 300 px de large et une résolution de 72 ppp comme nous précisons dans les chapitres précédents. Il est impératif pour assurer un bon fonctionnement de votre logiciel de mise à jour Pycna Update d autoriser l ouverture de fenêtre popup dans votre navigateur. Transfert d images Cliquez dans votre page à l endroit où vous désirez insérer une image, puis cliquez sur le bouton La fenêtre "Gestionnaire d image" s ouvre comme présenté ci-contre. En cliquant sur le bouton vous allez ouvrir une deuxième fenêtre qui va vous permettre de parcourir votre ordinateur pour indiquer l emplacement et le nom de l image que vous voulez transférer sur le serveur et intégrer dans votre mise en page Le bouton "Create New Folder" vous permet de créer un dossier avec un nom particulier pour classer sur le serveur vos images selon vos choix. Cette option est facultative. Cliquez sur le bouton "Parcourir" pour visualiser la distribution des différents dossiers de votre ordinateur dans une fenêtre qui se nomme "choix du fichier", sélectionnez l image de votre choix, cliquez sur ouvrir puis, cliquez sur Upload. Le symbole de l image apparaît sous forme de petit icône, en cliquant dessus, cette fenêtre se ferme et l image apparaît dans l espace prévisualisation de la fenêtre "Gestionnaire d image"

10 Le transfert s est effectué avec succès votre image est maintenant sur le serveur de votre site Internet il ne vous reste plus qu à lui indiquer son emplacement dans le site. En apparaissant dans la fenêtre "prévisualisation", l image a également indiqué dans le champ "URL de l image" son emplacement sur le serveur, laissez cette indication. Le deuxième champ "Equivalent textuel" vous permet d indique une courte phrase qui décrit votre image. Le but de champ est de faciliter le référencement de votre site, les robots de moteurs de recherche ne voient pas les images mais enregistre les descriptions, de plus cette indication facilitera la navigation pour une certaine catégorie d handicap. Placement de l image dans la page Cliquez sur l onglet "Apparence" de la fenêtre "Gestionnaire d image" il faut effectuer un choix dans la liste Alignement comme indiqué ci-dessous. Plusieurs possibilités s offre à vous comme le symbolise les schémas ci-dessous. A ces placements prédéfinis s ajoute les différentes applications conjuguées entre le placement indéfini et les options de texte du type qui peuvent vous permettre de positionner une image en milieu de page. Puis cliquez sur le bouton Insérer, votre image apparaît dans la page selon votre choix de placement. En cas d erreur ou si vous désirez changer l emplacement de l image, Dans votre système de gestion de contenu Pycna Update cliquez sur l image de votre choix dans votre page puis sur le bouton Vous avez de nouveau accès à la fenêtre "Gestionnaire d image" qui vous permet de modifier vos paramètres. Un clic droit vous permet également d avoir accès au bouton ainsi qu à d autres options que vous reconnaîtrez. Pour supprimer une image, positionnez votre curseur après l image et utilisez la touch "Suppr" de votre ordinateur ( flèche vers la gauche au dessus de la touche "Entrée"). Service Technique