Charte graphie de site web - UTC
Choix techniques. Charte graphique de site web. Sujet. Aspect de la page ....
Liens de survol : blanche du codage « #FFFFFF »; Liens visités : blanche du
codage ... Arial, Helvetica, sans-serif ;; Taille de police: 24 pts ;; Poids de poilice:
bord ;.
part of the document
Table des matières
TOC \o "1-5" \h HYPERLINK \l "_Toc105598414" Présentation générale : PAGEREF _Toc105598414 \h 2
HYPERLINK \l "_Toc105598415" Concept PAGEREF _Toc105598415 \h 2
HYPERLINK \l "_Toc105598416" Public cible PAGEREF _Toc105598416 \h 2
HYPERLINK \l "_Toc105598417" Objectifs PAGEREF _Toc105598417 \h ïÿ*g[INfN~{0
HYPERLINK \l "_Toc105598418" Objets à manipuler PAGEREF _Toc105598418 \h 3
HYPERLINK \l "_Toc105598419" Structure et navigation PAGEREF _Toc105598419 \h 3
HYPERLINK \l "_Toc105598420" Formes et degré d interactivité PAGEREF _Toc105598420 \h 4
HYPERLINK \l "_Toc105598421" Choix techniques PAGEREF _Toc105598421 \h 4
HYPERLINK \l "_Toc105598422" Charte graphique de site web PAGEREF _Toc105598422 \h 5
HYPERLINK \l "_Toc105598423" Sujet PAGEREF _Toc105598423 \h 5
HYPERLINK \l "_Toc105598424" Aspect de la page PAGEREF _Toc105598424 \h 5
HYPERLINK \l "_Toc105598425" Liens de la page PAGEREF _Toc105598425 \h 5
HYPERLINK \l "_Toc105598426" En tête de la page PAGEREF _Toc105598426 \h 5
HYPERLINK \l "_Toc105598427" Titre de la page PAGEREF _Toc105598427 \h 5
HYPERLINK \l "_Toc105598428" Codage de la page PAGEREF _Toc105598428 \h 5
HYPERLINK \l "_Toc105598429" Charte du titre PAGEREF _Toc105598429 \h 5
HYPERLINK \l "_Toc105598430" Charte du sous titre PAGEREF _Toc105598430 \h 5
HYPERLINK \l "_Toc105598431" Charte de corps du texte PAGEREF _Toc105598431 \h 5
HYPERLINK \l "_Toc105598432" Charte de mot clé PAGEREF _Toc105598432 \h 5
HYPERLINK \l "_Toc105598433" Charte de tableau 1 PAGEREF _Toc105598433 \h 5
HYPERLINK \l "_Toc105598434" Charte de tableau 2 PAGEREF _Toc105598434 \h 7
HYPERLINK \l "_Toc105598435" Charte de tableau 3 PAGEREF _Toc105598435 \h 7
HYPERLINK \l "_Toc105598436" Charte de tableau 4 PAGEREF _Toc105598436 \h 7
HYPERLINK \l "_Toc105598437" Charte de tableau 5 PAGEREF _Toc105598437 \h 7
HYPERLINK \l "_Toc105598438" Charte dimage Gif PAGEREF _Toc105598438 \h 7
HYPERLINK \l "_Toc105598439" Charte dimage Jpg PAGEREF _Toc105598439 \h 7
HYPERLINK \l "_Toc105598440" Gestion des documentations PAGEREF _Toc105598440 \h 8
HYPERLINK \l "_Toc105598441" Sujet PAGEREF _Toc105598441 \h 8
HYPERLINK \l "_Toc105598442" Nomination dimage PAGEREF _Toc105598442 \h 8
HYPERLINK \l "_Toc105598443" Nomination de page PAGEREF _Toc105598443 \h 8
HYPERLINK \l "_Toc105598444" Nomination de fenêtre PAGEREF _Toc105598444 \h 8
HYPERLINK \l "_Toc105598445" Nomination danimation PAGEREF _Toc105598445 \h 8
HYPERLINK \l "_Toc105598446" Nomination de vidéo PAGEREF _Toc105598446 \h 8
HYPERLINK \l "_Toc105598447" Gestion de la documentation PAGEREF _Toc105598447 \h 8
HYPERLINK \l "_Toc105598448" Map Title PAGEREF _Toc105598448 \h 10
Projet « À la découverte de Photoshop »
Présentation générale :
ConceptNotre projet consiste à réaliser un projet pédagogique multimédia dont le but est de permettre aux navigateurs de prendre en main Photoshop, de prendre connaissance des grands principes sur lesquels se base Photoshop et apprendre à retoucher des photos.
ObjectifsApports
Pour mettre en avant le mode tutorial nous aimerions introduire :
des exercices interactifs
des quiz avec leur correction
des vidéos filmant et commentant les opérations à suivre sur Photoshop
un index des concepts avec des hyperliens (pas sûr)
des images animées pour illustrer les concepts de Photoshop
Questionnements et émotions provoqués
Nous souhaitons permettre au navigateur de maîtriser les principales manipulations de Photoshop pour le libérer du poids technique afin quil puisse, par la suite, laisser sexprimer sa création artistique. Et nous souhaitons linviter à faire partager et à exposer ses uvres dans une galerie en ligne. Nous souhaiterions inciter le public à aller plus en profondeur dans la maîtrise des fonctions secondaires de Photoshop.
Connaissances, compétences apportées
Nous souhaiterions apporter des connaissances de base sur Photoshop aussi bien théoriques que pratiques.
Public ciblePublic
Ce projet sadresse aux étudiants de deuxième année du master Dicit, aux étudiants de SI28 mais aussi à tous ceux qui ne connaissent pas Photoshop.
Connaissances
Ce public na aucune connaissance de Photoshop, ce sont des débutants sur ce sujet.
Attentes
Ce public sattend tout dabord à prendre en main Photoshop, à connaître ses grands principes, à tester ses connaissances (quiz), puis à être accompagné pas à pas dans la retouche dimage sous forme dexercices.
Modes de consultation
Ce public semble avoir deux modes de consultation :
une entrée pour les concepts
une entrée directe sur les exercices traitant différents sujetsContinuez page suivante
Objets à manipulerintitulé
Nature
Intitulés des exercices
texte
Définition des concepts
texte
Zoom sur un pixel
Animation flash
Synthèse additive et soustractive
Animation flash
Diaporama dune image sous différents formats
Diaporama dimages
Explications pour utiliser les outils
Vidéo screencam avec son et déplacement de la souris
Différence entre Image matricielle et vectorielle
Animation flash
Effet des espaces de couleurs sur une image
Animation flash
Effet de la variation des 3 principaux paramètres sur une photo
Animation flash
quiz
Dreamweaver
Plan du site
Dreamweaver
galerie
Dreamweaver
Dimensions dun pixel
images
Images finales à reproduire
images
Images comme support de travail
images
Graphique des 3 paramètres de couleurs en mode RVB
images
Structure et navigationNous pensons utiliser une structure de type arborescente, séquentielle avec une navigation par liens hypertexte. (cf. schéma)
À partir de la page daccueil nous souhaitons organiser notre projet en 5 menus ouvrant chacun sur des nouvelles pages :
introduction aux concepts de Photoshop comprenant les sous-menus:
définition dune image, format dune image, espace de couleurs, définition des calques, définition de masques. Chaque sous-menu souvrira sur une nouvelle page.
Applications sur Photoshop comprenant plusieurs exercices.
Types dexercices : sur les outils de sélection, sur les tampons, sur les calques et les masques. (si on arrive à faire tous ces exercices)
Quiz : lun testant les connaissances sur les concepts de Photoshop et lautre testant les connaissances sur les manipulations de Photoshop
Plan du site
Galerie dimages, pour mettre en ligne sur le site, les photos que lon a travaillées, et si lon veut, expliquer les méthodes que lon a utilisées pour les réaliser.
Formes et degré dinteractivitéCliquer sur des hyperliens
Démarrer et arrêter un diaporama
Démarrer et arrêter une vidéo (boîte de dialogue avec demande de revoir la vidéo ou passer à la vidéo suivante)
Manipuler un curseur pour modifier la valeur dun paramètre
Passer la souris sur une image volante
Télécharger un fichier
Lien pour ouvrir un nouveau fichier sur Photoshop
Imprimer la consigne de lexercice
Imprimer les concepts
Cocher des cases de QCM
Mettre son travail en ligne
Choix techniquesPartie 1 : Principaux concepts de Photoshop :
Pour illustrer la définition de pixel nous souhaitons créer une petite animation sur le zoom dune image qui agrandit les pixels. Pour montrer la différence entre une image matricielle et une image vectorielle on fera une animation flash.
Pour rendre plus vivante la définition despaces de couleur, nous souhaitons utiliser une animation flash montrant le résultat de lapplication des différents types despaces de couleurs sur une même image. Les images en mode RVB et CMJN donneront des liens vers une autre animation flash explicant la synthèse additive et soustractive.
Pour expliquer les rôles des différents formats nous présenterons sous forme de diaporama une image enregistrée en différents formats.
Pour bien saisir les concepts de saturation, luminance, teinte, nous nous proposons de créer en flash pour chacun de ces paramètres, une règle avec 7 degrés (val min,-2,-1, 0, 1, 2, val max) que le navigateur pourra manipuler pour voir les différences.
Partie 2 : Manipluation :
On entre dans chaque exercice par une image-hyperlien. Cette image représente le résultat obtenu à la fin de lexercice (cest une image survolée qui, au passage de la souris représente limage de laquelle on part). Quand on clique sur limage, cela ouvre une page avec des explications pour résoudre lexercice, la consigne, une fenêtre vidéo et limage initiale à télécharger.
Partie 3 : Quiz
de type vrai ou faux:Publication Title
Overview
Introduction
ContentsThis publication contains the following topics:
TopicSee Page
Charte graphique de site web
SujetNous présentons ici les charte graphie du site web du projet « à la découverte de Photosop », le projet de SI28.
Aspect de la pageVoici la charte daspect de la page :
Police de la page : se lie avec les styles CSS
Taille de police : se lie avec les styles CSS
Couleur de texte : se lie avec les styles CSS
Couleur darrière-plan : bleu foncé du codage « #000066 »
Image darrière-plan : aucune
Marge gauche : 0 pixel
Marge droite : automatique
Marge haut : 0 pixel
Marge bas : 0 pixel
Liens de la pageVoici la charte de liens de la page :
Police des liens : même que la page
Taille : se lie avec les styles CSS
Couleur des liens : jaune foncé du codage « #FF9900 »
Liens de survol : blanche du codage « #FFFFFF »
Liens visités : blanche du codage « FFFFFF »
Liens actifs : jaune foncé du codage « #FF9900 »
Style souligné : jamais souligné
En tête de la pageVoici la charte den tête de la page :
Aucune définition sur ce terme
Titre de la pageVoici la charte de titre de la page :
Titre de la page daccueille : « A la découverte de Photoshop_Index »
Titre de la page de plan : « A la découverte de Photoshop_Plan »
Titre de la page daccueille de terme « concepts » : « A la découverte de Photoshop_Concepts_Index ». La même charte de titre pour les trois termes restés, le terme « manipulation », le terme « galerie » et le terme « quiz »
Titre de la page « image numérique » de terme « concepts » : « A la découverte de Photoshop_Concepts_Image numérique ». la même charte de titre pour les sous terme restés, le sous terme « espaces de couleur », le sous terme « formats dimage », le sous terme « paramètres fondamentaux de Photoshop », le sous terme « exerce 1 », le sous terme « exerce 2 », le sous terme « exerce 3 », le sous terme « exerce 4 ».
Codage de la pageVoici la charte de codage de la page :
Codage de la page : Europe occidentale.
Charte du titreVoici la charte du titre du site web :
Famille de police: Verdana, Arial, Helvetica, sans-serif ;
Taille de police: 24 pts ;
Poids de poilice: bord ;
Couleur de police : #FFCC66.
Charte du sous titreVoici la charte des sous titre du site web :
Famille de police: Verdana, Arial, Helvetica, sans-serif ;
Taille de police: 18 pts ;
Style de police : normal ;
Pois de police : bord ;
Couleur de police : #FFFFFF.
Charte de corps du texteVoici la charte des corps du texte du site web :
Famille de police: Verdana, Arial, Helvetica, sans-serif ;
Taille de police: 12 pts ;
Style de police : normal ;
Couleur de police : #FFFFFF.
Charte de mot cléVoici la charte du mot clé du site web :
Famille de police: Verdana, Arial, Helvetica, sans-serif ;
Taille de police: 12 pts ;
Pois de police : bord ;
Couleur de police : #FFCC66.
Charte de tableau 1Le structure de la page du site web de projet « à la découverte de Photosop » du projet SI28, est défini par le tableau, voici le charte de tableau.
Voici la charte de tableau de page daccueille, tableau au premier niveau hiérarchique :
Largeur : 1024 pixels
Hauteur : 570 pixels
Nombreux de colonnes : 1 colonnes
Nombreux de rangs : 3 rangs
Informations détaillées des paramètres de tableau : voir lannexe 1-01
Charte de tableau 2Voici la charte de tableau de la page daccueille de terme, au deuxième niveau hiérarchique :
Largeur : 980 pixels
Hauteur : selon les contenus dans le tableau, défini par pixels
Nombreux de colonnes : 3 colonnes
Nombreux de rangs : selon les contenus dans le tableau
Informations détaillées des paramètres de tableau : voir lannexe 1-02
Charte de tableau 3Voici la charte de tableau de la page du terme de « concept », au troisième niveau hiérarchique :
Largeur : 980 pixels
Hauteur : selon les contenus dans le tableau, défini par pixels
Nombreux de colonnes : 3 colonnes
Nombreux de rangs : selon les contenus dans le tableau, défini par pixels
Informations détaillées des paramètres de tableau : voir lannexe 1-03.
Charte de tableau 4Voici la charte de tableau de la page du terme de «manipulation », au troisième niveau hiérarchique :
Largeur : 980 pixels
Hauteur : selon les contenus dans le tableau, défini par pixels
Nombreux de colonnes : 2 colonnes
Nombreux de rangs : selon les contenus dans le tableau
Informations détaillées des paramètres de tableau : voir lannexe 1-04
Charte de tableau 5Voici la charte de tableau de la page du terme de « concept » au quatrième niveau hiérarchique :
Largeur : 700 pixels
Hauteur : selon les contenus dans le tableau, défini par pixels
Nombreux de colonnes : 3 colonnes
Nombreux de rangs : selon les contenus dans le tableau, défini par pixels
Informations détaillées des paramètres de tableau : voir lannexe 1-05
Charte dimage GifVoici la charte des paramètres globaux des images du format Gif :
Résolution dimage : 72 pixels par pouce
Espace de couleur dimage : espace index de 8 bits
Compression dimage : compression de 80%, haute qualité
Taille dimage :Voir lannexe 1-06
Charte dimage JpgVoici la charte des paramètres globaux des images du format Jpg :
Résolution dimage : 72 pixels par pouce
Espace de couleur dimage : espace RVB de 24 bits
Compression dimage : compression de niveau 8, haute qualité
Les paramètres globaux des images du format GIF
Taille dimage :Voir lannexe 1-07
Gestion des documentations
SujetLe site web du projet « à la découverte de Photosop » est réalisé par deux personnes, et en pensant que les liens de site sont fortement lié aux noms des fichiers et des pages, nous avons donc défini tout dabord la règle de nommer les fichiers et les pages, voici trouvez ci-dessous nous réglages et nous méthode de gestion des documents et des fichiers
Nomination dimageVoici la règle de nomination dimage :
Le nom dimage est composé par 10 chiffres et une lettre majuscule, les premiers 8 chiffres du fichier indiquent la date de la création du fichier, une lettre majuscule représente la première lettre du nom du créateur, les derniers 2 chiffres du fichier indiquent lordre de la création
Exemple : un image a un nom « 20050531L01 » signifie que cette fichier a été crée au date 31/05/2005, cest la première image crée par LU Ye de ce jour.
Nomination de pageVoici la règle de nomination de page :
Le nom de page est composé par quatre lettres, une tire ligne et deux chiffres.
Exemple : une page a un nom « conc_00 » il signifie que cest une page du terme concept, cest la première page du terme « concept »
Nomination de fenêtreVoici la règle de nomination de fenêtre :
Le nom de fichier est composé par le nom de page où sort la fenêtre plus une lettre indiquant lordre de cette page
Exemple : une fenêtre a un nom « conc_01a » il signifie que cest une fenêtre sortie, elle est fait un parti de la page « conc_00 », elle est la première fenêtre quon a faite pour la page « conc_00 »
Nomination danimationVoici la règle de nomination danimation :
En reprenant la règle de nomination des images.
Nomination de vidéoVoici la règle de nomination de vidéo :
En reprenant la règle de nomination des images.
Gestion de la documentationVoici la construction des documents
Une page index, au premier niveau hiérarchique
Un document « picture » pour mettre toutes les images du format Jpg et du format Gif, au premier niveau hiérarchique
Un document « pages » pour mettre toutes les pages et les fenêtres sorties, au niveau premier hiérarchique
Un document « animation » pour mettre toutes les animations, au niveau premier hiérarchique
Un document « vidéo » pour mettre toutes les vidéos, au niveau premier hiérarchique
&'()EFGH_`a{|}~ ¡¢©ª«ÅüôüôáÓÊÓ°áÓʢʢ¢áwáÓÊÓ]áÓÊ¢Ê2júhì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHuh89%mHnHu j}hì^UmHnHujhì^UmHnHu2jhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu$jhÈhì^0J%UmHnHujhì^Uhì^Ë
Ä
zrÑ
m
À
h½fÁkÁmúõèÛÛÛÛÛÛÛèÛÛÛÛÛÛÛÛÛÛÛÛÛÛ&
Æ$
^gdì^$
Æ$
^ gdì^gdì^ gdì^¬ìýÅÆÇÈÉÊËÌÍéêëìøùú 8 9 : ; D E F `
ïáØáŴŦ¦Å¦áráØáŴŦ¦XŦáá2jîhì^hì^>*B*UmHnHphÿu jqhì^UmHnHu2jôhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jwhì^UmHnHu!
T
V
X
Z
¸
º
¼
¾
À
Â
Ä
Æ
È
68:nðâϾϰ§°Ï°§â§|âsâϾϰ§°Yϰ§â§2jehì^hì^>*B*UmHnHphÿuh89%mHnHu jèhì^UmHnHu2jkhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHujhì^UmHnHuh89%5\mHnHo(tHunprtvxz|~¶¸º¼úüþ !=>?@PQRlïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jYhì^hì^>*B*UmHnHphÿu jÜhì^UmHnHu2j_hì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jâhì^UmHnHu lmnopqrst¯°±ËÌÍÎÏÐÑÒÓïðñò÷øù
ïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jMhì^hì^>*B*UmHnHphÿu jÐhì^UmHnHu2jShì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jÖhì^UmHnHu
7
8
9
:
K
L
M
g
h
i
j
k
l
m
n
o
ïáØáŴŦ¦ÅsábáØáŴŦ¦HÅ2jA
hì^hì^>*B*UmHnHphÿu jÄ hì^UmHnHuhÈhì^0J%mHnHtHu2jG hì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jÊhì^UmHnHu
º
»
¼
½
¾
¿
À
Á
Â
Þ
ß
à
á
ó
ô
õ
3456FGñèÚèÉÚÀÚñèññèÚèqÚÀÚñèñWñè2j5hì^hì^>*B*UmHnHphÿu j¸hì^UmHnHu2j;hì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHu j¾
hì^UmHnHujhì^UmHnHuhì^mHnHuhÈhì^0J%mHnHu"GHbcdefghij·¸¹º»¼½¾¿ÛÜÝÞíîï òéØòÏò¼«¼é¼éòéròÏò¼«¼éX¼éòé2j)hì^hì^>*B*UmHnHphÿu j¬
hì^UmHnHu2j/
hì^hì^>*B*UmHnHphÿuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHu j²hì^UmHnHuhì^mHnHujhì^UmHnHu"
-./0DEF`abcdefgh
¡»ïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jhì^hì^>*B*UmHnHphÿu j hì^UmHnHu2j#hì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu j¦hì^UmHnHu »¼½¾¿ÀÁÂÃßàáâóôõ3456IJKeïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jhì^hì^>*B*UmHnHphÿu jhì^UmHnHu2jhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jhì^UmHnHu efghijklm ¡»¼½¾¿ÀÁÂÃßàáâõö÷ïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jhì^hì^>*B*UmHnHphÿu jhì^UmHnHu2jhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jhì^UmHnHu 5678KLMghijklmno¡¢£½ïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jùhì^hì^>*B*UmHnHphÿu j|hì^UmHnHu2jÿhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jhì^UmHnHu ½¾¿ÀÁÂÃÄÅáâãäö÷ø6789KLMgïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jíhì^hì^>*B*UmHnHphÿu jphì^UmHnHu2jóhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jvhì^UmHnHu mÃmÊg¼mÃ!npq±²º¸òòòåòòòòòòòåàÛÖÑÌú $Ifgdì^ $Ifgdì^gd5kÓgdì^gdì^ gdì^gdì^$
Æ$
^ gdì^&
Æ$
^gdì^ghijklmno¨©ªÄÅÆÇÈÉÊËÌèéêëðñòïáØáŴŦ¦Å¦áráØáŴŦ¦XŦá2jáhì^hì^>*B*UmHnHphÿu jdhì^UmHnHu2jçhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jjhì^UmHnHu
0123EFGabcdefghi
ïáØáŴŦ¦Å¦áráØáŴŦ¦XÅ2jÕhì^hì^>*B*UmHnHphÿu jXhì^UmHnHu2jÛhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu j^hì^UmHnHu¶·¸¹º»¼½¾ÚÛÜÝòóô23ïæØæÇؾث«ær«æØæaؾث«æ jLhì^UmHnHu2jÏhì^hì^>*B*UmHnHphÿuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHu jRhì^UmHnHujhì^UmHnHuhì^mHnHuhÈhì^0J%mHnHsH u345KLMghijklmno¡¢£½¾¿ÀÁÂÃÄÅáâæÓż®¼®®ÓÓżÅiÓż®¼X®®ÓÓżŠj@hì^UmHnHu2jÃhì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHuh89%mHnHu jFhì^UmHnHujhì^UmHnHuhì^mHnHuhÈhì^0J%mHnHu$jhÈhì^0J%UmHnHu2jÉhì^hì^>*B*UmHnHphÿu âãäÿ !"#?@ABKLMghiklmnæÓż®¼®®ÓÓżÅiÓY¼®¼H®®Ó j4!hì^UmHnHuhÈhì^0J%mHnHsH u2j· hì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHuh89%mHnHu j: hì^UmHnHujhì^UmHnHuhì^mHnHuhÈhì^0J%mHnHu$jhÈhì^0J%UmHnHu2j½hì^hì^>*B*UmHnHphÿunopq°±¹ºÄÌþ#Îò^_lrkuJ_ðñ/78CDR]gr&A&* *+¬+Ä+Å+Æ+G,W,c,d,÷ðìèìðèáìÚìÚìÚìÓèÌèÌèÌèÌèÄèÌè»´¨è´è´èÌèÌèÌè¡hbhbhbhSth89%h89%mH sH h89%h89%h5kÓh5kÓhS|¿h5kÓnHo(tHhS|¿h5kÓh5kÓnHo(tHh5kÓB*
phh5kÓ5\hì^h5kÓhì^5\h89%hì^h5kÓhì^hì^hì^jhì^U1¸¹ºÄÌ(FÁýþ${{nnnnn{{
&F$Ifgdì^ $Ifgdì^ $Ifgdì^gdì^lkd±!$$IfFÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö$ÍÎô]^_lsjöéööwriööööö $Ifgdì^gdì^qkdZ"$$IfFÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöööÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö
Æ8$Ifgdì^ $Ifgdì^jkuIJ`±ñò
ööööööéé|wri $Ifgdì^gd5kÓgd5kÓlkd#$$IfFÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö
&F$Ifgdì^ $Ifgdì^(/0HNññxx
$Ifgdì^K$nkd¬#$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö
$$Ifa$gdì^K$NOgm
$Ifgdì^K$nkdJ$$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faömn
$Ifgdì^K$nkdè$$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö³Ã
$Ifgdì^K$nkd%$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
FaöÃÄò
$Ifgdì^K$nkd$&$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö,a
$Ifgdì^K$nkdÂ&$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faöab¤
$Ifgdì^K$nkd`'$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö¤¥Ñá
$Ifgdì^K$nkdþ'$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faöáâ"2
$Ifgdì^K$nkd($IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö238D
$Ifgdì^K$nkd:)$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
FaöDER^
$Ifgdì^K$nkdØ)$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö^_gs
$Ifgdì^K$nkdv*$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faöst
$Ifgdì^K$nkd+$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö®µ
$Ifgdì^K$nkd²+$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faöµ¶ÖÝ
$Ifgdì^K$nkdP,$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
FaöÝÞ
$Ifgdì^K$nkdî,$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö $Ifgdì^nkd-$IfK$L$FÖÖ0ã ÂÞ ß Ö0ÿÿÿÿÿÿöÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
Faö 5 ³ ´ -!o!"M"Ù"e#r#{{{n{n{nn
&F$Ifgdì^ $Ifgdì^ $Ifgdì^gd5kÓlkd*.$$IfFÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faör#$$$;$V$w$ç$#%J%a%%¶%ò
wjjjjjjjj
&F$Ifgdì^ $Ifgdì^gd5kÓlkdÓ.$$IfFÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö
&F$Ifgdì^¶%Ì%ä%&&&&A&0'()*òòò
wnaaaa
&F $Ifgdì^ $Ifgdì^ $Ifgdì^gd5kÓlkd|/$$IfFÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö
&F$Ifgdì^** *+++Ã+Ä+Å+Ø+á+â+ï+öööööözul $Ifgd89%gd89%gd89%gd89%gdblkd%0$$IfFÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö $Ifgdì^ï+ð+ñ+ò+û++,ö "$Ifgd89% $Ifgd89%gd89%VkdÎ0$$IflÖ0ÿT$À7öööÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
laöpÖÿÿÿÿ #$Ifgd89%+,,,-,3,