Syllabus de Techniques Infographiques Multimedia

Cours de Techniques Infographiques Web amp Multimeacutedia

copy2011 infographie-supbe mdash Valeacuterie Geacuterard

timinfographie-supbe

COURS DE TECHNIQUES INFOGRAPHIQUES MULTIMEacuteDIA

Illustrations Cliquez-ici pour afficher les images de la preacutesentation

Table des matiegraveres

1 TIM DESCRIPTION DU COURS 4

LES OBJECTIFS DU COURS 5A INFOGRAPHIE 5B PREacuteSENTATION 6C INTERACTIVITEacute 7

AU PROGRAMME 8LES LECcedilONS ET EXAMEN 9PROFESSEUR = CLIENT 10

VALEacuteRIE GEacuteRARD 11

2 MEacuteTIER INFOGRAPHISTE WEB amp MULTIMEacuteDIA 12

DESCRIPTION DE LA FONCTION 12ORGANIGRAMME LA PLACE DE LrsquoINFOGRAPHISTE 14

DOMAINE DrsquoACTIVITEacuteS amp APPLICATIONS MULTIMEacuteDIA 15INFOGRAPHISTE MULTIMEacuteDIA SPEacuteCIALISATION WEB-DESIGN 15LA POSITION ET LE SALAIRE DU WEB-DESIGNER 17RESSOURCES amp INSPIRATIONS 19

COcircTEacute MATEacuteRIEL 19COcircTEacute LOGICIEL 19

WM Agrave LrsquoHEAJ 22FORMATION CONTINUE 22


3 CREacuteATION DE SITES WEB 23

MEacuteTHODOLOGIE 23CONCEPTION DE PROJET 25

CAHIER DES CHARGES 25GESTION DE PROJET 25AUDIT 26ARBORESCENCE 26DESIGN 27INSPIRATION ET LIGNE GRAPHIQUE 28

CREacuteATION GRAPHIQUE POUR LE WEB 29LES PIXELS DEacuteFINITION ET REacuteSOLUTION DrsquoEacuteCRAN 29LES TAILLES DrsquoAFFICHAGE 31LA GRILLE 32

CONSTRUCTION DE PAGES WEB 33DEacuteCOUPAGE ET OPTIMISATION DES IMAGES 33COULEURS 34DIMENSIONS 35POIDS 36IMAGES BITMAP OU VECTORIELLES 37

Images bitmap (matricielle) 38Le format drsquoimage JPEG (ou JPG) 38

Le format drsquoimage GIF 39Le format drsquoimage PNG 39

Conclusion (png jpg gif ) 39Images vectorielles 40

Le format drsquoimage SVG 40Le format SWF 40

LES SYSTEgraveMES DrsquoEXPLOITATION amp LES NAVIGATEURS WEB 41PAGE WEB LE LANGAGE HTML 42CSS 43TYPOGRAPHIE 44JAVASCRIPT 45

Jquery 45FLASH amp SILVERLIGHT 46


HEBERGEMENT amp MISE EN LIGNE 47

1 TIM DESCRIPTION DU COURS

Il srsquoagit comme son nom lrsquoindique drsquoun cours lieacutee agrave la creacuteation graphique et au traitement des images fixes animeacutees et interactives

Pour le web et plus largement pour le multimeacutedia (mobile DVD bornes interactive tablettes smartphones TV interactive frigo intelligents tamagoshi 6egraveme sens hellip)

La speacutecificiteacute de lrsquoinfographie pour le Web ou Web (Graphic) design est la creacuteation et traitement drsquoimages fixes animeacutes et interactives favorisant la relation entre lrsquoutilisateur et le contenu via la machine


LES OBJECTIFS DU COURS

Mettons en eacutevidence 3 objectifs majeurs du cours TIM

A INFOGRAPHIE

La creacuteation et optimisation drsquoimages pour eacutecran ndash Ce pourquoi vous ecirctes lagrave Que vous choisissiez lrsquoinfographie pour lrsquoanimation 2D ou 3D le preacute-presse et la publication de document numeacuterique (pdf magazine ipad hellip) ou encore les jeux videacuteos ce cours vous sera utile car vous serez ameneacutes agrave creacuteer ou optimiser des images et des mises en page pour les afficher sur eacutecran

Exemples de situations

- Vous recevez des photos tregraves grands formats sur DVD et vous devez les envoyer tels quel par voie eacutelectronique rapide - Vous recevez un logo au format eps qursquoest-ce et comment lrsquoafficher dans une signature drsquoemail- Vous devez deacutetourer la photo drsquoun bacirctiment et lrsquointeacutegrer sur un fond videacuteo quel format choisir- Vous recevez des fichiers de personnages 3D et devez les inteacutegrer dans une banniegravere 2D et les animer sur le web- Vous devez centrer une image dans une page web quelque soit lrsquoeacutecran

Quels modes de transfert quelles tailles quels poids quels type de fichiers quels langages quels logiciels choisir Ce seront les questions qursquoils faudra vous poser tout au long de votre profession et nous deacutecouvrirons ensemble les solutions techniques actuelles et enfin comme reacutepondre agrave ces questions en fonction des technologies futures


B PREacuteSENTATION

On attend de lrsquoinfographiste qursquoil sache faire des preacutesentations Vous serez ameneacute agrave le faire tout au long de vos eacutetudes et il vous faudra mettre en valeur vos travaux dans de nombreuses situations telles que dans le cadre drsquoune soumission de projets de recherche de stage pour lrsquoobtention drsquoune bourse ou drsquoun emploi

Vous serez jugeacutes en quelques secondes sur la preacutesentation et votre seacutelection drsquoimages La grande majoriteacute des employeurs des studios graphiques jugeront votre portfolio en ligne avant mecircme de lire votre CV dans lexpectative drsquoy deacutecouvrir la creacuteativiteacute et la qualiteacute technique que vous aurez mises en oeuvre tout au long de vos eacutetudes en infographie

Bien sucircr pour les creacuteatifs que ne disposent pas de sites web il existe de nombreuses galeries en ligne telles que Behance qui constituent drsquoailleurs une magnifique source drsquoinspiration parmi des reacutealisations graphiques de qualiteacute Le problegraveme avec ces galeries est que vous ecirctes noyeacutes parmi un millions drsquoautres infographistes et contraints par la propre logique du site pour la preacutesentation de vos reacutealisations Cela constitue un bon deacutepart mais les gens sont demandeurs drsquoune adresse web car ils sont curieux et souhaiteront en savoir plus sur vous Ainsi la seacutelection des travaux lrsquohabillage graphique mais aussi le concept visuel et interactif de votre portfolio en diront plus encore sur votre creacuteativiteacute votre personnaliteacute et la qualiteacute de votre travail Il srsquoagit de communication visuelle celle qui vous differenciera des autres creacuteatifs et qui donneront aux gens lrsquoenvie de vous faire confiance (trust en anglais) pour la bonne conduite de leur projet

Pour les infographistes parmi vous inteacuteresseacutes par le meacutetier du web et du multimeacutedia il va sans dire que disposer de son propre portfolio sous la forme de site web sera indispensable pour montrer aux visiteurs son niveau de maicirctrise quant agrave la reacutealisation de projets interactifs


C INTERACTIVITEacute

Pour tout infographiste les bases des techniques infographiques multimeacutedia vous permettront de collaborer avec les nombreux acteurs de lrsquointeractiviteacute (game designer magazine designer web designer deacuteveloppeurs ergonomes )

Ce cours a pour but eacutegalement de vous donner un aperccedilu des techniques lieacutees agrave la reacutealisation de sites web professionnels tel qursquoelle est eacutetudieacutee dans le groupe de travail WM conception de projet commu layouts HTMLCSS animation flash programmation Flash javascript videacuteos motion design et lrsquoergonomie


AU PROGRAMME

Que nous dit le programme du cours ldquoconcevoir et reacutealiser le design graphique et interactif dun site web etou dune application multimeacutediardquo (voir lentiegravereteacute du programme sur le support de cours en ligne - timinfographie-supbe )

Lrsquoanneacutee derniegravere nous avons conccedilu et habilleacute un site web portfolio de type blog Cette anneacutee vous reacutealiserez un prototype de site web portfolio drsquoune seule page en 5 eacutetapes

PHASE 1 CROQUIS PAPIERPHASE 2 WIREFRAME NampBPHASE 3 LAYOUT GRAPHIQUEPHASE 4 MOCKUP INTERACTIFPHASE 5 SCREENCAST VIDEOCette approche de conceptualisation vous donnera une plus grande liberteacute creacuteative tout en vous apportant les bases et le vocabulaire techniques utile agrave la reacutealisation drsquoun site web

Donc beaucoup de cogitation de recherche de creacuteation visuelle et de dialogue pour aboutir agrave un layout (au choix fireworksphotoshopillustrator)Un peu drsquointeractiviteacute avec Fireworks pour exporter un layout interactifUn peu drsquointeacutegration HTMLCSS de Flash et de Javascript pour aboutir agrave une reacutealisation interactive laquoprototyperaquo Et enfin une capture videacuteo en guise de deacutemonstration multimeacutedia


LES LECcedilONS ET EXAMEN

Apregraves cette introduction theacuteorique de 2h (+ lecture du syllabus) vous serez ameneacutes agrave reacutealiser une seacuterie de petits exercices en laboratoire qui vous conduiront petit agrave petit de la conception artistique agrave la reacutealisation interactive du prototypeLes exercices pour y parvenir se trouveront sur le site timinfographie-supbe

Planning des leccedilons et livraison

1 Meacutethodologie pour la creacuteation de sites web ndash 2h cours theacuteorique (keynote+syllabus)2 Conception de projet - 2h lecture syllabus et briefing inspiration amp croquis

----------------------------------------------------gt preacutesentationlivraison drsquoun croquis

3 Conception de projet ndash 3h croquis gt wireframe

----------------------------------------------------gt preacutesentationlivraison drsquoun wireframe

4 Design drsquointerface graphique ndash 3h wireframe gt layout

----------------------------------------------------gt preacutesentationlivraison drsquoun layout

5 Construction HTML (page web liens) ndash 3h Layout gt Mockup6 Habillage inteacutegration graphique et CSS - 3h Layout gt Mockup

----------------------------------------------------gt preacutesentationlivraison du mockup

7 Animation Flash ndash 3h Mockup + animation logo8 Interactiviteacute avec Flash et Jquery ndash 3h Mockup + galerie drsquoimages

----------------------------------------------------gt preacutesentationlivraison du mockup9 Videacuteo capture et encapsulation ndash 3h

----------------------------------------------------gt Examen de juin prototype fini


PROFESSEUR = CLIENT

Le rocircle premier de votre professeur est de vous apprendre les bases du meacutetier drsquoinfographiste pour le web et le multimeacutedia de vous apprendre agrave apprendre car les technologies eacutevoluent rapidement et transmettre sa passion du meacutetier

Vous devrez discuter de la direction artistique de vos projets graphiques avec votre professeur et collegravegues de classe Ces discussions devraient vous permettre daffiner la qualiteacute de vos communications visuelles et votre argumentationCes discussions seront une bonne preacuteparation au travail en eacutequipe et avec le client

Sauf rare exception un projet se deacuteroule toujours bien lorsque le graphiste communique reacuteguliegraverement et ouvertement avec son client il en va de mecircme avec ses professeurs Lors de ces entretiens vous devrez vous assurez de bien reacutepondre aux attentes exprimeacutees de le briefing et le cahier des charges En cas de pieacutetinement votre interlocuteur pourra faciliter vos choix en exprimant plus preacuteciseacutement ou en reacuteorientant ses attentes Nrsquoheacutesitez pas agrave lui faire part de vos craintes ou de vos nouvelles ideacutees Une preacutesentation reacuteguliegravere du travail avanceacute pour lrsquoeacutechange de point de vue seront primordial pour une bonne conduite de projet

Parallegravelement une seacuterie drsquoexercices dirigeacutes vous permettra lrsquoapprentissage geacuteneacuteral des bases de techniques infographiques multimeacutedia Votre professeur est lagrave pour vous offrir le compleacutement drsquoinformation neacutecessaire au bon suivi des tutoriels qui seront eacutelaboreacutes agrave cet effet Une plateforme en ligne vous permettra de suivre le cours agrave votre rythme suivant lrsquoagenda deacutefini (timinfographie-supbe)

Pour tout ce qui sort des attentes techniques de bases votre professeur peut vous aider agrave faire une recherche sur Google et dans les manuels speacutecialiseacutes vers la deacutecouverte drsquoune solution Enfin il faut apprendre agrave se deacutebrouiller seul et pour cela laquoGoogle est ton amiraquo mais lrsquoamitieacute requiert patience et toleacuterance


VALEacuteRIE GEacuteRARD Enseignante agrave lrsquoHEAJ depuis 2003 Jrsquoai cumuleacute 10 ans drsquoexpeacuterience en agence comme employeacutee et comme indeacutependante en tant qursquoinfographiste speacutecialiseacutee pour le web Jrsquoai travailleacute en Belgique au Luxembourg et aux Etats-Unis dans des secteurs tregraves varieacutes comme le dessin animeacute le jeu en ligne lrsquoeacuteveacutenementiel 3D la publiciteacute la peacutedagogie et lrsquoinstitutionnel

Quelques reacutefeacuterences internationales ABC Network Universal Music Editions Dupuis International Diamond Laboratories UCM Wallonie-Bruxelles InternationalMon profil Web Graphic Designer Web art directorCompeacutetences identiteacute visuelle coordination et conception de projets graphique et interactifs ergolayout layout web illustration animation Flash inteacutegration CSS

Deacutecouvrez notre portfolio en ligne sur wwwmoovebe

Le Web un cabinet de curiositeacute agrave partager Je cultive ma curiositeacute en gardant un oeil sur les technologies reacutecentes et je minteacuteresse agrave lrsquoeacutevolution des interfaces hommes-machine et drsquoapplications en tout genre dont principalement les applications lieacutees agrave la direction artistique la conception de projet et conception graphique pour le web Je suis bien sucircr lagrave pour partager mon expeacuterience mais la vocirctre minteacuteresse eacutegalement Aussi si vous le souhaitez nous pourrons eacutechanger nos points de vues et deacutecouvertes

Rendez-vous sur mes tweets twittercommoove twittercomprofstiw

Les bookmarks agrave gogo sur delicious deliciouscomdamsha


2 MEacuteTIER INFOGRAPHISTE WEB amp MULTIMEacuteDIA

Le nouveau milleacutenaire est (vous lrsquoaurez remarqueacute jusque dans vos poches) synonyme de communication numeacuterique interactive et mobile La documentation le courrier la photo la teacuteleacutevision la radio le teacuteleacutephone les satellites Tous ces meacutedias sont deacutesormais interconnecteacutes et disponibles depuis votre teacuteleacutephone mobile que vous soyez dans les airs comme dans le deacutesert ou encore au petit coin pour certains Si vous le deacutesirez tout le monde peut savoir ougrave vous ecirctes vous voir vous parlez et partager vos aventures en temps reacuteel

Les meacutetiers de la communication nrsquoont donc jamais eu autant besoin drsquoinfographistes web amp multimeacutedia qursquoagrave lrsquoheure actuelle Les technologies sont nombreuses les deacuteboucheacutes aussi

Nous nous inteacuteresserons ici au meacutetier de lrsquoinfographiste orienteacute Web amp MultimeacutediaEn anglais Web Graphic Designer

DESCRIPTION DE LA FONCTION

Linfographiste est indispensable agrave la reacutealisation des produits et services multimeacutedias Comme son nom lindique linfographiste est un speacutecialiste du graphisme informatique Il creacutee des dessins agrave laide de logiciels adapteacutes au dessin sur ordinateur

Son boulot est varieacute et demande des dons artistiques associeacutes agrave une habileteacute technique Il creacutee ou traduit les dessins des personnages deacutecors icocircnes textes animations et autres dans un format numeacuterique en suivant les directives du


concepteur graphique Sil a besoin dutiliser des eacuteleacutements visuels deacutejagrave existants comme des photos ou des videacuteos il doit alors les numeacuteriser et les adapter pour une visualisation optimale sur le mateacuteriel utiliseacute (ordinateur gsm hellip) Pour cela il a recours agrave des logiciels speacutecialiseacutes qui lui permettent de faire corrections filtrages effets speacuteciaux etc

Linfographiste connaicirct aussi les formats de compression qui consiste agrave reacuteduire la taille dun ensemble dinformations numeacuteriques afin de faciliter par exemple larchivage etou la transmission agrave distance dimage et leurs normes

Lorsquil a rassembleacute les eacuteleacutements graphiques et visuels tels que textes illustrations photos videacuteos etc dans les formats adeacutequats il doit encore les placer sur leacutecran (ou les mettre en page) en harmonie avec le sceacutenario etou la navigation et les conventions graphiques

Linfographiste travaille sous la responsabiliteacute du directeur artistique Lorsquil ny a pas de directeur artistique il est linterlocuteur direct entre le chef de projet llsquoauteur le concepteur graphique

Ce sont les techniques et astuces eacutelaboreacutees par les infographistes qui rendront loeuvre multimeacutedia agreacuteable et facile (on dira ergonomie) agrave contempler et qui donneront lenvie de sy plonger

Source Lrsquoinfographiste Des meacutetiers pour le multimeacutedia AWT mdash 2011


ORGANIGRAMME LA PLACE DE LrsquoINFOGRAPHISTE

Lrsquoœuvre multimeacutedia repose sur un certain nombre drsquoeacutetapes essentielles agrave son lsquocycle de viersquo Chacune de ces eacutetapes fait intervenir des compeacutetences particuliegraveres appeleacutees les meacutetiers du multimeacutedia Deacutecouvrons donc ci-dessous quelles peuvent ecirctre les places de lrsquoinfographiste multimeacutedia ProductionEditeur Producteur Juriste Prospecteur hellip ConceptionAuteur Directeur Artistique Infographiste multimeacutedia pour la creacuteation drsquoimage lrsquoarchitecture web et le design drsquointerface Illustrateurs infographistes Illustrateur photo Illustrateur videacuteo Illustrateur sonore Psychopeacutedagogue hellip ReacutealisationReacutealisateur Directeur Technique Deacuteveloppeur Programmeur Infographiste Multimeacutedia infographiste 3D Animateur 2D3D Testeur Traducteur Monteur hellip ExploitationFournisseur drsquoaccegraves (ISP) Speacutecialiste Reacuteseau Administrateur web (webmaster) Presseur Packager hellip Distribution(Technico-)commercial commerccedilant hellip UtilisationJournalistes du web Archivistes multimeacutedia Conseiller technique (helpdesk)Formateur hellip


DOMAINE DrsquoACTIVITEacuteS amp APPLICATIONS MULTIMEacuteDIA

Informatique bureautique marketing eacutedition presse publiciteacute jeux et peacutedagogie hellip Les champs drsquoapplication sont nombreux qursquoil srsquoagisse de se divertir de srsquoinformer de communiquer drsquoenseigner de former de vendre de faire des transactions drsquoarchiver de se cultiver hellip Exemples drsquoapplications applications connecteacutees (mobiles tv interactive) site vitrine site portails site e-commerce catalogue en ligne les contenus graphiques de la formation agrave distance lrsquoimagerie et animation technique (meacuteteacuteo bourse sciences meacutedecine hellip) les e-mail marketing les jeux en ligne les banniegraveres publicitaires les motion reel la reacutealiteacute augmenteacutee les magazines sur ipad

INFOGRAPHISTE MULTIMEacuteDIA SPEacuteCIALISATION WEB-DESIGN

Le meacutetier drsquoinfographiste multimeacutedia concerne essentiellement la creacuteation le traitement et lexploitation des images numeacuteriques et interactive de produits multimeacutedia on-line (en ligne) et offline (sur support cd dvd hellip)Ce meacutetier regroupe tel qursquoon le voit plus haut plusieurs fonctions de la conception agrave la reacutealisation On dira plus preacuteciseacutement web-designer en ce qui concerne le domaine du web Un web-designer peut ecirctre ecirctre ameneacute agrave reacutealiser diverses activiteacutes tels que

- Concepteur graphique (on fait la nuance par rapport au webmasterwebdesigner en preacutecisant laquo web graphic designer raquo il srsquoagit du profil du groupe de travail WM ici agrave lrsquoHEAJ

- Architecte web (conception drsquoarborescence navigation interactiviteacute)- Ergonome analyses dactiviteacute avec des utilisateurs afin de rendre les

interfaces facilement utilisables


- Designer drsquointerface (layout designer UI designer)- Illustrateur de contenu graphiquephotovideacuteosonore- animateur 2D ou 3D motion designer- Inteacutegrateur (htmlcss) ndash deacutecoupage et structuration de site web- Flash designer deacutevelopper creacuteateur drsquoanimation interactive

Sorti des archives mais toujours un plaisir agrave revoir Visitez le site portfolio drsquoun web-designer polyvalent et original wwwpixelpharmacycom

Le webdesigner est curieux creacuteatif et imaginatif Il a des faculteacutes en dessin qui lui permettent de concreacutetiser ses ideacutees sur papier ou agrave lrsquoeacutecran

Suite agrave un cahier des charges qursquoil a mis en place ou auquel il a participeacute il est en mesure de creacuteer un site Internet ou intranet de mettre en place une architecture interactive allieacutee agrave un visuel graphique adapteacutee afin de garantir une identiteacute visuelle de qualiteacute

Doteacute drsquoun esprit drsquoanalyse il fait en sorte que son produit soit ergonomique drsquoune navigation simple et efficace afin de pouvoir reacutepondre agrave lrsquoattente des utilisateurs

Il maicirctrise alors les contraintes techniques lieacutees aux supports de communication adaptation drsquoune charte graphique laquo papier raquo agrave une charte laquo interactive raquo compatibiliteacute des principaux navigateurs web en matiegravere drsquointeacutegration HTML hellip

Le web-designer megravene une veille technologique permanente sur les diffeacuterents outils qui interfegraverent dans son activiteacute et approfondira srsquoil le souhaite lrsquoeacutetude des langages lieacutes agrave lrsquointeractiviteacute Il garde un œil ouvert sur les diffeacuterentes strateacutegies on-line existantes de maniegravere agrave promouvoir son produit de maniegravere efficace Il possegravede alors une bonne


connaissance du mode de fonctionnement des outils de recherche en matiegravere de reacutefeacuterencement

LA POSITION ET LE SALAIRE DU WEB-DESIGNER

La position dans lrsquoentreprise varie selon diffeacuterents facteurs tels que la taille de lrsquoentreprise la creacuteativiteacute la qualiteacute graphique les connaissances techniques lrsquoexpeacuterience le degreacute de responsabiliteacute rechercheacute le domaine drsquoactiviteacute le pays etc

Lrsquoavantage du meacutetier est sa grande flexibiliteacute Il est possible de choisir si lrsquoon souhaite travailler comme employeacute ouet en indeacutependant en studio ou en teacuteleacutetravail en eacutequipe ou en solo pour des agences ou directement pour des clients

Pour les jeunes qui souhaitent srsquoessayer au meacutetier drsquoindeacutependant il existe des associations comme SmartAsbl Azimut etchellip qui vous offre un statut drsquoemployeacute pour les jours ou vous travailler sur les contrats que vous ramenez avec un support administratif (bon de commande contrat plan financier hellip) et des conseils pour deacutemarrer sa carriegravere drsquoindeacutependant

Une sceacuteance drsquoinformation de Smart ASBL est organiseacutee tous les ans en 3egraveme anneacutee Vos professeurs dont la plupart ont travailleacute en industrie sont indeacutependants compleacutementaires ou employeacutes agrave temps partiel en entreprises sont lagrave bien sucircr pour partager leur expeacuterience agrave vous de poser les bonnes questions

Le meacutetier drsquoinfographiste est un meacutetier de service aussi nrsquoespeacuterez pas devenir milliardaire agrave moins de vous lancer dans la creacuteation de produits logiciels qui rencontreraient un succegraves fou qui sait ) La plupart drsquoentre-nous exerce le meacutetier par passion sans trop compter leurs heures srsquoil le souhaite mais la fonction permet de vivre tregraves dignement tout en srsquoaccordant une vie de loisirs apregraves le travail


Pour situer vos objectifs voici une eacutetude reacutecente sur les salaires du design interactif en France httpwwwjournaldunetcomebusinessle-netsalaires-designwebdesignershtml

Pour information un eacutetudiant fraichement sorti avec son diplocircme de bachelor en poche nous informe avoir trouveacute un travail en Belgique dans les 3 mois apregraves sa session de juin 2010 une place agrave 1400euro net avec contrat indeacutetermineacute et une voiture de socieacuteteacute Le baregraveme se situe vers les 1300euros net

Suivant lrsquoexpeacuterience la speacutecialisation ou sa renommeacutee un infographiste indeacutependant factura geacuteneacuteralement entre 35 agrave 50 pour les deacutebutants qualifieacutes et 50 agrave 75euros hTVA pour les speacutecialistes expeacuterimenteacutes Pour eacuteviter les risques un tarif horaire doit toujours srsquoeacutetablir en concertation avec son comptable car il srsquoagit de bien eacutevaluer lrsquoimpocirct la TVA les investissements et frais inheacuterents

Lrsquoinfographiste bachelier peut eacutevoluer vers des postes agrave responsabiliteacute tels que directeur artistique chef de projet ou ergonome A cette fin lrsquoexpeacuterience est indispensable Une speacutecialisation en communication etou gestion de projet ou en design drsquointeraction peut ecirctre requise


RESSOURCES amp INSPIRATIONS

COcircTEacute MATEacuteRIEL

Ordinateur fixe pour des raisons ergonomiques un ordinateur portable pour deacuteplacement en consultance une tablette mobile (ipad) pour la preacutesentation de projet en images une tablette graphique (Wacom) pour le dessin un smartphone avec synchronisation de lrsquoagenda un scanner pour numeacuteriser des images en haute qualiteacute une imprimante pour les tests appareil photo numeacuterique de base pour captures drsquoinspiration ou semi-professionnel pour creacuteation une webcam et casque pour les reacuteunions agrave distance Pour eacutevaluer la deacutepense drsquoun ordinateur il est neacutecessaire de consulter les configurations requises des logiciels utiliseacutes En geacuteneacuteral le web-designer peut opter pour une configuration de base sauf srsquoil fait une utilisation reacuteguliegravere drsquoapplications 3D et presse

COcircTEacute LOGICIEL

Les produits Adobe ont la cote

Fireworks Photoshop Illustrator ont des fonctionnaliteacutes communes pour la creacuteation de layout Web mais sont surtout tregraves compleacutementaires Je ne perds pas mon temps agrave les comparer comme beaucoup le fond car chacun a ses reacuteels avantages Fireworks nrsquoest pas un sous produit de Photoshop comme certains extreacutemistes ou eacuteconomes le preacutetendent Un bon artisan travaille avec de bons outils

Adobe Fireworks pour la creacuteation de wireframe mockup interactif layout web gif animeacutes


Adobe Photoshop pour la retouche photo creacuteation de layout gif animeacutesAdobe Illustrator pour la creacuteation vectorielle creacuteation de logo creacuteation de layout

Pour eacutelargir le spectre

Adobe Indesign pour la creacuteation de PDF et magazine interactif + Woodwing pour la creacuteation de magazine pour IpadAdobe Flash pour la creacuteation drsquoapplication et drsquoanimations web + Adobe Air pour la creacuteation drsquoapplication bureauAdobe AfterEffects pour la creacuteation de motion design Adobe Dreamweaver pour la creacuteation de page web (optionel)

Pour les infographistes qui srsquooccupe drsquointeacutegration HTMLCSS

Tous les principaux navigateurs qui sont actuellement IE Firefox Chrome Safari Operahellip Consultez les statistiques disponibles

Un outil merveilleux qui est le Firebug permet drsquoanalyser une page et de tester le CSS en direct

Le choix de lrsquoeacutediteur peut se faire parmi des solutions gratuites ou agrave moindre cout Certains traitements de textes comme le Notepad suffisent agrave lrsquoeacutedition drsquoune page HTML standard mais ne comportent aucune aide agrave lrsquoeacutecriture au contraire des solutions comme Smultron (open-source) Coda De nombreux utilitaires annexes pour acceacuteleacuterer enrichir et parfaire vos creacuteations comme

[ utilisation de mindmap pour les liens httpwwwmindmeistercommapsshow39432992


- des eacutediteurs de scripts - un eacutediteur de sons- un eacutediteur drsquoimages de synthegravese - des eacutediteurscompresseurs videacuteos - un compresseur de fichier - des convertisseurs de fichiers - un traducteur en ligne (granddictionnairecom)

hellip

Bien que la manipulation des nouveaux logiciels ne soit pas systeacutematique un web-designer comme toute personne travaillant dans les nouvelles technologies se doit de rester agrave lrsquoeacuteveil Pour cela il suffit de srsquoinscrire aux newsletters ou flux RSS drsquoeacutediteurs de logiciels de magazines journalistiques et drsquoautres sites communautaires et de faire un peu de lecture quotidienne (par exemple entre le premier et le deuxiegraveme cafeacute ) gracircce agrave son logiciel agreacutegateur de flux RSS (ex google reader ) httpwwwjournaldunetcomhttpwwwinternetaddictbehttpwwwliberationfrpagephpRubrique=NUMERIQUEShttpwwwlexpressfractualitehigh-techhttpwwwalsacreationscomhttp wwwcss-trickscomhttp wwwsmashingmagazinecom


WM Agrave LrsquoHEAJ

Il srsquoagit de la finaliteacute du groupe de travail Web amp Multimeacutedia en 2egraveme et 3egraveme anneacutee auquel vous pourrez vous inscrire degraves la deuxiegraveme anneacutee si crsquoest lrsquoorientation professionnelle qui vous inteacuteresse Bien sucircr lrsquoobjectif du cours nrsquoa pas un objectif proseacutelytique il ne srsquoagit pas agrave tout prix de vous convaincre agrave choisir cette orientation hellip bien qursquoil srsquoagisse bien sucircr du plus beau meacutetier du monde Quoi de plus gratifiant pour un graphiste que de se rendre utile en creacuteant des contenus graphiques et des applications interactives professionnelles ou ludiques dont les plus aventureux drsquoentre vous pourront exercer leur passion agrave leur greacute depuis un chalet de haute montagne ou drsquoune pagode au bord de lrsquoeau pour lrsquoune ou lrsquoautre agence agrave 10000 lieux de lagrave et ceci au moyen drsquoun simple ordinateur et drsquoune connexion Internet P

FORMATION CONTINUE Aussi afin de continuer votre formation une fois sur le marcheacute de lrsquoemploi il existe des centres de speacutecialisations aux nouvelles technologies pour parfaire vos connaissances comme le Cepegra ou Technifutur agrave Gosselies agrave la TechnoCite agrave Mons Technofutur agrave Lieacutege hellip


3 CREacuteATION DE SITES WEB

Apregraves avoir exposeacute briegravevement le meacutetier de lrsquoinfographiste web amp multimeacutedia (web graphic designer) nous allons passer en revue une meacutethodologie eacuteprouveacutee parmi drsquoautres qui consiste concevoir et reacutealiser un site web de maniegravere professionnelle Il srsquoagit ici drsquoun rapide tour drsquohorizon avec une preacutesentation des outils et techniques utiliseacutees au studio moove

Je vous inviterai plus tard agrave essayer quelques-unes de ces techniques en laboratoire

MEacuteTHODOLOGIE Nombreux sont les types de projets multimeacutedia agrave destination du web voici plus bas agrave titre drsquoexemple une meacutethodologie type utiliseacutee pour la creacuteation drsquoun site Internet crsquoest agrave dire ici lrsquoensemble des meacutethodes utiliseacutees par lrsquoeacutequipe multimeacutedia Pour bien deacutemarrer un projet je vais ajouter tous les postes qui mrsquoincombent agrave ma liste de tacircches

(source Kelly Goto Emily Cotler - (re)design de sites web conduite de projet eacutedition Eyrolles)

Deacutefinition du projet bull Collecte dinformationsbull Identification de la ciblebull Analyse sectoriellebull Deacutefinition des objectifs geacuteneacuterauxbull Preacuteparation du rapport de conceptionbull Reacutealisation du cahier des chargesbull Eacutelaboration du budgetbull Planification des deacutelaisbull Mise en place de leacutequipe projetbull Creacuteation despaces deacutechangebull Planification des tests dutilisation


Deacuteveloppement de la structure du site bull Deacutefinition des contenusbull Analyse de lexistantbull Planning de livraisons des contenusbull Eacutelaboration du plan du sitebull Choix des conventions de nommage des fichiersbull Deacutefinition des principes de navigationbull Deacutefinition des noms et des intituleacutesbull Deacutefinition des tacircches types Conception graphique et validation bull Preacutesentation des visuels et suggestionsbull Creacuteation de modegraveles graphiquesbull Deacutefinition de la charte graphique Production et controcircle de qualiteacute bull Eacutevaluation de leacutetat du projetbull Proceacutedure de suivi davancementbull Deacutefinition de larborescence du sitebull Deacutecoupage et optimisationbull Creacuteation des pages et des modegraveles HTMLbull Conception des scripts eacuteleacutementairesbull Alimentation des pagesbull Inteacutegration des deacuteveloppements de back-officebull Programme de controcircle qualiteacutebull Tests de controcircle qualiteacutebull Hieacuterarchisation et reacutesolution des boguesbull Validation finale Lancement et maintenance bull Reacutedaction du dossier de liaisonbull Archivage de la documentationbull Planification de la formation agrave la maintenancebull Annonce du lancement du sitebull Lancement du sitebull Reacutefeacuterencement du site aupregraves des outils de recherche


CONCEPTION DE PROJET

CAHIER DES CHARGES

Un cahier des charges vise agrave deacutefinir simplement les laquo speacutecifications de base raquo drsquoun produit ou drsquoun service agrave reacutealiser Le cahier des charges sert agrave formaliser les besoins et agrave les expliquer aux diffeacuterents acteurs pour srsquoassurer que tout le monde est drsquoaccord En particulier le cahier des charges permet de cadrer la ou les missions des acteurs impliqueacutes et notamment celles du directeur de projet (cocircteacute maicirctrise drsquoouvrage) etou du chef de projet (cocircteacute maicirctrise drsquoœuvre) Le cahier des charges est un document contractuel entre le client et le prestatairevendeur mais il ne constitue pas agrave lui seul le contrat commercialLors drsquoun appel drsquooffre le cahier des charges est fourni par le commanditaire lui-mecircme

GESTION DE PROJET

Devant la masse de travail il faut srsquoorganiser Les reacuteunions les nouvelles choses agrave faire les petites choses agrave corriger les impreacutevus Si comme moi vous avez une meacutemoire agrave passoire la chose primordiale agrave faire est drsquoencoder vos tacircches et de les planifier dans le temps Le bon reflex consiste agrave encoder une nouvelle tacircche degraves la reacuteception drsquoune demande Pour ce faire jrsquoutilise un logiciel de gestion de projet en ligne (basecamp taaski unfuddle) le tout combiner avec mon agenda Google synchroniseacute avec mon ordinateur et mon smartphone ne me laisse vraiment pas lrsquooccasion de procrastiner Bien sucircr nrsquooubliez pas drsquoorganiser et de planifier quelques sorties varieacutees histoire drsquoavoir une vie eacutequilibreacutee et de vous ressourcer reacuteguliegraverement ce qui sera eacutevidemment profitable agrave votre creacuteativiteacute


AUDIT

Lorsqursquoil srsquoagit drsquoune refonte de site web le chef de projet ou lrsquoergonome examinera en deacutetail le site existant au regard de nombreux critegraveres dont lrsquoefficaciteacute et accegraves agrave lrsquoinformation de la navigation et lrsquoarchitecture de lrsquoinformation Lisibiliteacute typographie Lrsquoefficaciteacute la pertinence des contenus reacutedactionnels La ligne graphique identification deacutemarcation Lrsquoergonomie la faciliteacute drsquoutilisation Lrsquoefficaciteacute des recherches et pertinence des reacutesultats dans le site et la visibiliteacute au travers des moteurs de recherche (google hellip) Le rapport statistique analyse des statistiques de freacutequentation et dutilisation du site (si disponible) hellip

ARBORESCENCE

La conception de sites web passe par une logique de navigation il faut structurer les contenus creacuteer une arborescence Cette eacutetape nrsquoest pas une tacircche inheacuterente agrave lrsquoinfographiste Si vous travaillez comme indeacutependant il est possible que cette tacircche vous incombe si le client ne souhaite pas srsquoen charger Geacuteneacuteralement lrsquoarborescence vous est fournie par le client ou le concepteur drsquointeractiviteacute ou encore lrsquoergonome Cependant lors du design graphique ou de la construction il y aura certainement des eacutechanges (feedback) et corrections utiles avec le concepteur ce qui est tout agrave fait normal Il y aura toujours des eacuteveacutenements de navigation des pages et sous-pages ou interactiviteacutes visuelles qui nrsquoauront pas eacuteteacute eacutetudieacutees et qui neacutecessiteront lrsquoavis du designer Pour ce faire des post-it bcp de post-it un tableau blanc un marqueur facile et pas cher le plus efficace pour travailler une arborescence (flowchart) Pour styliser le tout on peut utiliser fireworks qui integravegre une librairie drsquoeacuteleacutements et la creacuteation de dessin vectoriels Pour les concepteur drsquoergonomie Il existe des outils speacutecialiseacutes comme LovelyChartscom smartdraw omnigraffle qui proposent une galerie de symbole ou autres diagrammes de gestion de projet (PERT GANTT) ou qui gardent par exemple les connecteurs attacheacutes lorsqursquoon deacuteplace les eacuteleacutements


DESIGN

Deacutefinition Le design est une discipline visant agrave repreacutesenter concregravetement une penseacutee un concept ou une intention en tenant compte eacuteventuellement dune ou des contraintes fonctionnelles structurelles estheacutetiques didactiques symboliques techniques et productives Ces repreacutesentations peuvent ecirctre tangibles ou virtuelles et sinscrivent de preacutefeacuterence dans un contexte social eacuteconomique culturel mdash wikipedia

En dehors de consideacuteration estheacutetique (crsquoest agrave dire de style graphique de couleurs de tons de typo de textures hellip) le designer le concepteur drsquointeractiviteacute ou lrsquoergonome vont creacuteer des croquis drsquoeacutecrans en noir et blanc En anglais on appelle ccedila des wireframes En franccedilais on parlera plus rarement drsquoergolayouts

Pour les ergo-layouts il existe des modegraveles sur papier En logiciels il existe une myriade drsquooutils (comme justinmindcom ForeUI ou Balsamiq) pour ergonomes professionnels qui permettent de se transformer en mockup (prototype interactif) En tant que web graphic designer sur des sites drsquoune vingtaine de pages je preacutefere utiliser Adobe Fireworks car il est possible de faire eacutevoluer rapidement les wireframes en les exportant en deacutemos interactives (mockups HTML ) ou vers Flash si la deacutemo doit ecirctre animeacute etou interactive Une fois les principes drsquointeractiviteacutes (wireframe ou mockup) valideacutes avec le client les layouts graphiques pourront ecirctre deacutecoupeacutes en composants graphiques pour Flash ou HTMLCSS


INSPIRATION ET LIGNE GRAPHIQUE

Cette tacircche est sous la responsabiliteacute du directeur artistique du concepteur graphique ou de lrsquoinfographiste web Celle-ci ne peut pas ecirctre envisageacutee sans avoir deacutefini le projet ougrave lrsquoon aura cerneacute au preacutealable les objectifs du projet et son public cible Pour vos recherches nous avons agrave notre disposition la bibliothegraveque de lrsquoeacutecole qui est une veacuteritable mine drsquoor aussi avant de perdre du temps dans Google pensez agrave utiliser les moteurs de recherche de magazines speacutecialiseacutes en ligne agrave la recherche de tendances ou techniques particuliegraveres comme Smashingmagazine ainsi que ceux de galeries de sites professionnels comme Behancenet Surfant ccedila et lagrave il existe des outils permettant de collecter ses liens (Delicious) et des captures drsquoeacutecrans (screengrab)

Pour construire son concept graphique et interactif on reacutecolte rapidement de nombreuses captures drsquoeacutecran de couleurs de typographie de textures de sites web de photos et drsquoillustrations Le tout sera reacuteunit grossiegraverement en mosaiumlque et organiseacute progressivement en grille pour former une moodboard crsquoest agrave dire planche tendance (en publiciteacute) ou une bible graphique (en animation) On peut reacuteunir toutes ces images dans Fireworks ou encore utiliser une application en ligne plus rapide comme imgspark (voir une autre meacutethode de moodboard)

La moodboard preacutesenteacutee au client est une bonne maniegravere drsquoimpliquer le client et les collaborateurs dans le processus creacuteatif Elle leur permettront de comprendre vos envies avant la reacutealisation Le client ne sera donc pas deacuteccedilu quant agrave lrsquoorientation du projet qui sans cette phase peut lui apparaicirctre comme imposeacutee et devant laquelle il pourrait eacutemettre un refus A titre de comparaison lorsque vous commandez une voiture neuve mecircme si vous aimez la marque vous souhaiterez pouvoir choisir le modegravele la couleur la texture des siegraveges et les accessoires Retenez donc que le design se fait avec le client et non pas pour le client vous eacuteviterez de perdre du temps dans des vas-et-viens ou de perdre des clients


CREacuteATION GRAPHIQUE POUR LE WEB

Pour la creacuteation drsquoeacutecrans fixes (on parlera encore drsquointerfaces graphiques ou de layouts web ) nombreux sont ceux qui utilisent Photoshop ou Illustrator par habitude ou par choix peacutecuniaire Cependant la suite creacuteative drsquoAdobe propose un outil plus approprieacute et compleacutementaire bien connu des infographistes web designer qui est Adobe Fireworks Nombreuses sont les fonctionnaliteacutes qui facilitent la creacuteation drsquointerfaces graphiques avec Fireworks la gestion du dessin vectoriel la seacutelection des objets mettant leur calque en eacutevidence la gestion des pages avec une page maicirctresse la creacuteation des symboles la creacuteation drsquointeractiviteacute lrsquoexportation de pages web et de javascript lrsquooptimisation des images dans lrsquointerface etc

LES PIXELS DEacuteFINITION ET REacuteSOLUTION DrsquoEacuteCRAN

Avant de commencer la creacuteation drsquoun interface graphique il est important drsquoaborder ces quelques points

Une photo est constitueacutee dun ensemble de points appeleacutes pixels (pixel est une abreacuteviation de PICture ELement) Le pixel repreacutesente ainsi le plus petit eacuteleacutement constitutif dune image numeacuterique Un pixel nrsquoa pas de taille bien deacutefinie Pour repreacutesenter la taille dun pixel il faut connaicirctre la reacutesolution utiliseacutee pour repreacutesenter ce pixel Le pixel peutndashecirctre carreacute ou rectangulaire

La reacutesolution deacutefinit un rapport entre le nombre de pixels par uniteacute de longueur (centimegravetre ou pouce) La reacutesolution drsquoeacutecran encore appeleacute la densiteacute dune image numeacuterique sexprime en PPI (Pixel Per Inch) ou PPP (Pixels Par Pouce) La reacutesolution dimpression dune imprimante se deacutetermine elle en DPI (Dot Per Inch) ou PPP (Points Par Pouce) Un pouce repreacutesentant 254 cm On parle souvent drsquoune reacutesolution de reacutefeacuterence de 72dpi la veacuteriteacute actuelle crsquoest que les reacutesolutions drsquoeacutecran sont tregraves variables suivant les appareils Deux eacutecrans drsquoune mecircme taille peuvent


avoir des densiteacutes (ppi) de pixels diffeacuterentes suivant les modegraveles (exemple la comparaison iphone 3 vs 4 320 x 480px agrave 163 ppi contre une deacutefinition de 640 x 960 agrave une reacutesolution de 326 ppi)

Enfin la deacutefintion est tregraves souvent confondue avec la reacutesolution On appelle deacutefinition le nombre de pixels constituant limage Une image posseacutedant 640 pixels en largeur et 480 en hauteur aura une deacutefinition de 640 pixels par 480 noteacutee 640x480px Un mecircme eacutecran drsquoordinateur peut selon les modegraveles afficher diffeacuterentes deacutefinitions (1024x768px 1440x900px hellip)

Comprenez que vos mises en page avec une deacutefinition de 1024x768px seront plus difficile agrave lire sur un petit eacutecran Si la reacutesolution est plus grande (ce qui ne deacutepend pas de vous mais du mateacuteriel) lrsquoimage sera plus fine mais ccedila nrsquoaidera pas un presbyte agrave y voir plus clair Pour ces derniers la loupe reste de rigueur

Si tout cela vous semble un peu compliqueacute lrsquoexpeacuterience viendra vite apregraves quelques manipulations drsquoimage Pour eacuteviter le drame retenez que le bon reflex est toujours drsquoadapter la taille de votre document avant toute importation ou creacuteation drsquoimage et drsquoeffectuer un test soit drsquoaffichage sur lrsquoeacutecran de destination soit drsquoimpression suivant que vous reacutealisez une interface pour smartphone ou pour une brochure Ceci au risque de devoir recommencer si vous travaillez avec des images bitmap trop petites car on ne peut pas eacutetirer sur des pixels


LES TAILLES DrsquoAFFICHAGE

En deacutecembre 2010 sur moovebe on a recenseacute 36 reacutesolutions diffeacuterentes parmi nos utilisateurs Cette information nous montre bien qursquoil est neacutecessaire de deacutefinir en se basant sur des statistiques de freacutequentation reacutecentes la ou les meilleures configurations de base pour lrsquoensemble des utilisateurs cibleacutes Actuellement pour lrsquoaffichage drsquoun contenu destineacute agrave lrsquoensemble des citoyens connecteacutes via un eacutecran drsquoordinateur de bureau on srsquoaligne encore sur du 1024x768px car il srsquoagit de la reacutesolution la plus freacutequemment utiliseacutee mais aussi celle qui agit comme plus petit deacutenominateur commun parmi la multitude des nouveaux et nombreux grand eacutecrans offrant une grande reacutesolutionDe cette taille drsquoeacutecran il faut encore reacuteduire la largeur et la hauteur du contenu en prenant compte de lrsquoespace que peut occuper la barre drsquooutil (dock) de lrsquoOS lrsquointerface mecircme du navigateur avec ses barres drsquooutils les ascenseurs et compagnie Le nouveau Imac avec son eacutecran de 27 pouces affiche une deacutefinition de 2560 x 1440 pixels ce qui donne lrsquoimpression pour la plupart des sites web drsquoecirctre tout petit au milieu de lrsquoeacutecran Pour palier agrave cela rapidement on peut creacuteer un motif qui est deacutefini en arriegravere plan reacutepeacutetitif via CSS et il occupera ainsi tout lrsquoespace et ce quelque soit la reacutesolution de lrsquoeacutecran Enfin on peut aussi reacutealiser une mise en page dite fluide crsquoest agrave dire qui srsquoadapte agrave lrsquoeacutecran lorsque le navigateur est redimensionneacute (exemple httpwwwalistapartcomdresponsive-web-designexex-site-flexiblehtml)Enfin on peut naviguer sur ce mecircme site avec un teacuteleacutephone mobile mais la lecture devient probleacutematique si la mise en page nrsquoa pas eacuteteacute penseacutee en fonction Il existe pour cela une solution javascript (media queries) qui redirigera lrsquoutilisateur sur une feuille de style correspondant agrave lrsquoeacutecran deacutetecteacute et permet drsquoafficher un mecircme contenu dans une mise en page adapteacutee exemple Less Framework is a cross-device CSS grid system based on using inline media queries mdash httplessframeworkcom


LA GRILLE

Hormis pour les e-mails HTML la quasi disparition de la mise en page en tableau (comme dans Word) au profit de la mise en page par CSS a fait reacuteapparaicirctre un principe vieux de plusieurs siegravecles agrave savoir cette bonne vieille grille Quelque soit le modegravele de grille ou le framework CSS utiliseacute (10 pixels ou 960 grid baseline YUI lessframework) lrsquoimportant est drsquoaligner drsquoorganiser les contenus et de creacuteer des espaces vides sur un principe de reacutecurrence visuelle afin de faciliter la lecture mais aussi de faciliter lrsquoorganisation des contenus (2 colonnes 3 colonnes hellip)

Dans tout logiciel de creacuteation (Illustrator Photoshop Fireworks ou Flash) il vous sera possible drsquoafficher la regravegle et des repegraveres Je veillerai donc agrave vous le rappeler en cas drsquoalignement maladroit pendant la phase de creacuteation de votre layout Dans certains cas on peut aussi fabriquer son propre modegravele de grille dans drsquoautre cas ougrave le deacutesordre est rechercheacute la grille sera ignoreacutee (Pour en savoir plus voici un article inteacuteressant sur le sujet httpwwwalistapartcomarticlesoutsidethegrid)


CONSTRUCTION DE PAGES WEB

DEacuteCOUPAGE ET OPTIMISATION DES IMAGES

Vous le savez certainement les images qui sortent drsquoun appareil numeacuterique sont tregraves lourdes car elles comptent un nombre de pixels importants et neacutecessitent alors des capaciteacutes de stockage toujours de plus en plus grande Hors pour les afficher sur le web il est neacutecessaire de les reacuteduire non seulement pour reacuteduire lrsquoespace de stockage mais surtout afin drsquoeacuteviter un temps de chargement trop long pour les utilisateurs Lrsquoattente apporte son lot de frustration et deacutetourne les utilisateurs du site web Ce qui explique parfois un taux de rebond important dans les statistiques de freacutequentation du site

Le rocircle principal de lrsquoinfographiste Web est de redimensionner des images et leur trouver le meilleur format de fichier compatible au plus grand nombre drsquoutilisateurs et un ratio de compression pouvant offrir une qualiteacute visuelle irreacuteprochable pour un poids minimum Il srsquoagit drsquoun point drsquoeacutevaluation technique essentiel pour ce cours en premiegravere anneacutee drsquoinfographie


COULEURS

Pour un affichage sur eacutecran nous utiliserons le codage RVBRGB (Rouge Vert Bleu) Certains navigateurs pourront afficher le CMJNCMYK (Cyan Magenta Jaune Noir) mais ces fichiers sont plus lourds car porteurs drsquoinformations requises agrave lrsquoimpression Offset Photoshop permet la conversion des images quadrichromiques vers des images trichromiques Fireworks quant agrave lui traitent automatiquement toutes les images au codage RVB Si certaines images vous apparaissent ternies crsquoest qursquoil faut convertir leur espace calorimeacutetrique au preacutealable avec Photoshop Je ne mrsquoeacutetendrai pas sur la perception visuelle des couleurs mais les puristes nrsquoont pas la part belle car souvenez-vous qursquoil nrsquoy a pas de configuration unique pour tous les utilisateurs Les luminositeacutes les tons varient drsquoun eacutecran agrave lrsquoautre et de lrsquoendroit ougrave lrsquoon consulte son eacutecran (inteacuterieurexteacuterieur) Sans oublier les perceptions daltoniennes et monochromatique qui touchent jusqursquoagrave 15 de la population (outil de comparaison)

Pour la description des couleurs dans une page web on utilisera le code hexadeacutecimal (ex 000000 = noir FFFFFF = blanc) ou encore RGBA A pour Alpha (Alpha = transparence)


DIMENSIONS

On reacuteduira la taille des images agrave une taille drsquoaffichage neacutecessaire en pixels Si votre image ne doit pas deacutepasser la taille drsquoun eacutecran standard on la reacuteduira par exemple agrave 960px de large sur 600px de haut maximum Le code HTML permet drsquoafficher une image agrave des dimensions diffeacuterentes cependant il ne supprime pas les informations inutiles ce pourquoi il faut drsquoabord les redimensionner avec un logiciel qui reacuteduit le nombre de pixels

Sachez aussi qursquoil est interdit sous peine drsquoemprisonnement agrave vie (sauf cas de circonstance extrecircme) drsquoagrandir une photo en augmentant son nombre de pixels Une photo de 400px sur 400px ne pourra devenir une image de 800x800px (humour laquosauf dans les expertsraquo ndash Julien H) Cela correspondrait agrave eacutetirer un pixel agrave 4x sa taille et lui nuire agrave sa qualiteacute visuelle Jrsquoai cependant remarqueacute que certains neacuteophytes ne constatent pas cette perte de qualiteacute aussi nous ferons des exercices en classe ensemble et face agrave lrsquoeacutecran


POIDS

Le poids des images se calcule en octets

1 octet = 8 bits= 1Byte avec 1 B majuscule (ne pas confondre bit et Byte)1Ko (Kilo Octet)= x10241Mo (Meacutega Octet)= x1024x10241Go (Giga Octet) = x1024x1024x1024

Le kilobit par seconde (symbole kbits ou kbps) est une uniteacute permettant de mesurer une vitesse de transfert de donneacutees Elle eacutequivaut agrave 1 000 bits (et non 1024)Pour connaitre la vitesse en kos (kilo octet par seconde) il faut diviser par 8 (car 8 bits = 1 octet)

Par exemple pour un deacutebit de 24 bitss il faudra 1 seconde pour transfeacuterer 3 octets

MireAdsl me dit que ma bande passante est de 4424 kbps (44248=553 Kosec) Je veille donc en regravegle geacuteneacuterale agrave ne pas creacuteer des pages qui deacutepassent les 500ko

Une petite extension appeleacutee Google Speed pour firefoxfirebug mrsquoindique les ameacuteliorations possibles pour optimiser le chargement de la page


IMAGES BITMAP OU VECTORIELLES

Bitmap VectorielPrincipe Grille de pixels (pixels picture

element) ougrave chaque pixel possegravede une position et une couleur Exemple eacutecran de 640 x 480 ou 1024 x 768

Lensemble des pixels forme un dessin

Points et courbes de beacutezierDes lignes des courbes calculeacutees matheacutematiquement (eacutequation vectorielle) et qui peuvent ecirctre modifieacutees (eacutepaisseur longeur couleur forme)

Lensemble des lignes forme un dessin

Caracteacuteristiques des laquodessinsraquo

Traceacute en laquoescalierraquo donczoom deacutelicat voire impossibleeacutecriture peu lisible si trop petite

Modification sur les pixels

Impression de points qui demandent une grande finesse pour les images au trait afin de ne pas voir descaliers soit 1000 dpi (points par pouce) au minimum

Traceacute preacutecis de lignes donczoom illimiteacute (calcul du logiciel)eacutecriture fine lisible

Modification sur les vecteurs

Impression de lignes fines selon la deacutefinition de limprimante ou de la flasheuse

Caracteacuteristiques des fichiers Volumineux (chaque point est codeacute et meacutemoriseacute)Extension habituelle jpg gif png

Leacutegers Extension svg swf

Logiciels Creacuteation avec Photoshop Fireworks GimpOptimisation supeacuterieure avec imageoptim

Remarque possibiliteacute de transformer un bitmap en mode vectoriel via la fonctionnaliteacute de liveTrace drsquoIllustrator

Creacuteation avec Illustrator Fireworks inkscape canvas etc

Remarque possibiliteacute de transformer en bitmap via Photoshop ou Fireworks

Bilan Ideacuteal surtout pour le traitement de photographie

Ideacuteal pour des dessins au trait (2D)


IMAGES BITMAP (MATRICIELLE)

Enfin les logiciels utiliseacutes pour naviguer sur le web (appeleacute navigateurs ou browsers en anglais) nrsquoaffichent pas tous les types de fichiers images Actuellement pour ratisser court parmi les navigateurs les plus utiliseacutes pour naviguer sur le web on utilisera pour les images Bitmap (crsquoest-a-dire composeacutee de pixels) les formats JPG GIF ou PNG Pour connaicirctre quel format utiliseacute il faut savoir comment ces derniers se comportent

Le format drsquoimage JPEG (ou JPG)

Caracteacuteristiques avantages et meacutethodes de sauvegardes du format JPEGLe format JPEG convient au besoin de compression drsquoimages photographiques de haute qualiteacute car il affiche 16Millions de couleurs (24bits) et offre une reacuteduction de poids dite compression avec perte de 100 agrave 0 de qualiteacute Plus la compression est eacuteleveacutee (et donc plus le fichier est leacuteger) plus la qualiteacute de limage baisse 80 de qualiteacute semble ecirctre un seuil acceptable actuellement pour majoriteacute des eacutecrans mais souvenez vous que les eacutecrans nrsquoont pas tous la mecircme taille de pixels

Le JPG apporte un manque de deacutefinition au niveau des lignes droites et des deacutegradeacutes Il est donc deacuteconseilleacute de lemployer avec des images qui contiennent typographie et formes geacuteomeacutetriques tregraves deacutecoupeacutees tels que des logos ou des diagrammes Ces images conviendront mieux aux formats Gif ou PNG

Pour des images mixes il est possible dans Fireworks de masquer une partie de lrsquoimage avec une compression jpg diffeacuterente Pour une photo drsquoenseigne de magasin ougrave doit preacuteserver lrsquoimage de la marque on masquera par exemple la typographie avec une qualiteacute jpeg 100 le reste de lrsquoimage adoptera une qualiteacute agrave 80

Ne permet pas de transparence


Le format drsquoimage GIF

Le format GIF est un ancecirctre offrant une compression sur le nombre de couleurs possible de 1 agrave 256 couleurs (8bits) Ce format ne convient donc pas aux images contenant des deacutegradeacutes ou au photographies de haute qualiteacute On lrsquoutilise pour des logos ou scheacutemas Ce format est encore largement utiliseacute pour les e-mails de type newsletters HTML devant contenir des images Crsquoest drsquoailleurs encore maintenant le seul format largement compatible pour lrsquoaffichage drsquoanimation dans les e-mails On parlera alors de Gif animeacuteGegravere assez mal la transparence sur les contours des images deacutetoureacutee ou textes

Le format drsquoimage PNG

Le format PNG peut soit utiliser le mode 8 bits 24bits ou 32bitsIl permet la transparence et offre tregraves souvent un bien meilleur reacutesultat que son homogue GIF en 8bitsLe reacutesultat en 32bits est volumineux car on ne peut ajuster la compression le JPEG conviendra alors mieux lorsque les images ne neacutecessitent pas de transparence

Conclusion (png jpg gif )

Il est neacutecessaire de comparer le poids et votre perception de la qualiteacute de lrsquoimage rendue avec un logiciel approprieacute tel que Fireworks ou lrsquoexportation pour le Web de Photoshop

Enfin on peut encore optimiser le poids des images (png gif ou jpeg) avec imageOptim sur les conseils de Google


IMAGES VECTORIELLES

Le format drsquoimage SVG

On en parlera de plus en plus le format svg permet lrsquoaffichage drsquoimages vectorielles sur le Web et donc leur redimensionnement agrave lrsquoeacutecran Tous les navigateurs dont IE8 ne permettent pas encore leur lecture IE9 devrait linteacutegrer nativement

Le format SWF

Le format swf est un format Adobe largement rencontreacute sur le web neacutecessite le plug-in Flash et peut contenir des images bitmap ou vectorielles Ce format reacutealisable agrave partir drsquoun seul logiciel telque Flash ou autres permet eacutegalement drsquoanimer ou interagir avec ces images Il nrsquoest malheureusement pas supporter par Apple sur ces appareils tactiles ce qui en fait une technologie en recrudescence actuellement eacutetant donneacute la dominance drsquoapple sur le marcheacute des tablettes tactiles qui eacutevoluera cependant tregraves vite dans le courant de cette anneacutee avec lrsquoarriveacutee de nouvelles tablettes plus complegravetes technologiquement telles que la Samsung Galaxy TAB avec son systegraveme Android


LES SYSTEgraveMES DrsquoEXPLOITATION amp LES NAVIGATEURS WEB

La varieacuteteacute de systegravemes drsquoexploitation (OS = Operating System) pour les ordinateurs de bureau (windows Mac Os Linux ) et ceux utiliseacutes par les smartphones (Symbian (Nokia) Android RIM (=blackberry) iOS (=apple) Android (=HTC)) apportent leurs diffeacuterences dans la lecture du contenu drsquoune page web Aussi il est possible agrave lrsquoaide de codes javascript de deacutetecter facilement le type et la version des plateformes utiliseacutees et de les rediriger automatiquement lrsquoutilisateur vers des contenus avec une stylisation et une interactiviteacute approprieacutees

Les navigateurs sont les logiciels qui permettent de consulter une page webEux aussi apportent quelques diffeacuterences quant agrave linterpreacutetation des langages web HTML et CSS qui deacutecrivent une page web

Un web designer doit comparer le reacutesultat sur les navigateurs principaux Il installera donc les principaux utilisateurs sur sa machine et disposera ideacutealement drsquoune vieille machine pour ses tests Il existe aussi des geacuteneacuterateurs de captures en ligne pour ratisser plus large comme browsershotsorgEnfin ce dernier (fmbipcom) vous permet drsquoenvoyer lrsquoadresse du site en construction agrave votre client et drsquoavoir un rapport technique sur son navigateur et compatibiliteacute avec les nouvelles eacutevolutions des langage HTML5CSS3


PAGE WEB LE LANGAGE HTML

LrsquoHypertext Markup Language geacuteneacuteralement abreacutegeacute HTML est le format de donneacutees conccedilu pour repreacutesenter les pages web Crsquoest un langage de balisage qui permet drsquoeacutecrire de lrsquohypertexte drsquoougrave son nom HTML permet eacutegalement de structurer seacutemantiquement et de mettre en forme le contenu des pages drsquoinclure des resources multimeacutedias dont des images des formulaires de saisie et des eacuteleacutements programmables tels que des applets

Lrsquoapprentissage du langage html est agrave la porteacutee de tout le monde Dans votre navigateur il vous suffit de faire un clic droit sur un site web pour afficher le code source et deacutecouvrir la description de la page afficheacutee

Le guide de reacutefeacuterence du W3schools offre lrsquoavantage de pouvoir tester le langage HTML en ligne mdash httpwwww3schoolscom

Adobe Dreamweaver vous permettra de visualiser en parrallegravele le code source avec les balises et le rendu HTML tel qursquoil sera vu dans un navigateur

Lrsquoinsertion dimages se fait via lrsquoeacutediteur wysiwyg ou encore via la commande suivante ltimg src=imagegifgt avec la possibiliteacute drsquoajouter des attributs tels que la taille description etc

Validation mdash Avec le HTML validator vous pouvez valider votre html suivant les normes proposeacutees par le W3C Le W3C est lrsquoorganisme officiellement chargeacute de la normalisation de tout ce qui concerne le Web et particuliegraverement des eacutevolutions du langage HTML mdash httpvalidatorw3org


CSS

Cascading Style Sheet = les feuilles de style en cascade Elles permettent de deacutecrire les aspects visuels du contenu deacutecrits dans la page HTML En cascade pourquoi Et bien parce que une page HTML est composeacutee sur un principe de hieacuterarchie ou drsquoheacutereacutediteacute on parlera de balises parents et drsquoenfants Ainsi si vous avez un parent avec des yeux bleus lrsquoenfant aura les yeux bleus sans besoin drsquoajouter la description sur lrsquoenfant A moins que vous creacuteez lrsquoexception et deacutecidiez que lrsquoenfant ait les yeux drsquoune autre couleur

Pour creacuteer une feuille de style CSS on peut utiliser une page HTML type complegravete pour visualiser le rendu de tous les styles neacutecessaires au travers du site web

Le guide de reacutefeacuterence du W3schools offre lrsquoavantage de pouvoir tester le code en ligne mdash httpwwww3schoolscom


TYPOGRAPHIE

Le choix de la fonte est deacutefinie via la feuille de style et la proprieacuteteacute font-familyIl existe une seacuterie de typographie geacuteneacuterique installeacutee de base dans les diffeacuterents systegravemes Mac et Windows auxquelles on peut faire appel Cependant lorsqursquoon souhaite afficher une fonte qui nrsquoest pas installeacutee dans systegraveme des utilisateurs il est neacutecessaire de recourir agrave une technique de remplacement de typographie La technique habituelle est drsquoutiliser une image (gif jpg png) qui affiche le texte ou encore agrave un fichier Flash (swf) La typographie web a bien eacutevolueacute ces derniegraveres anneacutees et il est possible deacutesormais de faire appel agrave une typographie (TTF EOT WOFF SVG) qui est installeacute sur un serveur web pour lrsquoencapsuler dans la page web ceci via la feuille de style et un seacutelecteur font-face

Il existe des typographies gratuites et libre de droits avec kits font-face disponibles sur des sites comme wwwfontsquirrelcom

Pour laquotoutraquo savoir sur le passionnant sujet de la typographie vous trouverez un article tregraves inteacuteressant sur smashingmagazine

Web Typography Educational Resources Tools and Techniques

httpwwwsmashingmagazinecom20101116web-typography-100-educational-resources-tools-and-techniques


JAVASCRIPT

JavaScript est un langage de programmation de scripts principalement utiliseacute dans les pages web interactives mais aussi coteacute serveur

JQuery est une bibliothegraveque JavaScript libre qui porte sur linteraction entre JavaScript (comprenant AJAX) et HTML et a pour but de simplifier des commandes communes de JavaScript Le framework contient notamment des eacuteveacutenement des effets et animations

Voir la shadowbox pour ouverture de fenecirctres modaleshttpwwwshadowbox-jscom

Exemple drsquoanimation avec Jqueryhttpsixrevisionscomjavascript10-awesome-techniques-and-examples-of-animation-with-jquery


FLASH amp SILVERLIGHT

Depuis son lancement en 1996 la technologie Flash est devenue une des meacutethodes les plus populaires pour ajouter des animations et des objets interactifs agrave une page web de nombreux logiciels de creacuteation et OS sont capables de creacuteer ou drsquoafficher du Flash Flash est geacuteneacuteralement utiliseacute pour creacuteer des animations des publiciteacutes ou des jeux videacuteo Il permet aussi dinteacutegrer de la videacuteo en streaming dans une page jusquau deacuteveloppement dapplications Rich MediaLes fichiers Flash geacuteneacuteralement appeleacutes laquo animation Flash raquo portent lextension swf Ils peuvent ecirctre inclus dans une page web et lus par le plugin Flash du navigateur ou bien interpreacuteteacutes indeacutependamment dans le lecteur Flash Player

Lrsquoiphone ne permet pas la lecture de fichier swf via son navigateur ce qui en reacutesulte que beaucoup de studios de publiciteacute se sont deacutetourneacutes de format vers drsquoautres solutions non-proprieacutetaire que sont lrsquohtml5css3javascript

Des sites impressionnants reacutealiseacute avec Flash httpwwwthefwacom

Voir le site Adobe Flash httpwwwadobecomfrproductsflashwhatisflash

Voir son concurrent microsoft avec son produit Silverlight sur httpwwwsilverlightnet


HEBERGEMENT amp MISE EN LIGNE

Dans notre cas ougrave un prototype tel que celui que vous ecirctes ameneacutes agrave reacutealiser ne neacutecessite pas de donneacutees dynamiques nous aurons uniquement besoin drsquoun espace disque accessible publiquement via une adresse web (http)

Crsquoest le cas du service proposeacute par dropbox (ou wuala ) ougrave vous avez 2GB drsquoespace gratuit et adressable via le navigateur pour autant que vous placiez bien vos fichiers dans le dossier public Cet espace Web est accessible tel un dossier virtuel dans votre interface systegraveme mac ou pc le copier-coller de fichiers devient alors tregraves efficace ou encore via une interface drsquoadministration en ligne ougrave vous pouvez donc teacuteleacuteverser ou teacuteleacutecharger vos fichiers

Un site Internet dynamique (ougrave les donneacutees doivent ecirctre mises reacuteguliegraverement agrave jour comme pour un site e-commerce ougrave la gestion de stock est automatiseacutee en fonction des achats des utilisateurs) neacutecessite dans la grande majoriteacute des cas une connexion agrave une base de donneacutees On heacutebergera alors ce type de sites web dits laquodynamiquesraquo sur un serveur web configureacute par exemple avec mySQL (serveur web) et phpMyAdmin (gestion de bases de donneacutees)

Pour ce type drsquoheacutebergement le teacuteleacuteversement de fichiers est possible via une connexion FTP Vous devez alors disposer de lrsquoadresse du compte FTP du nom drsquoutilisateur et drsquoun mot de passe (si lrsquoaccegraves est priveacute) Pour le transfert de fichier vous utiliseriez alors un logiciel FTP telque Filezilla (gratuit mac et pc) ou Fireftp (composant gratuit pour Firefox)

Pour ce type drsquoheacutebergement ils existent de nombreuses offres disponibles sur le Web agrave comparer en fonction de vos besoins (ovh infomaniaks all2all iweb hosteur )


Remerciements Agrave mes collaborateurs passionneacutes qui partagent joyeusement leurs savoirs Jean-Baptiste Feacutelix Thomas Lesire Louis Volont Alexandre Plennevaux (pour ses tweets) Marc Wathieu (pour multimedialab) Franccedilois Bourgaux (pour son oeil de lynx) Julien Henrotte (pour la relecture) Benjamin DeCock (pour ses images)

Agrave Margaux


COURS DE TECHNIQUES INFOGRAPHIQUES MULTIMEacuteDIA

Illustrations Cliquez-ici pour afficher les images de la preacutesentation

Table des matiegraveres

1 TIM DESCRIPTION DU COURS 4

LES OBJECTIFS DU COURS 5A INFOGRAPHIE 5B PREacuteSENTATION 6C INTERACTIVITEacute 7

AU PROGRAMME 8LES LECcedilONS ET EXAMEN 9PROFESSEUR = CLIENT 10

VALEacuteRIE GEacuteRARD 11

2 MEacuteTIER INFOGRAPHISTE WEB amp MULTIMEacuteDIA 12

DESCRIPTION DE LA FONCTION 12ORGANIGRAMME LA PLACE DE LrsquoINFOGRAPHISTE 14

DOMAINE DrsquoACTIVITEacuteS amp APPLICATIONS MULTIMEacuteDIA 15INFOGRAPHISTE MULTIMEacuteDIA SPEacuteCIALISATION WEB-DESIGN 15LA POSITION ET LE SALAIRE DU WEB-DESIGNER 17RESSOURCES amp INSPIRATIONS 19

COcircTEacute MATEacuteRIEL 19COcircTEacute LOGICIEL 19

WM Agrave LrsquoHEAJ 22FORMATION CONTINUE 22






















A INFOGRAPHIE






B PREacuteSENTATION










AU PROGRAMME





















PROFESSEUR = CLIENT















































































hellip

















CAHIER DES CHARGES


GESTION DE PROJET



AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux






















A INFOGRAPHIE






B PREacuteSENTATION










AU PROGRAMME





















PROFESSEUR = CLIENT















































































hellip

















CAHIER DES CHARGES


GESTION DE PROJET



AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux


B PREacuteSENTATION










AU PROGRAMME





















PROFESSEUR = CLIENT















































































hellip

















CAHIER DES CHARGES


GESTION DE PROJET



AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux






AU PROGRAMME





















PROFESSEUR = CLIENT















































































hellip

















CAHIER DES CHARGES


GESTION DE PROJET



AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux

















PROFESSEUR = CLIENT















































































hellip

















CAHIER DES CHARGES


GESTION DE PROJET



AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux










































































hellip

















CAHIER DES CHARGES


GESTION DE PROJET



AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux
















CAHIER DES CHARGES


GESTION DE PROJET



AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux


AUDIT


ARBORESCENCE



DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux


DESIGN

























LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux






















LA GRILLE









COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux







COULEURS




DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux


DIMENSIONS




POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux


POIDS














































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux








































IMAGES VECTORIELLES



Le format SWF
















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux















CSS





TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux


TYPOGRAPHIE







JAVASCRIPT





















Agrave Margaux


JAVASCRIPT





















Agrave Margaux

















Agrave Margaux


Syllabus de Techniques Infographiques Multimedia

Documents

Transcript of Syllabus de Techniques Infographiques Multimedia