Techniques Infographiques Multimédia @ infographie-sup.be

TIM 2012 sur elearning.esiaj.eu

2012-01-26T16:44:00.000+01:00

Chers étudiants,

Pour cette année 2011/2012 :

Veuillez désormais retrouver le cours sur la plateforme d'
elearning.esiaj.eu

Bien à vous,

Valérie Gérard

Créer un formulaire de contact

2010-05-17T09:49:00.001+02:00

Pour créer facilement un formulaire de contact, une solution pratique pour éviter le spam :

1. Une trouvaille de Corentin Sibret : emailmeform.com

Exemples :

- http://corentin-sibret.blogspot.com/2010/05/email-me-form.html

- http://techniques-infographiques-multimedia.blogspot.com/p/formulaire-de-contact.html

2. Une autre solution utilisée au cours 1, le Google formulaire ( questionnaire et résultat sondage) :

- http://googlexxl.blogspot.com/2008/02/formulaires-en-ligne-avec-google.html

Keep in touch!

Layouts des blogs 2009/2010

2010-05-07T22:08:00.026+02:00

Voici un aperçu de la sélection, pour les salons et journées portes ouvertes, des layouts réalisés en 2009/2010 par les étudiants du cours de techniques infographiques multimédia de l'infographie-sup.be. Félicitations aux joyeux élus.

Blogger : Comment mettre une image de fond derrière un message

2010-04-27T17:34:00.006+02:00

Dans "Mise en page / modifier l'HTML", ajouter entre les balises <head> et </head> le code :
.image-background {
background:url("http://dl.dropbox.com/u/2236011/TIM/img/illustrations/flying-pixel.jpg") no-repeat 0px 0px;
height:472px;
padding:120px 220px 120px 120px;
}

Dans le corps du message; choisir Modifier le code HTML en plaçant la balise suivante autour du contenu du message :
<div class="image-background"> votre message ici </div>

Site flash dans un intérieur 3D

2010-04-25T22:45:00.002+02:00

Ce sujet peut éventuellement intéresser les étudiants de 1ti qui suivent les cours 3D de Carole Demasy où ils créent des intérieurs 3D et les cours de droits d'auteur de Fabrice Hambersin.

Voici un exemple de site Flash sur base d'un intérieur 3D sur le sujet de la contre-façon.
Cliquez sur les sacs rose et bleu pour voir la transition video dans la pièce.

Blogger - Améliorer le référencement des titres de pages

2010-04-25T21:07:00.000+02:00

Améliorer le référencement de votre blog en inversant le titre de la page avec le titre du blog dans la fenêtre du navigateur, c'est facile!

Comme vous le voyez ici, afficher le titre après un long titre de blog peut nuire à la lisibité du résultat de recherche dans Google:

Solution :

Aller sur la page Mise en page > Modifier l'HTML dans le site d'administration de votre blog

Rechercher (CTRL+F) cette ligne de code : <title><data:blog.pageTitle/></title>

Remplacer par ceci :

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

Enregistrer le code HTML et vous pourrez voir le résultat en affichant le blog

exemple :

Cela peut prendre quelques jours pour voir les effets sur votre traffic.

Source : http://widgetsforfree.blogspot.com

Personnaliser l'icone blogger

2010-04-25T17:58:00.000+02:00

Pour personnaliser votre blog avec une icône (favicon)

1. Créer votre icône à la taille 16x16 pixels

2. Convertir votre image en favicon.ico via dynamicDrive
3. Téléverser votre image sur votre compte FTP ou votre espace HTML public et gratuit chez Dropbox.
4. Ajouter le code suivant ou celui proposé par dynamicDrive entre les balises <head> du code html de votre blog (accessible via les menus "mise en page > modifier l'html")

<link href='http://www.monsiteweb.com/img/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/> <link href='http://www.monsiteweb.com/img/favicon.ico' rel='icon'/>

5. Remplacer le code en rouge par l'adresse web de votre image.

Croquis des blogs (Wireframe)

2010-03-26T18:02:00.001+01:00

Switch Thumb

Source code:

Display Switch w/ CSS & jQuery by Soh Tanaka.
shadowbox by Michael J.I. Jackson

Blogger - Cacher la barre d'édition

2010-03-23T14:52:00.000+01:00

Rechercher le code HTML à modifier :

#navbar,.quickedit{display:visible;}

Remplacer par :

#navbar,.quickedit{display:none;}

AWT : Guide des métiers pour le multimédia

2010-02-02T16:32:00.000+01:00

Source : http://www.awt.be/web/mul/index.aspx

L'AWT présente le guide "Des métiers pour le multimédia"

L'AWT vous propose un guide "des métiers pour le mutimédia". 36 métiers à découvrir, notamment pour les jeunes à la recherche d'une orientation professionnelle dans un secteur d'avenir dont la Région wallonne a fait l'une de ses priorités.
Ce guide est avant tout un outil destiné aux jeunes scolarisés et aux professionnels en recherche de réorientation, pour les aider à mieux comprendre les métiers et les profils de compétences dans le monde du multimédia.

Etude sur les salaires du design interactif en France

2010-02-02T10:22:00.000+01:00

Source : http://www.journaldunet.com/ebusiness/le-net/salaires-design/

Designer interactif, web designer, web développeur, directeur artistique interactif, chef de projet, ergonome, directeur de creation, ... quels salaires? "Entre janvier et décembre 2009, l'association Designer interactifs a enquêté auprès des professionnels du Web pour mieux connaître leur population en terme d'effectif, de satisfaction, d'expérience ou encore de salaire. 1 710 personnes ont répondu à cette enquête en ligne.

Quel métier exercent-ils ? Quel salaire touchent-ils en tant que junior ou que senior ? Ont-ils été augmentés en 2009 ? Motion designer, ergonome, Webmaster, chef de projet, directeur artistique... De 25 000 à 66 000 euros, voici à quoi peuvent prétendre les professionnels du design interactif aujourd'hui."

I ♥ wireframes

2010-01-22T16:56:00.000+01:00

UX designer, ergonome, interaction designer, web designer, front end developer, project manager, SEM manager, SEO manager, CRM program manager, CRM database analyst, social media manager, art direction, creative direction... le web d'aujourd'hui est sans aucun doute une affaire de spécialistes.

Pour mettre tous ces spécialistes et le client sur la même longueur d'onde, une bonne conception d'interface s'impose afin d'offrir la meilleure expérience interactive aux utilisateurs. Pour ce faire, avant même la conception de layouts graphiques, on passera par la conception d'écrans de type wireframe sur papier ou à l'écran.

Qu'est-ce qu'un wireframe? voir la définition sur wikipédia

Visionnez de nombreux exemples de wireframe sur : "I ♥ wireframes"

fig : le site web "I ♥ wireframes"

Découvrez The Cycle of a Wireframe, tel un petit aperçu de quelques notions vues aux cours de conception, d'ergonomie et dessin, en 2eme Web & Multimédia à l'infographie-sup.be

The Life Cycle of a Wireframe, by nick finck (blue favor)

View more documents from Nick Finck.

Exemples de blogs avec Flash header

2010-01-22T13:58:00.000+01:00

http://www.jasongraymusic.com/

http://www.thepixel.com/blog/

VOTRE PROFESSEUR : Valérie Gérard

2010-01-21T18:03:00.002+01:00

Bonjour à tous, J'enseigne le graphisme web & multimédia à l'infographie-sup.be et je fourni également mes services en design graphique et interactif en tant qu'indépendante au studio moove.be Voici donc un petit résumé de mes qualifications dans le domaine du Graphisme Web & Multimédia (in english) :

10 years of international interactive graphic design (2 years in USA).
6 years of experience in teaching interactive graphic design (+ than 2000 students).
3 years of experience in team management & business ownership
European Master degree in Digital Arts.
Certified Belgium College University Teacher.
Certified Flash designer.
Fluent in French and English.

Pour en savoir plus :

Lire mon curriculum vitae
Visiter mon studio : www.moove.be

Quelques réalisations récentes :

Sur la photo : Valérie Gérard - photo : Jérôme Colonnello

Merci pour votre attention, bon surf et à bientôt.

V°

LES EVALUATIONS 2010

2010-01-21T14:41:00.002+01:00

Cotations pour l'examen de TIM en Juin 2010 :

L'examen repose sur la conception graphique et la réalisation web et multimédia d'un portfolio d'infographiste :

40% - Conception de l'interface graphique (fireworks)
30% - Réalisation du Portfolio, le blog (CMS, Intégration HTML/CSS, Optimisation des images)
30% - Réalisation de l'animation interactive (Flash)

Les améliorations attendues seront précisées durant l'année pendant les phases d'atelier (v. planning). Selon l'étudiant, il s'agira de faire, refaire, ou améliorer la conception graphique et/ou la réalisation du portfolio.

Seconde session :

Les améliorations attendues seront précisées à la journée rencontre étudiant qui a lieu après les examens. Selon l'étudiant, il s'agira de faire, refaire, ou améliorer la conception graphique et/ou la réalisation du portfolio.

LE BRIEFING : Le Portfolio en ligne de l'étudiant infographiste

2010-01-20T23:21:00.005+01:00

Sujet : Le Portfolio en ligne de l'étudiant infographiste

fig : Le Portfolio Blog de Larry Gérard, un diplômé 2009 de l'infographie-sup.be, Groupe Web&MM.

PUBLIC CIBLE

1. Vous. Le portfolio est un outil de communication indispensable à l'infographiste puisque ce sont sur base de celui-ci et de ces réalisations essentiellement qu'il est jugé et éventuellement contracté. Le portfolio est également une technique transversale en pédagogie. Il est un processus centré sur le développement de vos compétences en infographie, il favorise l’interaction avec vos pairs. L'intégration de vos réalisations mènera à une production globale qui fera témoin de votre réflexion et de votre niveau de développement professionnel.

2. Vos professeurs > L'adresse de votre portfolio sera communiqué à tous vos professeurs. Il pourront consulter leurs travaux respectifs mais également les travaux effectués dans les autres cours. En délibération, les professeurs pourront ainsi débattre sur la qualité globale de vos réalisations et votre implication dans la formation.

3. Vos collègues > En-tant que membres de votre blog, ceux-ci pourront suivre l'évolution de votre travail, critiquer vos réalisations, et comparer leur niveau et vérifier la bonne compréhension de présent briefing.

4. Tous public. > Toutes personnes intéressées par le design graphique pourra consulter votre site Web. Nous vous demandons donc de redoubler d'attention sur la formulation du langage et des images utilisées. L'orthographe est un signe de politesse et de bonne éducation. Les fautes d'orthographe ne sont d'ailleurs absolument pas tolérées dans les métiers de la communication. Veuillez donc utiliser les outils appropriés et vous faire relire si vous avez des difficultés avec la langue française.

CONCEPT GRAPHIQUE

Thème : L'interface graphique que vous allez concevoir doit représenter un environnement métaphorique.

Exemple : mon bureau, mon grenier, ma navette spatiale, mon jardin, ma pochette 33T, mon cerveau, mon écriture, ...

Fig : le blog de Jason Gray (navigation métaphorique reposant sur "les images dans la tête"

Le style graphique est libre mais devra être inspiré, personnalisé et vos choix argumentés. Ainsi le choix des couleurs, de la typographie, et tous éléments visuels ne seront pas choisis ou créés par hazard. Comprenez qu'ils ont pour objectif de renforcer votre concept graphique afin d'immerger l'utilisateur dans votre univers créatif.

Un croquis de conception initiera la discussion avec votre professeur (/client).

Il vous est demandé de dessiner l'entête et l'habillage des cotés latéraux du blog.
La colonne centrale qui contient l'entête et les contenus fait 960px de large pour un affichage idéal sur écran de 1024x768px. L'habillage des côtés latéraux concerne les écrans de plus de 1024px de large.

Le croquis est commencé et présenté en classe selon un canvas particulier (Voir "cours 5" sur le serveur pour le canvas à utiliser. Vous pouvez imprimer le canvas et dessiner dessus (par transparence). Inversement, avec le scan de votre croquis vous pouvez vérifier le respect des proportions imposées par superposition en l'ajoutant sous les calques du canvas.

Si vous modifiez la hauteur de l'entête Flash: le titre du blog, le menu ainsi que le titre du premier message de la page doivent être visible d'emblée sur un écran 1024x768pixels, ceci sans devoir utiliser l'ascenseur pour les trouver.

Ressources : Voir "cours 5" sur le serveur pour le canvas à utiliser
Croquis finalisé et numérisé à remettre au début du Cours 7 (~s24)
Nomeclature = NomPrenom-1tix-croquis.jpg

Fig : Exemple de croquis de conception (wireframe sketching), par T.S. Stromberg

Le titre de votre blog devra être présent durant toute la visite, votre logo constitué impérativement de votre "Prénom et Nom" devront s'afficher soit comme titre principal, soit comme sous-titre si vous utilisez un pseudonyme ou un nom renforçant votre univers graphique.

Fig : Logo de Larry Gérard : Web design & developer

Présentation de vos layouts. Vous concevrez l'interface graphique de votre blog avec Fireworks (étendu à Illustrator et Photoshop, mais attention au canvas en pixels, afficher les règles! 960px de large > voir gabarit cours 5)
La conception graphique du layout est à remettre la semaine avant les vacances de printemps. - cours 9 (~s26). Nomeclature = NomPrenom-1tix-layout.jpg

fig : Layouts "Camp emerson", présentation html+css+image en ligne

RÉALISATION WEB & MULTIMÉDIA :

1. la bannière animée et interactive (flash)

2. l'habillage graphique du blog (html/css)

3. la navigation

4. les contenus

1. La bannière animée et interactive (flash)

Nous appellerons la bannière ou encore l'entête de votre blog : "le stéganographe". Elle sera réalisé avec Flash CS3. Celle-ci doit être un ensemble d'objets graphiques interactifs. L'interactivité sur la bannière n'est pas un passage obligé pour l'utilisateur pour l'amener au contenu du blog, un bloc menu vertical ou horizontal dans le blog remplira cet objectif. Tel un stéganographe, l'interactivité ne doit pas être flagrante mais découverte au survol par l'utilisateur. Seul les utilisateurs avertis tels que vos pairs, quelques curieux et observateurs découvriront votre récit multimédia au survol et au clic des objets de votre bannière. Nous attendons un minimum de 3 objets animés au survol et cliquables. Un objet peut en déclencher un autre tel un jeu de piste ou un récit, ou les objets peuvent être indépendants mais l'ensemble doit favoriser votre concept graphique. Les boutons peuvent déclencher des sons, des images, des mots ou des animations. La bannière peut avoir un cadrage fixe ou un déplacement dans l'espace pour ceux qui souhaitent intégrer la 3D ou un déplacement 2D.

fig : exemple de blog avec une entête Flash

2. L'habillage graphique du blog (html/css)

L'habillage graphique du blog consiste à adapter la page HTML/CSS de Blogger pour qu'elle corresponde à votre layout (projet graphique) :

- placer une image de fond à la page HTML
- changer les couleurs des liens
- ajouter un logo typographique (Alias, Prénom Nom)
- intégrer la bannière Flash

Votre blog sera visualisé sur Firefox 3.5.7 pour votre évaluation. (3.6.3 pour la session d'août)

3. La navigation

La navigation peut ressembler à ceci. Nous devrons retrouver les catégories suivantes dans l'ordre et la nomenclature que vous souhaitez :

Bio (à propos, profil, me...) : contenu texte informatif, mini bio, une photo/illustration
Portfolio : vos réalisations (! chaque professeur devra rapidement y trouver son travail)

Blog : articles divers
Liens : liste de liens vers des sites susceptibles d'intéresser votre public.
Contact : un formulaire de contact Google + lien e-mail

4. Les contenus graphiques et multimédia

Intégrer dans une rubrique portfolio tous les travaux réalisés dans les cours de la première année.
Intégrer tous travaux créatifs réalisés en-dehors de l'école susceptibles de renforcer votre profil d'infographiste. sound designer, illustrateur, sculpteur...
Eviter les informations non-professionnelles, photos de famille, petites amies, etc..
Les widgets : ajouter si vous le souhaitez 3 gadgets maximum : actualités sur l'infographie (twitter), ou une playlist audio en accord avec votre univers graphique, un nuage de tags, listes de membres, autres à discuter...

Remises des exercices :

Nomenclature : NOM-Prenom-2010-TIM-ex#.zip

Selon l'indication donnée en classe, la remise des travaux se fera :
- soit : via le serveur / net 1ti / Remise / GerardV / Ex # / NOM-Prenom-2010-TIM-ex#.zip
- soit : en ligne via un outil de livraison
- soit : par email + justification (certficat numérisé) pour les retards.

(! remplacer la dièse "#" par le numéro du cours ou s'est déroulé l'exercice)

EXAMEN :

Fichiers à remettre obligatoirement sur le serveur Remise/Prof/Gerard/1ti_ :

nom-prenom-2010-TIM-croquis.jpg
nom-prenom-2010-TIM-layout.jpg
nom-prenom-2010-TIM-screencast.mov
nom-prenom-URL.ink ou webloc (raccourci vers la page du blog en ligne)
sources.zip

Indications importantes :

- Le croquis sur format A4 doit être scanné, redimensionné en 72dpi
- Le layout Web doit faire minimum 1280pixels ou maximum 1920 pixels de large et doit être en qualité irréprochable au poids optimisé au format Jpeg (La compression ne doit pas se voir!) Dans ces 1680px max, l'entête comprenant l'animation Flash, le menu et le titre du message doivent être visible dans la zone 960x500px.
- La capture vidéo de votre blog (réalisée par exemple avec ScreenToaster) doit présenter en +/- 30 à 60 secondes maximum : l'animation et l'interactivité de l'entête Flash, le menu qui mène au portfolio et 1 à 3 travaux inclus dans un ou plusieurs messages.
- IMPORTANT / Joindre le dossier de travail contenant les dernières versions sources de vos fichiers Flash, Fireworks, Photoshop et/ou Illustrator contenant les calques. Merci de vectoriser ou joindre les typographies. (max 100MB) _ l'examen vaudra zéro si les sources ne sont pas fournies.

Bon travail ;)

Screencasts and videos online

Organisation de projets

2010-01-20T21:39:00.001+01:00

Pour réussir tous projets ambitieux comme sa première année à l'infographie-sup, une bonne organisation s'impose.

Grâce à votre compte Gmail :

- Recevez et envoyez des emails avec n'importe quelle adresse email.
- Grâce au fichier ICS disponible en bas de page de l'extranet, récupérer votre horaire HEAJ dans votre agenda google.
- Pour vos cours ou remises, faites vous envoyer des rappels gratuitement via SMS, ou par Email.
- Synchronisez votre agenda HEAJ avec vos autres agendas privés.
- Partagez des agendas avec des amis ou des collègues.
- Utilisez votre agenda Google comme Journal de Classe
- Ajoutez des tâches directement dans votre agenda.
- Attachez des googles documents (notes, tableurs, formulaires...)
- Envoyez des invitations
- ...

fig 1. votre agenda HEAJ dans Google

fig 2. en bas de la page extranet, vous trouverez le bouton pour exporter votre agenda au formal .ics

fig 3. Accès au paramètres de l'agenda Google

fig 4. importer un agenda au format .ics

fig 5. votre agenda importé

Comment cacher la barre Blogspot?

2010-01-19T14:18:00.000+01:00

Pour un blog au look plus pro, vous pouvez cacher la barre blogspot grâce au CSS.

Ajouter le code suivant dans la mise en page / HTML :

#navbar,.quickedit{display:none;}

Vous perdez donc les liens de création et connexion rapide mais il suffit de vous rendre sur Blogger pour éditer votre site.

http://www.blogger.com/home

Et voili.

Mind Mapping (Cartographie Cognitive) : Mindmeister tutorial

2010-01-16T20:54:00.000+01:00

Mind meister est un service en ligne de mind mapping (Cartographie Cognitive, ou encore carte heuristique*) qui vous permettra entre-autres de faire un exercice de conception de la hierarchie / navigation de vos sites web.

*"Une carte heuristique (du grec ancien εὑρίσκω, eurisko, « je trouve » ), également appelée mind map en anglais, carte des idées, carte conceptuelle, schema de pensée, carte mentale, arbre à idées ou topogramme, est un diagramme qui représente les connexions sémantiques entre différentes idées, les liens hiérarchiques entre différents concepts intellectuels. Au contraire du schéma conceptuel (concept map en anglais), la carte heuristique est le plus souvent une représentation arborescente des données. " - source wikipedia

fig 1. Carte heuristique des techniques et ressources vues au cours

fig2. A Tour of MindMeister from MindMeister on Vimeo.

Testdrive : NotableApp

2010-01-13T17:25:00.000+01:00

NotableApp est une alternative intéressante à Adobe Acrobat pour la révision avec annotations collaboratives et publiques de projets graphiques d'interface Web.

Petits problèmes pour importer ses images avec Firefox : le bouton screenshot ne produit rien et l'export javascript dans les favoris n'interprète pas la typo utilisée pour les titres. Seul l'upload d'image fonctionne bien.

à suivre donc... http://www.notableapp.com

PLANNING DU COURS 2009/2010

2010-01-13T14:58:00.004+01:00

Intro (Semaine 18 - durée : 2h)
- Théorie : Objectifs, programme du cours, examen, questions/réponses
- Exercice : Répondre aux questions du formulaire google
- A la maison : Relire le programme, planning, briefing, évaluations (v. sommaire)
- Les liens vus en classe
Sortie au festival WIF (Semaine 19 - durée : 2h)
- 5 février 2010 à 15h : En savoir plus
- Conférence "Nouveaux médias, Nouveaux métiers"
Les images Bitmap et dessin vectoriel (Semaine 20 - durée : 2h)
- Théorie : Taille, optimisation et exportation gif, png, jpeg... avec Fireworks
- Exercice 1 : optimisation et exportation de fichiers exemples.
- Théorie : Dessin vectoriel et courbes de bézier avec Flash (vs Illustrator / Fireworks / SVG)
- Exercice 2 : Dessiner une balle et un décor avec Flash (!séparation des calques)
- Exercice 3, à la maison : Terminer les exercices 1 et 2 (remise au prochain cours). Veille graphique, consulter des magazines de web design.
------------------------------------- VACANCES DE CARNAVAL -------------------------------------
Conception de projet graphique et design d'interface web (Semaine 21 - durée : 2h)
- Théorie : Ressources Web (galeries flash et CSS, magazines, moodboard, stockphoto, couleur) et Fireworks (calque .png)
- Exercice 1 : Compléter un layout Web (infographie-sup.be), ajouter une page, exporter une page, exporter une découpe.
- Exercice 2 : Conception, croquis d'interface Portfolio
ATELIER (Semaine 22 - durée : 2h)
- Exercice : Conception, design d'interface Portfolio
- Croquis à remettre au début du cours 7 (s24)
- Layout web (Fireworks) à remettre avant les vacances de printemps - cours 9 (s26)
Sites web statique et hébergement (Semaine 23 - durée : 2h)
- Théorie : Pages Web, langage HTML et interactivité
- exercice 1 : liens web relatif et absolu, lien e-mail.
- Théorie : Hébergement et transfert FTP avec Filezilla ou FireFTP.
- Exercice 2 : Connexion et mise en ligne d'un site web.
Outils d'intégration Web (Semaine 24 - durée : 2h)

Exercice : Création d'un compte Blogger, création d'un billet, tags, installation d'un template avec menu; Création d'un hébergement DropBox et intégration d'une animation flash dans blogger; Installation de Firebug et modification de l'HTML/CSS du Blog

Animation vectorielle (Semaine 25 - durée : 2h)
- Théorie : Cadence, scénario, clefs, intervalles, symboles (graphique, bouton, clip), interpolations, masques, guide, exportation .swf avec Adobe Flash
- Exercice : Dessin et animation d'une balle qui tourne sur elle-même et d'un point à l'autre
Animation interactive (Semaine 26 - durée : 2h)
- Théorie : Programmation ActionScript 3 : goto, stop, play, fonctions, écouteurs d'événement, conditions) avec Adobe Flash. Exemple interactif et commenté de la balle.
- Atelier : Présentation du travail de conception graphique (layout web) du blog et corrections
ATELIER (Semaine 27- durée : 2h)
- Théorie : Galerie et diaporama d'images Adobe Flash + XML
- Exercice : paramètrage du composant slideshow PRO
- Atelier : Présentation du travail de conception graphique (layout web) du blog et corrections
ATELIER (Semaine 28 - durée : 2h)
- Exercice : découpage du layout, animation flash, intégration HTML/CSS
ATELIER (Semaine 29 - durée 2h)

Exercice : découpage du layout, animation flash, intégration HTML/CSS
~~Théorie : Vidéo en ligne avec Flash : Capture, encodage vidéo avec Flash vidéo Encoder, importation vidéo, lecture progressive et composant vidéo, mise en ligne~~
~~Exercice : Intégration des animations vue dans les autres cours (painter, 3d, ...~~

CONCLUSIONS (Semaine - durée : 1h)
- Remise finale des réalisations avant examen.
- Exercice : Questions et révisions.

Cours 2 - Grande Fiesta du WEBDESIGN INTERNATIONAL FESTIVAL à NAMUR

2010-01-07T11:46:00.000+01:00

Dogstudio, l'agence namuroise qui a du chien, organise le WIF Belgique les 5 et 6 février 2010 au palais des congrès de Namur.

Le groupe Web + Multimédia de notre école y participera activement avec 4 groupes de joyeux étudiants inscrits en compétition Webjam. Des places sont encore disponibles, inscrivez-vous ici!
Aussi, nous sommes très heureux de pouvoir emmener nos quelques 500 étudiants de première année à cette grande fête qui accueillera tout spécialement pour eux une conférence sur les "Nouveaux Médias et les Nouveaux Métiers". Une Conférence organisée par le Technofutur (Centre de formation dans le domaine des technologies de l'information et de la communication (TIC).)

Nos étudiants de deuxième année (Web + Multimédia) et troisième année ne sont pas en reste puisqu'ils sont invités aux prestigieuses conférences Adobe et technologies Mobiles, ainsi qu'au workshop Data visualisation.

Voir le programme des conférences.

Découvrez un aperçu du WIF organisé à Limoges en 2008.

Webdesign international festival 2008

Créer un diaporama d'images de type Flash

2010-01-05T12:21:00.002+01:00

Pour présenter vos réalisations, vous pouvez créer un diaporama sans toucher au code (export facile vers Blogger) :http://www.photosnack.com

Au cours 10, nous verrons comment utiliser le composant "slideshow Pro" pour Flash.

Et pour ceux qui souhaite accéder aux secrets des magiciens du code, vous trouverez des sources de diaporama flash sur ffiles.com : http://www.ffiles.com/flash/photo_galleries

PROGRAMME DU COURS 2009/2010

2010-01-05T10:33:00.001+01:00

TECHNIQUES INFOGRAPHIQUES MULTIMEDIA

1ère Année d'étude
25h
3ECTS

Compétences :

A l'issue du cours, l'étudiant doit être capable de concevoir et réaliser le design graphique et interactif d'un site web et d'une application multimédia.

Connaissances préalables :

Les cours de TIM requiert la connaissance :

des systèmes MAC & PC pour l'ouverture, la sauvegarde et transfert de fichiers sur le réseau
du navigateur Firefox 3
d'un vocabulaire graphique et cinématographique de base (v. cours de TRTI, layout, ...)
de quelques notions d'anglais utiles à la lecture et écoute de ressources en ligne.

Contenu du cours :

Notions générales de l'infographie Web & Multimédia : histoire, vocabulaire, les métiers et les applications actuelles  
Notions de communication visuelle créative, esthétique et ergonomique.  
Introduction technique aux langages et logiciels suivants : Fireworks, HTML, javascript, feuilles de styles (CSS), FLASH (animation, vidéo, son actionscript), transfert de fichiers (FTP).  

Travaux pratiques en classe :

- Conception de projet (Analyse, veille technologique, inspiration, recherche, croquis, présentation et communication) 
- Création visuelle d'écrans (layouts) 
- Création d'interactivité  
- Création d'animation
- Intégration graphique
- Intégration sonore
- Intégration vidéo 
- Intégration HTML
- Intégration CSS
- Optimisation du poids 
- online et offline (site web et application autonome) d'une application Flash. 
- Configuration, habillage et intégration de contenu dans un blog ou CMS.  

Examen :

L'étudiant réalisera au cours de son apprentissage un portfolio à finaliser pour l'examen comprenant :   

Web : Conception et habillage graphique d'un blog portfolio + intégration des travaux réalisés dans les autres cours.
Multimédia (une animation Interactive) : Un récit, un parcours narratif par l'image, le texte et le son.  (faisant partie de l'habillage du blog)

Méthode d'enseignement et d'apprentissage :

- Exercices, applications, travaux pratiques, travaux dirigés
- Activités en laboratoire
- Apprentissage en autonomie

Méthodes d'évaluation :

- Exercices pratiques durant l'année
- Examen pratique en Juin
- Examen pratique en Seconde session

Voir la fiche : "Evaluations"

Sources, références et supports éventuels :

Support de cours en ligne sur le site du prof (avec briefing, présentations, nombreux liens vu en classe et des exemples de travaux d'étudiants)
Manuels de référence en ligne des logiciels utilisés
Les fichiers vus en classe sont disponibles toute l'année sur le serveur de l'école ainsi que des vidéos tutorielles en complément des exercices techniques.

Matériel à acquérir :

- le petit manuel du graphisme
- Un carnet moleskine
- Crayon, gomme, marqueurs

Organisation des cours :

De la semaine 18 à 30 (calendrier HEAJ)
Les cours de 2x1h sont donnés en labo (Mac ou PC) chaque semaine.
Il s'agit de 25 heures au total.

Voir le planning du cours

Chaque cours comprend une partie théorique d'une vingtaine de minutes qui sera suivie d'un exercice préparatoire à l'examen. Les exercices seront finalisés en classe le jour même ou à domicile pour le prochain cours selon la rapidité de l'étudiant ou absence justifiée.)
Les remises sont obligatoires. Toute absence injustifiée et retard endéans 1 semaine entrainera une perte de 20% des points. Au-delà d'une semaine, l'exercice ne sera ni corrigé, ni comptabilisé.

Estimation des heures à planifier pour vos travaux à domicile :

0 à 20h pour terminer les exercices commencés en classe.
10h pour la conception de l'interface graphique
15h pour l'intégration graphique et contenu du portfolio (blog)
15h pour l'animation interactive

Ajouter Twitter dans Blogger?

2010-01-04T16:40:00.000+01:00

Vous êtes féru d'actualités dans un ou plusieurs domaines de l'infographie et souhaitez partager rapidement vos découvertes du moment avec les visiteurs de votre blog?

Vous disposez déjà d'un compte Twitter? Découvrez par exemple, le compte twitter des profs du Web & Multimédia : http://twitter.com/profstiw

Comme nous l'avons fait sur ce blog, vous pouvez vous aussi intégrer votre ou un autre module Twitter sur votre blog.

Fig. 1 - Un bloc Twitter dans Blogger.

Pour configurer et importer facilement un Twitter dans votre Blog : http://twitter.com/goodies/widget_profile

Fig 2. Ecran de Configuration du gadget Twitter.

Une fois configuré, il vous suffira de cliquer sur le bouton Add to Blogger pour ajouter le bloc Twitter fraichement dans votre Blog. Si vous avez un autre blog, il est possible de recupperer le code (embed) à intégrer dans un autre site.

Fig 3. Ecran de finalisation (+Add to Blogger)

Une fois ajouté à Blogger, vous êtes redirigé sur Blogger pour choisir l'emplacement de votre bloc.

Fig 4. Apparaît du gadget dans blogger

Déplacer le module, enregistrer et l'affaire est dans le sac.

Les sites web et ressources vues au cours 2009/2010

2009-12-25T01:07:00.001+01:00

Documentations de référence et liens utiles :
FIREWORKS
- En ligne : http://help.adobe.com/fr_FR/Fireworks/9.0/
- Livres prochainement à la bibliothèque

FLASH
- Voir les vidéos dans TUTOS sur le serveur net1ti/GerardV/TIM2010/ressources/TUTOS/DVD
- En ligne : http://livedocs.adobe.com/flash/9.0_fr/UsingFlash/
- Livres prochainement à la bibliothèque

BLOGGER
Centre d'aide : http://www.google.com/support/blogger/?hlrm=fr
Layouts : http://www.google.com/support/blogger/bin/topic.py?topic=24776
CSS : http://www.google.com/support/blogger/bin/answer.py?hlrm=en&answer=41954

HTML
Exemples : http://www.w3schools.com/html/default.asp
Documentation : http://www.la-grange.net/w3c/html4.01/struct/global.html

CSS
Exemples : http://www.w3schools.com/css/css_examples.asp
Documentation : http://www.la-grange.net/w3c/html4.01/present/styles.html

Cours 1 :

- Organisation : gmail, google agenda, google docs
- Statistiques de sites web : woopra, clicky, analytics
- Smashing magazine
- Communication Arts : interactive annual (disponible en bibliothèque HEAJ)
- Compléments pour Firefox : Firebug, Web developer, Cooliris
- RSS : Google feeder, igoogle, Netvibes
- Site web de l'école
- Extranet de l'ecole (exportation du fichier .ics)
- WIF Webdesign International Festival 5 février 2010, de Namur
- AWT Agence Wallone des Technologies
- Ex-HEAJ : www.prizm.be, www.larrygerard.be, www.explose.lu
- Faire la fête : FLASH, Rendez-vous trimestriel des Arts numériques le 12 Février 2010 au Vecteur à Charleroi
- Graffiti Analysis
- Encyclopédie graphique : David Carson, Tschichold, Michal Batory
- Constructivisme Russe : L'avant-Garde
- Franz Ferdinand : This is fire
- Tim Berners-Lee, Robert Caillau
- Drupal.com
- Wordpress.com
- Blogger.com
- Over-blog (exemple : Chair a fauteuil)
- Creative Commons
- Jamendo : télécharger gratuitement de la musique MP3
- information is beautiful, mcCandless

Cours 2 - WIF

- le site du WIF : http://wif-dogstudio.be/
- www.explose.lu
- Thomas Lesire : www.studiobreakfast.be
- AWT Agence Wallonne des Technologies
- Adobe : Serge Jespers : http://www.webkitchen.be/

Cours 3 - illustration artistique dans Flash (le dessin vectoriel sans courbe de bézier)

Pen pressure in Flash & Illustrator
http://www.youtube.com/watch?v=-xsIPZ9Fhl4

Cours 4 et 5 - Conception de projet graphique Web

Organisation:
http://delicious.com/
https://addons.mozilla.org/fr/firefox/addon/3615
http://mail.google.com/mail/help/tasks/

References "client" / exemple du briefing :
http://www.1stwebdesigner.com/inspiration/trendy-unique-website-header-designs/
http://jasongraymusic.com/home
http://www.thepixel.com/blog/

Veille technique :
http://www.adobe.com/products/fireworks/
http://www.adobe.com/products/flash/

Veille graphique (magazines) :
- http://www.smashingmagazine.com
- http://www.webdesignerdepot.com
- http://www.webdesignerwall.com/
- http://www.gomediazine.com/
- http://thefwa.com/

Veille graphique (galeries) :
- http://www.behance.net
- http://www.designcharts.com/
- http://www.fubiz.net/category/Motion/
- http://vi.sualize.us/
- http://www.thefwa.com/

Conception UX :
- http://404uxd.com/2008/02/28/the-fine-art-of-wireframes
- http://wireframes.tumblr.com/

Conception graphique :
- voir fichier layout-web.png sur le serveur (cours 4 / ressources)
- http://imgspark.com/
- http://kuler.adobe.com/
- http://www.istockphoto.com/
- http://www.fontsquirrel.com/

Cours 6 - HTML

- HTML http://www.w3schools.com/html/default.asp
- Dreamweaver : http://www.adobe.com/fr/products/dreamweaver

Cours 7 - Outils d'intégration + CSS
- Blogger : www.blogger.com

- Hébergement gratuit Dropbox : www.dropbox.com
- Firebug : https://addons.mozilla.org/fr/firefox/addon/1843

- CSS http://www.w3schools.com/css/css_examples.asp

Cours 8 - Animation Flash
- Nombreux fichiers /demo sur serveur net1ti

Cours 9 - Animation interactive (programmation AS3)
- Programmation créative : http://www.alphabazar.net/
- Sources Flash : http://ffiles.com/

Cours 10 - Galerie et diaporama d'images
- Composants Flash + XML : http://slideshowpro.net
- Galerie HTML/CSS/JS : http://test-galleryswich.blogspot.com/

Cours 12 - Vidéo
- Capture vidéo : http://www.screentoaster.com

Cours 1 : Présentations

2009-12-24T17:58:00.001+01:00

&lt;p&gt;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Chargement...&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;gt;&lt;/p&gt;

The Grid @ infographique-sup.be

2009-12-24T15:10:00.001+01:00

Voici un exemple de l'utilisation d'une grille pour structurer la mise en page du layout du nouveau site web de l'école.