2D + Web

3D

Le responsiveweb design

Modéliser à partir d’un dessin

AudiovisuelInitiation aumotion design

Message de remerciementMerci aux presques 400 personnes qui ont lu Multiclics #1 et également aux personnes exté-rieures qui ont contribué à Multiclics #2 : An’So, Lucie Patry, Grégoire Varchon, Teddy Voisin et Pierre Leverrier.

Je vous laisse découvrir notre webzine, bonne lecture !

Et n’oubliez pas, notre webzine est avant tout un webzine collaboratif, alors si vous souhaitezparticiper à l’expérience Multiclics, contactez nous à contact@multiclics.fr !

Simon MichelRédacteur en chef

Infographie 2D

Infographie 3D

AudioVisuel

Web

Dossier 2D : page 3 - Oser le Crowdsourcing, une bonne idée ? page 4 - Designs originaux, T-shirts originaux ! Le pixel-Art page 5 - L’infographie contre le commerce irresponsable des armes à feuFormation : page 6 - Présentation de la formation DUCCIAtelier 2D : page 7 - Un design pour tous : Partie Photoshop

Dossier 3D : page 12 - 3D Striker page 13 - LeapMotionAtelier 3D : page 14 - Modélisez à partir d’un dessinFormation : page 19 - L’ESRA Rennes

Dossier AudioVisuel : page 21- Youtube se lance dans la télévision page 22 - La redevance audiovisuelle pas si enterrée que ça...Atelier AudioVisuel : page 23 - Initiation au Motion-DesignFormation : page 27 - Licence Pro: ATC

Dossier Web : page 29 - 5 outils pour améliorer votre site page 30 - Typecast, un testeur de polices page 31 - Blokkfont + Chrome Canary Atelier Web : page 32 - Un design pour tous : le responsive, ou la fin des pixelsFormation : page 36 - Licence Pro: Référenceur & Rédacteur Web

#2S o m m a i r e

1

Cette pratique consiste, pour les éditeurs de sites, à utiliser les internautes pour créer des contenus, répondre aux questions d’autres visiteurs, voire participer à la conception du site. Ce terme, que l’on peut traduire par “approvi-sionnement par la foule” représente une sorte d’externalisation. En mutualisant les ressources et compétences de

leurs visiteurs, les sites peuvent alors proposer des produits et services à des coûts très bas.

De nombreux sites basés sur le concept du marché ouvert proposent ainsi aux internautes d’héberger leurs créations (photos, vidéos, essais, arti-cles) puis de les revendre à bas prix, moyennant une commission. Fotolia, la plate-forme française de vente de photos libres de droits, propose ainsi des images quasi-professionnelles à partir de 1 euro ! L’encyclopédie en ligne Wikipedia fonctionne égale-ment sur le modèle du crowdsourc-ing en proposant à des volontaires de contribuer à la rédaction des ar-ticles qu’ils désirent. Grossièrement, cette méthode offre aux entreprises LE parfait moyen d’obtenir de mul-tiples créations «  professionnelles  » à petit prix. Alors que 10 graphistes proposent un produit, un seul sera rémunéré pour son travail : celui qui aura trouvé grâce aux yeux du client. Tous les autres auront travaillé pour rien!

Info

grap

hie

2DA

ctu

Info

grap

hie

2DAc

tus

« De base, le crowdsourcing est une pra-tique qui consiste à réunir un grand groupe de personnes/d’internautes, pour s’appuyer

sur leurs compétences afin de créer du contenu. »

Fotolia: Une plateforme de vente de photo-graphies faites par des amateurs et/ou des professionnels

Wikipédia: Une encyclopédie collective établie sur Internet, universelle. Wikipédia a pour objectif d’offrir un contenu librement réutilisable, objectif et vérifiable, que cha-cun peut modifier et améliorer.

Wilogo: (Fotolia) Une plateforme communautaire de créations gra-phiques faites par des amateurs et/ou des professionnels.

A vous de voir si le jeu en vaut la chandelle. On ne sait pas combien Wilogo se met dans la poche mais sûrement une bonne partie. De plus le niveau est assez bon et la chance de toucher le pactole est donc assez faible. De plus si vous êtes indépendant, vous devrez déclarer cet argent. Pour finir sur du positif, ils ont eu la bonne idée de créer un site d’actualité sur le graphisme et la publicité/communication en général qui se trouve sur http://fr.wilogo.com/blog. Il y a des choses intéressantes.

Oser le Crowdsourcing, une bonne idée ?

3

6 Dollars T-shirt, La Fraise, Catchy, La Geekerie, nombre de nouveaux sites fleurissent sur le net pro-posant des designs toujours plus fous ! Oser vous balader en portant le sigle de votre super-héro préféré, c’est désormais possible ! Grâce à 6-Dollars-T-shirt, vous pourrez arborer vos « mèmes » préférés en référence à 9gag ou au-tres 4chan. Chez La Fraise : on vous propose des illustrations, du plus mignon au plus glauque, et chez La Geekerie on vend des T-shirts faisant référence à vos films préférés. Catchy, eux, vous proposent de remet-tre les personnalités d’antan au goût du jour en leur ajoutant des lunettes de soleil Ray-Ban! Attention tout de même au intéressés : la plupart de ces sites sont basés à l’étranger (notamment 6-Dollars-T-shirt) ce qui implique d’éventuels surplus de frais de port plus ou moins élevés. De plus, ces sites proposent souvent des « contests » faisant appel à la créativité des internautes pour soumettre de nouveaux designs originaux. Les gagnants se verront, la plupart du temps, gratifier d’un bon d’achat et/ou d’une rémunération. Avis aux amateurs ! Suggérez vos designs les plus fous pour tenter votre chance !

Designs originaux, T-Shirts originaux!Info

grap

hie

2DAc

tus

Le pixel-ArtLe pixel, c’est en fait le plus petit élément qui compose une image, un point en quelque sorte. En

assemblant tous ces points on forme une image.

Les premiers jeux vidéo sont apparus dès les années 1970. Les dessins étaient alors com-posés de carrés assez gros pour être bien visibles, chaque carré était tout simplement un pixel. Le jeu Pong de chez Atari fut un des premiers jeux vidéo, fabriqué avec seulement quelques pixels en mouvement. Les décors furent ajoutés et affinés quelques années plus tard avec la sortie de Mario Bros, le fameux petit plombier de Nintendo. Les œuvres en pixel-art les plus fréquentes sont des représentations sur les murs des « spaces invaders », mais il en existe de toutes formes et tailles : des mosaïques de post-it collés sur les fenêtres aux compositions ultra-détaillées sur ordinateur.

4

Info

grap

hie

2DCo

mpa

ratif

tabl

ette

gra

phiq

ue

L’infographie contre le commerce irresponsable des armes à feu !

Info

grap

hie

2DAc

tus

Les arts graphiques ont toujours été utilisés pour ser-vir une cause (de la propagande nazie aux affiches de résistance). Aujourd’hui, c’est la question des armes à feu qui pose problème. Un problème resté invisible jusqu’à certains évènements tra-giques comme le massacre de Colombine ou de Newton pour ne citer que ceux-là. Dans la ligne de mire des activistes, le princi-pal lobby pro-armes à feu améri-cain, j’ai nommé la NRA (National Riffle Association) qui défend en-core et toujours le second amen-dement autorisant le port d’arme non (ou très peu) règlementé aux États-Unis. Le second «  front  » d’attaque de ce mouvement sont les pays fournissant, sans scru-pule, de l’équipement militaire à des gouvernements totalitaires qui terrorisent leur population.

Les graphistes produi-sant ces affiches (oui, car ce sont des affiches principale-ment) cherchent, le plus sou-vent, à transmettre une émotion, une idée dans leurs visuels. Par exemple le fait de comparer le problème aux catastrophes na-turelles a inspiré à un graphiste une série de visuels où on peut voir, entre autre, un tsunami ou une tornade d’équipements mili-taires rasant une ville. Leur but est donc ici de faire réfléchir et réagir le spectateur en lui impo-sant des images choc et pleines de sens.

Depuis quelques années internet sert de vitrine à plusieurs causes. De l’ONU à Amnesty Inter-national en passant par des graphistes et agences de communication, l’infographie est une façon de montrer les dérives du commerce des armes sur un ton choc, humoristique ou émo-tionnel !

Plus d’infos sur http://www.amnesty.fr/ ou sur la page facebook http://www.facebook.com/AmnestyArmes. 5

Présentation de la formation

DUCCI Diplôme Universitaire de Communication et Conceptions Infographiques

Où?A l’ICOM (Institut de la Communication) Université Lumière Lyon 2.

Coût~2600€ par an les deux premières années (DUCCI 1 et 2).

Coût du master : frais universitaire.

3 ans1ère année : DUCCI 1.2ème année : DUCCI 2.3ème année : Master CIM (Conception et Intégration Multimédia).

Effectif~30 étudiants.

Le DUCCI 1 apporte de solides bases culturelles, théoriques et pratiques dans les domaines de la communication graphique mais aussi de l’algorithmique et du multimédia.

La filière multimédia propose aux étudiants issus d’un bac +2 une formation en 3 ans aux métiers de l’info-graphie et du multimédia qui leur permettra de transformer une passion en un véritable projet professionnel. Le DUCCI1 apporte de solides bases culturelles, théoriques et pratiques dans les domaines de la communi-cation graphique mais aussi de l’algorithmique et du multimédia. Le DUCCI2 met en avant l’aspect technique avec des apprentissages liés aux outils d’animation, d’intégration et de programmation. Enfin le Master CIM renforce et approfondit tous ces acquis et développe les capacités des étudiants à gérer et diriger des projets multimédia. La filière infographie-multimédia offre à chaque étudiant l’opportunité d’acquérir et de maîtriser l’ensemble des disciplines liées à la communication et au multimédia. L’enseignement de ces disciplines s’étale sur 3 ans en suivant une progression soigneusement étudiée par notre équipe pédagogique. Cette équipe, qui peut se préva-loir de plus de 10 ans d’expérience dans l’enseignement de l’infographie et du multimédia, est composée à la fois d’universitaires et d’intervenants professionnels. Elle s’attache depuis toujours à trouver le juste équilibre entre des enseignements théoriques fondamentaux et des savoir-faire indispensables adaptés à la réalité de la profession. Ainsi, les connaissances transmises à nos étudiants couvrent un large panel partant des fondements théoriques et culturels du domaine pour aboutir aux techniques de direction de projet, tout en assurant la maîtrise des techniques et outils manipulés durant les phases de conception et de réalisation.

Quelques liens utiles :http://icom.univ-lyon2.fr/sites/icom/IMG/pdf/Presentation_ducci1.pdfhttp://icom.univ-lyon2.fr/281-Ducci1.html

Pierre Leverrier

Info

grap

hie

2DFo

rmat

ion

6

« Dans cette suite de deux tutoriels compre-nant une partie sous Adobe Phostoshop et l’autre en programmation (html5 + css3), nous allons apprendre à réaliser un site web qui s’adapte à toutes les résolutions, aussi bien à celle de votre écran d’ordinateur qu’a celui de votre smartphone. »

MICHEL Simon

Etudiant, infographiste

Pré-requis :

* Connaître les outils de bases de Photoshop * Connaître le langage HTML + CSS

01 Intoduction au responvive : Je grille, tu grilles = nous grillons !

Infographie 2DTutoriel Illustrator

Info

grap

hie

2DTu

torie

l Res

pons

ive

Des

ign

Un design pour tous !Les grilles, un allié à ne surtout pas négliger (½)

Partie Photoshop

Avec l’arrivée de l’HTML5 et du CSS3, les webdesigners ont commencé à réfléchir à des designs adaptables. Ils ont donc créer un système de grilles sous Photoshop, permettant ainsi de coder selon une même « norme », et pouvoir faciliter l’intégration de leur design.Le système le plus connu et le plus utilisé reste celui de 960.gs que je vous invite à télé charger dès maintenant (car il nous sera très utile par la suite). Vous pouvez aussi faire appel à des générateurs de grilles.

7

02 Comment fonctionnent les grilles ?

 Pour faire simple, chaque « grille responsive » est divisée en un nombre de colonnes qui varient en fonction de la grille que vous utilisez (de 12 à 16 colonnes, voire plus). Chaque colonne est de taille fixe (pour exemple les grilles que nous allons utilisées sont de 12 colonnes de 60 pixels de largeur.(illustration en rose la colonne – en blanc l’inter-colonne). Pour-quoi nous attardons-nous sur les chiffres ? Car ils nous seront très utile dans la 2e partie de ce tutoriel ).

Info

grap

hie

2DTu

torie

l Res

pons

ive

Des

ign

Téléchargez et ouvrez désormais le fichier 960_grid_12_col.psd. Ah, on arrive enfin sous Photoshop, vous voyez le lien avec l’image précédente. Voici le résul-tat final de ce que l’on va réaliser grâce à nos chères grilles.

03

Let’s go ?8

04 L’épreuve du schémaPour construire un responsive webdesign, il faut penser qu’il devra être utilisable et ergonomique aussi bien sur l’ordinateur de Mamie, que sur un smartphone ou encore une tablette. C’est pourquoi il est fortement conseillé de créer un schéma de son site (en ayant en tête qu’on devra l’adapter sur mobile).

Infographie 2DTutoriel Illustrator

Info

grap

hie

2DTu

torie

l Res

pons

ive

Des

ign

05 Utiliser les colonnes à bon escient !

Nous pouvons désormais commencer à réaliser le design du site. Dans cette partie je ne vais pas développer l’en-semble des actions, sachant que chacun fait le design qu’il souhaite, mais juste vous présente une méthode de travail que vous pourrez ré-utiliser (du moins je l’espère) .

De ce schéma, on capture les informations principales, et on pense à l’adaptation (graphique) du site sur les terminaux mobiles. Qui sera de cette forme ( on garde le reste de l’adaptation mobile pour la partie programmation) :

Voici le schéma du site réalisé ; à noter que le schéma est très simple, je vous invite pour votre premier « responsite » (j’avoue que je viens de l’inventer et que je n’en suis pas peu fier) à construire un site avec un schéma de la sorte.

9

Info

grap

hie

2DTu

torie

l Res

pons

ive

Des

ign

06 Le logo

C’est certainement la partie qui respecte le moins le sys-teme des colonnes, car il n’est pas compris exactement dans une colonne, ce n’est pas si grave, juste qu’il faudra sortir la calculatrice plus tard. Il faut seulement penser que la partie gauche de votre élément soit aligné avec la partie gauche de la colonne ! Si vous le pouvez, je vous conseille tout de même que votre logo rentre dans une colonne ou un bloc de colonnes.

Commençons par des exemples concrets : le logo, le menu, et les 3 rectangles de compétences.

07 Le menu

Pour le menu, chaque texte se trouve dans une colonne, pour des soucis d’esthétisme essayer de faire en sorte que chaque texte fassent la même longueur. (Je ne l’ai pas fait dans cette exemple, car le but n’est pas là :p)

08 Compétences

Nous allons désormais recréer le bloc des 3 compétences.Pour cela, séparez votre design en 3 bloc de colonnes, dans cet exemple le premier et le dernier bloc font 3 colonnes contre 4 pour celui du milieu. A l’intérieur on y incruste un icône se trouvant dans la première colonnes de chaque bloc. Pour le texte, il n’est pas forcément nécessaire de l’aligner, puisqu’il se situera au centre d’un bloc.

Après, il vous suffit de ré-itérer le même schéma à chaque fois, pour des designs plus compliqués, je vous conseille d’utiliser des grilles

possédants plus de colonnes (16 et plus par exemple).

L’approche du responsive, côté infographique, est terminée, mais il nous reste un exer-cice de taille : le codage de ce site et son adaptation à tout les terminaux!

10

Le monde de la 3D

Infographie 3D

3D striker: La 3D sur une TV 2D c’est possible !

« 3D striker », un boitier qui permet de regarder vos vidéos 3D, sur une TV 2D a été présenté au CES (Consumer Electronic show) qui s’est tenu début janvier à Las Vegas. Multiclics revient sur

ce nouveau phénomène

Dos

sier

3D

La 3

D s

ur u

ne tv

2D

Tout le monde le sait, Le CES est le rendez-vous à ne pas rater pour tout les amateurs de nouvelles technologies. Cette année encore, ce salon a dévoilé une grande variété de nouveaux produits très alléchants. Parmis eux, «3D striker», un boitier qui pourrait bien redonner envie au consommateur ne souhaitant pas changer tout leur matériel, pour pouvoir profiter de la 3D.

Concernant son fonctionnement, le boitier se synchronise avec une paire de lunettes 3D d’un nouveau genre, qui se présente comme un hybride entre l’anaglyphe et la 3D active. 3D striker va donc mixer ces deux technologies tout en essayant de palier leurs plus gros défauts comme par exemple le scintillement provoqué sont dotées de filtres qui vont alternés le vert et le magenta de façon synchronisée avec les images diffusées à l’écran. De plus, ce passage du vert au magenta ne se fait que sur 60Hz et non pas sur 120Hz. 3D striker ne va donc affecter que la couleur et non pas la luminosité, les verres des lunettes ne s’obscurcissent donc pas ce qui rendra l’effet de scintillement imperceptible.

Cette technologie vous permettra donc de visionner toutes sortes de source stéréoscopique, d’une chaine 3D en pas-sant par des blu-ray 3D... que l’on pourra connecter à son entrée HDMI 1.4 et qui seront restituées à l’écran par le biais de la sortie HDMI 1.3 compatible avec les écrans 2D.

Comment ça marche ?

« le 3D striker » devrait faire l’objet d’un lancement publicitaire de taille prochainement. En attendant, vous pouvez consulter la vidéo de présentation ici

12

Dossier 3D

LeapMotion, le tueur de souris

LeapMotion : L’interface 3D qui tue vos souris !

Après 4 années de dur labeur, la startup californienne LeapMotion nous dévoile enfin son tout nouveau produit qui pourrais bien annoncer la fin du reigne de la souris !

LeapMotion est doté de plusieurs caméras de détection qui projettent une lumière infra-rouge. Ce boitier n’est pas plus grand qu’une souris et se relie à votre ordinateur par USB pour créer un espace 3D cubique de 60cm environ totalement invisible. Cet espace vous permettra en somme de reconnaitre le moindre geste que vous effectuerez et le re-produira à l’écran le tout avec une précision au millimètre. Mais le cœur de la technologie Leap réside dans le logiciel de traitement de ces informations qui repose sur des formules mathématiques élaborées par David Holz, le cofondateur et directeur technique de l’entreprise.

Mais c’est quoi LeapMotion ?

«Mais comme les mots ne remplaceront jamais les images, je vous laisse découvrir cela en vidéo.»

Les premières applications faisant appel à LeapMotion devraient arriver sur le marché en début d’année 2013. Autant dire que les dévellopeurs vont se régaler et probablement concocter des centaines d’applications. De plus, Leap Mo-tion affirme avoir plusieurs partenaires afin de pouvoir intégrer sa technologie au sein des smartphones, des tablettes, des consoles de jeux ou des ordinateurs portables.

Mais à quel prix me dirais vous ?

Hey bien il n’est vraiment pas elevé ! en effet ce boitier est actuellement en pré-commande sur le (site officiel) pour seulement 70$, un prix bien inférieur au prix nécessaire pour avoir une souris digne de ce nom. Comment ça vous passer déjà commande ?

«Oui mais moi j’ai un PC ...»

Ancun problème ! ce boitier est également prévu pour windows. En effet, LeapMotion a conclu un par-tenariat avec ASUS et devrait prochainement propo-ser des packs avec des ordinateurs portables. Mais il faudra peut être réinvestir dans du nouveau matériel car pour l’instant cette technologie n’est destinée qu’aux ordinateurs équipés sous windows 8.

13

Atelier 3DLes bases de la modélisation 3D

Atel

ier 3

DLe

s ba

ses

de la

mod

élis

atio

n 3D

Modéliser à partir d’un dessin

Dans ce tutoriel dédié à cinéma 4D, nous allons voir comment modéliser des formes à partir d’un dessin. Pour cela, nous allons réaliser un sackboy, le célèbre personnage de Little Big Planète.

Madeleine Benoit

Etudiant et Designer 3D

Le mot de l’auteur : « J’ai simplifié la modélisa-tion au maximum. Le but ici, est de vous montrer comment utiliser vos propres dessins pour les reproduires ensuite en 3D. Je vous conseille de lire le 1er numéro de Multiclis si ce n’est pas déjà fait car les outils que nous allons utiliser ici, sont identiques à ceux que nous avons utilisés dans le précédent tutoriel».

01 Importer votre dessinPour commencer, je vous conseille de réaliser plusieurs dessins représen-

tant les différentes faces de celui-ci. Dans ce tuto, nous allons utiliser une

vue de face et une vue de profil

Dans cinéma 4D, créer deux plans aux mêmes dimensions que vos dessins

et placer les comme le montre l’illustration. Importer ensuite vos dessins.

Nous pouvons désormais passer à la phase de modélisation.

02 Créer la têteCréez un cube et ajoutez lui environ six segments en x,y et z. Convertis-

sez le en objet modifiable (raccourci : C) et passez en mode « Rayon x ».

Pour cela, sélectionez votre cube et allez dans « base » qui se trouve dans

la fenêtre « Attribut » pour ensuite cocher la case « Rayon x ». Cela vous

permettra de créer une transparence à votre cube ce qui rendra la modé-

lisation à partir de votre dessin beaucoup plus simple. Commencez par

modéliser la vue de face grâce aux différents outils vus dans le précédent

numéro de Multiclics. Une fois que vous avez fini de modéliser en vue de

face vous pouvez passer à la vue de profil.

Atel

ier 3

DLe

s ba

ses

de la

mod

élis

atio

n 3D

15

04 Les jambesToujours à partir d’un cube et toujours avec la même technique, modélisez lui

ses jambes. Petite astuce pour vous faire gagner du temps : modélisez qu’une

seule jambe ! Une fois celle-ci terminée, ajoutez une symétrie à votre scène et

déplacez-y votre cube. Il vous suffit ensuite de déplacer votre cube sur l’axe y

pour voir apparaitre la deuxième jambe. Magique !

05 Les brasIci encore, je vous conseille de ne modéliser qu’un seul bras. J’ai choisi de

ne pas modéliser les mains de façon très détaillées. Libre à vous de les

faire comme bon vous semble. Une fois votre bras terminé, placez le au bon

endroit et appliquez lui une symétrie comme pour les jambes.

03 Le corpsCréez un nouveau cube et placez le selon votre dessin. Ajoutez lui égale-

ment six segments en x,y et z, passez le en objet modifiable puis en mode

« Rayon x » comme pour la tête. Pour simplifier votre modélisation, je vous

conseille de décocher l’option « Limité aux éléments visibles » qui se trouve

dans la fenêtre « attribut » de votre mode de sélection. Ceci vous permettra

de prendre plusieurs points à la fois et de ne pas être obligé de tourner

autour du modèle pour sélectionner tous les points nécessaires.

Modélisez ensuite le corps selon votre dessin.

Atel

ier 3

DLe

s ba

ses

de la

mod

élis

atio

n 3D

16

07 La fermeture eclairProbablement la partie la plus difficile de ce tutoriel, commencez par créer deux

cubes. L’un servira pour la partie supérieure tandis que l’autre servira à faire la

partie principale. Rien de très compliqué pour la partie supérieure, quelques

transformations suffisent. En revanche, la partie principale est un petit peu plus

compliquée. Commencez par modéliser la forme générale (Je vous conseille

d’ajouter au minimum 12 segments sur l’axe y). Ensuite, pour créer les deux

trous, vous allez devoir modifier légèrement votre maillage aux endroits pré-

vu pour ces derniers en lui donnant une forme arrondie. Rassurez vous, vous

pouvez le faire de façon approximative ! l’HyperNurbs fera le reste. Supprimez

ensuite les faces prévues pour les trous.

08 La fermeture eclair (2)Pour cette 2eme partie de la fermeture eclair, vous allez devoir créer autant

de cubes que nécessaire. Commencez par créer un objet neutre que nous

appellerons « Fermeture » et qui nous servira à placer tous les cubes. Créez

ensuite un cube de taille : 80 en x ; 3,5 en y et 8,5 en z, que vous disposerez

à la vertical. Puis, créez un autre cube de taille : 14,5 en x ; 7 en y et 8,5 en

z qui cette fois, sera disposé à l’horizontal. Dupliquez ce cube autant de fois

que nécessaire et déplacez les copies comme sur l’illustration.

Vous n’avez plus qu’à replacer le tout sur le sackboy !

06 Observons le résultat !Une fois toutes les parties de votre corps terminé, désactivez le mode « Rayon x »

et appliquez un HyperNurbs à chaque partie du corps pour les rendre plus arron-

dis. Si le résultat vous plait, vous pouvez masquer les plans, nous n’en aurons plus besoin.Déplacez votre modèle sur le côté, nous allons à présent attaquer la fermeture

eclair du sackboy.

Atel

ier 3

DLe

s ba

ses

de la

mod

élis

atio

n 3D

17

Atel

ier 3

DLe

s ba

ses

de la

mod

élis

atio

n 3D

08 La bouchePour la bouche, il vous suffit dans un premier temps de

créer un cube (oui encore un cube) et de lui ajouter 8

segments en y. Ajustez sa largeur en fonction de la tête de

votre sackboy et apportez lui quelques modifications pour

lui donner une forme arrondie et ajoutez lui un HyperNurbs.

09 La bouche (2)Pour finir, placez la bouche sur votre sackboy et sélection-

nerz les extrémités de celle-ci afin de les déplacer le long

de sa tête comme le montre l’illustration. Pour un résultat

parfait, je vous conseille de ne pas vous limiter aux extré-

mités, mais de déplacer plusieurs points afin que la bouche

colle parfaitement à notre modèle.

10 les yeux et la texturePassons à présent à la finission en commençant par lui

ajouter des yeux (sinon il n’ y verra rien !). Pour cela, rien de

bien compliqué : créerz une sphère puis créez un nouveau

matériau en double cliquant dans la fenêtre en dessous de

la ligne de temps. Double cliquez à nouveau sur le nouveau

matériau pour l’éditer. Dans l’onglet « couleur », choisissez

un gris foncé. Ensuite, sélectionnez l’onglet « spécularité » et

modifiez les valeurs à raison de 49 % pour la largeur, 22 %

pour la hauteur, -12 % pour l’atténuation et enfin, 39 % pour la

largeur interne. Bien sûr, vous pouvez modifier ses paramètres

en fonction de vos envies.

Pour la texture, recréez un nouveau matériau et référez vous

au premier numéro de multiclics pour une importation dans

les règles de l’art. Ici, j’ai choisi d’utiliser une texture « toile de

jute ».

18

Form

atio

n 3D

ESRA

Ren

nes

L’ESRA : Une formation de choix pour les métiers de la 3D

L’ESRA de Bretagne située à Rennes est une école de réalisation audiovisuelle. Elle est com-posée de trois formations principales : ESRA: audiovisuelle, ISTS: Son et SUp’Infograph 3D.

Chacune de ces formations se fait sur une durée de 3 ans. Nous allons ici, nous intéresser à la formation SUp’Infograph 3D

Que propose SUp’Infograph ?

Sup’Infograph 3D est consacrée à la réalisation de film d’animation. Parmis les cours que nous retrouvons au sein de cette formation, nous pou-vons par exemple citer l’ histoire du cinéma, l’his-toire du cinéma d’animation, story board, dessin, scénario, mise en scène, culture générale... Des TP de 3D, photoshop, illustrator, after effect et avid seront également de la partie à raison de 3 à 6 heures par semaine.De quoi développer votre créativité au maximum ! Un stage est également à prévoir entre la 2eme et 3eme année ou durant cette 3eme année d’étude. On notera aussi la possibilité d’effectuer une 4eme année d’étude à New York tout de même !

Des exemples de projets à réaliser ?

En première année, vous serez par exemple amené à réaliser trois modules : Une modélisa-tion d’un batiment historique, La modélisation et le texturing d’un véhicule et de son environne-ment et enfin, la création d’un animation de 20 secondes à partir d’une image de BD. De plus, chaque année les élèves devront réaliser un film d’animation d’une durée de 2mn pour les première année, 6 mn pour les seconde année et 8mn pour les troisième année. Pour la réalisation de ces films, les élèves peuvent collaborer avec ceux de l’esra Audiovisuel ou de L’ISTS : son.

Sur quel logiciel travaillons nous ?

Au cour de la première année, vous travaille-rez sur le logiciel 3DsMax (qu’on ne présente plus aujourd’hui). En 2eme et 3eme année, les travaux seront réalisés via le logiciel MAYA et Mbox.

Des infos supplémentaires ?

L’ESRA est une école privée à 7000 euros l’an-née ! Assez onéreux donc mais l’enseignement est des très grande qualité.Pour autant, le diplôme n’est pas reconnu par l’état mais il est possible de le faire passer en commission pour qu’il le soit.

«Super école avec un très bon corps professorale (tous des professionnels), toujours là quand on a besoin d’aide»

An’ so

Pour d’avantage d’informations, vous pouvez consulter le site officiel ici

19

Le monde de L'Audiovisuel

Audiovisuel

YouTube se lance dans la télévision

Le géant d’internet, avec sa grande plate-forme d’échange de vidéos et de streaming va bientôt lancer plusieurs chaînes de télé. Le lancement est prévu pour octobre.

Prochainement, le géant Youtube lancera en France treize chaînes de télévision gratuites accessi-bles pour tous ceux ayant une connexion internet. Ce procédé de « Web TV » existe déjà depuis un moment aux États-Unis. En ce moment, Google se trouve sur Paris pour lancer les chaînes que l’on pourra retrouver sur le web d’ici peu. Il n’y a pas que chez nous que l’en-treprise de Google souhaite implanter ces chaines de télévisions, elle souhaite aussi s’agrandir au Royaume-Uni et en Allemagne. En France, les contrats sont en cours de finalisation avec les différents producteurs sélectionnés. Grâce à ça Google prend de vitesse son principal concurrent, le français Dailymotion.

YouTube a sélectionné plusieurs pro-ducteurs, parmi eux, on retrouve En-demol, des acteurs comme Kabo, le producteur de «Scènes de ménages», ou encore un producteur de nouvelle génération «Troisième Œil» qui produit «C à vous» avec Alessandra Sublet. Mais il y aura aussi des sites internet comme auFeminin.com et sa filiale Marmi-ton. Enfin l’acteur Jean Dujardin aurait également été contacté pour réaliser un projet humoristique.

Le prix : 500 000 euros

Dans un article du Figaro.fr, ils expliquent les différents thèmes envisagés par les futures chaînes, on retrouvera du divertissement, de la santé, la cui-sine ou encore de la culture. Le figaro rajoute que je cite : « Les producteurs partenaires de ce projet rece-vront en moyenne un minimum de 500.000 euros qui pourra aller jusqu’à 1 million, pour 20 heures de pro-grammes par an. » Ce qui est quand même important pour ce genre de procédé qu’est la «Web TV». Alors, si les recettes publicitaires dépassent ce minimum de garanti, elles seront partagées entre l’éditeur de pro-grammes et YouTube.

Aud

iovi

suel

Dos

sier

YouT

ube

TV

www.youtube.com

21

La redevance audiovisuelle pas si enterrée que ça...

Aurélie Filippetti, ministre de la Culture, fait ressortir le débat sur la question de la redevance audiovisuelle pour tous ceux qui disposent d’un ordinateur à la maison.

Déjà à la fin de l’année 2010 le sénateur de l’UMP Philippe Marini avait évo-qué l’idée d’une loi qui serait soumise aux ordinateurs et tablettes tactiles, car grâce à eux on peut regarder la télé-vision, ainsi que les chaînes publiques gratuitement, mais uniquement si on dis-pose d’internet. Après avoir proposé cette redevance, le Sénat avait rejeté l’of-fre proposée par Philippe Marini.

Mais c’était sans compter sur l’intervention de la ministre de la Culture Aurélie Filippetti sur la radio RTL, pour relancer le débat sur la redevance TV des foyers disposant d’ordina-teurs. Elle cite :

« La télé va passer par les ordinateurs. Est-ce qu’il faut éten-dre la redevance à ces écrans quand on n’a pas de télévision ? C’est une question qui se pose. »

Aud

iovi

suel

Dos

sier

Rede

vanc

e A

udio

visu

elle

On le sait depuis un certain moment maintenant, la publicité sur les chaînes publiques a été supprimée. De se fait l’audio-visuel public a du trouver un autre moyen de financement. La ministre explique : « En Allemagne, cela se fait déjà ». Mais

en matière d’audiovisuel public, la situation varie selon les pays.

Il faut maintenant espérer que le gouvernement fasse face au problème pour éviter que la re-devance audiovisuelle publique soit une piste possible pour l’avenir. Mais surtout pour éviter une insuffisante de via-bilité au niveau des télé-visions, comme France Télévision ou aux radios publiques sur le long terme.

Rédacteur : Thibault Lebouteiller

22

Atelier AudiovisuelInitiation au Motion Design

Atel

ier A

udio

visu

elIn

itiat

ion

au M

otio

n D

esig

n

23

Animation de texte sous

« Dans ce tutoriel consacré au Motion Design, nous allons faire une initiation du logiciel «Af-ter Effects» de la suite Adobe, en effectuant une animation de texte. »

Grégoire Varchon

Etudiant mjm graphic design section motion design.

Le mot de l’auteur : « Pour réaliser cette ani-mation de texte, j’ai utilisé le logiciel After Effects. Pour ce faire, je n’ai utilisé que les bases du logiciel qui vous permettrons de l’utiliser au mieux pour vos projets ».

01 Réglages de départ

Pour commencer nous allons effectuer quelques réglages au niveau des

paramètres de composition. Pour cela, il faut aller dans l’onglet « Projet »

en haut à gauche et faire « CTRL-N » sur le clavier pour ouvrir la fenêtre de

réglage.

On régle notre vidéo en HDV/HDTV 720p avec 25 images / seconde et une

durée de 6 secondes, ainsi qu’un fond noir. Après ça, on peut enfin commen-

cer l’animation.

02 C’est partie !Maintenant nous pouvons créer notre texte. La couleur du texte sera blanc.

Je peux ensuite taper le texte « Motion », que je place ou je veux sur la

preview. Après cette première étape, je vais utiliser l’outil « Déplacement

arrière » ou utliser la touche «Y» pour activer l’outil. Je vais ensuite ajouter

un point d’ancrage sur une lettre de mon texte, ici la lettre «I». C’est sur

ce point que l’on verra le 2ème texte apparaitre durant l’animation finale

page

Atel

ier A

udio

visu

elIn

itiat

ion

au M

otio

n D

esig

ns

After Effects

Si vous préférez voir le tuto en vidéo vous pouvez le voir ici :

Tuto Vidéo

24

04 2ère animationEnsuite nous allons réaliser un nouveau texte, qu’on nommera «DESIGN» de

couleur noire. Ce texte apparaitra dans la lettre «I» du premier texte «MOTION».

On utlise l’outil «Déplacement arrière» et on place notre point d’ancrage sur la

lettre «G». Après ça, c’est la même chose que précédement. On va se placer sur

la timeline à 2s pour créer une image clé en activant les deux chronomètres,

puis, on se place à 3,5s, pour effectuer une rotation de 90° ainsi qu’une échelle

de 6500.

Quand les réglages sont terminés, nous allons passé au lien de parenté.

05 Le lien de parentéPour réaliser un lien de parenté, on va utiliser notre souris

et créer le lien entre les deux calques réalisés, grâce au

symbole suivant :

Ensuite avec la souris, on va relier le lien du calque DESIGN

vers le calque MOTION, vous devez avoir le résultat suivant.

Voir image de gauche.

En parentant le calque DESIGN au claque MOTION, ça va lui appliquer

les valeurs qu’on a réglées précedement pour l’échelle et la rotation. Et le

calque MOTION va appliquer ses paramètres au calque DESIGN.

03 1ère animation de texte

Nous allons ensuite effectuer une rotation sur le texte à partir du point d’an-

crage. Pour se faire, placez vous sur le calque du texte « Motion », et à l’aide

du clavier, tapez sur S - SHIFT + R, ce qui va activer les propriétés d’échelle et

de rotation. Ensuite on se place à peu près à 0,5s, on active les images clé en

appuyant sur les deux chronomètres à gauche des propriétés échelle et rota-tion. Pour finir l’animation on se place à 1,5s, ou on va attribuer une rotation de -90°et une échelle de 4200.

Notre première animation de texte est réalisée

Atel

ier A

udio

visu

elIn

itiat

ion

au M

otio

n D

esig

n

25

06 Et voilà c’est terminé !

Vous avez réussi votre première animation sur le logiciel After Effects, pour voir un rendu final rendez vous ici.

« A vous de jouer maintenant en réalisant vos propres animations de textes! »

Atel

ier A

udio

visu

elIn

itiat

ion

au M

otio

n D

esig

n

RENDU FINAL

26

Licence Professionnelle Activités et Techniques de Communication

Contenus et objectifs de la licence pro ATC

Lucie Patry, Ancienne étudiante en Services et Réseaux de Communication nous présente sa nouvelle formation.

La licence professionnelle “Activités et Techniques de Com-munication”, spécialité CORPSEM créée en 2004,  possède un tronc commun et deux parcours optionnels depuis la rentrée 2012 : le parcours web et le parcours audiovisuel (ancienne spécialité TECAME). La licence professionnelle  ATC-CORPSEM dispose d’une section initiale pour les 2 options et une autre par apprentissage pour l’option « métiers du web »

L’option “métiers de l’audiovisuel et du multimédia” offre des enseignements et projets professionnels dans les domaines de la création, de la production et diffusion audiovisuelles et multimédia.

Les principaux Cours :

• Scénario (idée, note d’intention..)• Storyboard• Prises de vues 1 et 2 (techniques et mécanismes sur caméra: reportage + plateau)• Prises de sons 1 et 2 (techniques et mécanismes) • Montage 1 et 2 (interfaces, exercice,s fonctionnements et projets)• Anglais (harmonisation, toeic et technique),• Traitement d’images et de sons • Communication et marketing • Photoshop et Illustrator pour les supports (jaquettes DVD...)• Management • Harmonisation Web (intégration HTML/CSS + Wordpress) • Compositing (After Effects, animations)• Intégration multimédia et authoring (« web » + DVD menus sur Encore …), • Gestion de Production (planning de travail, de tournage, repérage, devis pour le projet...)• Projet tuteuré (un par personne sur un thème précis. Cette année sur le thème : une plateforme ou un service web en 3 versions [2min, 30’’ et un teaser].• Projet Pro : vrai client• Stage de 13 semaines• En début d’année : Captation des Rendez-Vous de l’His toire.

Dos

sier

For

mat

ion

Lice

nce

Pro

ATC

Les métiers visés

Technicien polyvalent dans les domaines de la Web TV, TNT et télévision locale; technicien dans des services audiovisuels et multimédia des entreprises et administrations, assistant chefs de Projets de diffusion vidéo interactive ou en multimédia …

De nos jours cette LP permet également de travailler dans les sociétés de production (pub, fiction, docu, reportages, anima-tion..) car elle est polyvalente.

ATTENTION : La polyvalence est à double tranchant, il faut bien savoir ce que l’on veut faire après !!!

Conseil : Se spécialiser dans un domaine ! Tel que le montage, l’opérateur de prises de vues ou de sons, la gestion de produc-tion, l’assitanat de production.

Bonus

Pour ceux qui souhaitent connaître l’autre spécialité sur le web :

L’option «métiers du web et du multimédia» offre des ensei-gnements et projets professionnels dans les domaines de la communication, du web et du multimédia, pour apprendre à concevoir, développer et gérer des sites Internet, Intranet, des services multimédia ... Les métiers visés : chef de projet, concepteur/ développeur web, intégrateur, infographiste web/ multimédia, webmaster, chargé de communication spécialisé web …

Pour plus d’informations vous pouvez visiter le site internet de la Licence:

Rédactrice : Lucie Patry

Parcours Conception et Réalisation de Produits et Services Multimédia métiers de l’audiovisuel et du multimédia à l’IUT de Blois site de Jean Jaurès.

www.iut-blois.univ-tours.fr

27

WEB

LEWEBprog MOBILEjeux

LE MONDE DU

DO

SSIE

R W

EB

5 P

LUG

INS

JQU

ERY

PO

UR

VO

TR

E SI

TE5 outils pour vous faciliter la vie

Au jour d’aujourd’hui, les sites internet sont de plus en plus évolués et complexes. Qui dit complexe, dit « plus long à réaliser ». C’est pourquoi je vais vous présenter 5 plugins jQuery, pratiques, esthétiques et qui vous faciliteront la tâche.

Petit rappel...Le jQuery est une librairie Javascript visant à simplifier les documents HTML, à améliorer la gestion des événements et les animations. Cette librairie contrairement au Javascript (dont l’utilisation pourrait décourager nombres de programmeurs débutants) est simple d’utilisation et de compréhension. De plus cette librairie est mis à jour régulièrement, et son poids très léger permettra une navigation fluide et rapide sur votre site.Alors, qu’attendez-vous pour l’utiliser ?

Un dernier mot avant de vous présenter ces plugins, pour utiliser les plugins jQuery, vous devez télécharger (gratuitement, bien sûr) la librairie jQuery puis la placer sur votre site. Suite à quoi vous devrez appeler, entre les balises <head> de votre document HTML, la librairie en y entrant cette commande :

<script type=«text/javascript» src=«scripts/jquery.min.js»> </script>

Nous pouvons enfin passer aux plugins jQuery à avoir sous la main pour créer un site dynamique et interactif.

Le « Must Have » des outils pour votre site

1 . PREFIX-FREE

Prefix-free est certainement le script du moment, il a pour but de simplifier l’utilisation du CSS3, à l’heure actuelle, il est nécessaire de rajouter les prefixes pour chaque naviguateur (-moz, -webkit...). Grâce à ce plugin, plus besoin, vous inscrivez directement la formule (ex : border-radius: 3px;) et le script génère automatiquement les préfixes). A utiliser d’urgence !

2.dropzonejs

DropZoneJS est un plugin qui vous permettra d’uploader des fichiers avec le principe du Drag-and-Drop. Cette méthode a le vent en poupe ! Pour exemple, Facebook à récemment ins-taller ce type de système afin de publier des photos / vidéos grâce à cette technique.

3. FresherEDITOR

FresherEditor est un plugin d’édition de texte du style «What you see is what you get». On peut comparer cela à unLibreOffice directement implenté sur votre site. Il peut être très utile à implémenter et ses utilisations sont multiples (commentaires,livre d’or, forum ..).

4. threesixty-slider

Créer un 360° d’un objet n’a jamais était aussi facile. A travers l’utilisation de nombreuses images, Threesixty Slider génère un 360°. Très utile pour venter les mérites d’un produit, un exemple de l’utilisation de ce plugin avec la Honda Civic.

5. YOUMAX 1.0

YouMax est un plugin jQuery qui vous permet d’afficher sur votre site web, l’ensemble des vidéos de votre chaîne Youtube. Fini les galères à importer chaque vidéo une par une... Si vous n’êtes pas convaincus, faites l’essai en ligne avec votre chaine.

Vous en voulez plus ? Les 5 prochaines présentations de plugins jQuery arriveront dans le Multiclics #3. En attendant, je vous conseille l’excellent site jQueryRain.com d’où sont tirés la plupart des plugins que je vous ai présenté !D’ici là, jQueryez-bien!

29

PR

ESEN

TAT

ION

WEB

T

YP

ECA

ST :

TES

TEU

R D

E P

OLI

CES

TypeCast, testeur de polices

Typecast.com est un site vous permettant de tester le rendu de vos polices en ligne et d’établir une charte «  textuel » de votre site. Le projet est ac-tuellement en version bêta, toute fois, l’inscription est ouvert à tous.

Quel intêret ?Les plus grincheux d’entre vous se poseront sans doute la question, c’est vrai que lorsqu’on crée une charte graphique sous Photoshop (ou autre), nous voyons déjà le rendu de la police, et donc nous savons très bien si l’utilisation de telle ou telle police est plus adéquate. Néanmoins, ce n’est pas si simple, le rendu d’une police sous Photoshop diffère (légère-ment certes) de celui sur votre site.

C’est là que tout se joue ! Premiere étape : On crée un pro-jet, et là on nous présente un «  fake-text » comportant un titre, un sous-titre, des paragraphes, bref, tout les différentes balises textes (h1...h6, quotes, p) sont présentes.A partir de là, via un menu intuitif, on peut parcourir plus de 5000 polices différentes, référencées selon le site où elles sont disponibles (ex : Google Web Font ; Fonts.com, etc...). On peut y modifier leur couleur, l’indentation, la taille, le style des paragraphes.On peut également changer la couleur de fond sur lequel vous prévisualisez votre projet, afin de voir si la police reste visible !« Ok, mais pas de quoi payer 14$ par mois »Jusque là, vous avez raison mais là où Typecast fait la diffé-rence c’est, premièrement, qu’il permet de partager ces pro-jets, pour créer des teams qui pourront créer des versions dif-férentes de votre projet.

Le deuxième atout majeur est qu’on peut exporter notre pro-jet sous différents formats :En CSS, et oui ! Si ça ce n’est pas du bonheur ? Via l’onglet « Views CSS » vous récuperez directement le code source que vous n’avez plus qu’à coller dans votre feuille de style. « Oui mais il nous reste à créer les font-faces ... » Enfaite non, à tra-vers le menu Exporter, Typecast nous génères un script JavaS-cript, qui intègre les polices sur notre site : Magique !

En PNG, cette option appelée ‘Style Guide’ est très utile lorsque vous créez une charte graphique à présenter à un client ou a vos collègues par exemple ! Elle présente toutes les polices utilisées avec les couleurs indiquées, voici un exemple :

30

L’interface

Quelles cîbles ? Bien sûr, ce sont les professionnels qui sont visés par le TypeCast. Cepandant, pour de simples « designer du dimanche », ce n’est pas pour autant inutile car il facilite de nombreuses tâches aussi bien du côté design que du côté programmation. Après tout, vous pouvez vous inscrire pour une version d’essai de 14 jours, suffisant pour juger de l’utilité du site, mais après cette durée, il vous faudra débourser 14$ par mois!

“A better tool doesn’t make a better craftsman, but a good tool makes wor-king a pleasure.”

– Oliver Reichenstein

PR

ESEN

TAT

ION

WEB

B

LOk

LkFO

NT

& C

HR

OM

E C

AN

ARYBlokkfont: La fin du Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Vieux de plus de 2000 ans, ce texte ne dira rien aux néophytes, mais tous les graphistes et web desi-gners l’ont rencontré au moins une fois.

Ce texte est employé dans la composition et la mise en page avant impression. C’est un standard dans l’imprimerie depuis les années 1500 qui est aussi aujourd’hui utilisé dans la pré-sentation des maquettes de sites internet.

Mais pour les non initiés, voir tout le contenu d’un site ou d’une brochure remplacé par ces phrases latines peut être dérangeant. C’est pourquoi je vous présente BLOKK, une po-lice qui remplace le texte par des blocs, que l’on peut mettre en forme comme n’importe quel autre caractère (gras, taille, couleur).

Vous pouvez la télécharger gratuitement sur www.blokkfont.com

31

Chrome Canary, le Chrome avec 2 coups d’avance

Chrome Canary est un navigateur web dédié aux développeurs et aux curieux des avançées du navigateur numéro 1 au monde : Google Chrome.

Canary est enfaite le Chrome du futur, pour exemple, Google Chrome est actuellement en version 25 stable, et Chrome Canary en ver-sion 27.

Il possède de nombreuses améliorations en phase de test. On retrouve le système d’empilement d’onglets qu’avait popula-risé Opéra (oui, ce navigateur existe encore), mais aussi un sys-tème de détection de «bruit», qui vous permettra de retrouver en un instant l’onglet d’où previent un son, quoi de plus utile contre les publicités intempestives ? Et pleins d’autres encore, alors essayez-le!

A noter que Canary n’est disponible uniquement pour Windows et Mac en téléchargement gratuit !

Un designpour

TOUS

A l’aube de 2013, les utilisateurs de tablettes et smartphones sont de plus en plus nombreux. Depuis octobre 2012, ils représentent plus de 10% du trafic internet mondiale. Seulement 10% ? Mondiale-ment, oui, mais il existe de grosses disparités. Pour exemple, le trafic «mobile» sur Internet en Inde est de 60 %, c’est-à-dire, supérieur au trafic sur ordinateur (40%). Et la tendance s’accentue, c’est pourquoi les web designers doivent s’adapter, pour créer des interfaces graphiques adaptables à chaque support. Comme une image vaut mieux qu’une longue explication, voici un exemple de responsive-design :

ATEL

IER

WEB

R

ESP

ON

SIV

E W

EBD

ESIG

N

32

Le responsive, ou la fin des pixels

(2/2)

Version PC Version Tablette Version mobile

Introduction - 1 design 2 chemins de réalisation

Méthode 1 : Computer2Mobile – Grid SystemC’est la méthode la plus couramment utilisée, que vous avez pu voir dans le tutoriel d’infographie 2D, qui consiste à réali-ser le design d’un site au format ‘ordinateur’ avec des repères fixes (les grilles), pour faciliter l’adaptation du site sur les supports mobiles.

Méthode 2 : Mobile2Computer (ou Mobile First)Cette méthode, bien plus récente, et bien moins utilisée, pourrait être considérée comme la méthode de demain pour tout les web designers. En effet, dans quelques années, le trafic internet viendra majoritairement des smartphones et tablettes, c’est pourquoi, nous, vous, et les web designers créeront nos sites en premier lieu pour les mobiles ! Ce n’est pas une révolution, nous sommes humains et nous nous adaptons aux environnements ;)

Vous savez tout, on peut désormais commencer alors à vos éditeurs de code favoris ! ;)

Introduction à la méthodePour réaliser un site adaptable, il est bien important de sai-sir qu’il faudra « bannir » les pixels, car les pixels sont une unité fixe qui ne dépend d’aucun paramètre. Contrairement au pixel, les em et les % dépendent eux, de la résolution de l’écran sur lequel vous consultez votre site. Nous allons alors utiliser ces unités !

Télécharger les fichiers

1 On code en pixels

Commençons par coder notre site avec des pixels, si vous ne savez pas faire ce genre de choses, je vous invite à vous rendre sur SiteDuZero.com, un excellent site pour débuter avec le HTML et le CSS.Je ne vais pas expliquer la démarche à utiliser pour coder avec des pixels, juste vous fournir les fichier sources (dl)Yeah !! C’est bien beau, mais dès qu’on diminue la largeur de la fenêtre, le site reste fixe, et donc sur un mobile, c’est franchement pas folichon !

ATEL

IER

WEB

R

ESP

ON

SIV

E W

EBD

ESIG

N

33

2 Pré-requis pour l’adaptationPour adapter votre site, il y a une règle d’or à suivre, une for-mule qui vous permettra de tout (oui, oui !) adapter :

cible / contexte = résultat

Votre cible est l’élément que vous souhaitez adapter et le contexte est par rapport a quel élément vous souhaitez l’adapter (le plus souvent par rapport à la largeur de votre page. Nous sommes prêts, commençons par rajouter quelques fondamentaux.

1- Votre site doit être compris dans une div qui englobera toute les autres que j’ai nommé #page (qui sera notre contexte tout au long du tutoriel).

2- Dans votre CSS, rajoutez body{font-size: 100%;}, ce qui aura pour effet de fixer le contexte de vos textes à 16px (pour la plupart des navigateurs).

3- Fixer le max-width (largeur maximale de vos élèments image à 100 % : img{max-width:100%;}.

a – la page (#page)Cette partie se fait un peu par tatonement je dirais, on peut fixer un width que l’on veut. Je l’ai fixé à 80 % car ça me semblait être un bon compromis entre les petits et les grands écrans (et oui il faut penser que sur un écran haute résolu-tion, notre site ne doit pas être minuscule).

b- le logo (#logo)Il fait 320px de large (cible) sur une page de 780px (contexte), on sort notre bonne vielle calculatrice Windows et on obtient 0,410256641. On multiplie par 100 (pour nous donner un ré-sultat en %). Édition > Copier et on colle 41.0256641% pour le width de notre logo dans notre feuille de style. Oui c’est barbare mais il est déconseillé d’arrondir ces chiffres (malé-fiques).

3 Du code, du vrai !On peut commencer à adapter notre site, reprenez le fichier CSS et HTML et forgeons nous la main sur quelques élé-ments …

ATEL

IER

WEB

R

ESP

ON

SIV

E W

EBD

ESIG

N

34

Sur ce même schéma, je vous laisse faire de même pour chaque élément du site, si vous rencontrez un problème, vous pouvez consulter le fichier CSS

c- le menu (nav)On va maintenant adapter des polices, pour cela nous devons utiliser les em. La taille de notre texte de base était de 18 pixels. On applique la formule : 18 (cible) / 16 (contexte) = 1.125. Je trouvai ça trop petit, je l›ai donc augmenté à 1.5em.

d- la marge entre chaque liens de mon menuFormule, again and again : 20 / 780 = 0,02564102 soit mar-gin-left : 2.564102%;

e- Le « faux » slider d’imagesOn fixe en position relative et après on a juste à mettre width et height en auto, il s’adaptera donc tout seul à la taille de la page.

4 Les média queries, parce qu’à un moment les % ne suffisent plus !

Vous pouvez le constater, à partir d’un certain moment, il y a des éléments qui se superposent ou que leur taille n’est vrai-ment plus adaptée à l’écran. C’est pourquoi depuis CSS3, on peut incorporer des média queries : leur but est de permettre à un élément de changer d’apparence en fonction de la taille de votre écran .

Exemple de média queries : @media (max-width : 720px) : Toute les instructions écrites dans cette balise seront executées SI et SEULEMENT SI la largeur de votre fenêtre fait moins de 720px.@media (min-width : 720px and max-width:1024px) : Valable uniquement si la largeur de votre fenêtre est comprise entre 720px et 1024px.

Cela va nous permettre dans notre exemple de faire une ver-sion du site différente, selon si on le visiteur se trouve sur un mobile ou une tablette.Avant de partir tête baissée dans les média queries, rajoutez cette balise entre les balises <head> de votre fichier html :<meta name=»viewport» content=»width=device-width, initial-scale=1.0»>

Cette commande a pour but d’adapter la largeur du site à la largeur de votre appareil et d’initialiser le zoom à 100 %. Elle est nécessaire car dans le cas contraire, vous observerez le site comme vous pouvez le voir sur un ordinateur, mais avec un zoom de 50 % par exemple.

Création d’une version pour mobiles On utilisera la commande @media (max-width: 480px). Je l’ai fixé à 480 pixels car c’est la largeur de la majorité des smart-phones (exception faite des vieux smartphones et de certains smartphones HD).Pour voir un site sous une résolution spéciale, je vous conseille ‹Resolution Test› sous Chrome ; et entrez-y une résolution de 480 x 720 (la hauteur n’a que peu d’importance).

Maintenant on peut commencer...Pour ne pas avoir de problèmes, je vous conseille de mettre un display:none à toute vos divs et de ne les activer qu’une par une.

1- le logoComme présenté dans le schéma du tutoriel sur Photoshop, on veut un logo centré. Je fixe donc une marge à gauche par tatonnement : environ 40 % et je change le background du logo pour ne laisser apparaître que le logo et non les textes.

ATEL

IER

WEB

R

ESP

ON

SIV

E W

EBD

ESIG

N

35

2 – Les compétences et NouveautésOn reprend notre schéma, les compétences prenaient toute la largeur de la page et n’étaient pas en ligne comme sur la version mobile, on écrit donc : width:100 %; chaque div occupera toute la largeur display : block; passage à la ligne entre chaque div

Et on fait de même pour les nouveautés (et le footer si on souhaite l’afficher sur mobile). Vous obtiendrez une vue telle que vous voyez à droite.

Voilà, vous avez créer un site responsive, certes il est très très loin d’être parfait, mais il s’adapte à la plupart des résolu-tions et grâce aux médias queries vous avez appris à créer une version spécialement pour les smartphones. Pour vous entrainez, vous pouvez créer une version pour les tablettes en utilisant les média-queries..

Consulter le site !

Ce qu’il faut savoir c’est que je ne vous ai appris que l’essentiel et qu’il y a de nombreuses autres possibilités. Par exemple les media queries permettent de détecter l’orientation de votre tablette/smartphones: portrait ou paysage, ce qui permet d’amélio-rer la navigation pour chaque utilisation.

J’espère que vous pourrez désormais créer vos sites en responsive. Lors de ce tutoriel j’ai utiliser la même méthode qu’Ethan Marcotte dans son livre ‘Responsive Web Design’ de la collection A book Apart, éditions Eyrolles. Je vous le conseille car il est très bien écris, et se digère très facilement.

Inspiré de ...

Licence professionnelle Référenceur et rédacteur Web

Où?La formation a été implantée au sein du département SRC (Services et Réseaux de Communication) de l’IUT de Mulhouse.

EffectifEnviron 200 dossier dont 100 convoqués pour 30 élèves retenus au final.

Objectifs de la formationLa licence professionnelle RRW a pour objectif de former des professionnels au domaine du référencement et de la rédaction Web. Le diplômé Référenceur & Rédacteur Web se place sur des métiers émergents. Dès lors, trois axes principaux du métier apparaissent :

- La conception Web (capacité à lire et comprendre le code source d’une page web et d’en modifier le contenu ; gestion d’un CMS ; …)

- Le marketing (comprendre les relations B to B ou B to C et plus rarement C to C, afin d’en tirer le maximum pour un client ou un employeur)

- La communication Web (rédaction de textes optimisés pour les moteurs de recherche et pour les i nternautes)A l’issue de la formation, les diplômés sont en mesure de :

- Rédiger et optimiser le contenu de pages Web

- Optimiser un site et améliorer sa visibilité sur les différents moteurs de recherche (Google, Yahoo, Bing…)

- Mesurer l’efficacité d’une action de référencement à l’aide d’outils

- Collaborer avec les différents services de l’agence ou de l’entreprise (marketing, informatique, gra phique, communication…)

- Gérer et entretenir la relation avec les clients

- Mettre en place une méthodologie de veille

- Animer une communauté à travers les réseaux sociaux, les forums et/ou les blogs-Sources:www.licence-referencement.frwww.journaldunet.com

Une formation par apprentissage (alter-nance) ou initiale (stage).

ATEL

IER

WEB

FO

RM

ATIO

N

36

MERCION SE

retrouveLE 28 MARS

POUrMulticlics #3