Td corrigé Charte graphie de site web - UTC pdf

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 d’image Gif  PAGEREF _Toc105598438 \h 7
 HYPERLINK \l "_Toc105598439" Charte d’image 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 d’image  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 d’animation  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 qu’il puisse, par la suite, laisser s’exprimer sa création artistique. Et nous souhaitons l’inviter à 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 s’adresse 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 n’a aucune connaissance de Photoshop, ce sont des débutants sur ce sujet.

Attentes 
Ce public s’attend tout d’abord à prendre en main Photoshop, à connaître ses grands principes, à tester ses connaissances (quiz), puis à être accompagné pas à pas dans la retouche d’image sous forme d’exercices.

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 d’une image sous différents formats
Diaporama d’images

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 d’un 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 d’accueil 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 d’une image, format d’une image, espace de couleurs, définition des calques, définition de masques. Chaque sous-menu s’ouvrira sur une nouvelle page.
Applications sur Photoshop comprenant plusieurs exercices.
Types d’exercices : sur les outils de sélection, sur les tampons, sur les calques et les masques. (si on arrive à faire tous ces exercices)
Quiz : l’un testant les connaissances sur les concepts de Photoshop et l’autre testant les connaissances sur les manipulations de Photoshop
Plan du site
Galerie d’images, pour mettre en ligne sur le site, les photos que l’on a travaillées, et si l’on veut, expliquer les méthodes que l’on a utilisées pour les réaliser.
Formes et degré d’interactivité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 d’un 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 l’exercice
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 d’une 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 d’espaces de couleur, nous souhaitons utiliser une animation flash montrant le résultat de l’application des différents types d’espaces 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 l’exercice (c’est une image survolée qui, au passage de la souris représente l’image de laquelle on part). Quand on clique sur l’image, cela ouvre une page avec des explications pour résoudre l’exercice, la consigne, une fenêtre vidéo et l’image 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 d’aspect 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 d’arrière-plan : bleu foncé du codage « #000066 »
Image d’arriè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 d’en 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 d’accueille : « A la découverte de Photoshop_Index »
Titre de la page de plan : « A la découverte de Photoshop_Plan »
Titre de la page d’accueille 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 d’image », 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 d’accueille, 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 l’annexe 1-01
Charte de tableau 2Voici la charte de tableau de la page d’accueille 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 l’annexe 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 l’annexe 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 l’annexe 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 l’annexe 1-05
Charte d’image GifVoici la charte des paramètres globaux des images du format Gif :
Résolution d’image : 72 pixels par pouce
Espace de couleur d’image : espace index de 8 bits
Compression d’image : compression de 80%, haute qualité
Taille d’image :Voir l’annexe 1-06
Charte d’image JpgVoici la charte des paramètres globaux des images du format Jpg :
Résolution d’image : 72 pixels par pouce
Espace de couleur d’image : espace RVB de 24 bits
Compression d’image : compression de niveau 8, haute qualité
Les paramètres globaux des images du format GIF
Taille d’image :Voir l’annexe 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 d’abord 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 d’imageVoici la règle de nomination d’image :
Le nom d’image 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 l’ordre de la création
Exemple : un image a un nom « 20050531L01 » signifie que cette fichier a été crée au date 31/05/2005, c’est 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 c’est une page du terme concept, c’est 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 l’ordre de cette page
Exemple : une fenêtre a un nom « conc_01a » il signifie que c’est une fenêtre sortie, elle est fait un parti de la page « conc_00 », elle est la première fenêtre qu’on a faite pour la page « conc_00 » 
Nomination d’animationVoici la règle de nomination d’animation :
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áÓÊÓ]áÓÊ¢Ê2júhì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHuh89%mHnHu j}hì^UmHnHujhì^UmHnHu2jhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu$jhÈhì^0J%UmHnHujhì^Uhì^Ë 
Ä
z  r Ñ 
m
À
h½fÁkÁmúõèÛÛÛÛÛÛÛèÛÛÛÛÛÛÛÛÛÛÛÛÛÛ &
Ɓ$
„€^„€gdì^ $
Ɓ$
„ ^„ gdì^gdì^ gdì^¬ìýÅÆÇÈÉÊËÌÍéêëìøùú         8 9 : ; D E F `
ïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XŦáá2jîhì^hì^>*B*UmHnHphÿu jqhì^UmHnHu2jôhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jwhì^UmHnHu!






T
V
X
Z
€
‚
„
¸
º
¼
¾
À
Â
Ä
Æ
È
   6 8 : n ðâϾϰ§°Ï°§â§|âsâϾϰ§°Yϰ§â§2jehì^hì^>*B*UmHnHphÿuh89%mHnHu jèhì^UmHnHu2jkhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHujhì^UmHnHuh89%5\mHnHo(tHun p r t v x z | ~ ¶ ¸ º ¼ ú ü þ        ! = > ? @ P Q R l ïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XŦá2jYhì^hì^>*B*UmHnHphÿu jÜhì^UmHnHu2j_hì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jâhì^UmHnHu l m n o p q r s t  ‘ ’ “ ¯ ° ± Ë Ì Í Î Ï Ð Ñ Ò Ó ï ð ñ ò ÷ ø ù 
ïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XŦá2jMhì^hì^>*B*UmHnHphÿu jÐhì^UmHnHu2jShì^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Å2jA
hì^hì^>*B*UmHnHphÿu jÄ hì^UmHnHuhÈhì^0J%mHnHtHu2jG hì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jÊhì^UmHnHuŽ
ž
Ÿ
 
º
»
¼
½
¾
¿
À
Á
Â
Þ
ß
à
á
ó
ô
õ
3456FGñèÚèÉÚÀÚ­œ­ñèñ‚­ñèÚèqÚÀÚ­œ­ñèñW­ñè2j5 hì^hì^>*B*UmHnHphÿu j¸ hì^UmHnHu2j; hì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHu j¾
hì^UmHnHujhì^UmHnHuhì^mHnHuhÈhì^0J%mHnHu"GHbcdefghij†‡ˆ‰›œ·¸¹º»¼½¾¿ÛÜÝÞíîï òéØòÏò¼«¼éƒ¼éòéròÏò¼«¼éX¼éòé2j)hì^hì^>*B*UmHnHphÿu j¬
hì^UmHnHu2j/
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Ŧá2jhì^hì^>*B*UmHnHphÿu j hì^UmHnHu2j#hì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu j¦hì^UmHnHu »¼½¾¿ÀÁÂÃßàáâóôõ3456IJKeïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XŦá2jhì^hì^>*B*UmHnHphÿu j”hì^UmHnHu2jhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jšhì^UmHnHu efghijklm‰Š‹ŒŸ ¡»¼½¾¿ÀÁÂÃßàáâõö÷ïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XŦá2jhì^hì^>*B*UmHnHphÿu jˆhì^UmHnHu2j hì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jŽhì^UmHnHu 5678KLMghijklmno‹ŒŽ¡¢£½ïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XŦá2jùhì^hì^>*B*UmHnHphÿu j|hì^UmHnHu2jÿhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu j‚hì^UmHnHu ½¾¿ÀÁÂÃÄÅáâãäö÷ø6789KLMgïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XŦá2jíhì^hì^>*B*UmHnHphÿu jphì^UmHnHu2jó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Ŧá2jáhì^hì^>*B*UmHnHphÿu jdhì^UmHnHu2jçhì^hì^>*B*UmHnHphÿuhì^mHnHuhÈhì^0J%mHnHu!hì^CJKHmHnHsH tHu$jhÈhì^0J%UmHnHuh89%mHnHujhì^UmHnHu jjhì^UmHnHu 
0123EFGabcdefghi…†‡ˆïáØáŴŦ¦ƒÅ¦áráØáŴŦ¦XÅ2jÕhì^hì^>*B*UmHnHphÿu jXhì^UmHnHu2jÛ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ì^UmHnHu2jÏ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ì^UmHnHu2jÃhì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHuh89%mHnHu jFhì^UmHnHujhì^UmHnHuhì^mHnHuhÈhì^0J%mHnHu$jhÈhì^0J%UmHnHu2jÉhì^hì^>*B*UmHnHphÿu âãäÿ !"#?@ABKLMghiklmnæÓż®¼®”®ÓƒÓżÅiÓY¼®¼H®”®Óƒ j4!hì^UmHnHuhÈhì^0J%mHnHsH u2j· hì^hì^>*B*UmHnHphÿu!hì^CJKHmHnHsH tHuh89%mHnHu j: hì^UmHnHujhì^UmHnHuhì^mHnHuhÈhì^0J%mHnHu$jhÈhì^0J%UmHnHu2j½hì^hì^>*B*UmHnHphÿunopq™°±¹ºÄÌþ#Îò^_lrkuJ_ðñ/78CDR]gr&A&* *œ+¬+Ä+Å+Æ+G,W,c,d,÷ðìèìðèáìÚìÚìÚìÓèÌèÌèÌèÌèÄèÌè»´¨è´è´èÌèÌèÌ衚‹„€hb hbhbhStœh89%h89%mH sH  h89%h89% h5kÓh5kÓhS|¿h5kÓnHo(tH hS|¿h5kÓh5kÓnHo(tHh5kÓB*
ph€ h5kÓ5\ hì^h5kÓ hì^5\ h89%hì^h5kÓhì^ hì^hì^jhì^U1¸¹ºÄÌ(FÁýþ$’„{{nnnnn{{ 
& F$Ifgdì^ $Ifgdì^ $Ifgdì^gdì^lkd±!$$If–FÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö $ÍÎô]^_lsjöéööwriööööö $Ifgdì^gdì^qkdZ"$$If–FÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöööÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö

Æ8$Ifgdì^ $Ifgdì^ jkuIJ`”±ñò
 ööööööéé|wri $Ifgdì^gd5kÓgd5kÓlkd#$$If–FÖÖ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*.$$If–FÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö r#$$$;$V$w$ç$#%J%a%“%¶%ò…€wjjjjjjjj 
& F$Ifgdì^ $Ifgdì^gd5kÓlkdÓ.$$If–FÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö 
& F$Ifgdì^ ¶%Ì%ä%&&&&A&0'()*òòò…€wnaaaa 
& F $Ifgdì^ $Ifgdì^ $Ifgdì^gd5kÓlkd|/$$If–FÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö 
& F$Ifgdì^ ** *›+œ+­+Ã+Ä+Å+Ø+á+â+ï+öööööö‰„zul $Ifgd89%gd89%gd89%gd89%gdblkd%0$$If–FÖÖ0ºÿz±$Àÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ7ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÖ0ÿÿÿÿÿÿöÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿÖÿÿÿÿÿÿÿÿ4Ö
Faö $Ifgdì^ ï+ð+ñ+ò+û++,ö ›’‰ "$Ifgd89% $Ifgd89%gd89%VkdÎ0$$If–lÖ0”ÿT‹$À7öööÖÿÿÖÿÿÖÿÿÖÿÿ4Ö
laöpÖÿÿÿÿ #$Ifgd89%+,,,-,3,