Syllabus de Techniques Infographiques Multimedia

tim.infographie-sup.be

Cours de Techniques Infographiques Web & Multimédia ©2011 infographie-sup.be — Valérie Gérard

tim.infographie-sup.be

COURS DE TECHNIQUES INFOGRAPHIQUES MULTIMÉDIA Illustrations : Cliquez-ici pour afficher les images de la présentation.

Table des matières

1. TIM : DESCRIPTION DU COURS ..............................................................................................4 LES OBJECTIFS DU COURS .................................................................................................................5 A. INFOGRAPHIE...................................................................................................................5 B. PRÉSENTATION ................................................................................................................6 C. INTERACTIVITÉ .................................................................................................................7 AU PROGRAMME ..............................................................................................................................8 LES LEÇONS ET EXAMEN....................................................................................................................9 PROFESSEUR = CLIENT ...................................................................................................................10 VALÉRIE GÉRARD...............................................................................................................11

2. MÉTIER : INFOGRAPHISTE WEB & MULTIMÉDIA .................................................................12 DESCRIPTION DE LA FONCTION.........................................................................................................12 ORGANIGRAMME : LA PLACE DE L’INFOGRAPHISTE..................................................................14 DOMAINE D’ACTIVITÉS & APPLICATIONS MULTIMÉDIA ..........................................................................15 INFOGRAPHISTE MULTIMÉDIA, SPÉCIALISATION WEB-DESIGN................................................................15 LA POSITION ET LE SALAIRE DU WEB-DESIGNER .................................................................................17 RESSOURCES & INSPIRATIONS.........................................................................................................19 CÔTÉ MATÉRIEL .................................................................................................................19 CÔTÉ LOGICIEL ..................................................................................................................19 WM À L’HEAJ .................................................................................................................................22 FORMATION CONTINUE ....................................................................................................................22

tim.infographie-sup.be

3. CRÉATION DE SITES WEB .....................................................................................................23 MÉTHODOLOGIE .............................................................................................................................23 CONCEPTION DE PROJET .................................................................................................................25 CAHIER DES CHARGES.........................................................................................................25 GESTION DE PROJET ...........................................................................................................25 AUDIT...............................................................................................................................26 ARBORESCENCE ................................................................................................................26 DESIGN ............................................................................................................................27 INSPIRATION ET LIGNE GRAPHIQUE .......................................................................................28 CRÉATION GRAPHIQUE POUR LE WEB.................................................................................................29 LES PIXELS, DÉFINITION ET RÉSOLUTION D’ÉCRAN ..................................................................29 LES TAILLES D’AFFICHAGE ..................................................................................................31 LA GRILLE ........................................................................................................................32 CONSTRUCTION DE PAGES WEB ........................................................................................................33 DÉCOUPAGE ET OPTIMISATION DES IMAGES ............................................................................33 COULEURS ........................................................................................................................34 DIMENSIONS .....................................................................................................................35 POIDS ..............................................................................................................................36 IMAGES BITMAP OU VECTORIELLES........................................................................................37

Images bitmap (matricielle)....................................................................................38 Le format d’image .JPEG (ou .JPG) ..................................................................38 Le format d’image .GIF .....................................................................................39 Le format d’image .PNG ...................................................................................39 Conclusion (png, jpg, gif, ...?) ............................................................................39 Images vectorielles .................................................................................................40 Le format d’image .SVG ....................................................................................40 Le format .SWF .................................................................................................40 LES SYSTÈMES D’EXPLOITATION & LES NAVIGATEURS WEB........................................................41 PAGE WEB, LE LANGAGE HTML .............................................................................................42 CSS .................................................................................................................................43 TYPOGRAPHIE ....................................................................................................................44 JAVASCRIPT.......................................................................................................................45 Jquery ......................................................................................................................45 FLASH & SILVERLIGHT ........................................................................................................46

tim.infographie-sup.be

HEBERGEMENT & MISE EN LIGNE ...............................................................................47

1. TIM : DESCRIPTION DU COURS Il s’agit comme son nom l’indique d’un cours liée à la création graphique et au traitement des images fixes, animées et interactives.

Pour le web et plus largement pour le multimédia (mobile, DVD, bornes interactive, tablettes, smartphones, TV interactive, frigo intelligents, tamagoshi, 6ème sens …)

La spécificité de l’infographie pour le Web ou Web (Graphic) design est la création et traitement d’images fixes, animés et interactives favorisant la relation entre l’utilisateur et le contenu via la machine.

tim.infographie-sup.be

LES OBJECTIFS DU COURS Mettons en évidence, 3 objectifs majeurs du cours TIM A. INFOGRAPHIE La création et optimisation d’images pour écran – Ce pourquoi vous êtes là. Que vous choisissiez l’infographie pour l’animation 2D ou 3D, le pré-presse et la publication de document numérique (pdf, magazine ipad, …), ou encore les jeux vidéos, ce cours vous sera utile car vous serez amenés à créer ou optimiser des images et des mises en page pour les afficher sur écran.

Exemples de situations : - Vous recevez des photos très grands formats sur DVD, et vous devez les envoyer tels quel par voie électronique rapide.

- Vous recevez un logo au format .eps, qu’est-ce et comment l’afficher dans une signature d’email?

- Vous devez détourer la photo d’un bâtiment et l’intégrer sur un fond vidéo, quel format choisir?

- Vous recevez des fichiers de personnages 3D et devez les intégrer dans une bannière 2D et les animer sur le web.

- Vous devez centrer une image dans une page web quelque soit l’écran.

Quels modes de transfert, quelles tailles, quels poids, quels type de fichiers, quels langages, quels logiciels choisir? Ce seront les questions qu’ils faudra vous poser tout au long de votre profession et nous découvrirons ensemble les solutions techniques actuelles et enfin comme répondre à ces questions en fonction des technologies futures.

tim.infographie-sup.be

B. PRÉSENTATION On attend de l’infographiste qu’il sache faire des présentations. Vous serez amené à le faire tout au long de vos études, et il vous faudra mettre en valeur vos travaux dans de nombreuses situations telles que dans le cadre d’une soumission de projets, de recherche de stage, pour l’obtention d’une bourse ou d’un emploi.

Vous serez jugés en quelques secondes sur la présentation et votre sélection d’images. La grande majorité des employeurs des studios graphiques jugeront votre portfolio en ligne avant même de lire votre CV, dans l'expectative d’y découvrir la créativité et la qualité technique que vous aurez mises en oeuvre tout au long de vos études en infographie.

Bien sûr, pour les créatifs que ne disposent pas de sites web, il existe de nombreuses galeries en ligne telles que Behance qui constituent d’ailleurs une magnifique source d’inspiration parmi des réalisations graphiques de qualité. Le problème avec ces galeries est que vous êtes noyés parmi un millions d’autres infographistes et contraints par la propre logique du site pour la présentation de vos réalisations. Cela constitue un bon départ, mais les gens sont demandeurs d’une adresse web car ils sont curieux et souhaiteront en savoir plus sur vous. Ainsi la sélection des travaux, l’habillage graphique mais aussi le concept visuel et interactif de votre portfolio en diront plus encore sur votre créativité, votre personnalité et la qualité de votre travail. Il s’agit de communication visuelle, celle qui vous differenciera des autres créatifs et qui donneront aux gens l’envie de vous faire confiance (trust en anglais) pour la bonne conduite de leur projet.

Pour les infographistes parmi vous intéressés par le métier du web et du multimédia, 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 maîtrise quant à la réalisation de projets interactifs.

tim.infographie-sup.be

C. INTERACTIVITÉ Pour tout infographiste, les bases des techniques infographiques multimédia vous permettront de collaborer avec les nombreux acteurs de l’interactivité (game designer, magazine designer, web designer, développeurs, ergonomes, ...)

Ce cours a pour but également de vous donner un aperçu des techniques liées à la réalisation de sites web professionnels tel qu’elle est étudiée dans le groupe de travail WM : conception de projet, commu, layouts, HTML/CSS, animation flash, programmation Flash, javascript, vidéos, motion design, et l’ergonomie ...

tim.infographie-sup.be

AU PROGRAMME Que nous dit le programme du cours : “concevoir et réaliser le design graphique et interactif d'un site web et/ou d'une application multimédia.” (voir l'entièreté du programme sur le support de cours en ligne - tim.infographie-sup.be ) L’année dernière nous avons conçu et habillé un site web portfolio de type blog.

Cette année, vous réaliserez un prototype de site web portfolio d’une seule page, en 5 étapes.

PHASE 1 PHASE 2 PHASE 3 PHASE 4 PHASE 5

CROQUIS PAPIER WIREFRAME N&B LAYOUT GRAPHIQUE MOCKUP INTERACTIF SCREENCAST VIDEO

Cette approche de conceptualisation vous donnera une plus grande liberté créative, tout en vous apportant les bases et le vocabulaire techniques utile à la réalisation d’un site web.

Donc beaucoup de cogitation, de recherche, de création visuelle et de dialogue pour aboutir à un layout (au choix : fireworks,photoshop/illustrator).

Un peu d’interactivité avec Fireworks pour exporter un layout interactif.

Un peu d’intégration HTML/CSS, de Flash et de Javascript pour aboutir à une réalisation interactive «prototype» Et enfin une capture vidéo en guise de démonstration multimédia.

tim.infographie-sup.be

LES LEÇONS ET EXAMEN Après cette introduction théorique de 2h (+ lecture du syllabus), vous serez amenés à réaliser une série de petits exercices en laboratoire qui vous conduiront petit à petit de la conception artistique à la réalisation interactive du prototype.

Les exercices pour y parvenir se trouveront sur le site : tim.infographie-sup.be Planning des leçons et livraison : 1. Méthodologie pour la création de sites web – 2h : cours théorique (keynote+syllabus) 2. Conception de projet - 2h : lecture syllabus et briefing, inspiration & croquis ----------------------------------------------------> présentation/livraison d’un croquis 3. Conception de projet – 3h : croquis > wireframe ----------------------------------------------------> présentation/livraison d’un wireframe 4. Design d’interface graphique – 3h : wireframe > layout ----------------------------------------------------> présentation/livraison d’un layout 5. Construction HTML (page web, liens) – 3h : Layout > Mockup 6. Habillage : intégration graphique et CSS - 3h : Layout > Mockup ----------------------------------------------------> présentation/livraison du mockup 7. Animation Flash – 3h : Mockup + animation logo 8. Interactivité avec Flash et Jquery – 3h : Mockup + galerie d’images ----------------------------------------------------> présentation/livraison du mockup 9. Vidéo : capture et encapsulation – 3h ----------------------------------------------------> Examen de juin : prototype fini.

tim.infographie-sup.be

PROFESSEUR = CLIENT Le rôle premier de votre professeur est de vous apprendre les bases du métier d’infographiste pour le web et le multimédia, de vous apprendre à apprendre car les technologies évoluent rapidement, et transmettre sa passion du métier.

Vous devrez discuter de la direction artistique de vos projets graphiques avec votre professeur et collègues de classe. Ces discussions devraient vous permettre d'affiner la qualité de vos communications visuelles et votre argumentation.

Ces discussions seront une bonne préparation au travail en équipe et avec le client.

Sauf rare exception, un projet se déroule toujours bien lorsque le graphiste communique régulièrement et ouvertement avec son client, il en va de même avec ses professeurs. Lors de ces entretiens, vous devrez vous assurez de bien répondre aux attentes exprimées de le briefing et le cahier des charges. En cas de piétinement, votre interlocuteur pourra faciliter vos choix en exprimant plus précisément ou en réorientant ses attentes. N’hésitez pas à lui faire part de vos craintes ou de vos nouvelles idées. Une présentation régulière du travail avancé pour l’échange de point de vue seront primordial pour une bonne conduite de projet.

Parallèlement, une série d’exercices dirigés vous permettra l’apprentissage général des bases de techniques infographiques multimédia. Votre professeur est là pour vous offrir le complément d’information nécessaire au bon suivi des tutoriels qui seront élaborés à cet effet. Une plateforme en ligne vous permettra de suivre le cours à votre rythme suivant l’agenda défini. (tim.infographie-sup.be) Pour tout ce qui sort des attentes techniques de bases, votre professeur peut vous aider à faire une recherche sur Google et dans les manuels spécialisés vers la découverte d’une solution. Enfin, il faut apprendre à se débrouiller seul et pour cela «Google est ton ami» mais l’amitié requiert patience et tolérance.

tim.infographie-sup.be

VALÉRIE GÉRARD Enseignante à l’HEAJ depuis 2003. J’ai cumulé 10 ans d’expérience en agence comme employée et comme indépendante en tant qu’infographiste spécialisée pour le web. J’ai travaillé en Belgique, au Luxembourg et aux Etats-Unis dans des secteurs très variés comme le dessin animé, le jeu en ligne, l’événementiel 3D, la publicité, la pédagogie, et l’institutionnel.

Quelques références internationales : ABC Network, Universal Music, Editions Dupuis, International Diamond Laboratories, UCM, Wallonie-Bruxelles International.

Mon profil : Web Graphic Designer / Web art director Compétences : identité visuelle, coordination et conception de projets graphique et interactifs, ergolayout, layout web, illustration, animation Flash, intégration CSS. Découvrez notre portfolio en ligne sur www.moove.be.

Le Web, un cabinet de curiosité à partager.

Je cultive ma curiosité en gardant un oeil sur les technologies récentes et je m'intéresse à l’évolution des interfaces hommes-machine et d’applications en tout genre dont principalement les applications liées à la direction artistique, la conception de projet, et conception graphique pour le web. Je suis bien sûr là pour partager mon expérience, mais la vôtre m'intéresse également. Aussi si vous le souhaitez nous pourrons échanger nos points de vues et découvertes.

Rendez-vous sur mes tweets : twitter.com/moove / twitter.com/profstiw Les bookmarks à gogo sur delicious : delicious.com/damsha

tim.infographie-sup.be

2. MÉTIER : INFOGRAPHISTE WEB & MULTIMÉDIA Le nouveau millénaire est (vous l’aurez remarqué jusque dans vos poches) synonyme de communication numérique interactive et mobile. La documentation, le courrier, la photo, la télévision, la radio, le téléphone, les satellites, ... Tous ces médias sont désormais interconnectés et disponibles depuis votre téléphone mobile que vous soyez dans les airs comme dans le désert ou encore au petit coin pour certains ;/ Si vous le désirez tout le monde peut savoir où vous êtes, vous voir, vous parlez et partager vos aventures en temps réel.

Les métiers de la communication n’ont donc jamais eu autant besoin d’infographistes web & multimédia qu’à l’heure actuelle. Les technologies sont nombreuses, les débouchés aussi.

Nous nous intéresserons ici au métier de l’infographiste orienté Web & Multimédia.

En anglais : Web Graphic Designer.

DESCRIPTION DE LA FONCTION L'infographiste est indispensable à la réalisation des produits et services multimédias. Comme son nom l'indique, l'infographiste est un spécialiste du graphisme informatique. Il crée des dessins à l'aide de logiciels adaptés au dessin sur ordinateur.

Son boulot est varié et demande des dons artistiques associés à une habileté technique. Il crée ou traduit les dessins des personnages, décors, icônes, textes, animations et autres dans un format numérique, en suivant les directives du

tim.infographie-sup.be

concepteur graphique. S'il a besoin d'utiliser des éléments visuels déjà existants comme des photos ou des vidéos, il doit alors les numériser et les adapter pour une visualisation optimale sur le matériel utilisé (ordinateur, gsm, …)

Pour cela, il a recours à des logiciels spécialisés qui lui permettent de faire corrections, filtrages, effets spéciaux, etc.

L'infographiste connaît aussi les formats de compression qui consiste à réduire la taille d'un ensemble d'informations numériques afin de faciliter, par exemple, l'archivage et/ou la transmission à distance d'image et leurs normes.

Lorsqu'il a rassemblé les éléments graphiques et visuels tels que textes, illustrations, photos, vidéos, etc. dans les formats adéquats, il doit encore les placer sur l'écran (ou les mettre en page) en harmonie avec le scénario et/ou la navigation et les conventions graphiques.

L'infographiste travaille sous la responsabilité du directeur artistique. Lorsqu'il n'y a pas de directeur artistique, il est l'interlocuteur direct entre le chef de projet. l'‘auteur le concepteur graphique.

Ce sont les techniques et astuces élaborées par les infographistes qui rendront l'oeuvre multimédia agréable et facile (on dira ergonomie) à contempler et qui donneront l'envie de s'y plonger.

Source : L’infographiste, Des métiers pour le multimédia, AWT — 2011.

tim.infographie-sup.be

ORGANIGRAMME : LA PLACE DE L’INFOGRAPHISTE L’œuvre multimédia repose sur un certain nombre d’étapes essentielles à son ‘cycle de vie’. Chacune de ces étapes fait intervenir des compétences particulières appelées les métiers du multimédia. Découvrons donc ci-dessous quelles peuvent être les places de l’infographiste multimédia.

Production Editeur, Producteur, Juriste, Prospecteur, …

Conception Auteur, Directeur Artistique, Infographiste multimédia pour la création d’image ; l’architecture web et le design d’interface, Illustrateurs infographistes, Illustrateur photo, Illustrateur vidéo, Illustrateur sonore, Psychopédagogue, …

Réalisation Réalisateur, Directeur Technique, Développeur, Programmeur, Infographiste Multimédia, infographiste 3D, Animateur 2D/3D, Testeur, Traducteur, Monteur, …

Exploitation Fournisseur d’accès (ISP), Spécialiste Réseau, Administrateur web (webmaster), Presseur, Packager, …

Distribution (Technico-)commercial, commerçant, …

Utilisation Journalistes du web, Archivistes multimédia, Conseiller technique (helpdesk), Formateur, …

tim.infographie-sup.be

DOMAINE D’ACTIVITÉS & APPLICATIONS MULTIMÉDIA Informatique, bureautique, marketing, édition, presse, publicité, jeux et pédagogie, …

Les champs d’application sont nombreux qu’il s’agisse de se divertir, de s’informer, de communiquer, d’enseigner, de former, de vendre, de faire des transactions, d’archiver, de se cultiver, …

Exemples d’applications : applications connectées (mobiles, tv interactive), site vitrine, site portails, site e-commerce, catalogue en ligne, les contenus graphiques de la formation à distance, l’imagerie et animation technique (météo, bourse, sciences, médecine, …), les e-mail marketing, les jeux en ligne, les bannières publicitaires, les motion reel, la réalité augmentée, les magazines sur ipad, ...

INFOGRAPHISTE MULTIMÉDIA, SPÉCIALISATION WEB-DESIGN Le métier d’infographiste multimédia concerne essentiellement la création, le traitement et l'exploitation des images numériques et interactive de produits multimédia on-line (en ligne) et offline (sur support cd, dvd, …).

Ce métier regroupe, tel qu’on le voit plus haut, plusieurs fonctions de la conception à la réalisation. On dira plus précisément web-designer en ce qui concerne le domaine du web.

Un web-designer peut être être amené à réaliser diverses activités tels que: -

Concepteur graphique (on fait la nuance par rapport au webmaster/ webdesigner en précisant « web graphic designer », il s’agit du profil du groupe de travail WM ici à l’HEAJ Architecte web (conception d’arborescence, navigation, interactivité) Ergonome : analyses d'activité avec des utilisateurs afin de rendre les interfaces facilement utilisables.

tim.infographie-sup.be

-

Designer d’interface (layout designer, UI designer) Illustrateur de contenu graphique/photo/vidéo/sonore, animateur 2D ou 3D, motion designer.

Intégrateur (html/css) – découpage et structuration de site web Flash designer / développer : créateur d’animation interactive

Sorti des archives mais toujours un plaisir à revoir: Visitez le site portfolio d’un web-designer polyvalent et original : www.pixelpharmacy.com Le webdesigner est curieux, créatif, et imaginatif. Il a des facultés en dessin qui lui permettent de concrétiser ses idées sur papier ou à l’écran.

Suite à un cahier des charges qu’il a mis en place ou auquel il a participé, il est en mesure de créer un site Internet ou intranet, de mettre en place une architecture interactive alliée à un visuel graphique adaptée afin de garantir une identité visuelle de qualité.

Doté d’un esprit d’analyse, il fait en sorte que son produit soit ergonomique, d’une navigation simple et efficace afin de pouvoir répondre à l’attente des utilisateurs.

Il maîtrise alors les contraintes techniques liées aux supports de communication : adaptation d’une charte graphique « papier » à une charte « interactive », compatibilité des principaux navigateurs web en matière d’intégration HTML …

Le web-designer mène une veille technologique permanente sur les différents outils qui interfèrent dans son activité et approfondira s’il le souhaite l’étude des langages liés à l’interactivité.

Il garde un œil ouvert sur les différentes stratégies on-line existantes de manière à promouvoir son produit de manière efficace. Il possède alors une bonne

tim.infographie-sup.be

connaissance du mode de fonctionnement des outils de recherche en matière de référencement.

LA POSITION ET LE SALAIRE DU WEB-DESIGNER La position dans l’entreprise varie selon différents facteurs tels que la taille de l’entreprise, la créativité, la qualité graphique, les connaissances techniques, l’expérience, le degré de responsabilité recherché, le domaine d’activité, le pays, etc.

L’avantage du métier est sa grande flexibilité. Il est possible de choisir si l’on souhaite travailler comme employé ou/et en indépendant, en studio ou en télétravail, en équipe ou en solo pour des agences, ou directement pour des clients.

Pour les jeunes qui souhaitent s’essayer au métier d’indépendant, il existe des associations comme SmartAsbl, Azimut etc… qui vous offre un statut d’employé pour les jours ou vous travailler sur les contrats que vous ramenez, avec un support administratif (bon de commande, contrat, plan financier, …) et des conseils pour démarrer sa carrière d’indépendant.

Une scéance d’information de Smart ASBL est organisée tous les ans en 3ème année.

Vos professeurs dont la plupart ont travaillé en industrie, sont indépendants complémentaires ou employés à temps partiel en entreprises sont là bien sûr pour partager leur expérience, à vous de poser les bonnes questions.

Le métier d’infographiste est un métier de service aussi n’espérez pas devenir milliardaire à moins de vous lancer dans la création de produits logiciels qui rencontreraient un succès fou, qui sait ;) La plupart d’entre-nous exerce le métier par passion sans trop compter leurs heures s’il le souhaite, mais la fonction permet de vivre très dignement tout en s’accordant une vie de loisirs après le travail.

tim.infographie-sup.be

Pour situer vos objectifs, voici une étude récente sur les salaires du design interactif en France : http://www.journaldunet.com/ebusiness/le-net/salaires-design/ webdesigner.shtml Pour information, un étudiant fraichement sorti avec son diplôme de bachelor en poche nous informe avoir trouvé un travail en Belgique dans les 3 mois après sa session de juin 2010, une place à 1400€ net, avec contrat indéterminé et une voiture de société. Le barème se situe vers les 1300euros net.

Suivant l’expérience, la spécialisation, ou sa renommée : un infographiste indépendant factura généralement entre 35 à 50 pour les débutants qualifiés et 50 à 75euros hTVA pour les spécialistes expérimentés. Pour éviter les risques, un tarif horaire doit toujours s’établir en concertation avec son comptable car il s’agit de bien évaluer l’impôt, la TVA, les investissements et frais inhérents.

L’infographiste bachelier peut évoluer vers des postes à responsabilité tels que directeur artistique, chef de projet ou ergonome. A cette fin, l’expérience est indispensable. Une spécialisation en communication et/ou gestion de projet ou en design d’interaction peut être requise.

tim.infographie-sup.be

RESSOURCES & INSPIRATIONS CÔTÉ MATÉRIEL Ordinateur fixe pour des raisons ergonomiques, un ordinateur portable pour déplacement en consultance, une tablette mobile (ipad...) pour la présentation de projet en images, une tablette graphique (Wacom) pour le dessin, un smartphone avec synchronisation de l’agenda, un scanner pour numériser des images en haute qualité, une imprimante pour les tests, appareil photo numérique de base pour captures d’inspiration ou semi-professionnel pour création, une webcam et casque pour les réunions à distance.

Pour évaluer la dépense d’un ordinateur, il est nécessaire de consulter les configurations requises des logiciels utilisés. En général, le web-designer peut opter pour une configuration de base, sauf s’il fait une utilisation régulière d’applications 3D et presse.

CÔTÉ LOGICIEL Les produits Adobe ont la cote : Fireworks, Photoshop, Illustrator ont des fonctionnalités communes pour la création de layout Web mais sont surtout très complémentaires. Je ne perds pas mon temps à les comparer comme beaucoup le fond car chacun a ses réels avantages.

Fireworks n’est pas un sous produit de Photoshop comme certains extrémistes ou économes le prétendent. Un bon artisan travaille avec de bons outils.

Adobe Fireworks : pour la création de wireframe, mockup interactif, layout web, gif animés.

tim.infographie-sup.be

Adobe Photoshop : pour la retouche photo, création de layout, gif animés.

Adobe Illustrator : pour la création vectorielle, création de logo, création de layout.

Pour élargir le spectre : Adobe Indesign pour la création de PDF et magazine interactif + Woodwing? pour la création de magazine pour Ipad.

Adobe Flash pour la création d’application et d’animations web + Adobe Air pour la création d’application bureau Adobe AfterEffects pour la création de motion design Adobe Dreamweaver pour la création de page web (optionel) Pour les infographistes qui s’occupe d’intégration HTML/CSS : Tous les principaux navigateurs qui sont actuellement IE, Firefox, Chrome, Safari, Opera… Consultez les statistiques disponibles.

Un outil merveilleux qui est le Firebug, permet d’analyser une page et de tester le CSS en direct.

Le choix de l’éditeur peut se faire parmi des solutions gratuites ou à moindre cout.

Certains traitements de textes comme le Notepad suffisent à l’édition d’une page HTML standard mais ne comportent aucune aide à l’écriture au contraire des solutions comme Smultron (open-source), Coda, ...

De nombreux utilitaires annexes pour accélérer, enrichir et parfaire vos créations comme : [ utilisation de mindmap pour les liens :http://www.mindmeister.com/maps/show/ 39432992

tim.infographie-sup.be

-

des éditeurs de scripts un éditeur de sons un éditeur d’images de synthèse des éditeurs/compresseurs vidéos un compresseur de fichier des convertisseurs de fichiers un traducteur en ligne (granddictionnaire.com) …

Bien que la manipulation des nouveaux logiciels ne soit pas systématique, un webdesigner comme toute personne travaillant dans les nouvelles technologies se doit de rester à l’éveil. Pour cela, il suffit de s’inscrire aux newsletters ou flux RSS d’éditeurs de logiciels, de magazines journalistiques et d’autres sites communautaires et de faire un peu de lecture quotidienne (par exemple : entre le premier et le deuxième café ;) grâce à son logiciel agrégateur de flux RSS (ex : google reader, ...) http://www.journaldunet.com http://www.internetaddict.be http://www.liberation.fr/page.php?Rubrique=NUMERIQUES http://www.lexpress.fr/actualite/high-tech/ http://www.alsacreations.com http:// www.css-tricks.com http:// www.smashingmagazine.com ...

tim.infographie-sup.be

WM À L’HEAJ Il s’agit de la finalité du groupe de travail Web & Multimédia en 2ème et 3ème année, auquel vous pourrez vous inscrire dès la deuxième année si c’est l’orientation professionnelle qui vous intéresse. Bien sûr, l’objectif du cours n’a pas un objectif prosélytique, il ne s’agit pas à tout prix de vous convaincre à choisir cette orientation … bien qu’il s’agisse bien sûr du plus beau métier du monde. Quoi de plus gratifiant pour un graphiste que de se rendre utile en créant des contenus graphiques et des applications interactives professionnelles ou ludiques, dont les plus aventureux d’entre vous pourront exercer leur passion à leur gré depuis un chalet de haute montagne ou d’une pagode au bord de l’eau pour l’une ou l’autre agence à 10000 lieux de là, et ceci au moyen d’un simple ordinateur et d’une connexion Internet. :P

FORMATION CONTINUE Aussi, afin de continuer votre formation une fois sur le marché de l’emploi, il existe des centres de spécialisations aux nouvelles technologies pour parfaire vos connaissances, comme le Cepegra ou Technifutur à Gosselies, à la TechnoCite à Mons, Technofutur à Liége, …

tim.infographie-sup.be

3. CRÉATION DE SITES WEB Après avoir exposé brièvement le métier de l’infographiste web & multimédia (web graphic designer), nous allons passer en revue une méthodologie éprouvée parmi d’autres qui consiste concevoir et réaliser un site web de manière professionnelle. Il s’agit ici d’un rapide tour d’horizon avec une présentation des outils et techniques utilisées au studio moove.

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

MÉTHODOLOGIE Nombreux sont les types de projets multimédia à destination du web, voici plus bas à titre d’exemple une méthodologie type utilisée pour la création d’un site Internet, c’est à dire ici l’ensemble des méthodes utilisées par l’équipe multimédia.

Pour bien démarrer un projet, je vais ajouter tous les postes qui m’incombent à ma liste de tâches. (source : Kelly Goto , Emily Cotler - (re)design de sites web, conduite de projet, édition Eyrolles)

Définition du projet : • • • • • • • • • • •

Collecte d'informations Identification de la cible Analyse sectorielle Définition des objectifs généraux Préparation du rapport de conception Réalisation du cahier des charges Élaboration du budget Planification des délais Mise en place de l'équipe "projet" Création d'espaces d'échange Planification des tests d'utilisation

tim.infographie-sup.be

Développement de la structure du site : • • • • • • • •

Définition des contenus Analyse de l'existant Planning de livraisons des contenus Élaboration du plan du site Choix des conventions de nommage des fichiers Définition des principes de navigation Définition des noms et des intitulés Définition des tâches types

Conception graphique et validation : • Présentation des visuels et suggestions • Création de modèles graphiques • Définition de la charte graphique

Production et contrôle de qualité : • • • • • • • • • • • •

Évaluation de l'état du projet Procédure de suivi d'avancement Définition de l'arborescence du site Découpage et optimisation Création des pages et des modèles HTML Conception des scripts élémentaires Alimentation des pages Intégration des développements de back-office Programme de contrôle qualité Tests de contrôle qualité Hiérarchisation et résolution des bogues Validation finale

Lancement et maintenance : • • • • • •

Rédaction du dossier de liaison Archivage de la documentation Planification de la formation à la maintenance Annonce du lancement du site Lancement du site Référencement du site auprès des outils de recherche

tim.infographie-sup.be

CONCEPTION DE PROJET CAHIER DES CHARGES Un cahier des charges vise à définir simplement les « spécifications de base » d’un produit ou d’un service à réaliser.

Le cahier des charges sert à formaliser les besoins et à les expliquer aux différents acteurs pour s’assurer que tout le monde est d’accord. En particulier, le cahier des charges permet de cadrer la ou les missions des acteurs impliqués, et notamment celles du directeur de projet (côté maîtrise d’ouvrage) et/ou du chef de projet (côté maîtrise d’œuvre). Le cahier des charges est un document contractuel entre le client et le prestataire/vendeur, mais il ne constitue pas à lui seul le contrat commercial.

Lors d’un appel d’offre, le cahier des charges est fourni par le commanditaire luimême.

GESTION DE PROJET Devant la masse de travail, il faut s’organiser. Les réunions, les nouvelles choses à faire, les petites choses à corriger, les imprévus,... Si comme moi vous avez une mémoire à passoire, la chose primordiale à faire est d’encoder vos tâches et de les planifier dans le temps. Le bon reflex consiste à encoder une nouvelle tâche dès la réception d’une demande. Pour ce faire, j’utilise un logiciel de gestion de projet en ligne (basecamp, taaski, unfuddle) le tout combiner avec mon agenda Google synchronisé avec mon ordinateur et mon smartphone ne me laisse vraiment pas l’occasion de procrastiner. Bien sûr, n’oubliez pas d’organiser et de planifier quelques sorties variées, histoire d’avoir une vie équilibrée et de vous ressourcer régulièrement, ce qui sera évidemment profitable à votre créativité.

tim.infographie-sup.be

AUDIT Lorsqu’il s’agit d’une refonte de site web, le chef de projet ou l’ergonome examinera en détail le site existant au regard de nombreux critères dont l’efficacité et accès à l’information de la navigation et l’architecture de l’information. Lisibilité, typographie.

L’efficacité, la pertinence des contenus rédactionnels. La ligne graphique : identification, démarcation. L’ergonomie, la facilité d’utilisation. L’efficacité des recherches et pertinence des résultats dans le site et la visibilité au travers des moteurs de recherche (google, …). Le rapport statistique: analyse des statistiques de fréquentation et d'utilisation du site (si disponible), …

ARBORESCENCE La conception de sites web passe par une logique de navigation, il faut structurer les contenus, créer une arborescence. Cette étape n’est pas une tâche inhérente à l’infographiste. Si vous travaillez comme indépendant, il est possible que cette tâche vous incombe si le client ne souhaite pas s’en charger. Généralement l’arborescence vous est fournie par le client ou le concepteur d’interactivité ou encore l’ergonome.

Cependant, lors du design graphique ou de la construction, il y aura certainement des échanges (feedback) et corrections utiles avec le concepteur, ce qui est tout à fait normal. Il y aura toujours des événements de navigation, des pages et souspages ou interactivités visuelles qui n’auront pas été étudiées et qui nécessiteront l’avis 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 intègre une librairie d’éléments et la création de dessin vectoriels. Pour les concepteur d’ergonomie, Il existe des outils spécialisés comme LovelyCharts.com, smartdraw, omnigraffle, qui proposent une galerie de symbole ou autres diagrammes de gestion de projet (PERT, GANTT) ou qui gardent par exemple les connecteurs attachés lorsqu’on déplace les éléments.

tim.infographie-sup.be

DESIGN Définition : Le design est une discipline visant à représenter concrètement, une pensée, un concept ou une intention en tenant compte éventuellement d'une ou des contraintes fonctionnelles, structurelles, esthétiques, didactiques, symboliques, techniques et productives. Ces représentations peuvent être tangibles ou virtuelles et s'inscrivent de préférence dans un contexte social, économique, culturel. — wikipedia

En dehors de considération esthétique (c’est à dire de style graphique, de couleurs, de tons, de typo, de textures, …), le designer, le concepteur d’interactivité ou l’ergonome vont créer des croquis d’écrans en noir et blanc. En anglais : on appelle ça des wireframes. En français, on parlera plus rarement d’ergolayouts.

Pour les ergo-layouts, il existe des modèles sur papier. En logiciels, il existe une myriade d’outils (comme justinmind.com, ForeUI ou Balsamiq) pour ergonomes professionnels qui permettent de se transformer en mockup (prototype interactif).

En tant que web graphic designer sur des sites d’une vingtaine de pages, je préfere utiliser Adobe Fireworks car il est possible de faire évoluer rapidement les wireframes en les exportant en démos interactives (mockups HTML ) ou vers Flash si la démo doit être animé et/ou interactive. Une fois les principes d’interactivités (wireframe ou mockup) validés avec le client, les layouts graphiques pourront être découpés en composants graphiques pour Flash ou HTML/CSS.

tim.infographie-sup.be

INSPIRATION ET LIGNE GRAPHIQUE Cette tâche est sous la responsabilité du directeur artistique, du concepteur graphique ou de l’infographiste web. Celle-ci ne peut pas être envisagée sans avoir défini le projet où l’on aura cerné au préalable les objectifs du projet et son public cible. Pour vos recherches, nous avons à notre disposition la bibliothèque de l’école qui est une véritable mine d’or, aussi avant de perdre du temps dans Google, pensez à utiliser les moteurs de recherche de magazines spécialisés en ligne à la recherche de tendances ou techniques particulières comme Smashingmagazine, ainsi que ceux de galeries de sites professionnels comme Behance.net. Surfant ça et là, il existe des outils permettant de collecter ses liens (Delicious) et des captures d’écrans (screengrab).

Pour construire son concept graphique et interactif, on récolte rapidement de nombreuses captures d’écran de couleurs, de typographie, de textures, de sites web, de photos et d’illustrations. Le tout sera réunit grossièrement en mosaïque et organisé progressivement en grille pour former une moodboard, c’est à dire planche tendance (en publicité), ou une bible graphique (en animation). On peut réunir toutes ces images dans Fireworks, ou encore utiliser une application en ligne plus rapide comme imgspark. (voir : une autre méthode de moodboard) La moodboard présentée au client est une bonne manière d’impliquer le client et les collaborateurs dans le processus créatif. Elle leur permettront de comprendre vos envies avant la réalisation. Le client ne sera donc pas déçu quant à l’orientation du projet qui sans cette phase peut lui apparaître comme imposée et devant laquelle il pourrait émettre un refus. A titre de comparaison, lorsque vous commandez une voiture neuve même si vous aimez la marque vous souhaiterez pouvoir choisir le modèle, la couleur, la texture des sièges et les accessoires. Retenez donc que le design se fait avec le client et non pas pour le client, vous éviterez de perdre du temps dans des vas-et-viens ou de perdre des clients.

tim.infographie-sup.be

CRÉATION GRAPHIQUE POUR LE WEB Pour la création d’écrans fixes (on parlera encore d’interfaces graphiques ou de layouts web ) nombreux sont ceux qui utilisent Photoshop ou Illustrator par habitude ou par choix pécuniaire. Cependant la suite créative d’Adobe propose un outil plus approprié et complémentaire bien connu des infographistes web designer, qui est Adobe Fireworks. Nombreuses sont les fonctionnalités qui facilitent la création d’interfaces graphiques avec Fireworks : la gestion du dessin vectoriel, la sélection des objets mettant leur calque en évidence, la gestion des pages avec une page maîtresse, la création des symboles, la création d’interactivité, l’exportation de pages web et de javascript..., l’optimisation des images dans l’interface, etc.

LES PIXELS, DÉFINITION ET RÉSOLUTION D’ÉCRAN Avant de commencer la création d’un interface graphique, il est important d’aborder ces quelques points.

Une photo est constituée d'un ensemble de points appelés pixels (pixel est une abréviation de PICture ELement) Le pixel représente ainsi le plus petit élément constitutif d'une image numérique. Un pixel n’a pas de taille bien définie. Pour représenter la taille d'un pixel, il faut connaître la résolution utilisée pour représenter ce pixel. Le pixel peut–être carré ou rectangulaire.

La résolution définit un rapport entre le nombre de pixels par unité de longueur (centimètre ou pouce). La résolution d’écran encore appelé la densité d'une image numérique s'exprime en PPI (Pixel Per Inch) ou PPP (Pixels Par Pouce). La résolution d'impression d'une imprimante se détermine elle en DPI (Dot Per Inch) ou PPP (Points Par Pouce). Un pouce représentant 2,54 cm. On parle souvent d’une résolution de référence de 72dpi, la vérité actuelle c’est que les résolutions d’écran sont très variables suivant les appareils. Deux écrans d’une même taille peuvent

tim.infographie-sup.be

avoir des densités (ppi) de pixels différentes suivant les modèles (exemple : la comparaison iphone 3 vs 4 : 320 x 480px à 163 ppi contre une définition de 640 x 960 à une résolution de 326 ppi.).

Enfin, la défintion est très souvent confondue avec la résolution. On appelle définition le nombre de pixels constituant l'image. Une image possédant 640 pixels en largeur et 480 en hauteur aura une définition de 640 pixels par 480, notée 640x480px. Un même écran d’ordinateur peut selon les modèles afficher différentes définitions (1024x768px, 1440x900px, …)

Comprenez que vos mises en page avec une définition de 1024x768px seront plus difficile à lire sur un petit écran. Si la résolution est plus grande (ce qui ne dépend pas de vous mais du matériel) l’image sera plus fine mais ça n’aidera pas un presbyte à y voir plus clair. Pour ces derniers, la loupe reste de rigueur...

Si tout cela vous semble un peu compliqué, l’expérience viendra vite après quelques manipulations d’image. Pour éviter le drame, retenez que le bon reflex est toujours d’adapter la taille de votre document avant toute importation ou création d’image et d’effectuer un test soit d’affichage sur l’écran de destination soit d’impression suivant que vous réalisez 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 étirer sur des pixels.

tim.infographie-sup.be

LES TAILLES D’AFFICHAGE En décembre 2010, sur moove.be on a recensé 36 résolutions différentes parmi nos utilisateurs. Cette information nous montre bien qu’il est nécessaire de définir en se basant sur des statistiques de fréquentation récentes, la ou les meilleures configurations de base pour l’ensemble des utilisateurs ciblés.

Actuellement, pour l’affichage d’un contenu destiné à l’ensemble des citoyens connectés via un écran d’ordinateur de bureau, on s’aligne encore sur du 1024x768px car il s’agit de la résolution la plus fréquemment utilisée mais aussi celle qui agit comme plus petit dénominateur commun parmi la multitude des nouveaux et nombreux grand écrans offrant une grande résolution.

De cette taille d’écran, il faut encore réduire la largeur et la hauteur du contenu en prenant compte de l’espace que peut occuper la barre d’outil (dock) de l’OS, l’interface même du navigateur avec ses barres d’outils, les ascenseurs, et compagnie...

Le nouveau Imac avec son écran de 27 pouces affiche une définition de 2560 x 1440 pixels, ce qui donne l’impression pour la plupart des sites web d’être tout petit au milieu de l’écran. Pour palier à cela rapidement on peut créer un motif qui est défini en arrière plan répétitif via CSS et il occupera ainsi tout l’espace et ce quelque soit la résolution de l’écran. Enfin on peut aussi réaliser une mise en page dite fluide, c’est à dire qui s’adapte à l’écran lorsque le navigateur est redimensionné. (exemple : http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html) Enfin, on peut naviguer sur ce même site avec un téléphone mobile mais la lecture devient problématique si la mise en page n’a pas été pensée en fonction.

Il existe pour cela une solution javascript (media queries) qui redirigera l’utilisateur sur une feuille de style correspondant à l’écran détecté et permet d’afficher un même contenu dans une mise en page adaptée. exemple : Less Framework is a cross-device CSS grid system based on using inline media queries. — http://lessframework.com

tim.infographie-sup.be

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 réapparaître un principe vieux de plusieurs siècles, à savoir cette bonne vieille grille. Quelque soit le modèle de grille ou le framework CSS utilisé (10 pixels ou 960 grid, baseline, YUI, lessframework...) l’important est d’aligner, d’organiser les contenus et de créer des espaces vides sur un principe de récurrence visuelle afin de faciliter la lecture mais aussi de faciliter l’organisation des contenus (2 colonnes, 3 colonnes, …)

Dans tout logiciel de création (Illustrator, Photoshop, Fireworks, ou Flash), il vous sera possible d’afficher la règle et des repères. Je veillerai donc à vous le rappeler en cas d’alignement maladroit pendant la phase de création de votre layout. Dans certains cas on peut aussi fabriquer son propre modèle de grille, dans d’autre cas où le désordre est recherché la grille sera ignorée. (Pour en savoir plus, voici un article intéressant sur le sujet : http://www.alistapart.com/articles/outsidethegrid)

tim.infographie-sup.be

CONSTRUCTION DE PAGES WEB DÉCOUPAGE ET OPTIMISATION DES IMAGES Vous le savez certainement, les images qui sortent d’un appareil numérique sont très lourdes car elles comptent un nombre de pixels importants et nécessitent alors des capacités de stockage toujours de plus en plus grande. Hors pour les afficher sur le web il est nécessaire de les réduire non seulement pour réduire l’espace de stockage, mais surtout afin d’éviter un temps de chargement trop long pour les utilisateurs. L’attente apporte son lot de frustration et détourne les utilisateurs du site web. Ce qui explique parfois un taux de rebond important dans les statistiques de fréquentation du site.

Le rôle principal de l’infographiste Web est de redimensionner des images, et leur trouver le meilleur format de fichier compatible au plus grand nombre d’utilisateurs et un ratio de compression pouvant offrir une qualité visuelle irréprochable pour un poids minimum. Il s’agit d’un point d’évaluation technique essentiel pour ce cours en première année d’infographie.

tim.infographie-sup.be

COULEURS Pour un affichage sur écran, nous utiliserons le codage RVB/RGB (Rouge Vert Bleu).

Certains navigateurs pourront afficher le CMJN/CMYK (Cyan Magenta Jaune Noir), mais ces fichiers sont plus lourds car porteurs d’informations requises à l’impression Offset.

Photoshop permet la conversion des images quadrichromiques vers des images trichromiques. Fireworks quant à lui traitent automatiquement toutes les images au codage RVB. Si certaines images vous apparaissent ternies, c’est qu’il faut convertir leur espace calorimétrique au préalable avec Photoshop. Je ne m’étendrai pas sur la perception visuelle des couleurs mais les puristes n’ont pas la part belle car souvenez-vous qu’il n’y a pas de configuration unique pour tous les utilisateurs. Les luminosités, les tons varient d’un écran à l’autre et de l’endroit où l’on consulte son écran (intérieur/extérieur). Sans oublier les perceptions daltoniennes et monochromatique ...qui touchent jusqu’à 15% de la population (outil de comparaison).

Pour la description des couleurs dans une page web, on utilisera le code hexadécimal (ex : #000000 = noir, #FFFFFF = blanc) ou encore RGBA, A pour Alpha.

(Alpha = transparence)

tim.infographie-sup.be

DIMENSIONS On réduira la taille des images à une taille d’affichage nécessaire en pixels. Si votre image ne doit pas dépasser la taille d’un écran standard, on la réduira par exemple à 960px de large sur 600px de haut maximum. Le code HTML permet d’afficher une image à des dimensions différentes, cependant il ne supprime pas les informations inutiles, ce pourquoi il faut d’abord les redimensionner avec un logiciel qui réduit le nombre de pixels.

Sachez aussi, qu’il est interdit sous peine d’emprisonnement à vie (sauf cas de circonstance extrême) d’agrandir une photo en augmentant son nombre de pixels.

Une photo de 400px sur 400px ne pourra devenir une image de 800x800px (humour : «sauf dans les experts» – Julien H.) Cela correspondrait à étirer un pixel à 4x sa taille et lui nuire à sa qualité visuelle. J’ai cependant remarqué que certains néophytes ne constatent pas cette perte de qualité, aussi nous ferons des exercices en classe, ensemble et face à l’écran.

tim.infographie-sup.be

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)= x1024 1Mo (Méga Octet)= x1024x1024 1Go (Giga Octet) = x1024x1024x1024 Le kilobit par seconde (symbole : kbit/s ou kbps) est une unité permettant de mesurer une vitesse de transfert de données. Elle équivaut à 1 000 bit/s (et non 1024).

Pour connaitre la vitesse en ko/s (kilo octet par seconde), il faut diviser par 8 (car 8 bits = 1 octet).

Par exemple pour un débit de 24 bits/s, il faudra 1 seconde pour transférer 3 octets.

MireAdsl me dit que ma bande passante est de 4424 kbps (4424/8=553 Ko/sec).

Je veille donc en règle générale à ne pas créer des pages qui dépassent les 500ko.

Une petite extension appelée Google Speed pour firefox/firebug m’indique les améliorations possibles pour optimiser le chargement de la page.

tim.infographie-sup.be

IMAGES BITMAP OU VECTORIELLES

Principe

Caractéristiques des «dessins»

Bitmap Grille de pixels (pixels: picture element) où chaque pixel possède une position et une couleur.

Exemple: écran de 640 x 480 ou 1024 x 768.

Vectoriel Points et courbes de bézier.

Des lignes, des courbes calculées mathématiquement (équation vectorielle) et qui peuvent être modifiées (épaisseur, longeur, couleur, forme...).

L'ensemble des pixels forme un dessin.

Tracé en «escalier» donc zoom délicat, voire impossible, écriture peu lisible si trop petite.

L'ensemble des lignes forme un dessin.

Modification sur les pixels

Modification sur les vecteurs

Tracé précis de lignes donc zoom illimité (calcul du logiciel), écriture fine lisible.

Impression de points qui demandent Impression de lignes fines selon la une grande finesse pour les images définition de l'imprimante ou de la au trait afin de ne pas voir d'escaliers, flasheuse. soit 1000 dpi (points par pouce) au minimum.

Caractéristiques des fichiers Volumineux (chaque point est codé et Légers mémorisé) Extension : .svg, .swf Extension habituelle: *.jpg, *.gif, *.png Logiciels

Création avec Photoshop, Fireworks, Création avec Illustrator, Fireworks, Gimp. inkscape, canvas, etc Optimisation supérieure avec imageoptim Remarque: possibilité de transformer en bitmap via Photoshop ou Fireworks...

Remarque: possibilité de transformer un bitmap en mode vectoriel via la fonctionnalité de liveTrace d’Illustrator.

Bilan

Idéal surtout pour le traitement de photographie.

Idéal pour des dessins au trait (2D)

tim.infographie-sup.be

IMAGES BITMAP (MATRICIELLE) Enfin, les logiciels utilisés pour naviguer sur le web (appelé navigateurs ou browsers en anglais) n’affichent pas tous les types de fichiers images. Actuellement, pour ratisser court parmi les navigateurs les plus utilisés pour naviguer sur le web on utilisera pour les images Bitmap (c’est-a-dire composée de pixels) les formats JPG, GIF, ou PNG. Pour connaître quel format utilisé, il faut savoir comment ces derniers se comportent.

Le format d’image .JPEG (ou .JPG) Caractéristiques, avantages et méthodes de sauvegardes du format JPEG. Le format JPEG convient au besoin de compression d’images photographiques de haute qualité car il affiche 16Millions de couleurs (24bits) et offre une réduction de poids dite compression avec perte, de 100% à 0% de qualité. Plus la compression est élevée (et donc plus le fichier est léger), plus la qualité de l'image baisse. 80% de qualité semble être un seuil acceptable actuellement pour majorité des écrans mais souvenez vous que les écrans n’ont pas tous la même taille de pixels.

Le JPG apporte un manque de définition au niveau des lignes droites et des dégradés. Il est donc déconseillé de l'employer avec des images qui contiennent typographie et formes géométriques très découpées 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 l’image avec une compression jpg différente. Pour une photo d’enseigne de magasin où doit préserver l’image de la marque, on masquera par exemple la typographie avec une qualité jpeg 100%, le reste de l’image adoptera une qualité à 80%.

Ne permet pas de transparence.

tim.infographie-sup.be

Le format d’image .GIF Le format GIF est un ancêtre offrant une compression sur le nombre de couleurs possible de 1 à 256 couleurs (8bits). Ce format ne convient donc pas aux images contenant des dégradés ou au photographies de haute qualité. On l’utilise pour des logos ou schémas. Ce format est encore largement utilisé pour les e-mails de type newsletters HTML devant contenir des images. C’est d’ailleurs encore maintenant le seul format largement compatible pour l’affichage d’animation dans les e-mails. On parlera alors de Gif animé.

Gère assez mal la transparence sur les contours des images détourée ou textes.

Le format d’image .PNG Le format PNG peut soit utiliser le mode 8 bits, 24bits ou 32bits.

Il permet la transparence et offre très souvent un bien meilleur résultat que son homogue GIF en 8bits.

Le résultat en 32bits est volumineux car on ne peut ajuster la compression, le JPEG conviendra alors mieux lorsque les images ne nécessitent pas de transparence.

Conclusion (png, jpg, gif, ...?)

Il est nécessaire de comparer le poids et votre perception de la qualité de l’image rendue avec un logiciel approprié tel que Fireworks ou l’exportation 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.

tim.infographie-sup.be

IMAGES VECTORIELLES Le format d’image .SVG On en parlera de plus en plus, le format .svg permet l’affichage d’images vectorielles sur le Web et donc leur redimensionnement à l’écran. Tous les navigateurs dont IE8 ne permettent pas encore leur lecture, IE9 devrait l'intégrer nativement.

Le format .SWF Le format .swf est un format Adobe largement rencontré sur le web, nécessite le plug-in Flash et peut contenir des images bitmap ou vectorielles. Ce format réalisable à partir d’un seul logiciel telque Flash ou autres permet également d’animer ou interagir avec ces images. Il n’est malheureusement pas supporter par Apple sur ces appareils tactiles, ce qui en fait une technologie en recrudescence actuellement étant donné la dominance d’apple sur le marché des tablettes tactiles qui évoluera cependant très vite dans le courant de cette année avec l’arrivée de nouvelles tablettes plus complètes technologiquement telles que la Samsung Galaxy TAB avec son système Android.

tim.infographie-sup.be

LES SYSTÈMES D’EXPLOITATION & LES NAVIGATEURS WEB La variété de systèmes d’exploitation (OS = Operating System) pour les ordinateurs de bureau (windows, Mac Os, Linux, ..) et ceux utilisés par les smartphones (Symbian (Nokia), Android, RIM (=blackberry), iOS (=apple), Android (=HTC,..)) apportent leurs différences dans la lecture du contenu d’une page web. Aussi, il est possible à l’aide de codes javascript de détecter facilement le type et la version des plateformes utilisées et de les rediriger automatiquement l’utilisateur vers des contenus avec une stylisation et une interactivité appropriées.

Les navigateurs sont les logiciels qui permettent de consulter une page web.

Eux aussi apportent quelques différences quant à l'interprétation des langages web HTML et CSS qui décrivent une page web.

Un web designer doit comparer le résultat sur les navigateurs principaux. Il installera donc les principaux utilisateurs sur sa machine et disposera idéalement d’une vieille machine pour ses tests. Il existe aussi des générateurs de captures en ligne pour ratisser plus large comme browsershots.org Enfin, ce dernier (fmbip.com) vous permet d’envoyer l’adresse du site en construction à votre client et d’avoir un rapport technique sur son navigateur et compatibilité avec les nouvelles évolutions des langage HTML5/CSS3.

tim.infographie-sup.be

PAGE WEB, LE LANGAGE HTML L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des resources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets.

L’apprentissage du langage html est à la portée 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 découvrir la description de la page affichée.

Le guide de référence du W3schools offre l’avantage de pouvoir tester le langage HTML en ligne. — http://www.w3schools.com/ Adobe Dreamweaver vous permettra de visualiser en parrallèle le code source avec les balises et le rendu HTML tel qu’il sera vu dans un navigateur.

L’insertion d'images se fait via l’éditeur wysiwyg ou encore via la commande suivante : <img src="image.gif"> avec la possibilité d’ajouter des attributs tels que la taille, description, etc Validation — Avec le HTML validator, vous pouvez valider votre html suivant les normes proposées par le W3C. Le W3C est l’organisme officiellement chargé de la normalisation de tout ce qui concerne le Web, et particulièrement des évolutions du langage HTML. — http://validator.w3.org/

tim.infographie-sup.be

CSS Cascading Style Sheet = les feuilles de style en cascade. Elles permettent de décrire les aspects visuels du contenu décrits dans la page HTML. En cascade pourquoi? Et bien parce que une page HTML est composée sur un principe de hiérarchie ou d’hérédité, on parlera de balises parents et d’enfants. Ainsi si vous avez un parent avec des yeux bleus, l’enfant aura les yeux bleus sans besoin d’ajouter la description sur l’enfant. A moins que vous créez l’exception et décidiez que l’enfant ait les yeux d’une autre couleur.

Pour créer une feuille de style CSS, on peut utiliser une page HTML type complète pour visualiser le rendu de tous les styles nécessaires au travers du site web.

Le guide de référence du W3schools offre l’avantage de pouvoir tester le code en ligne. — http://www.w3schools.com/

tim.infographie-sup.be

TYPOGRAPHIE Le choix de la fonte est définie via la feuille de style et la propriété font-family.

Il existe une série de typographie générique installée de base dans les différents systèmes Mac et Windows auxquelles on peut faire appel. Cependant lorsqu’on souhaite afficher une fonte qui n’est pas installée dans système des utilisateurs, il est nécessaire de recourir à une technique de remplacement de typographie. La technique habituelle est d’utiliser une image (.gif, .jpg, .png) qui affiche le texte ou encore à un fichier Flash (.swf). La typographie web a bien évolué ces dernières années et il est possible désormais de faire appel à une typographie (.TTF, .EOT, .WOFF, .SVG) qui est installé sur un serveur web pour l’encapsuler dans la page web, ceci via la feuille de style et un sélecteur @font-face.

Il existe des typographies gratuites et libre de droits avec kits @font-face disponibles sur des sites comme www.fontsquirrel.com Pour «tout» savoir sur le passionnant sujet de la typographie, vous trouverez un article très intéressant sur smashingmagazine.

Web Typography: Educational Resources, Tools and Techniques http://www.smashingmagazine.com/2010/11/16/web-typography-100-educationalresources-tools-and-techniques/

tim.infographie-sup.be

JAVASCRIPT JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.

JQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. Le framework contient notamment des événement, des effets et animations.

Voir la shadowbox pour ouverture de fenêtres modales. http://www.shadowbox-js.com/ Exemple d’animation avec Jquery: http://sixrevisions.com/javascript/10-awesome-techniques-and-examples-ofanimation-with-jquery/

tim.infographie-sup.be

FLASH & SILVERLIGHT Depuis son lancement en 1996, la technologie Flash est devenue une des méthodes les plus populaires pour ajouter des animations et des objets interactifs à une page web ; de nombreux logiciels de création et OS sont capables de créer ou d’afficher du Flash. Flash est généralement utilisé pour créer des animations, des publicités ou des jeux vidéo. Il permet aussi d'intégrer de la vidéo en streaming dans une page, jusqu'au développement d'applications Rich Media.

Les fichiers Flash, généralement appelés « animation Flash » portent l'extension .swf. Ils peuvent être inclus dans une page web et lus par le plugin Flash du navigateur, ou bien interprétés indépendamment dans le lecteur Flash Player.

L’iphone ne permet pas la lecture de fichier .swf via son navigateur, ce qui en résulte que beaucoup de studios de publicité se sont détournés de format vers d’autres solutions non-propriétaire que sont l’html5/css3/javascript.

Des sites impressionnants réalisé avec Flash : http://www.thefwa.com Voir le site Adobe Flash : http://www.adobe.com/fr/products/flash/whatisflash/ Voir son concurrent microsoft avec son produit Silverlight sur : http://www.silverlight.net/

tim.infographie-sup.be

HEBERGEMENT & MISE EN LIGNE Dans notre cas où un prototype tel que celui que vous êtes amenés à réaliser ne nécessite pas de données dynamiques*, nous aurons uniquement besoin d’un espace disque accessible publiquement via une adresse web (http://...)

C’est le cas du service proposé par dropbox (ou wuala, ...) où vous avez 2GB d’espace 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 système mac ou pc, le copier-coller de fichiers devient alors très efficace, ou encore via une interface d’administration en ligne où vous pouvez donc téléverser ou télécharger vos fichiers. * Un site Internet dynamique (où les données doivent être mises régulièrement à jour comme pour un site e-commerce où la gestion de stock est automatisée en fonction des achats des utilisateurs) nécessite dans la grande majorité des cas une connexion à une base de données. On hébergera alors ce type de sites web dits «dynamiques» sur un serveur web configuré par exemple avec mySQL (serveur web) et phpMyAdmin (gestion de bases de données).

Pour ce type d’hébergement, le téléversement de fichiers est possible via une connexion FTP. Vous devez alors disposer de l’adresse du compte FTP, du nom d’utilisateur et d’un mot de passe (si l’accès est privé). 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 d’hébergement, ils existent de nombreuses offres disponibles sur le Web à comparer en fonction de vos besoins. (ovh, infomaniaks, all2all, iweb, hosteur, ...)

tim.infographie-sup.be

Remerciements : À mes collaborateurs passionnés qui partagent joyeusement leurs savoirs : Jean-Baptiste Félix, Thomas Lesire, Louis Volont, Alexandre Plennevaux (pour ses tweets), Marc Wathieu (pour multimedialab), François Bourgaux (pour son oeil de lynx), Julien Henrotte (pour la relecture), Benjamin DeCock (pour ses images), ... À Margaux.