LIGUE NATIONALE CONTRE LE CANCER UTILISATION DU BACK OFFICE

Transcription

1 Page d accueil du site national de la Ligue... 2 Page d accueil des Comités départementaux... 3 INTERFACE DE PUBLICATION (BACK OFFICE)... 3 INTERFACE DE PUBLICATION (BACK OFFICE)... 4 Comment un Comité peut-il publier dans son espace personnalisé?... 4 Que faire si un Comité a perdu ses identifiants/mot de passe?... 4 FONCTIONNALITES ACCESSIBLES AUX WEBMASTERS DES COMITES... 5 Profil du Comité... 5 Comment gérer les journalistes du Comité?... 6 Créer des journalistes...6 Pour publier dans le journal du Comité...7 Comment créer un nouvel article?... 9 Structure des articles du site...9 Rédiger un nouvel article Utilisation des couleurs Caractères spéciaux Insertion d une image dans le corps du texte Insertion d un tableau Insertion d un lien Options de l article Utilisation des paramètres Brèves Outils NOTIONS DE BASE SUR LE TRAITEMENT DES IMAGES POUR LE WEB Type d image Compression pour le web GIF (Graphic Interchange Format) Comment optimiser une image au format GIF JPEG/JPG (Joint Photographic Experts Group) Quelques conseils pour optimiser vos images : Traitement des images : le logiciel Photo filtre (gratuit) Exemple pour réduire la taille de photos Gestions des couleurs Le logiciel Microsoft office picture manager RESPECTER LES DROITS DE L IMAGE Le droit à l image : respect de la vie privée Le droit à l image protection de la propriété Risques juridiques liés à l utilisation illégale ou irrégulière de l image Risque civil : respect de sa vie privée article 9 du code civil Risques pénal : atteinte à la vie privée et délit de contrefaçon Le droit de l image : protection des droits d auteur du créateur de l image Droit d auteur du photographe, du peintre Droit d auteur des créateurs d objets présents sur l image Page 1 maj : 19/11/2012

2 Page d accueil du site national de la Ligue Adresse URL : Le site national de la Ligue contre le cancer met à la disposition de ses Comités départementaux un espace personnalisé leur permettant de présenter leur activité et de promouvoir leurs actions et actualités. Page 2 maj : 19/11/2012

3 Page d accueil des Comités départementaux Adresse URL : où XX est le numéro du département. XX Nom du Comité 01 Ain 02 Aisne 03 Allier 04 Alpes-de-Haute-Provence 05 Hautes-Alpes 06 Alpes-Maritimes 07 Ardèche 08 Ardennes 09 Ariège 10 Aube 11 Aude 12 Aveyron 13 Bouches-du-Rhône 14 Calvados 15 Cantal 16 Charente 17 Charente-Maritime 18 Cher 19 Corrèze 20A Corse-du-Sud 20B Haute-Corse 21 Côte-d'Or 22 Côtes-d'Armor 23 Creuse 24 Dordogne 25B Doubs (Besançon) 25M Doubs (Montbéliard) 26 Drôme 27 Eure 28 Eure-et-Loir 29 Finistère 30 Gard 31 Haute-Garonne 32 Gers 33 Gironde 34 Hérault 35 Ille-et-Vilaine 36 Indre 37 Indre-et-Loire 38 Isère 39 Jura 40 Landes 41 Loir-et-Cher 42 Loire 43 Haute-Loire 44 Loire-Atlantique 45 Loiret 46 Lot 47 Lot-et-Garonne 48 Lozère 49 Maine-et-Loire 50 Manche 51 Marne 52 Haute-Marne 53 Mayenne 54 Meurthe-et-Moselle 55 Meuse 56 Morbihan 57 Moselle 58 Nièvre 59 Nord 60 Oise 61 Orne 62 Pas-de-Calais 63 Puy-de-Dôme 64 Pyrénées-Atlantiques 65 Hautes-Pyrénées 66 Pyrénées-Orientales 67 Bas-Rhin 68 Haut-Rhin 69 Rhône 70 Haute-Saône 71 Saône-et-Loire 72 Sarthe 73 Savoie 74 Haute-Savoie 75 Paris 76 Seine-Maritime 77 Seine-et-Marne 78 Yvelines 79 Deux-Sèvres 80 Somme 81 Tarn 82 Tarn-et-Garonne 83 Var 84 Vaucluse 85 Vendée 86 Vienne 87 Haute-Vienne 88 Vosges 89 Yonne 90 Territoire de Belfort 91 Essonne 92 Hauts-de-Seine 93 Seine-Saint-Denis 94 Val-de-Marne 95 Val-d'Oise 971 Guadeloupe 972 Martinique 973 Guyane 974 La Réunion 987 Polynésie Française 988 Nouvelle Calédonie Page 3 maj : 19/11/2012

4 INTERFACE DE PUBLICATION (BACK OFFICE) Chaque Comité dispose d un droit d accès afin qu il puisse mettre à jour les informations existantes et en publier de nouvelles. Cet espace permet notamment : - de créer de nouveaux «journalistes» susceptibles d alimenter le «journal du Comité» en publiant des notes directement depuis le site internet (un peu comme un blog) ; - d ajouter/modifier des articles ; - de mettre en place des bandeaux publicitaires, promotionnels ou autres ; - de modifier les coordonnées postales et les horaires de permanence affichés ; - de gérer un calendrier des événements ; - de préparer la partie relative au Comité de la newsletter. Comment un Comité peut-il publier dans son espace personnalisé? Pour accéder à l interface de publication, le webmaster du Comité doit ajouter «/admin» après l URL du site : (à sauvegarder dans les favoris du navigateur Internet). Il est possible d y accéder depuis n importe quel ordinateur connecté à Internet. Il doit ensuite s identifier, c est-à-dire saisir l identifiant et le mot de passe (qui lui ont été fournis par le webmaster national de la Ligue) dans les champs de saisie prévus. Que faire si un Comité a perdu ses identifiants/mot de passe? Il suffit de contacter le webmaster de la Ligue (webmaster@ligue-cancer.net ou au ) qui peut en créer de nouveaux. Ceux-ci seront envoyés par sur le mail du webmaster du Comité (onglet PROFIL). Page 4 maj : 19/11/2012

5 FONCTIONNALITES ACCESSIBLES AUX WEBMASTERS DES COMITES Profil du Comité Permet de saisir les informations relatives au Comité. Cliquer sur «Enregistrer» une fois les modifications effectuées. Image du Comité (format 770x243 JPG ou GIF ou SWF): C est l image qui représente le mieux le Comité (photo du Comité, de la ville de l équipe ) Introduction Ici c est le message d accueil du journal du Comité. Vous pouvez le personnaliser et le réactualiser en fonction de vos manifestations. Par défaut, si le champ est vide, un message par défaut est affiché. Image partenaire (format 193 x 130 JPG ou GIF ou SWF) : Vous pouvez placer ici un visuel d un de vos partenariats ou d une opération spécifique que vous souhaitez mettre en avant, avec le lien vers la page Internet correspondante. Note technique : Pour un fichier au format.swf, le bouton doit être inclut dans le fichier Flash à la publication. Page 5 maj : 19/11/2012

6 Comment gérer les journalistes du Comité? Les journalistes sont les personnes ayant le droit de poster des actualités sur le journal du Comité. Vous pouvez ainsi donner des autorisations à certains membres du Comité pour qu ils puissent publier dans le journal du Comité. Créer des journalistes Sur la page d accueil du Back Office, cliquer sur «Gestion des journalistes» puis sur «Ajouter nouveau journaliste» Compléter les champs de formulaire et cocher la case «Autoriser le journaliste à poster des messages». Pour supprimer l autorisation d accès d un journaliste, il suffit de décocher la case. Lorsque vous cliquez sur «Enregistrer», un est envoyé au journaliste avec ses codes d accès. Page 6 maj : 19/11/2012

7 Pour publier dans le journal du Comité Se rendre sur le site et cliquer sur la sous-rubrique «LE JOURNAL DU COMITE» dans la rubrique «ACTUALITES». Cliquer sur «Poster une actualité». S identifier puis compléter les champs TITRE et CONTENU. Valider en cliquant sur le bouton POSTER. Pour valider Page 7 maj : 19/11/2012

8 Modification, suppression des articles : Pour pouvoir modifier ou supprimer des articles il faut d abord s identifier (poster une actualité). Une fois connecté, les icônes modifier et supprimer apparaissent à la suite de l article. Le journal du Comité reflète sa vie au quotidienne au travers de ses manifestations passées ou à venir. Il peut compléter l information de la sous-rubrique «BULLETIN CD» (dans la rubrique «PUBLICATIONS»). Une fois le mois passé, les actualités postées s archivent automatiquement dans la colonne de droite. Vous pouvez cliquer sur un mois pour afficher les anciennes actualités. Si vous n arrivez pas à supprimer ces anciennes actualités (absence des logos d édition ou de suppression), contacter le webmaster pour qu il les supprime. Page 8 maj : 19/11/2012

9 Comment créer un nouvel article? Structure des articles du site Le site est composé de rubriques contenant des sous-rubriques. Elles sont affichées dans le menu (zone jaune). Les articles sont classés dans les sous-rubriques. Ils s affichent en zone centrale du site. Ils contiennent un titre, un chapeau (texte introductif) et un corps qui contient le message. Il est possible de lui associer des documents à télécharger et images. Un rappel de la rubrique et sous-rubrique dans lequel il se situe est fait sous le menu, et de la liste de tous les articles en ligne dans cette même sous-rubrique à droite. LOGO COMITE FAIRE UN DON AU COMITE MENU (RUBRIQUE/SOUS-RUBRIQUES) HOME CD RUBRIQUE Titre de l article Chapeau de l article Corps de l article SOUS-RUBRIQUE Image de la marge SOUS-RUBRIQUE Liste de tous les articles de la SOUS- RUBRIQUE sélectionnée IMAGE PARTENAIRE Documents à télécharger FORUM LIGUE CARTE COMITES PARTAGER L ARTICLE IMAGE COMITE CARTE COMITE COORDONNEES COMITE Page 9 maj : 19/11/2012

10 Rubrique Sous-rubriques La liste de gauche («Liste des rubriques») permet de naviguer dans l arborescence du site Comité. Cliquez sur le nom d une rubrique pour afficher ses sous-rubriques. Remarque : Une sous-rubrique (avec sa rubrique) s affichera dans le menu du site seulement si elle contient au moins un article mis en ligne. Exemple : La sous-rubrique «Organisation» dans la rubrique «Tout sur votre comité» ne s affiche pas ici dans le menu car il n y a pas d article en ligne dans la sous-rubrique «Organisation». Cliquez sur le nom d une sous-rubrique pour afficher les articles qu elle contient. Remarque Il existe deux types d'articles : ceux qui sont rangés dans un ensemble «rubrique/sous-rubriques» et les articles «associés». Le type article associé est désactivé car il a été développé pour l ancienne version du site. Il n est donc possible que de créer des articles dans les sous-rubriques qui sont plus visibles, et plus faciles d accès. Page 10 maj : 19/11/2012

11 Rédiger un nouvel article Après avoir cliqué sur la sous-rubrique du futur article, --> cliquer sur "Ajouter un nouvel article" --> saisir ou copier/coller votre article En cas de copier coller depuis Word, l outil de publication vous propose de nettoyer le code. C est très important de cliquer sur «ok» et de copier/coller votre texte dans le champ qui vous est proposé, et de cocher les cases «Ignorer les polices de caractères» et «Supprimer les styles». Cela permet de conserver une cohérence graphique générale sur le site grâce au modèle installé par défaut. Page 11 maj : 19/11/2012

12 Utilisation des couleurs Les couleurs préconisées (et utilisées pour les articles nationaux) sont le bleu foncé pour les titres de 1 er niveau et le bleu pour les titres de second niveau. La couleur orange, plus différenciable, est réservée pour les liens (autres articles, documents à télécharger, sites Internet, ). Elle se met automatiquement si vous cliquez sur le bouton pour créer un lien (voir plus loin). Donc éviter d utiliser la couleur orange qui pourrait induire l internaute en erreur pensant qu il y a un lien derrière les mots orange. Dans la pratique : Sélectionner le texte à colorer Cliquer sur l icône Cliquer sur la couleur qui convient Page 12 maj : 19/11/2012

13 Caractères spéciaux Cet icône vous permet d insérer les caractères spéciaux (puces, caractères accentués, flèches ) sans avoir à les coder en HTML (langage de page Internet). Dans la pratique : Placer vous là où le caractère doit être insérer. Cliquer sur l icône. Cliquer sur le caractère qui vous convient. Il s insère automatiquement dans le corps du texte. Page 13 maj : 19/11/2012

14 Insertion d une image dans le corps du texte Attention! Largeur à ne pas dépasser pour l image insérée dans le texte : 765 pixels de large Une image plus large déformera toute la structure du site. Dans la pratique : Cliquer sur Cliquer sur Parcourir le serveur. Une nouvelle fenêtre apparait. Si vous n avez jamais ajouté d image, la zone sera blanche. Si vous avez déjà ajouté des images, une liste s affichera avec le nom des images. Si vous avez déjà ajouté des images mais que la zone est blanche, réactualiser votre page en appuyant sur la touche F5 de votre clavier. Page 14 maj : 19/11/2012

15 Pour ajouter une nouvelle image, cliquer sur «Parcourir», puis choisir votre image sur votre disque dur. Cliquer sur «Ajouter à la liste» pour mettre le fichier sur le serveur. Le temps d ajout à la liste dépend de votre connexion Internet et de la taille de votre image. Le téléchargement doit prendre moins d une minute. Une fois le fichier téléchargé, le nom de l image apparaît sous forme de lien. Pour afficher l image dans le corps du texte, il suffit de cliquer sur le lien. La fenêtre des propriétés de l image Position sur le serveur Ce texte rempli la balise HTML «alt» qui a une double utilité : pour le référencement dans les moteurs de recherche, si un internaute écrit le mot sur le moteur, l article peut être retrouvé dans le cas où l image ne s affiche pas, le texte est affiché à la place. Modification de la taille de l image proportion de l image respectée proportion non respectée redonne la taille d origine Bordure : encadre l image d une bordure L espacement (en pixel) et l alignement se font par rapport aux textes. Page 15 maj : 19/11/2012

16 Insertion d un tableau Les tableaux sont surtout utilisés pour présenter des chiffres. Il est impératif de ne pas dépasser 765 pixels de large. Le plus simple est de créer vos tableaux en utilisant des valeurs en pourcentage (100%). Dans la pratique : Cliquer à l emplacement ou le tableau doit être insérer Cliquer sur La fenêtre des propriétés du tableau s ouvre Compléter les champs : En complétant le champ «largeur» par 100 et en choisissant «pourcentage», vous êtes sûr que votre tableau n excèdera pas la taille maximale. Contour (cellspading) : spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau Espacement (cellspacing) : spécifie l'espace en pixels entre les cellules du tableau Le résumé ne sert qu aux moteurs de recherche Page 16 maj : 19/11/2012

17 Cliquer sur «OK» Pour vous déplacer à l intérieur des cellules vous pouvez utiliser les flèches ou la souris. Important : pour supprimer des lignes ou en ajouter, les menus sont disponibles uniquement par le biais du clic droit de la souris. Par exemple pour ajouter 1 ligne : Placer le curseur là où il faut ajouter la ligne Cliquer sur le bouton droit de la souris Un menu contextuel apparaît avec plusieurs options dont : insérer une ligne, une colonne, fusionner les cellules Vous pouvez insérer des images dans les cellules (attention à la taille). Page 17 maj : 19/11/2012

18 Insertion d un lien Lien classique : Dans la pratique : Sélectionner le texte qui va servir de lien Cliquer sur : une fenêtre s ouvre qui vous permet de choisir le type de lien. Par défaut c est URL, c est le choix qui vous permet de créer un lien classique type : Dans le menu déroulant sous «protocole», 2 options peuvent vous servir : c est le début classique des adresses web, ou pour les liens vers un accès sécurisé. Page 18 maj : 19/11/2012

19 Lien pour que l internaute envoi un en cliquant sur un lien Dans la pratique : Sélectionner le texte qui va servir de lien. Cliquer sur : une fenêtre s ouvre qui vous permet de choisir le type de lien. Choisir « » dans type de lien Puis compléter les champs : - «Adresse » correspond à l adresse du destinataire du message - Sujet du message correspond à l objet (dans la mesure du possible éviter les caractères accentués) - «Corps du message» c est le corps du texte du mail. C est intéressant par exemple pour les demandes de brochures types, Sur le site L internaute va cliquer sur le lien (1), cette opération va déclencher l ouverture de sa messagerie (2) avec le contenu pré-saisi. Lien sur un C est exactement la même démarche, sauf qu il faut uniquement remplir le champ «adresse ». Suppression d un lien : Sélectionner le texte du lien. Cliquer sur. (2) La messagerie de l internaute s ouvre avec pour contenu les champs que vous avez complétés. (1) L internaute clique sur le lien Page 19 maj : 19/11/2012

20 Options de l article 1) Ajout d un article associé : option obsolète désactivée 2) Image de la marge Dans la pratique : Cliquer sur «IMAGE DE LA MARGE». Une fenêtre s ouvre qui vous propose d aller chercher l image sur votre disque dur. Cliquer sur «Parcourir» puis cliquer sur «Ajouter». L image apparaît dans la fenêtre. Cliquer sur «Valider» Cliquer sur «Fermer» Pour l image de la marge, le programme redimensionne automatiquement l image à la bonne taille (largeur max 187 px). Il est bien sûr toujours optimum de ne pas utiliser d images trop lourdes et d y mettre une image faisant déjà 187 pixels de large. 3) Documents à télécharger Cette rubrique permet de proposer en téléchargement des documents qui complètent, illustrent ou apportent une information complémentaire à l article (brochures, publications, affiches...). Les formats de document autorisés sont les fichiers Word (.doc), Excel (.xls), Acrobat (.pdf). Page 20 maj : 19/11/2012

21 Dans la pratique : Cliquer sur «DOCUMENT A TELECHARGER». Une fenêtre s ouvre qui vous propose d aller chercher l image sur votre disque dur. Cliquer sur «Parcourir». Donner un nom (c est le titre du lien qui apparaîtra pour télécharger le document tronqué à 20 signes pour l affichage). Puis cliquer sur «Ajouter le document». Si vous téléchargez plusieurs documents, vous pouvez déplacer leurs ordres en faisant un «cliquer/glisser». Cliquer sur «Valider l ordre» le cas échéant. Cliquer sur «Fermer». Image de la marge Image dans le corps du texte Documents à téléchargés (à la suite de chaque titre de document sont affichés le type et la taille correspondante) Prévisualiser et enregistrer votre article : Une fois votre article rédigé, cliquer sur «Prévisualiser» Si cela vous convient, cliquer sur «Enregistrer», sinon sur «Corriger». --> ce nouvel article apparaît dans la liste des articles seulement si on a cliqué sur Enregistrer. Page 21 maj : 19/11/2012

22 Utilisation des paramètres Dans la liste des articles, à droite du titre de l article choisi, cliquer sur le bouton (Editer l article) pour modifier votre article, puis sur l onglet «Paramètres». - Date de mise en ligne (Article visible sur le site à partir du) : (champ obligatoire) date à partir de laquelle l article sera mis en ligne sur le site. Vous pouvez ainsi écrire vos articles et programmer automatiquement sa mise en ligne. Pour réorganiser l ordre de l affichage des articles, vous pouvez modifier cette date. Les articles qui s affichent en premier sont les plus récents. - Date de validité (Retiré du site (pas supprimé) à partir du) : (champ facultatif) passé cette date, l'article ne sera plus visible sur le site, mais sera toujours présent dans le BackOffice et son lien sera rouge pour les différencier des articles en ligne. Si vous laissez le champ vide, l article sera toujours présent sur le site. Lorsque vous publiez une actualité, il est impératif de renseigner une date de validité. Une actualité ne doit pas excéder quelques semaines. - Déplacer l article : pour changer l'emplacement de l'article dans un autre ensemble "rubrique/sous-rubrique". Afficher l'article dans : - la sous-rubrique Actualités>Brèves du menu du Comité : en cochant cette case, l'article figure, en plus de l emplacement dans sa sous-rubrique, dans la sous-rubrique BREVES dans la rubrique ACTUALITES. - l'info de la Ligue en continu (page d'accueil nationale): en cochant cette case, un lien sur cet article sera affiché depuis la page d accueil du site national de la Ligue dans l encadré «L info de la Ligue en continu». - la newsletter mensuelle nationale : en cochant cette case, l'article sera proposé pour remplir la prochaine newsletter. Le siège envoi tous les mois une lettre d information (newsletter) à destination de tous les abonnés ayant demandés de la recevoir sur leur (formulaire en ligne sur le site : Votre participation ainsi que la date de validité des articles ont là aussi une grande importance. Page 22 maj : 19/11/2012

23 - l'agenda du Comité... : en cochant cette case, l'article sera proposé dans l AGENDA DU COMITE. Vous pouvez ajouter plusieurs dates pour un même article, par exemple les groupes de paroles, les conférences thématiques qui se répètent. Pour accéder à l agenda sur le site, cliquez dans le bandeau du haut sur l image AGENDA DU COMITE. A partir du moment où vous cochez la case «Agenda», des champs de formulaire s affichent pour vous permettre de rentrer la date de début (champ obligatoire), la date de fin, l heure de début et l heure de fin. Une fois les informations renseignées votre date s affiche sur la droite, vous pouvez alors la supprimer si besoin. Date créée Le titre de l article s affiche pour chaque date créée dans l agenda. Lorsqu on clique sur le titre, on arrive sur le texte de l article Page 23 maj : 19/11/2012

24 Dans la liste des articles, les titres des articles peuvent avoir 3 couleurs différentes : - jaune : l article n est pas encore visible sur le site, il le sera lorsque la date du jour sera égale à la date de mise en ligne ; - verte : l article est visible sur le site (la date de mise en ligne est postérieure ou égale à la date du jour) - rouge : l article a été archivé (date da validité atteinte), il n est plus visible sur le site Quelle que soit la couleur, vous pouvez toujours voir l article en cliquant sur son URL. Page 24 maj : 19/11/2012

25 Brèves Pour figurer dans cette sous-rubrique, un article doit avoir sa case «Brève» coché dans ses paramètres de publication. L onglet «brèves» reprend des articles récents qui, bien que normalement classés ailleurs, méritent de figurer dans l actualité. L utilisation des dates de validité (paramètres) permet de faire disparaître un article qui serait périmé de fait (exemple : une soirée spéciale au profit de la Ligue, une fois passée, n a plus de raison d être annoncée mais peut faire l objet d un nouvel article pour évoquer ses retombées). Cocher la case correspond à l article que vous voulez supprimer de cette liste (l article ne figurera plus dans cette rubrique mais ne sera pas supprimé pour autant). Page 25 maj : 19/11/2012

26 Outils Cliquer sur l onglet «Accueil» pour revenir à la page où les fonctionnalités ci-dessous sont proposées. (4) (3) (1) (2) (1) Newsletter : liste des articles marqués pour apparaître dans la prochaine newsletter (dans les paramètres de publication). (2) Gestion des journalistes : permet de donner des autorisations aux membres du Comité pour qu'ils puissent publier dans le journal du Comité (qui est une sorte de blog simplifié) (3) Aide : Contient les coordonnées du webmaster national. Un lien pour voir en ligne ce manuel mis à jour sera mis dans cette partie. (4) Moteur de recherche : Le moteur de recherche vous permet de retrouver un article rapidement soit par son contenu (mots clés), soit par son numéro d article. Les résultats sont affichés par Comité. Comment modifier un article existant? Cliquer sur la rubrique puis la sous-rubrique contenant l article. Sur la liste des articles, en cliquant sur une des icônes en face d un article, on accède aux fonctionnalités suivantes : Editer Dupliquer Supprimer Pour modifier un article existant, il faut cliquer sur Editer. Vous pouvez modifier un article indéfiniment. La fonction Dupliquer vous permet d utiliser un article existant comme modèle. C est intéressant dans le cas où vous avez créé un article avec des articles associés, des documents à télécharger qui correspondent aux 2 articles. Page 26 maj : 19/11/2012

27 NOTIONS DE BASE SUR LE TRAITEMENT DES IMAGES POUR LE WEB Type d image * L image matricielle (bitmap), constituée de l'assemblage de petits carrés élémentaires appelés pixels. Une couleur (codée sur 1 ou 3 octets ; 1 octet=2 8 =256 valeurs différentes) est attribuée à chacun de ces pixels. * L image vectorielle (vector format), constituée de la description des éléments constitutifs (figures géométriques simples, segments de droite, courbes de Bézier, etc.), de leur couleur et de leur emplacement. Les deux images ci-dessous illustrent cette différence sur un exemple simple (la lettre A majuscule en Arial italique de corps 30, agrandie 5 fois). L'image de gauche est issue du logiciel Photoshop, la grille matérialisant les pixels. L'image de droite est issue du logiciel Illustrator ou Flash, le dessin de la lettre A étant sélectionné. Compression pour le web La compression des images est primordiale dans un site. En général la résolution d un fichier destiné au web est de 72 dpi (dots per inch) ou ppp (points par pouce), maximum 96 dpi. Les dpi constituent le nombre de pixel par pouce d une image. dots = points = pixels. Le pouce est une unité de mesure britannique qui vaut à peu près 2,54 cm. La résolution (exprimée en dpi ou ppp), lie le nombre de pixels d'une image à ses dimensions réelles. Page 27 maj : 19/11/2012

28 Examinons le carré de gauche: il fait 2,54 cm de large (=1 pouce). il contient 3 points (3 pixels) en largeur. On a mis 3 points dans 1 pouce: la résolution est de 3 ppp (ou 3 dpi). Dans les carrés suivants (milieu et droite), on a mis 8 points dans 2,54 cm (8 dpi), puis 16 points (16 dpi) Plus la résolution est élevée, plus les points sont petits et nombreux, et plus l'image est fine. Exemple: A 3 dpi, difficile de dire de quelle lettre il s'agit. A 8 dpi, on voir que c'est un A majuscules. A 16 dpi, c'est encore mieux. Les images pour le web doivent être suffisamment compressée pour ne pas alourdir la page mais il faut également savoir faire un bon compromis entre le poids et la qualité de l'image et choisir le format de compression le plus adapté à l'image. Les 2 formats principaux utilisés pour le web sont le gif et le jpg. Page 28 maj : 19/11/2012

29 GIF (Graphic Interchange Format) Le format GIF est un format propriétaire, il est limité à 256 couleurs mais utilise une méthode de compression sans perte. Le GIF peut également permettre d'avoir des zones de votre image transparentes mais il ne permet pas différents niveaux de transparences. Le taux de compression va être déterminé par le nombre de couleurs conservées (256, 128, 64). Le nombre de couleur est l élément qui prime pour un GIF, ainsi une image de 2 couleurs de 2*2 px fait le même poids que la même image de 22*22 px. Le format GIF permet également un affichage entrelacé (ou progressif) : Le GIF entrelacé affichera une image progressivement, il est utilisé pour les images plus lourdes. Ceci permet de faire patienter l'internaute, mais alourdit par contre la taille du fichier et demande plus de ressources machine pour la décompression. Les GIFs animés : Il s'agit d'une succession d'images de mêmes formats qui s'enchaîneront à la suite sous la forme d'une animation. Le temps d'affichage de chaque image est paramétrable ainsi que le nombre de boucles que l'animation devra effectuer. A utiliser pour : les images avec beaucoup d'aplats de couleurs ou peu de couleurs ; les images composées avec du texte, les logos. Comment optimiser une image au format GIF Le poids d'une image GIF dépend en fait de trois facteurs principaux : le nombre de couleurs de la palette (de 1 à 256) la manière dont les couleurs de la palette sont échantillonnées par le logiciel, et éventuellement modifiées par l'opérateur le logiciel de dessin utilisé. - Le nombre de couleurs. Quand on réduit le nombre de couleurs d'une image GIF, sa palette prend moins de place, et la compression devient plus efficace. Ces deux facteurs contribuent à rendre le fichier plus léger, mais la diminution du nombre de couleurs dégrade l'image. L'optimisation d'une image GIF consiste donc à réaliser un compromis entre l'aspect de l'image et le poids de son fichier, en jouant principalement sur le nombre de couleurs. Le fait de réduire le nombre de couleurs d'une image constitue une perte d'information. Il n'est donc généralement pas correct de dire que le format GIF est non dégradant, même si la technique de compression utilisée (LZW) ne perd pas d'information. - La sélection des couleurs. Les logiciels de dessin proposent en général plusieurs options à l'opérateur. Ainsi, dans Photoshop, on peut choisir : Perception : le logiciel sélectionne les couleurs en donnant la priorité à celles auxquelles l'œil est le plus sensible ; Sélective : le logiciel fonctionne comme ci-dessus, mais privilégie les zones étendues de couleur et conserve les couleurs web présentes dans l image ; Adaptative : le logiciel retient en priorité les couleurs les plus utilisées dans l'image. Cette option est probablement la plus recommandable ; Web : le logiciel se limite aux 216 "couleurs web" (les couleurs du cube de Netscape). Cette option n'est plus utilisée aujourd'hui, parce que pratiquement tous les internautes utilisent un affichage comportant plus de 256 couleurs ; Personnalisée : l'opérateur conçoit sa propre palette. Les trois premières options conduisent à des résultats très voisins, qu'il s'agisse du poids de l'image ou de son aspect. Page 29 maj : 19/11/2012

30 JPEG/JPG (Joint Photographic Experts Group) La compression d'image se fait avec perte mais le nombre de couleurs n'y est pas limité. L algorithme de compression utilisé élimine des données peu perceptibles à l'œil, appelées redondances psycho-visuelles. La compression est déterminée en pourcentage qui détermine le degré de compression et rend l'image plus granuleuse dans les zones contenant des limites contrastées ou peu parfois créer des blocs nuisant à la restitution des détails. Le JPEG peut, comme le GIF peut, être progressif. Lorsque vous enregistrez vos images pour le web en JPEG, vous avez la possibilité, en plus du choix de degré de compression, de flouter votre image, ce qui réduira son poids. A utiliser pour : les photographies/images avec de nombreuses couleurs/nuances, avec des dégradés fins. Quelques conseils pour optimiser vos images : Spécifier toujours les dimensions de l'image lorsque vous les intégrez dans vos pages (attributs width et height et alt de la balise img). Le texte pourra ainsi s'afficher avant que vos images ne soient totalement chargées et le visiteur aura ainsi plus rapidement accès au contenu de votre page. Ne redimensionner jamais votre image dans Dreamweaver! La qualité d'une image redimensionnée dans dreamweaver sera altérée alors que le poids d'origine sera toujours le même. Pour modifier les dimensions d'une image, passer toujours par un éditeur graphique. Lors de la réalisation de miniatures, vous réduisez les dimensions de votre image, celle-ci devient donc plus floue. Pour améliorer son impact et sa lisibilité, modifier en les contrastes, rendez les contours plus nets à l'aide de votre éditeur graphique. N'utilisez les formats entrelacés que pour les grosses images supérieures à 30ko/50ko car cette option augmente le poids de l'image. Dans tous les cas, faire toujours plusieurs essais pour voir quel format et quel taux de compression sera le plus adapté à votre image et tester tous les paramètres qui sont à votre disposition pour chaque format. Page 30 maj : 19/11/2012