Message de remerciement
Tout drsquoabord merci de lire le premier numeacutero de Multiclics et jrsquoespegravere que vous pourrez lire avec plaisir les 2 prochains numeacuteros Je tiens eacutegalement agrave remercier les personnes exteacuterieures qui ont participeacute agrave lrsquoeacutelaboration du magazine Tanguy Dupreacute Pierre Leverrier et Teddy Voisin
Je vous laisse deacutecouvrir notre magazine bonne lecture
Bienvenu dans Multiclics 1
Commenccedilons par un petit rappel des faits Multiclics est un webzine deacutedieacute aux neacuteo-meacutedias il comporte 4 composantes lrsquoinfographie 2D 3D Audiovisuel et Web Et cela tombe bien car pour chaque composante Multiclics possegravede son speacutecialiste Lrsquoeacutequipe est composeacutee de 4 eacutetudiants issus du DUT Services et Reacuteseaux de Communication de Saint-Locirc On y retrouve Alexis Dunas reacutedacteur en chef de la partie 2D Benoicirct Madeleine reacutedacteur en chef de la partie 3D Thibault Lebouteiller reacutedacteur en chef de la partie Audiovisuel Simon Michel reacutedacteur en chef du magazine et de la partie web
Nous avons conccedilu ce magazine dans le but drsquoaider les neacuteophytes dans ces domaines Chaque partie du magazine preacutesente des ressources des nouveauteacutes des comparatifs des dossiers sur des sujets cibleacutes ainsi que des tutoriaux Notre but est que vous lecteurs puissiez eacutelargir votre champ de compeacutetences et vos connaissances en terme de culture meacutedia
Et nrsquooubliez pas notre webzine est avant tout un webzine collaboratif alors si vous souhaitez participer agrave lrsquoexpeacuterience Multiclics contactez nous agrave contactmulticlicsfr
Simon Michel Redacteur en chef
Infographie 2D
Infographie 3D
AudioVisuel
Web
Dossier 2D 570 Meacutega-pixels pour deacutecouvrir lrsquounivers - page 5 Scandale chez Ikeacutea - page 6 Bien choisir sa tablette graphique - page 7
Atelier 2D Reacutealiser Mr Multiclics sous Illustrator - page 8
Dossier 3D Comparaison des grands logiciels de creacuteations 3D - page 13 Dynamixyz - page 15 Sculpteacuteo - page 16
Atelier 3D Modeacuteliser le robot Multiclics - page 17
Dossier AudioVisuel La GoPro HD Hero 3 - page 22 Ipad mini - page 23 Atelier AudioVisuel Animer un logo sous Motion - page 24
Dossier Web 5 Plugins jQuery pour ameacuteliorer votre site - page 29 Google voit vrai avec Ingress - page 30 Construct 2 la fin des jeux en Flash - page 31 Atelier Web Le reacutefeacuterencement une eacutetape cleacute pour faire vivre un site - page 32
1S o m m a i r e
Le monde de la 2D
INFOGRAPHIE 2D
570 Meacutega-pixels pour deacutecouvrir lrsquounivers
Selon les scientifiques lrsquounivers serait composeacute agrave 72 drsquoune mysteacuterieuse laquo eacutenergie noire raquo dont on ne sait encore pas grand chose mais qui passionne le monde scientifique La derniegravere invention des chercheurs dans ce domaine
est un appareil photo ultra-perfectionneacute conccedilu pour percer le mystegravere de cette eacutenigmatique eacutenergie
La laquoDark Energy Cameraraquo est lrsquoappareil photo le plus sensi-ble jamais creacuteeacute pour fournir des images parfaites de lrsquoUnivers Cet appareil a eacuteteacute conccedilu dans les laboratoires de Fermilab dans lrsquoIllinois par la firme laquo Dark En-ergy Survey raquo Fleuron des APN (Appareil photo numeacuterique) ce fabuleux appareil photo est eacutequi-peacute de 74 capteurs CCD (Charge-Coupled Device ou dispositif agrave transfert de charge) pour une reacutesolution incroyable de 574 meacute-gapixels tregraves exactement Cette performance scientifique per-mettra de capturer des clicheacutes ineacutedits jusqursquoagrave huit milliards drsquoanneacutees lumiegravere Percheacutee au sommet drsquoune montagne au Chili la laquo Dark Energy Camera raquo vient srsquoajouter au teacutelescope laquo Blanco 4m raquo et fait de ce dernier lrsquooutil drsquoobservation spatial le plus puis-sant au monde
La mission principale de ce nouveau laquo joujou raquo scienti-fique agrave plusieurs millions de dol-lars consiste agrave examiner ce qursquoil y a en dehors de la voie lacteacutee afin de mieux comprendre lrsquoexpansion de lrsquounivers Cependant les cher-cheurs espegraverent que les photos obtenues permettront eacutegalement drsquoen savoir un peu plus sur la na-ture de cette mysteacuterieuse eacutener-gie noire qui demeure inconnue jusqursquoagrave maintenant
Les scientifiques misent donc sur cet appareil ultra-per-fectionneacute pour apporter un peu de lumiegravere sur les mystegraveres du cosmos
wwwdarkenergysurveyorg
Info
grap
hie
2DA
ctu D
ossier Infographie 2D570 M
eacutega-pixels pour deacutecouvrir lrsquounivers
5
Lrsquoenseigne drsquoameublement sueacutedoise IKEA prise en flagrant deacutelit de trucage graphique digne des plus grandes heures de lrsquoeacutepoque stalinienne
Pour pouvoir vendre ses produits dans le monde entier et eacutetendre son image agrave lrsquointernational nombre de marques sont precirctes agrave tout srsquoadapter agrave des climats plus ou moins rudes manger du riz et autres chiens
ou encore srsquoenfoncer un chapeau de cow-boy sur la tecircte
Chez IKEA marque sueacutedoise bien connue pour ses meubles en kit aux noms imprononccedilables on est precirct agrave tout mecircme agrave supprimer les femmes des campagnes de publici-teacute Eacutetonnant pour une enseigne issue drsquoun pays ou lrsquoeacutegaliteacute homme-femme nrsquoest pas qursquoune simple deacuteclaration et ougrave les femmes ministres ne sont pas nommeacutees pour atteindre un quota mais pour accomplir un travail Ainsi pour vendre ses meubles en Arabie Saoudite pays de la stricte seacutegreacutegation homme-femme la multinationale sueacutedoise a eu recours agrave Photoshop pour faire disparaicirctre toutes ces femmes qursquoon ne saurait voir
Lrsquoaffaire a fait grand bruit en Suegravede ougrave lrsquoon ne badine pas avec ces pratiques qui reviennent tout simplement agrave faire de la seacutegreacutegation Ewa Bjoumlrling ministre du commerce exteacute-rieur a deacuteclareacute ldquocela ne se fait pas de supprimer ni drsquoeffacer les femmes de la reacutealiteacute Si lrsquoArabie Saoudite nrsquoautorise pas aux femmes drsquoecirctre vues entendues ou de travailler elle se passe de la moitieacute de son capital intellectuelrdquo tadis que Bir-gitta Ohlsson ministre des affaires europeacuteennes a qualifieacute ce comportement de ldquomoyen-acircgeuxrdquo
Chez IKEA la reacuteaction ne srsquoest pas fait attendre Le groupe srsquoest confondu en excuses et a indiqueacute qursquoil allait revoir et rectifier ses processus dans les deacutelais les plus brefs Dans un communiqueacute Inter IKEA Systems regrette ce qui srsquoest passeacute et comprend que les gens soient indigneacutes Le groupe affirme que son franchiseacute saoudien nrsquoavait pas reacuteclameacute que les photos soient retoucheacutees Lrsquoerreur srsquoest produite pendant le processus de travail avant la preacutesentation du projet de cat-alogue IKEA pour lrsquoArabie saoudite
Enorme scandale graphique chez IKEA
wwwikeacom
Dos
sier
Info
grap
hie
2DEn
orm
e sc
anda
le c
hez
Ikeacutea
6
Sources Graphilinecom
Info
grap
hie
2DCo
mpa
ratif
tabl
ette
gra
phiq
ue
Bien choisir sa tablette graphiqueVous ecirctes un dessinateur chevronneacute ou amateur et la sensation drsquoun crayon sur le grain drsquoune feuille de papier vous manque quand vous travaillez sur votre logiciel favori Alors une tablette tactile semble la meilleure solution pour retrouver la fluiditeacute du trait sur papier directement sur lrsquoeacutecran Cependant les eacutecarts de prix peuvent surprendre voire mecircme rebuter les neacuteophytes Comment justifier qursquoune tablette
de mecircme marque passe drsquoun modegravele de 40 euros agrave 400 euros
La tailleIl en existe diffeacuterentes surfaces de ta-blette justifiant en partie les diffeacuterences de prix Les modegraveles 1er prix sont des tablettes A6 43 soit une surface active drsquoenviron 13 x 10 cm Ce format est bien adapteacute pour les eacutecrans de mecircme ratio il est heacutelas passeacute de mode Il ne correspond plus qursquoaux lsquorsquoanciensrsquorsquo LCD 151719 et 20 pouces Contrairement aux ideacutees reccedilues ce format nrsquoest pas forcement moins preacute-cis La diffeacuterence majeure est lrsquoamplitude de mouvement que vous aurez agrave faire sur une tablette A4 pour aller drsquoun bout agrave lrsquoautre de lrsquoeacutecran vous devrez faire un grand geste alors que sur une A6 un petit mouvement de poignet suffira Depuis quelques anneacutees la mode est passeacutee au wide (format Cineacutema) avec des tablettes A5 (148mm times 210mm) ou A4 (210mm X 297 mm) beaucoup plus chegraveres Cepen-dant une tablette A5 ne vous sera drsquoau-cune utiliteacute agrave moins drsquoen avoir un usage professionnel ou si la taille de votre eacutecran le justifie au risque de perdre de la preacuteci-sion si vous travaillez par exemple sur un 22 pouces ou supeacuterieur
La marqueWacom est une garantie ce sont les lea-ders du marcheacute de la tablette graphique Leurs produits sont reacutesistants preacutecis et estheacutetiques Les NGS sont correctes sans valoir Wacom tant au niveau de la soliditeacute que de la preacutecision
Quant agrave Trust Aiptek ou Genius elles sont drsquoapregraves leur reacuteputation agrave fuir comme la peste pour leur manque de preacutecision et leur fiabiliteacute sommaire
La preacutecision du styloIl srsquoagit en gros de la finesse avec laquelle la tablette pourra reproduire votre geste (leacuteger appuyeacute forceacute hellip) 512 niveaux de pression sont le minimum exigible ne des-cendez pas en dessous Mecircme si on obtient une meilleure preacutecision avec 1024 niveaux crsquoest suffisant dans la plupart des cas sur-tout si vous deacutebutez Les stylos les plus eacutevolueacutes ont des mines remplaccedilables au fur et agrave mesure de leur usure Plusieurs jeux de mines peuvent eacutegalement ecirctre proposeacutes pour permettre agrave lrsquoutilisateur de retrans-crire au mieux le rendu de son papier preacute-feacutereacute
Si vous ecirctes un deacutebutant et que vous vous apprecirctez agrave acheter votre premier beacutebeacute je vous recommanderais de commen-cer avec une petite tablette pas trop chegravere En effet ccedila ne sert agrave rien de deacutebuter avec une super tablette de pro agrave 600 euros Ca fait envie bien sur mais vous ne vous ren-drez probablement pas compte de sa qua-liteacute Autant commencer par une petite A6 drsquoentreacutee de gamme agrave 40euro comme la Bam-boo de chez Wacom avec laquelle vous pourrez faire vos armes progresser et que vous rentabiliserez tregraves vite Deux ans plus tard vous pourrez craquer pour la derniegravere Intuos et ressentir toute la diffeacuterence
wwwwacomcom
Dossier Infographie 2D
Bien choisir sa tablette graphique
7Sources Lesnumeacuteriquescom
Reacutealiser Mr Multiclics
laquo Dans ce tutoriel consacreacute agrave Adobe llustrator nous allons apprendre comment utiliser des formes simples pour reacutealiser une image plus complexe Armez-vous de votre plume(P) et allons-y raquo
Dunas Alexis
Etudiant illustrateur et graphiste
Le mot de lrsquoauteur laquoRien de bien compliqueacute dans ce tutoriel Mr Multiclics est entie-rement reacutealiseacute avec des formes simples Donc agrave vos sourisstylets et crsquoest parti raquo
01 Partir de formes simples
Mr Multiclics est fait agrave partir de formes tregraves simples Nous allons dans un premier temps reacutealiser ces formes Prenez lrsquohabitude de creacuteer de nouveaux calques dans un nouveau dossier agrave chaque nouvelle forme et nrsquooubliez pas de leur donner un nom pour ne pas chercher trois heures le bon calque par la suite Jouez aussi avec la superposition des calques par exemple les calques des yeux au dessus de celui de la tecircte Il ne vous reste plus qursquoagrave vous armer de votre outil Plume(P) pour tracer ces formes en seacutelectionnant la couleur de votre choix
02 Les yeuxNous allons commencer par laquo donner vie raquo aux yeux Avant tout il vous faut cacher les
autres calques Pour ce faire cliquez sur le petit icocircne en forme drsquoœil agrave droite de vos calques
afin de les faire disparaicirctre Ceci eacutetant fait nous allons pouvoir ajouter du relief agrave ces yeux
Creacuteez deux calques dans le mecircme groupe que la forme des yeux lrsquoun nous servira pour
les ombres et lrsquoautre pour la lumiegravere (high-lights) Commenccedilons par les ombres ici le but
principal est de creacuteer du relief que la lumiegraveres viendra rehausser Sur le calque des ombres
creacuteez des formes de croissant en bas agrave droite agrave lrsquointeacuterieur de chaque œil agrave lrsquoaide de lrsquooutil
Plume(P) Remplissez-les avec une couleur un petit peu plus fonceacutee que la forme de base
mais en faisant attention de rester dans les mecircme Pour la lumiegravere utilisez la mecircme en
variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux
Infographie 2DTutoriel Illustrator
Sur Adobe IllustratorA
teli
er In
fogr
aphi
e 2D
Tuto
riel
Illu
stra
tor
8
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Infographie 2D
Infographie 3D
AudioVisuel
Web
Dossier 2D 570 Meacutega-pixels pour deacutecouvrir lrsquounivers - page 5 Scandale chez Ikeacutea - page 6 Bien choisir sa tablette graphique - page 7
Atelier 2D Reacutealiser Mr Multiclics sous Illustrator - page 8
Dossier 3D Comparaison des grands logiciels de creacuteations 3D - page 13 Dynamixyz - page 15 Sculpteacuteo - page 16
Atelier 3D Modeacuteliser le robot Multiclics - page 17
Dossier AudioVisuel La GoPro HD Hero 3 - page 22 Ipad mini - page 23 Atelier AudioVisuel Animer un logo sous Motion - page 24
Dossier Web 5 Plugins jQuery pour ameacuteliorer votre site - page 29 Google voit vrai avec Ingress - page 30 Construct 2 la fin des jeux en Flash - page 31 Atelier Web Le reacutefeacuterencement une eacutetape cleacute pour faire vivre un site - page 32
1S o m m a i r e
Le monde de la 2D
INFOGRAPHIE 2D
570 Meacutega-pixels pour deacutecouvrir lrsquounivers
Selon les scientifiques lrsquounivers serait composeacute agrave 72 drsquoune mysteacuterieuse laquo eacutenergie noire raquo dont on ne sait encore pas grand chose mais qui passionne le monde scientifique La derniegravere invention des chercheurs dans ce domaine
est un appareil photo ultra-perfectionneacute conccedilu pour percer le mystegravere de cette eacutenigmatique eacutenergie
La laquoDark Energy Cameraraquo est lrsquoappareil photo le plus sensi-ble jamais creacuteeacute pour fournir des images parfaites de lrsquoUnivers Cet appareil a eacuteteacute conccedilu dans les laboratoires de Fermilab dans lrsquoIllinois par la firme laquo Dark En-ergy Survey raquo Fleuron des APN (Appareil photo numeacuterique) ce fabuleux appareil photo est eacutequi-peacute de 74 capteurs CCD (Charge-Coupled Device ou dispositif agrave transfert de charge) pour une reacutesolution incroyable de 574 meacute-gapixels tregraves exactement Cette performance scientifique per-mettra de capturer des clicheacutes ineacutedits jusqursquoagrave huit milliards drsquoanneacutees lumiegravere Percheacutee au sommet drsquoune montagne au Chili la laquo Dark Energy Camera raquo vient srsquoajouter au teacutelescope laquo Blanco 4m raquo et fait de ce dernier lrsquooutil drsquoobservation spatial le plus puis-sant au monde
La mission principale de ce nouveau laquo joujou raquo scienti-fique agrave plusieurs millions de dol-lars consiste agrave examiner ce qursquoil y a en dehors de la voie lacteacutee afin de mieux comprendre lrsquoexpansion de lrsquounivers Cependant les cher-cheurs espegraverent que les photos obtenues permettront eacutegalement drsquoen savoir un peu plus sur la na-ture de cette mysteacuterieuse eacutener-gie noire qui demeure inconnue jusqursquoagrave maintenant
Les scientifiques misent donc sur cet appareil ultra-per-fectionneacute pour apporter un peu de lumiegravere sur les mystegraveres du cosmos
wwwdarkenergysurveyorg
Info
grap
hie
2DA
ctu D
ossier Infographie 2D570 M
eacutega-pixels pour deacutecouvrir lrsquounivers
5
Lrsquoenseigne drsquoameublement sueacutedoise IKEA prise en flagrant deacutelit de trucage graphique digne des plus grandes heures de lrsquoeacutepoque stalinienne
Pour pouvoir vendre ses produits dans le monde entier et eacutetendre son image agrave lrsquointernational nombre de marques sont precirctes agrave tout srsquoadapter agrave des climats plus ou moins rudes manger du riz et autres chiens
ou encore srsquoenfoncer un chapeau de cow-boy sur la tecircte
Chez IKEA marque sueacutedoise bien connue pour ses meubles en kit aux noms imprononccedilables on est precirct agrave tout mecircme agrave supprimer les femmes des campagnes de publici-teacute Eacutetonnant pour une enseigne issue drsquoun pays ou lrsquoeacutegaliteacute homme-femme nrsquoest pas qursquoune simple deacuteclaration et ougrave les femmes ministres ne sont pas nommeacutees pour atteindre un quota mais pour accomplir un travail Ainsi pour vendre ses meubles en Arabie Saoudite pays de la stricte seacutegreacutegation homme-femme la multinationale sueacutedoise a eu recours agrave Photoshop pour faire disparaicirctre toutes ces femmes qursquoon ne saurait voir
Lrsquoaffaire a fait grand bruit en Suegravede ougrave lrsquoon ne badine pas avec ces pratiques qui reviennent tout simplement agrave faire de la seacutegreacutegation Ewa Bjoumlrling ministre du commerce exteacute-rieur a deacuteclareacute ldquocela ne se fait pas de supprimer ni drsquoeffacer les femmes de la reacutealiteacute Si lrsquoArabie Saoudite nrsquoautorise pas aux femmes drsquoecirctre vues entendues ou de travailler elle se passe de la moitieacute de son capital intellectuelrdquo tadis que Bir-gitta Ohlsson ministre des affaires europeacuteennes a qualifieacute ce comportement de ldquomoyen-acircgeuxrdquo
Chez IKEA la reacuteaction ne srsquoest pas fait attendre Le groupe srsquoest confondu en excuses et a indiqueacute qursquoil allait revoir et rectifier ses processus dans les deacutelais les plus brefs Dans un communiqueacute Inter IKEA Systems regrette ce qui srsquoest passeacute et comprend que les gens soient indigneacutes Le groupe affirme que son franchiseacute saoudien nrsquoavait pas reacuteclameacute que les photos soient retoucheacutees Lrsquoerreur srsquoest produite pendant le processus de travail avant la preacutesentation du projet de cat-alogue IKEA pour lrsquoArabie saoudite
Enorme scandale graphique chez IKEA
wwwikeacom
Dos
sier
Info
grap
hie
2DEn
orm
e sc
anda
le c
hez
Ikeacutea
6
Sources Graphilinecom
Info
grap
hie
2DCo
mpa
ratif
tabl
ette
gra
phiq
ue
Bien choisir sa tablette graphiqueVous ecirctes un dessinateur chevronneacute ou amateur et la sensation drsquoun crayon sur le grain drsquoune feuille de papier vous manque quand vous travaillez sur votre logiciel favori Alors une tablette tactile semble la meilleure solution pour retrouver la fluiditeacute du trait sur papier directement sur lrsquoeacutecran Cependant les eacutecarts de prix peuvent surprendre voire mecircme rebuter les neacuteophytes Comment justifier qursquoune tablette
de mecircme marque passe drsquoun modegravele de 40 euros agrave 400 euros
La tailleIl en existe diffeacuterentes surfaces de ta-blette justifiant en partie les diffeacuterences de prix Les modegraveles 1er prix sont des tablettes A6 43 soit une surface active drsquoenviron 13 x 10 cm Ce format est bien adapteacute pour les eacutecrans de mecircme ratio il est heacutelas passeacute de mode Il ne correspond plus qursquoaux lsquorsquoanciensrsquorsquo LCD 151719 et 20 pouces Contrairement aux ideacutees reccedilues ce format nrsquoest pas forcement moins preacute-cis La diffeacuterence majeure est lrsquoamplitude de mouvement que vous aurez agrave faire sur une tablette A4 pour aller drsquoun bout agrave lrsquoautre de lrsquoeacutecran vous devrez faire un grand geste alors que sur une A6 un petit mouvement de poignet suffira Depuis quelques anneacutees la mode est passeacutee au wide (format Cineacutema) avec des tablettes A5 (148mm times 210mm) ou A4 (210mm X 297 mm) beaucoup plus chegraveres Cepen-dant une tablette A5 ne vous sera drsquoau-cune utiliteacute agrave moins drsquoen avoir un usage professionnel ou si la taille de votre eacutecran le justifie au risque de perdre de la preacuteci-sion si vous travaillez par exemple sur un 22 pouces ou supeacuterieur
La marqueWacom est une garantie ce sont les lea-ders du marcheacute de la tablette graphique Leurs produits sont reacutesistants preacutecis et estheacutetiques Les NGS sont correctes sans valoir Wacom tant au niveau de la soliditeacute que de la preacutecision
Quant agrave Trust Aiptek ou Genius elles sont drsquoapregraves leur reacuteputation agrave fuir comme la peste pour leur manque de preacutecision et leur fiabiliteacute sommaire
La preacutecision du styloIl srsquoagit en gros de la finesse avec laquelle la tablette pourra reproduire votre geste (leacuteger appuyeacute forceacute hellip) 512 niveaux de pression sont le minimum exigible ne des-cendez pas en dessous Mecircme si on obtient une meilleure preacutecision avec 1024 niveaux crsquoest suffisant dans la plupart des cas sur-tout si vous deacutebutez Les stylos les plus eacutevolueacutes ont des mines remplaccedilables au fur et agrave mesure de leur usure Plusieurs jeux de mines peuvent eacutegalement ecirctre proposeacutes pour permettre agrave lrsquoutilisateur de retrans-crire au mieux le rendu de son papier preacute-feacutereacute
Si vous ecirctes un deacutebutant et que vous vous apprecirctez agrave acheter votre premier beacutebeacute je vous recommanderais de commen-cer avec une petite tablette pas trop chegravere En effet ccedila ne sert agrave rien de deacutebuter avec une super tablette de pro agrave 600 euros Ca fait envie bien sur mais vous ne vous ren-drez probablement pas compte de sa qua-liteacute Autant commencer par une petite A6 drsquoentreacutee de gamme agrave 40euro comme la Bam-boo de chez Wacom avec laquelle vous pourrez faire vos armes progresser et que vous rentabiliserez tregraves vite Deux ans plus tard vous pourrez craquer pour la derniegravere Intuos et ressentir toute la diffeacuterence
wwwwacomcom
Dossier Infographie 2D
Bien choisir sa tablette graphique
7Sources Lesnumeacuteriquescom
Reacutealiser Mr Multiclics
laquo Dans ce tutoriel consacreacute agrave Adobe llustrator nous allons apprendre comment utiliser des formes simples pour reacutealiser une image plus complexe Armez-vous de votre plume(P) et allons-y raquo
Dunas Alexis
Etudiant illustrateur et graphiste
Le mot de lrsquoauteur laquoRien de bien compliqueacute dans ce tutoriel Mr Multiclics est entie-rement reacutealiseacute avec des formes simples Donc agrave vos sourisstylets et crsquoest parti raquo
01 Partir de formes simples
Mr Multiclics est fait agrave partir de formes tregraves simples Nous allons dans un premier temps reacutealiser ces formes Prenez lrsquohabitude de creacuteer de nouveaux calques dans un nouveau dossier agrave chaque nouvelle forme et nrsquooubliez pas de leur donner un nom pour ne pas chercher trois heures le bon calque par la suite Jouez aussi avec la superposition des calques par exemple les calques des yeux au dessus de celui de la tecircte Il ne vous reste plus qursquoagrave vous armer de votre outil Plume(P) pour tracer ces formes en seacutelectionnant la couleur de votre choix
02 Les yeuxNous allons commencer par laquo donner vie raquo aux yeux Avant tout il vous faut cacher les
autres calques Pour ce faire cliquez sur le petit icocircne en forme drsquoœil agrave droite de vos calques
afin de les faire disparaicirctre Ceci eacutetant fait nous allons pouvoir ajouter du relief agrave ces yeux
Creacuteez deux calques dans le mecircme groupe que la forme des yeux lrsquoun nous servira pour
les ombres et lrsquoautre pour la lumiegravere (high-lights) Commenccedilons par les ombres ici le but
principal est de creacuteer du relief que la lumiegraveres viendra rehausser Sur le calque des ombres
creacuteez des formes de croissant en bas agrave droite agrave lrsquointeacuterieur de chaque œil agrave lrsquoaide de lrsquooutil
Plume(P) Remplissez-les avec une couleur un petit peu plus fonceacutee que la forme de base
mais en faisant attention de rester dans les mecircme Pour la lumiegravere utilisez la mecircme en
variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux
Infographie 2DTutoriel Illustrator
Sur Adobe IllustratorA
teli
er In
fogr
aphi
e 2D
Tuto
riel
Illu
stra
tor
8
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Le monde de la 2D
INFOGRAPHIE 2D
570 Meacutega-pixels pour deacutecouvrir lrsquounivers
Selon les scientifiques lrsquounivers serait composeacute agrave 72 drsquoune mysteacuterieuse laquo eacutenergie noire raquo dont on ne sait encore pas grand chose mais qui passionne le monde scientifique La derniegravere invention des chercheurs dans ce domaine
est un appareil photo ultra-perfectionneacute conccedilu pour percer le mystegravere de cette eacutenigmatique eacutenergie
La laquoDark Energy Cameraraquo est lrsquoappareil photo le plus sensi-ble jamais creacuteeacute pour fournir des images parfaites de lrsquoUnivers Cet appareil a eacuteteacute conccedilu dans les laboratoires de Fermilab dans lrsquoIllinois par la firme laquo Dark En-ergy Survey raquo Fleuron des APN (Appareil photo numeacuterique) ce fabuleux appareil photo est eacutequi-peacute de 74 capteurs CCD (Charge-Coupled Device ou dispositif agrave transfert de charge) pour une reacutesolution incroyable de 574 meacute-gapixels tregraves exactement Cette performance scientifique per-mettra de capturer des clicheacutes ineacutedits jusqursquoagrave huit milliards drsquoanneacutees lumiegravere Percheacutee au sommet drsquoune montagne au Chili la laquo Dark Energy Camera raquo vient srsquoajouter au teacutelescope laquo Blanco 4m raquo et fait de ce dernier lrsquooutil drsquoobservation spatial le plus puis-sant au monde
La mission principale de ce nouveau laquo joujou raquo scienti-fique agrave plusieurs millions de dol-lars consiste agrave examiner ce qursquoil y a en dehors de la voie lacteacutee afin de mieux comprendre lrsquoexpansion de lrsquounivers Cependant les cher-cheurs espegraverent que les photos obtenues permettront eacutegalement drsquoen savoir un peu plus sur la na-ture de cette mysteacuterieuse eacutener-gie noire qui demeure inconnue jusqursquoagrave maintenant
Les scientifiques misent donc sur cet appareil ultra-per-fectionneacute pour apporter un peu de lumiegravere sur les mystegraveres du cosmos
wwwdarkenergysurveyorg
Info
grap
hie
2DA
ctu D
ossier Infographie 2D570 M
eacutega-pixels pour deacutecouvrir lrsquounivers
5
Lrsquoenseigne drsquoameublement sueacutedoise IKEA prise en flagrant deacutelit de trucage graphique digne des plus grandes heures de lrsquoeacutepoque stalinienne
Pour pouvoir vendre ses produits dans le monde entier et eacutetendre son image agrave lrsquointernational nombre de marques sont precirctes agrave tout srsquoadapter agrave des climats plus ou moins rudes manger du riz et autres chiens
ou encore srsquoenfoncer un chapeau de cow-boy sur la tecircte
Chez IKEA marque sueacutedoise bien connue pour ses meubles en kit aux noms imprononccedilables on est precirct agrave tout mecircme agrave supprimer les femmes des campagnes de publici-teacute Eacutetonnant pour une enseigne issue drsquoun pays ou lrsquoeacutegaliteacute homme-femme nrsquoest pas qursquoune simple deacuteclaration et ougrave les femmes ministres ne sont pas nommeacutees pour atteindre un quota mais pour accomplir un travail Ainsi pour vendre ses meubles en Arabie Saoudite pays de la stricte seacutegreacutegation homme-femme la multinationale sueacutedoise a eu recours agrave Photoshop pour faire disparaicirctre toutes ces femmes qursquoon ne saurait voir
Lrsquoaffaire a fait grand bruit en Suegravede ougrave lrsquoon ne badine pas avec ces pratiques qui reviennent tout simplement agrave faire de la seacutegreacutegation Ewa Bjoumlrling ministre du commerce exteacute-rieur a deacuteclareacute ldquocela ne se fait pas de supprimer ni drsquoeffacer les femmes de la reacutealiteacute Si lrsquoArabie Saoudite nrsquoautorise pas aux femmes drsquoecirctre vues entendues ou de travailler elle se passe de la moitieacute de son capital intellectuelrdquo tadis que Bir-gitta Ohlsson ministre des affaires europeacuteennes a qualifieacute ce comportement de ldquomoyen-acircgeuxrdquo
Chez IKEA la reacuteaction ne srsquoest pas fait attendre Le groupe srsquoest confondu en excuses et a indiqueacute qursquoil allait revoir et rectifier ses processus dans les deacutelais les plus brefs Dans un communiqueacute Inter IKEA Systems regrette ce qui srsquoest passeacute et comprend que les gens soient indigneacutes Le groupe affirme que son franchiseacute saoudien nrsquoavait pas reacuteclameacute que les photos soient retoucheacutees Lrsquoerreur srsquoest produite pendant le processus de travail avant la preacutesentation du projet de cat-alogue IKEA pour lrsquoArabie saoudite
Enorme scandale graphique chez IKEA
wwwikeacom
Dos
sier
Info
grap
hie
2DEn
orm
e sc
anda
le c
hez
Ikeacutea
6
Sources Graphilinecom
Info
grap
hie
2DCo
mpa
ratif
tabl
ette
gra
phiq
ue
Bien choisir sa tablette graphiqueVous ecirctes un dessinateur chevronneacute ou amateur et la sensation drsquoun crayon sur le grain drsquoune feuille de papier vous manque quand vous travaillez sur votre logiciel favori Alors une tablette tactile semble la meilleure solution pour retrouver la fluiditeacute du trait sur papier directement sur lrsquoeacutecran Cependant les eacutecarts de prix peuvent surprendre voire mecircme rebuter les neacuteophytes Comment justifier qursquoune tablette
de mecircme marque passe drsquoun modegravele de 40 euros agrave 400 euros
La tailleIl en existe diffeacuterentes surfaces de ta-blette justifiant en partie les diffeacuterences de prix Les modegraveles 1er prix sont des tablettes A6 43 soit une surface active drsquoenviron 13 x 10 cm Ce format est bien adapteacute pour les eacutecrans de mecircme ratio il est heacutelas passeacute de mode Il ne correspond plus qursquoaux lsquorsquoanciensrsquorsquo LCD 151719 et 20 pouces Contrairement aux ideacutees reccedilues ce format nrsquoest pas forcement moins preacute-cis La diffeacuterence majeure est lrsquoamplitude de mouvement que vous aurez agrave faire sur une tablette A4 pour aller drsquoun bout agrave lrsquoautre de lrsquoeacutecran vous devrez faire un grand geste alors que sur une A6 un petit mouvement de poignet suffira Depuis quelques anneacutees la mode est passeacutee au wide (format Cineacutema) avec des tablettes A5 (148mm times 210mm) ou A4 (210mm X 297 mm) beaucoup plus chegraveres Cepen-dant une tablette A5 ne vous sera drsquoau-cune utiliteacute agrave moins drsquoen avoir un usage professionnel ou si la taille de votre eacutecran le justifie au risque de perdre de la preacuteci-sion si vous travaillez par exemple sur un 22 pouces ou supeacuterieur
La marqueWacom est une garantie ce sont les lea-ders du marcheacute de la tablette graphique Leurs produits sont reacutesistants preacutecis et estheacutetiques Les NGS sont correctes sans valoir Wacom tant au niveau de la soliditeacute que de la preacutecision
Quant agrave Trust Aiptek ou Genius elles sont drsquoapregraves leur reacuteputation agrave fuir comme la peste pour leur manque de preacutecision et leur fiabiliteacute sommaire
La preacutecision du styloIl srsquoagit en gros de la finesse avec laquelle la tablette pourra reproduire votre geste (leacuteger appuyeacute forceacute hellip) 512 niveaux de pression sont le minimum exigible ne des-cendez pas en dessous Mecircme si on obtient une meilleure preacutecision avec 1024 niveaux crsquoest suffisant dans la plupart des cas sur-tout si vous deacutebutez Les stylos les plus eacutevolueacutes ont des mines remplaccedilables au fur et agrave mesure de leur usure Plusieurs jeux de mines peuvent eacutegalement ecirctre proposeacutes pour permettre agrave lrsquoutilisateur de retrans-crire au mieux le rendu de son papier preacute-feacutereacute
Si vous ecirctes un deacutebutant et que vous vous apprecirctez agrave acheter votre premier beacutebeacute je vous recommanderais de commen-cer avec une petite tablette pas trop chegravere En effet ccedila ne sert agrave rien de deacutebuter avec une super tablette de pro agrave 600 euros Ca fait envie bien sur mais vous ne vous ren-drez probablement pas compte de sa qua-liteacute Autant commencer par une petite A6 drsquoentreacutee de gamme agrave 40euro comme la Bam-boo de chez Wacom avec laquelle vous pourrez faire vos armes progresser et que vous rentabiliserez tregraves vite Deux ans plus tard vous pourrez craquer pour la derniegravere Intuos et ressentir toute la diffeacuterence
wwwwacomcom
Dossier Infographie 2D
Bien choisir sa tablette graphique
7Sources Lesnumeacuteriquescom
Reacutealiser Mr Multiclics
laquo Dans ce tutoriel consacreacute agrave Adobe llustrator nous allons apprendre comment utiliser des formes simples pour reacutealiser une image plus complexe Armez-vous de votre plume(P) et allons-y raquo
Dunas Alexis
Etudiant illustrateur et graphiste
Le mot de lrsquoauteur laquoRien de bien compliqueacute dans ce tutoriel Mr Multiclics est entie-rement reacutealiseacute avec des formes simples Donc agrave vos sourisstylets et crsquoest parti raquo
01 Partir de formes simples
Mr Multiclics est fait agrave partir de formes tregraves simples Nous allons dans un premier temps reacutealiser ces formes Prenez lrsquohabitude de creacuteer de nouveaux calques dans un nouveau dossier agrave chaque nouvelle forme et nrsquooubliez pas de leur donner un nom pour ne pas chercher trois heures le bon calque par la suite Jouez aussi avec la superposition des calques par exemple les calques des yeux au dessus de celui de la tecircte Il ne vous reste plus qursquoagrave vous armer de votre outil Plume(P) pour tracer ces formes en seacutelectionnant la couleur de votre choix
02 Les yeuxNous allons commencer par laquo donner vie raquo aux yeux Avant tout il vous faut cacher les
autres calques Pour ce faire cliquez sur le petit icocircne en forme drsquoœil agrave droite de vos calques
afin de les faire disparaicirctre Ceci eacutetant fait nous allons pouvoir ajouter du relief agrave ces yeux
Creacuteez deux calques dans le mecircme groupe que la forme des yeux lrsquoun nous servira pour
les ombres et lrsquoautre pour la lumiegravere (high-lights) Commenccedilons par les ombres ici le but
principal est de creacuteer du relief que la lumiegraveres viendra rehausser Sur le calque des ombres
creacuteez des formes de croissant en bas agrave droite agrave lrsquointeacuterieur de chaque œil agrave lrsquoaide de lrsquooutil
Plume(P) Remplissez-les avec une couleur un petit peu plus fonceacutee que la forme de base
mais en faisant attention de rester dans les mecircme Pour la lumiegravere utilisez la mecircme en
variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux
Infographie 2DTutoriel Illustrator
Sur Adobe IllustratorA
teli
er In
fogr
aphi
e 2D
Tuto
riel
Illu
stra
tor
8
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
570 Meacutega-pixels pour deacutecouvrir lrsquounivers
Selon les scientifiques lrsquounivers serait composeacute agrave 72 drsquoune mysteacuterieuse laquo eacutenergie noire raquo dont on ne sait encore pas grand chose mais qui passionne le monde scientifique La derniegravere invention des chercheurs dans ce domaine
est un appareil photo ultra-perfectionneacute conccedilu pour percer le mystegravere de cette eacutenigmatique eacutenergie
La laquoDark Energy Cameraraquo est lrsquoappareil photo le plus sensi-ble jamais creacuteeacute pour fournir des images parfaites de lrsquoUnivers Cet appareil a eacuteteacute conccedilu dans les laboratoires de Fermilab dans lrsquoIllinois par la firme laquo Dark En-ergy Survey raquo Fleuron des APN (Appareil photo numeacuterique) ce fabuleux appareil photo est eacutequi-peacute de 74 capteurs CCD (Charge-Coupled Device ou dispositif agrave transfert de charge) pour une reacutesolution incroyable de 574 meacute-gapixels tregraves exactement Cette performance scientifique per-mettra de capturer des clicheacutes ineacutedits jusqursquoagrave huit milliards drsquoanneacutees lumiegravere Percheacutee au sommet drsquoune montagne au Chili la laquo Dark Energy Camera raquo vient srsquoajouter au teacutelescope laquo Blanco 4m raquo et fait de ce dernier lrsquooutil drsquoobservation spatial le plus puis-sant au monde
La mission principale de ce nouveau laquo joujou raquo scienti-fique agrave plusieurs millions de dol-lars consiste agrave examiner ce qursquoil y a en dehors de la voie lacteacutee afin de mieux comprendre lrsquoexpansion de lrsquounivers Cependant les cher-cheurs espegraverent que les photos obtenues permettront eacutegalement drsquoen savoir un peu plus sur la na-ture de cette mysteacuterieuse eacutener-gie noire qui demeure inconnue jusqursquoagrave maintenant
Les scientifiques misent donc sur cet appareil ultra-per-fectionneacute pour apporter un peu de lumiegravere sur les mystegraveres du cosmos
wwwdarkenergysurveyorg
Info
grap
hie
2DA
ctu D
ossier Infographie 2D570 M
eacutega-pixels pour deacutecouvrir lrsquounivers
5
Lrsquoenseigne drsquoameublement sueacutedoise IKEA prise en flagrant deacutelit de trucage graphique digne des plus grandes heures de lrsquoeacutepoque stalinienne
Pour pouvoir vendre ses produits dans le monde entier et eacutetendre son image agrave lrsquointernational nombre de marques sont precirctes agrave tout srsquoadapter agrave des climats plus ou moins rudes manger du riz et autres chiens
ou encore srsquoenfoncer un chapeau de cow-boy sur la tecircte
Chez IKEA marque sueacutedoise bien connue pour ses meubles en kit aux noms imprononccedilables on est precirct agrave tout mecircme agrave supprimer les femmes des campagnes de publici-teacute Eacutetonnant pour une enseigne issue drsquoun pays ou lrsquoeacutegaliteacute homme-femme nrsquoest pas qursquoune simple deacuteclaration et ougrave les femmes ministres ne sont pas nommeacutees pour atteindre un quota mais pour accomplir un travail Ainsi pour vendre ses meubles en Arabie Saoudite pays de la stricte seacutegreacutegation homme-femme la multinationale sueacutedoise a eu recours agrave Photoshop pour faire disparaicirctre toutes ces femmes qursquoon ne saurait voir
Lrsquoaffaire a fait grand bruit en Suegravede ougrave lrsquoon ne badine pas avec ces pratiques qui reviennent tout simplement agrave faire de la seacutegreacutegation Ewa Bjoumlrling ministre du commerce exteacute-rieur a deacuteclareacute ldquocela ne se fait pas de supprimer ni drsquoeffacer les femmes de la reacutealiteacute Si lrsquoArabie Saoudite nrsquoautorise pas aux femmes drsquoecirctre vues entendues ou de travailler elle se passe de la moitieacute de son capital intellectuelrdquo tadis que Bir-gitta Ohlsson ministre des affaires europeacuteennes a qualifieacute ce comportement de ldquomoyen-acircgeuxrdquo
Chez IKEA la reacuteaction ne srsquoest pas fait attendre Le groupe srsquoest confondu en excuses et a indiqueacute qursquoil allait revoir et rectifier ses processus dans les deacutelais les plus brefs Dans un communiqueacute Inter IKEA Systems regrette ce qui srsquoest passeacute et comprend que les gens soient indigneacutes Le groupe affirme que son franchiseacute saoudien nrsquoavait pas reacuteclameacute que les photos soient retoucheacutees Lrsquoerreur srsquoest produite pendant le processus de travail avant la preacutesentation du projet de cat-alogue IKEA pour lrsquoArabie saoudite
Enorme scandale graphique chez IKEA
wwwikeacom
Dos
sier
Info
grap
hie
2DEn
orm
e sc
anda
le c
hez
Ikeacutea
6
Sources Graphilinecom
Info
grap
hie
2DCo
mpa
ratif
tabl
ette
gra
phiq
ue
Bien choisir sa tablette graphiqueVous ecirctes un dessinateur chevronneacute ou amateur et la sensation drsquoun crayon sur le grain drsquoune feuille de papier vous manque quand vous travaillez sur votre logiciel favori Alors une tablette tactile semble la meilleure solution pour retrouver la fluiditeacute du trait sur papier directement sur lrsquoeacutecran Cependant les eacutecarts de prix peuvent surprendre voire mecircme rebuter les neacuteophytes Comment justifier qursquoune tablette
de mecircme marque passe drsquoun modegravele de 40 euros agrave 400 euros
La tailleIl en existe diffeacuterentes surfaces de ta-blette justifiant en partie les diffeacuterences de prix Les modegraveles 1er prix sont des tablettes A6 43 soit une surface active drsquoenviron 13 x 10 cm Ce format est bien adapteacute pour les eacutecrans de mecircme ratio il est heacutelas passeacute de mode Il ne correspond plus qursquoaux lsquorsquoanciensrsquorsquo LCD 151719 et 20 pouces Contrairement aux ideacutees reccedilues ce format nrsquoest pas forcement moins preacute-cis La diffeacuterence majeure est lrsquoamplitude de mouvement que vous aurez agrave faire sur une tablette A4 pour aller drsquoun bout agrave lrsquoautre de lrsquoeacutecran vous devrez faire un grand geste alors que sur une A6 un petit mouvement de poignet suffira Depuis quelques anneacutees la mode est passeacutee au wide (format Cineacutema) avec des tablettes A5 (148mm times 210mm) ou A4 (210mm X 297 mm) beaucoup plus chegraveres Cepen-dant une tablette A5 ne vous sera drsquoau-cune utiliteacute agrave moins drsquoen avoir un usage professionnel ou si la taille de votre eacutecran le justifie au risque de perdre de la preacuteci-sion si vous travaillez par exemple sur un 22 pouces ou supeacuterieur
La marqueWacom est une garantie ce sont les lea-ders du marcheacute de la tablette graphique Leurs produits sont reacutesistants preacutecis et estheacutetiques Les NGS sont correctes sans valoir Wacom tant au niveau de la soliditeacute que de la preacutecision
Quant agrave Trust Aiptek ou Genius elles sont drsquoapregraves leur reacuteputation agrave fuir comme la peste pour leur manque de preacutecision et leur fiabiliteacute sommaire
La preacutecision du styloIl srsquoagit en gros de la finesse avec laquelle la tablette pourra reproduire votre geste (leacuteger appuyeacute forceacute hellip) 512 niveaux de pression sont le minimum exigible ne des-cendez pas en dessous Mecircme si on obtient une meilleure preacutecision avec 1024 niveaux crsquoest suffisant dans la plupart des cas sur-tout si vous deacutebutez Les stylos les plus eacutevolueacutes ont des mines remplaccedilables au fur et agrave mesure de leur usure Plusieurs jeux de mines peuvent eacutegalement ecirctre proposeacutes pour permettre agrave lrsquoutilisateur de retrans-crire au mieux le rendu de son papier preacute-feacutereacute
Si vous ecirctes un deacutebutant et que vous vous apprecirctez agrave acheter votre premier beacutebeacute je vous recommanderais de commen-cer avec une petite tablette pas trop chegravere En effet ccedila ne sert agrave rien de deacutebuter avec une super tablette de pro agrave 600 euros Ca fait envie bien sur mais vous ne vous ren-drez probablement pas compte de sa qua-liteacute Autant commencer par une petite A6 drsquoentreacutee de gamme agrave 40euro comme la Bam-boo de chez Wacom avec laquelle vous pourrez faire vos armes progresser et que vous rentabiliserez tregraves vite Deux ans plus tard vous pourrez craquer pour la derniegravere Intuos et ressentir toute la diffeacuterence
wwwwacomcom
Dossier Infographie 2D
Bien choisir sa tablette graphique
7Sources Lesnumeacuteriquescom
Reacutealiser Mr Multiclics
laquo Dans ce tutoriel consacreacute agrave Adobe llustrator nous allons apprendre comment utiliser des formes simples pour reacutealiser une image plus complexe Armez-vous de votre plume(P) et allons-y raquo
Dunas Alexis
Etudiant illustrateur et graphiste
Le mot de lrsquoauteur laquoRien de bien compliqueacute dans ce tutoriel Mr Multiclics est entie-rement reacutealiseacute avec des formes simples Donc agrave vos sourisstylets et crsquoest parti raquo
01 Partir de formes simples
Mr Multiclics est fait agrave partir de formes tregraves simples Nous allons dans un premier temps reacutealiser ces formes Prenez lrsquohabitude de creacuteer de nouveaux calques dans un nouveau dossier agrave chaque nouvelle forme et nrsquooubliez pas de leur donner un nom pour ne pas chercher trois heures le bon calque par la suite Jouez aussi avec la superposition des calques par exemple les calques des yeux au dessus de celui de la tecircte Il ne vous reste plus qursquoagrave vous armer de votre outil Plume(P) pour tracer ces formes en seacutelectionnant la couleur de votre choix
02 Les yeuxNous allons commencer par laquo donner vie raquo aux yeux Avant tout il vous faut cacher les
autres calques Pour ce faire cliquez sur le petit icocircne en forme drsquoœil agrave droite de vos calques
afin de les faire disparaicirctre Ceci eacutetant fait nous allons pouvoir ajouter du relief agrave ces yeux
Creacuteez deux calques dans le mecircme groupe que la forme des yeux lrsquoun nous servira pour
les ombres et lrsquoautre pour la lumiegravere (high-lights) Commenccedilons par les ombres ici le but
principal est de creacuteer du relief que la lumiegraveres viendra rehausser Sur le calque des ombres
creacuteez des formes de croissant en bas agrave droite agrave lrsquointeacuterieur de chaque œil agrave lrsquoaide de lrsquooutil
Plume(P) Remplissez-les avec une couleur un petit peu plus fonceacutee que la forme de base
mais en faisant attention de rester dans les mecircme Pour la lumiegravere utilisez la mecircme en
variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux
Infographie 2DTutoriel Illustrator
Sur Adobe IllustratorA
teli
er In
fogr
aphi
e 2D
Tuto
riel
Illu
stra
tor
8
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Lrsquoenseigne drsquoameublement sueacutedoise IKEA prise en flagrant deacutelit de trucage graphique digne des plus grandes heures de lrsquoeacutepoque stalinienne
Pour pouvoir vendre ses produits dans le monde entier et eacutetendre son image agrave lrsquointernational nombre de marques sont precirctes agrave tout srsquoadapter agrave des climats plus ou moins rudes manger du riz et autres chiens
ou encore srsquoenfoncer un chapeau de cow-boy sur la tecircte
Chez IKEA marque sueacutedoise bien connue pour ses meubles en kit aux noms imprononccedilables on est precirct agrave tout mecircme agrave supprimer les femmes des campagnes de publici-teacute Eacutetonnant pour une enseigne issue drsquoun pays ou lrsquoeacutegaliteacute homme-femme nrsquoest pas qursquoune simple deacuteclaration et ougrave les femmes ministres ne sont pas nommeacutees pour atteindre un quota mais pour accomplir un travail Ainsi pour vendre ses meubles en Arabie Saoudite pays de la stricte seacutegreacutegation homme-femme la multinationale sueacutedoise a eu recours agrave Photoshop pour faire disparaicirctre toutes ces femmes qursquoon ne saurait voir
Lrsquoaffaire a fait grand bruit en Suegravede ougrave lrsquoon ne badine pas avec ces pratiques qui reviennent tout simplement agrave faire de la seacutegreacutegation Ewa Bjoumlrling ministre du commerce exteacute-rieur a deacuteclareacute ldquocela ne se fait pas de supprimer ni drsquoeffacer les femmes de la reacutealiteacute Si lrsquoArabie Saoudite nrsquoautorise pas aux femmes drsquoecirctre vues entendues ou de travailler elle se passe de la moitieacute de son capital intellectuelrdquo tadis que Bir-gitta Ohlsson ministre des affaires europeacuteennes a qualifieacute ce comportement de ldquomoyen-acircgeuxrdquo
Chez IKEA la reacuteaction ne srsquoest pas fait attendre Le groupe srsquoest confondu en excuses et a indiqueacute qursquoil allait revoir et rectifier ses processus dans les deacutelais les plus brefs Dans un communiqueacute Inter IKEA Systems regrette ce qui srsquoest passeacute et comprend que les gens soient indigneacutes Le groupe affirme que son franchiseacute saoudien nrsquoavait pas reacuteclameacute que les photos soient retoucheacutees Lrsquoerreur srsquoest produite pendant le processus de travail avant la preacutesentation du projet de cat-alogue IKEA pour lrsquoArabie saoudite
Enorme scandale graphique chez IKEA
wwwikeacom
Dos
sier
Info
grap
hie
2DEn
orm
e sc
anda
le c
hez
Ikeacutea
6
Sources Graphilinecom
Info
grap
hie
2DCo
mpa
ratif
tabl
ette
gra
phiq
ue
Bien choisir sa tablette graphiqueVous ecirctes un dessinateur chevronneacute ou amateur et la sensation drsquoun crayon sur le grain drsquoune feuille de papier vous manque quand vous travaillez sur votre logiciel favori Alors une tablette tactile semble la meilleure solution pour retrouver la fluiditeacute du trait sur papier directement sur lrsquoeacutecran Cependant les eacutecarts de prix peuvent surprendre voire mecircme rebuter les neacuteophytes Comment justifier qursquoune tablette
de mecircme marque passe drsquoun modegravele de 40 euros agrave 400 euros
La tailleIl en existe diffeacuterentes surfaces de ta-blette justifiant en partie les diffeacuterences de prix Les modegraveles 1er prix sont des tablettes A6 43 soit une surface active drsquoenviron 13 x 10 cm Ce format est bien adapteacute pour les eacutecrans de mecircme ratio il est heacutelas passeacute de mode Il ne correspond plus qursquoaux lsquorsquoanciensrsquorsquo LCD 151719 et 20 pouces Contrairement aux ideacutees reccedilues ce format nrsquoest pas forcement moins preacute-cis La diffeacuterence majeure est lrsquoamplitude de mouvement que vous aurez agrave faire sur une tablette A4 pour aller drsquoun bout agrave lrsquoautre de lrsquoeacutecran vous devrez faire un grand geste alors que sur une A6 un petit mouvement de poignet suffira Depuis quelques anneacutees la mode est passeacutee au wide (format Cineacutema) avec des tablettes A5 (148mm times 210mm) ou A4 (210mm X 297 mm) beaucoup plus chegraveres Cepen-dant une tablette A5 ne vous sera drsquoau-cune utiliteacute agrave moins drsquoen avoir un usage professionnel ou si la taille de votre eacutecran le justifie au risque de perdre de la preacuteci-sion si vous travaillez par exemple sur un 22 pouces ou supeacuterieur
La marqueWacom est une garantie ce sont les lea-ders du marcheacute de la tablette graphique Leurs produits sont reacutesistants preacutecis et estheacutetiques Les NGS sont correctes sans valoir Wacom tant au niveau de la soliditeacute que de la preacutecision
Quant agrave Trust Aiptek ou Genius elles sont drsquoapregraves leur reacuteputation agrave fuir comme la peste pour leur manque de preacutecision et leur fiabiliteacute sommaire
La preacutecision du styloIl srsquoagit en gros de la finesse avec laquelle la tablette pourra reproduire votre geste (leacuteger appuyeacute forceacute hellip) 512 niveaux de pression sont le minimum exigible ne des-cendez pas en dessous Mecircme si on obtient une meilleure preacutecision avec 1024 niveaux crsquoest suffisant dans la plupart des cas sur-tout si vous deacutebutez Les stylos les plus eacutevolueacutes ont des mines remplaccedilables au fur et agrave mesure de leur usure Plusieurs jeux de mines peuvent eacutegalement ecirctre proposeacutes pour permettre agrave lrsquoutilisateur de retrans-crire au mieux le rendu de son papier preacute-feacutereacute
Si vous ecirctes un deacutebutant et que vous vous apprecirctez agrave acheter votre premier beacutebeacute je vous recommanderais de commen-cer avec une petite tablette pas trop chegravere En effet ccedila ne sert agrave rien de deacutebuter avec une super tablette de pro agrave 600 euros Ca fait envie bien sur mais vous ne vous ren-drez probablement pas compte de sa qua-liteacute Autant commencer par une petite A6 drsquoentreacutee de gamme agrave 40euro comme la Bam-boo de chez Wacom avec laquelle vous pourrez faire vos armes progresser et que vous rentabiliserez tregraves vite Deux ans plus tard vous pourrez craquer pour la derniegravere Intuos et ressentir toute la diffeacuterence
wwwwacomcom
Dossier Infographie 2D
Bien choisir sa tablette graphique
7Sources Lesnumeacuteriquescom
Reacutealiser Mr Multiclics
laquo Dans ce tutoriel consacreacute agrave Adobe llustrator nous allons apprendre comment utiliser des formes simples pour reacutealiser une image plus complexe Armez-vous de votre plume(P) et allons-y raquo
Dunas Alexis
Etudiant illustrateur et graphiste
Le mot de lrsquoauteur laquoRien de bien compliqueacute dans ce tutoriel Mr Multiclics est entie-rement reacutealiseacute avec des formes simples Donc agrave vos sourisstylets et crsquoest parti raquo
01 Partir de formes simples
Mr Multiclics est fait agrave partir de formes tregraves simples Nous allons dans un premier temps reacutealiser ces formes Prenez lrsquohabitude de creacuteer de nouveaux calques dans un nouveau dossier agrave chaque nouvelle forme et nrsquooubliez pas de leur donner un nom pour ne pas chercher trois heures le bon calque par la suite Jouez aussi avec la superposition des calques par exemple les calques des yeux au dessus de celui de la tecircte Il ne vous reste plus qursquoagrave vous armer de votre outil Plume(P) pour tracer ces formes en seacutelectionnant la couleur de votre choix
02 Les yeuxNous allons commencer par laquo donner vie raquo aux yeux Avant tout il vous faut cacher les
autres calques Pour ce faire cliquez sur le petit icocircne en forme drsquoœil agrave droite de vos calques
afin de les faire disparaicirctre Ceci eacutetant fait nous allons pouvoir ajouter du relief agrave ces yeux
Creacuteez deux calques dans le mecircme groupe que la forme des yeux lrsquoun nous servira pour
les ombres et lrsquoautre pour la lumiegravere (high-lights) Commenccedilons par les ombres ici le but
principal est de creacuteer du relief que la lumiegraveres viendra rehausser Sur le calque des ombres
creacuteez des formes de croissant en bas agrave droite agrave lrsquointeacuterieur de chaque œil agrave lrsquoaide de lrsquooutil
Plume(P) Remplissez-les avec une couleur un petit peu plus fonceacutee que la forme de base
mais en faisant attention de rester dans les mecircme Pour la lumiegravere utilisez la mecircme en
variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux
Infographie 2DTutoriel Illustrator
Sur Adobe IllustratorA
teli
er In
fogr
aphi
e 2D
Tuto
riel
Illu
stra
tor
8
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Info
grap
hie
2DCo
mpa
ratif
tabl
ette
gra
phiq
ue
Bien choisir sa tablette graphiqueVous ecirctes un dessinateur chevronneacute ou amateur et la sensation drsquoun crayon sur le grain drsquoune feuille de papier vous manque quand vous travaillez sur votre logiciel favori Alors une tablette tactile semble la meilleure solution pour retrouver la fluiditeacute du trait sur papier directement sur lrsquoeacutecran Cependant les eacutecarts de prix peuvent surprendre voire mecircme rebuter les neacuteophytes Comment justifier qursquoune tablette
de mecircme marque passe drsquoun modegravele de 40 euros agrave 400 euros
La tailleIl en existe diffeacuterentes surfaces de ta-blette justifiant en partie les diffeacuterences de prix Les modegraveles 1er prix sont des tablettes A6 43 soit une surface active drsquoenviron 13 x 10 cm Ce format est bien adapteacute pour les eacutecrans de mecircme ratio il est heacutelas passeacute de mode Il ne correspond plus qursquoaux lsquorsquoanciensrsquorsquo LCD 151719 et 20 pouces Contrairement aux ideacutees reccedilues ce format nrsquoest pas forcement moins preacute-cis La diffeacuterence majeure est lrsquoamplitude de mouvement que vous aurez agrave faire sur une tablette A4 pour aller drsquoun bout agrave lrsquoautre de lrsquoeacutecran vous devrez faire un grand geste alors que sur une A6 un petit mouvement de poignet suffira Depuis quelques anneacutees la mode est passeacutee au wide (format Cineacutema) avec des tablettes A5 (148mm times 210mm) ou A4 (210mm X 297 mm) beaucoup plus chegraveres Cepen-dant une tablette A5 ne vous sera drsquoau-cune utiliteacute agrave moins drsquoen avoir un usage professionnel ou si la taille de votre eacutecran le justifie au risque de perdre de la preacuteci-sion si vous travaillez par exemple sur un 22 pouces ou supeacuterieur
La marqueWacom est une garantie ce sont les lea-ders du marcheacute de la tablette graphique Leurs produits sont reacutesistants preacutecis et estheacutetiques Les NGS sont correctes sans valoir Wacom tant au niveau de la soliditeacute que de la preacutecision
Quant agrave Trust Aiptek ou Genius elles sont drsquoapregraves leur reacuteputation agrave fuir comme la peste pour leur manque de preacutecision et leur fiabiliteacute sommaire
La preacutecision du styloIl srsquoagit en gros de la finesse avec laquelle la tablette pourra reproduire votre geste (leacuteger appuyeacute forceacute hellip) 512 niveaux de pression sont le minimum exigible ne des-cendez pas en dessous Mecircme si on obtient une meilleure preacutecision avec 1024 niveaux crsquoest suffisant dans la plupart des cas sur-tout si vous deacutebutez Les stylos les plus eacutevolueacutes ont des mines remplaccedilables au fur et agrave mesure de leur usure Plusieurs jeux de mines peuvent eacutegalement ecirctre proposeacutes pour permettre agrave lrsquoutilisateur de retrans-crire au mieux le rendu de son papier preacute-feacutereacute
Si vous ecirctes un deacutebutant et que vous vous apprecirctez agrave acheter votre premier beacutebeacute je vous recommanderais de commen-cer avec une petite tablette pas trop chegravere En effet ccedila ne sert agrave rien de deacutebuter avec une super tablette de pro agrave 600 euros Ca fait envie bien sur mais vous ne vous ren-drez probablement pas compte de sa qua-liteacute Autant commencer par une petite A6 drsquoentreacutee de gamme agrave 40euro comme la Bam-boo de chez Wacom avec laquelle vous pourrez faire vos armes progresser et que vous rentabiliserez tregraves vite Deux ans plus tard vous pourrez craquer pour la derniegravere Intuos et ressentir toute la diffeacuterence
wwwwacomcom
Dossier Infographie 2D
Bien choisir sa tablette graphique
7Sources Lesnumeacuteriquescom
Reacutealiser Mr Multiclics
laquo Dans ce tutoriel consacreacute agrave Adobe llustrator nous allons apprendre comment utiliser des formes simples pour reacutealiser une image plus complexe Armez-vous de votre plume(P) et allons-y raquo
Dunas Alexis
Etudiant illustrateur et graphiste
Le mot de lrsquoauteur laquoRien de bien compliqueacute dans ce tutoriel Mr Multiclics est entie-rement reacutealiseacute avec des formes simples Donc agrave vos sourisstylets et crsquoest parti raquo
01 Partir de formes simples
Mr Multiclics est fait agrave partir de formes tregraves simples Nous allons dans un premier temps reacutealiser ces formes Prenez lrsquohabitude de creacuteer de nouveaux calques dans un nouveau dossier agrave chaque nouvelle forme et nrsquooubliez pas de leur donner un nom pour ne pas chercher trois heures le bon calque par la suite Jouez aussi avec la superposition des calques par exemple les calques des yeux au dessus de celui de la tecircte Il ne vous reste plus qursquoagrave vous armer de votre outil Plume(P) pour tracer ces formes en seacutelectionnant la couleur de votre choix
02 Les yeuxNous allons commencer par laquo donner vie raquo aux yeux Avant tout il vous faut cacher les
autres calques Pour ce faire cliquez sur le petit icocircne en forme drsquoœil agrave droite de vos calques
afin de les faire disparaicirctre Ceci eacutetant fait nous allons pouvoir ajouter du relief agrave ces yeux
Creacuteez deux calques dans le mecircme groupe que la forme des yeux lrsquoun nous servira pour
les ombres et lrsquoautre pour la lumiegravere (high-lights) Commenccedilons par les ombres ici le but
principal est de creacuteer du relief que la lumiegraveres viendra rehausser Sur le calque des ombres
creacuteez des formes de croissant en bas agrave droite agrave lrsquointeacuterieur de chaque œil agrave lrsquoaide de lrsquooutil
Plume(P) Remplissez-les avec une couleur un petit peu plus fonceacutee que la forme de base
mais en faisant attention de rester dans les mecircme Pour la lumiegravere utilisez la mecircme en
variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux
Infographie 2DTutoriel Illustrator
Sur Adobe IllustratorA
teli
er In
fogr
aphi
e 2D
Tuto
riel
Illu
stra
tor
8
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Reacutealiser Mr Multiclics
laquo Dans ce tutoriel consacreacute agrave Adobe llustrator nous allons apprendre comment utiliser des formes simples pour reacutealiser une image plus complexe Armez-vous de votre plume(P) et allons-y raquo
Dunas Alexis
Etudiant illustrateur et graphiste
Le mot de lrsquoauteur laquoRien de bien compliqueacute dans ce tutoriel Mr Multiclics est entie-rement reacutealiseacute avec des formes simples Donc agrave vos sourisstylets et crsquoest parti raquo
01 Partir de formes simples
Mr Multiclics est fait agrave partir de formes tregraves simples Nous allons dans un premier temps reacutealiser ces formes Prenez lrsquohabitude de creacuteer de nouveaux calques dans un nouveau dossier agrave chaque nouvelle forme et nrsquooubliez pas de leur donner un nom pour ne pas chercher trois heures le bon calque par la suite Jouez aussi avec la superposition des calques par exemple les calques des yeux au dessus de celui de la tecircte Il ne vous reste plus qursquoagrave vous armer de votre outil Plume(P) pour tracer ces formes en seacutelectionnant la couleur de votre choix
02 Les yeuxNous allons commencer par laquo donner vie raquo aux yeux Avant tout il vous faut cacher les
autres calques Pour ce faire cliquez sur le petit icocircne en forme drsquoœil agrave droite de vos calques
afin de les faire disparaicirctre Ceci eacutetant fait nous allons pouvoir ajouter du relief agrave ces yeux
Creacuteez deux calques dans le mecircme groupe que la forme des yeux lrsquoun nous servira pour
les ombres et lrsquoautre pour la lumiegravere (high-lights) Commenccedilons par les ombres ici le but
principal est de creacuteer du relief que la lumiegraveres viendra rehausser Sur le calque des ombres
creacuteez des formes de croissant en bas agrave droite agrave lrsquointeacuterieur de chaque œil agrave lrsquoaide de lrsquooutil
Plume(P) Remplissez-les avec une couleur un petit peu plus fonceacutee que la forme de base
mais en faisant attention de rester dans les mecircme Pour la lumiegravere utilisez la mecircme en
variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux
Infographie 2DTutoriel Illustrator
Sur Adobe IllustratorA
teli
er In
fogr
aphi
e 2D
Tuto
riel
Illu
stra
tor
8
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
04 La boucheLrsquoune des partie les plus compliqueacutees sans lrsquoecirctre vraiment la bouche ou grille
de Mr Multiclics Pour commencer apregraves avoir creacuteeacute un nouveau calque creacuteez
votre forme de base (ici nous allons reacutealiser un genre de bouche drsquoaeacuteration agrave
la sauce laquo space-marines raquo) avec la couleur de votre choix en restant dans les
mecircmes tons que les preacuteceacutedentes Vous lrsquoaurez compris il srsquoagit une nouvelle fois
de jouer avec les ombres et les lumiegraveres pour donner du volume et repreacutesenter
les fentes drsquoune bouche drsquoaeacuteration Dessinez de fines striures de couleur plus
fonceacutee et plus claire que la forme de base
05 Deacutetails de la tecircteIci adaptez la forme et la couleur des ombres et lumiegraveres en fonction du
volume et de la forme que vous souhaitez attribuer agrave votre personnage
03 Les pupillesRien de moins compliqueacute Sur un nouveau calque creacuteez deux formes ova-
les dans les yeux et remplissez les avec du noir ou une autre couleur assez
fonceacutee Creacuteez une nouvelle fois un nouveau calque et placez un autre ovale
plus petit par dessus Remplissez-le cette fois-ci avec du blanc pour le reflet
de la lumiegravere Libre agrave vous de lui dessiner les yeux bioniques ou le monocle
de vos recircves
Info
grap
hie
2DTu
torie
l Illu
stra
tor
06 Drsquoune pierre trois coups Soyons productif et occupons nous maintenant des bras du cou et de la
roue de Mr Multiclics Le but ici est de leur donner un aspect de tube en
jouant une nouvelle fois avec les ombres et lumiegraveres Pour cela mecircme meacute-
thode qursquoaux eacutetapes preacuteceacutedentes agrave la diffeacuterence pregraves que les ombres ainsi
que les liseacutereacutes de lumiegravere viendront barrer les formes de bases en lui don-
nant un aspect de tuyau drsquoaspirateur Encore une fois libre agrave vous de reacutealiser
vos propres formes de bras Au passage reacutealisez les ombres et les lumiegraveres
sur les coudes et les eacutepaules avec des formes plus grosses et plus arrondies
pour leur donner un aspect bombeacute
Atelier Infographie 2DTutoriel Illustrator
9
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
08 Le corps
Vous avez reacutealiseacute le plus dur et ce nrsquoest pas cette nouvelle eacutetape qui devrait
vous poser problegraveme Avant de commencer penser agrave garder de la place au
centre du buste pour y inscrire votre signature Ensuite creacuteez les ombres ainsi
que les reflets qui habilleront le buste de Mr Multiclics Encore une fois je vous
conseille ici de faire des formes amples et des courbes douces pour accentuer
lrsquoeffet arrondie de votre robot
07 Les pincesRien de beaucoup plus compliqueacute ici lrsquoeacutetape la plus rapide de ce tutoriel Faites
preuve de votre sens de la perspective et creacuteez des formes ressemblant agrave des
fers agrave cheval ou autres aimants tout droit sortis drsquoun cartoon Pour ce qui est des
reliefs essayer de reacutealiser vos formes pour donner un aspect carreacute et cubique agrave
vos pinces
Infographie 2DTutoriel Illustrator
09 Signature
Ici agrave vous drsquoapposer votre marque Deux possibiliteacutes srsquooffrent agrave vous la premiegravere
est drsquoutiliser directement lrsquooutil Texte(T) la seconde eacutetant de faire votre lettre
vous mecircme a lrsquoaide de lrsquooutil Plume(P) Ceci eacutetant fait il ne vous reste plus qursquoagrave
deacutefinir les reliefs en jouant avec les reflets et leurs ombres
10 Le curseur
Creacuteez la forme drsquoun curseur de souris agrave lrsquoaide drsquoun gris assez clair et attribuez-
lui un contour noir dans les vignettes approprieacutees Puis dessinez les reflets de
lumiegravere dans une couleur plus claire sur un coteacute du curseur et les ombres drsquoune
couleur plus fonceacutee sur le coteacute opposeacute Rien ne vous oblige agrave reacutealiser ce curseur
et je vous encourage encore une fois agrave laisser libre cours agrave votre imagination
pour reacutealiser des accessoires originaux agrave votre robot
Ate
lier
Info
grap
hie
2DTu
tori
el Il
lust
rato
r
10
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Atelier Infographie 2DTutoriel Illustrator
11 Pour le fun
Pour la petite touche humoristique qui fera la diffeacuterence je vous conseille
drsquoajouter un petit accessoire sur la tecircte de votre robot en fonction du style que
voulez lui attribuer Pour reacutealiser lrsquoantenne de Mr Multiclics je me suis inspireacute
des vielles antennes de teacuteleacutevision pour rester dans lrsquoesprit retro de notre mas-
cotte
12 Note finale
Enregistrez votre fichier Illustrator Puis ouvrez Photoshop et importer votre
fichier Illustrator Fichiergt Importergt Votre fichier Libre agrave vous de reacutealiser une
ambiance ou un deacutecor sur lequel vous viendrez greffer votre robot Ajoutez des
calques de reacuteglage deacutegradeacute Calquegt Nouveau calque de reacuteglagegt Courbe de
transfert de deacutegradeacute avec une couleur violette partant sur du orange Passez
ce nouveau calque en mode de fusion Lumiegravere tamiseacutee ou Incrustation selon
votre preacutefeacuterence (ajustez lrsquoopaciteacute si besoin) Il se produit un changement glo-
bal au niveau de lrsquoillustration les calques de reacuteglages vont donner une nouvelle
teinte agrave lrsquoimage plus coheacuterente
Conseil Importer sur Illustrator
Sur Illustrator creacuteez un nouveau document Fichiergt Nouveaugt Document A4 au
format portrait Importer votre image de base (si vous partez drsquoun modegravele ou drsquoun
dessin) Fichiergt Importer De preacutefeacuterence sur le calque 1 puis double-cliquer sur ce
calque Une fenecirctre apparaicirct renommez le calque comme il vous convient (reacutefeacute-
rence) et cocher laquo modegravele raquo Cette option permet une meilleure visibiliteacute lors du
passage en mode traceacute du vectoriel
laquo Ensuite libre agrave vous de choisir les couleurs pour lrsquohabiller ou drsquoappliquer cette meacutethode agrave
vos projets personnels raquo
11
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Le monde de la 3D
Infographie 3D
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Comparaison des grands logiciels de creacuteations 3D
Vous deacutesirez deacutebuter dans le monde de la 3D Vous ne savez pas quel logiciel utiliseacute Cet article est lagrave pour reacutepondre agrave ce besoin
Aujourdrsquohui il existe une multitude de logiciels proposant drsquoeacutevoluer dans le monde de la 3D Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les diffeacuterences essentielles et en les comparant selon plusieurs points
Maxon Cinema 4DCinema 4D est un logiciel extrecircmement riche et tregraves intui-tif Ses principaux avantages selon moi sont la compatibiliteacute sur Mac OSX la richesse et le nombre drsquooutilsmodules directe-ment inteacutegreacutes une faciliteacute de manipulations des vues une modeacute-lisation tregraves simple et intuitive et enfin la clarteacute des options de chaque objet (textures deacuteformations dynamique) ainsi qursquoune hieacuterarchie tregraves bien penseacutee Jrsquoutilise personnellement Cineacutema 4D pour toutes mes creacuteations et jrsquoen suis tregraves satisfait Il reste neacutean-moins tregraves couteux et nrsquoest donc pas adapteacute agrave tout le monde
Mais rassurez-vous depuis le 11 juin 2012 MAXON a mis agrave dispo-sition des eacutetudiants une version tregraves complegravete appeleacutee Cineacutema 4D Etudiant que vous pouvez vous procurer ici
ModeacutelisationCineacutema 4D apporte les fonction-naliteacutes que la plupart des logiciels de creacuteation 3D digne de ce nom peuvent apporter Mais nous remar-querons quelques exclusiviteacutes assez pratiques Il est impossible de pas-ser agrave cocircteacute de lrsquooutil HyperNurbs qui permet de modeacuteliser des objets plus ou moins complexes en un minimum de temps gracircce agrave quelques lignes simples (Spline) Relieacutees entre elles elles forment un objet tridimension-nel complexe travaillant avec des n-gones ndash polygones avec un nombre illimiteacutes de cocircteacutes Les HyperNurbs sont entiegraverement parameacutetrables et permettent drsquoobtenir des formes dites laquo organiques raquo tregraves naturelles
Je rappelle que cette version gratuite ne doit pas ecirctre utiliseacutee agrave des buts commerciales
Lrsquoanimation sur Cinema 4D se fait drsquoune maniegravere tregraves simple une ligne du temps avec des images cleacutes pour chaque objet indiquant les nou-velles positions et deacuteformations agrave adopter Notons tout de mecircme que chaque paramegravetre est seacutepareacute sur une piste propre ce qui apporte une meilleure clarteacute et un confort suppleacutementaire lors de la creacuteation drsquoanimation complexe Il existe eacutega-lement lrsquoanimation non-lineacuteaire qui permet de creacuteer des animations par calque crsquoest-agrave-dire la possibiliteacute de deacutefinir une animation complexe sur un claque le bloquer et superposer des mouvements suppleacutementaires sur un second claque pour y ajouter des mouvements suppleacutementaires
Animation RenduLe moteur de rendu de Cineacutema 4D est ceacutelegravebre pour sa rapiditeacute et sa relative faible consommation de ressources Il integravegre le calcul de reacute-flexion reacutefraction hellip et de nombreux modules peuvent ecirctre ajouteacutes pour acceacuteder agrave diverses fonctionnaliteacutes comme un anticreacutenelage De plus un systegraveme de rendu par reacuteseau est inclu et est facilement mis en place A noter aussi la preacutesence drsquoun ren-du multi-passes avanceacute permettant la creacuteation de diffeacuterentes couches (canal alpha ombres reacuteflexion hellip) et drsquoun calcul du deacuteplacement sous-polygonal tregraves rapide per-mettant de creacuteer des imperfections dans vos modegraveles 3D pour creacuteer un rendu plus naturel et plus reacutealiste
13
Dossier 3D
Dynam
ixyz et motion capture
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Autodesk 3D Studio Max
Autodesk 3D studio offre eacutegalement une versiongratuite pour les eacutetudiants que vous pouvez vous procurer ici
Ce logiciel a pris une grande majoriteacute du marcheacute des logiciels de 3D et est utiliseacute par la plupart desdesigner 3D celui-ci offre un eacuteventail drsquooutils in-croyables et tregraves puissants 3ds Max possegravede une grande communauteacute ce qui nous offre un grand nombre de tutoriels en ligne
Modeacutelisation3D Studio Max est doteacute des outils les plus complets du secteur Il offre la possibiliteacute de creacuteer des objets organiques et parameacutetriques baseacutes sur les polygones les splines et les NURBS (un peu agrave lrsquoinstar de Cinema 4D) Une centaine drsquooutils sont preacute-vus pour la modeacutelisation polygonale ce qui rend ce logiciel tregraves com-plet De plus ProOptimizer diminue la complexiteacute des objets jusqursquoagrave 75 sans aucune perte de deacutetails
Nous retrouvons eacutevidemment la timeline classique avec ses images cleacutes pour lrsquoanimation drsquoobjets mais le logiciel integravegre de plus les anima-tions proceacutedurales qui permettent drsquoanimer des foules et des bipegravedes (CAT) Ensuite il existe des outils de gestion de muscles de peau et de squelettes (3ds Max bones cineacutema-tique inverse rigging hellip) directement inteacutegreacutes pour apporter une maicirctrise tregraves preacutecise des animations de per-sonnages et un reacutesultat plus reacutealiste
Animation RenduLe moteur de rendu haute per-formance est Quicksilver Celui-ci permet des preacutevisualisations de qualiteacutes et de creacuteer des eacuteclairages photo-reacutealistes rapidement (via mental ray) On a eacutegalement la pos-sibiliteacute de manipuler une reacutegion donneacutee dans le Viewport du logi-ciel et dans la meacutemoire drsquoimage laquo Framebuffer raquo gracircce agrave la fonc-tion Reveal Enfin les rendus par passes multiples avanceacutes sont inteacute-greacutes pouvant creacuteer par exemple des gammes dynamique (HDR) pour les reacute-assembler dans 3ds Max Composite
BlenderLa grande force de Blender reacuteside dans sa gratuiteacute Il beacuteneacutefi-cie drsquoune grande communauteacute drsquoutilisateurs passionneacutes et pro-fessionnels Celui-ci est doteacute de nombreux outils tregraves varieacutes et ultra-complets On retrouve la gestion drsquoanimations modeacutelisa-tions rendus hellip Mais aussi la possibiliteacute de creacuteer votre propre jeu videacuteo directement dans Blender en utilisant toute la puis-sance de rendu qursquooffre ce logiciel La prise en main de Blender est neacuteanmoins assez deacuteroutante au premier abord le systegraveme est penseacute diffeacuteremment des autres produits du marcheacute Mais de nombreux tutoriels existent et la communauteacute est tregraves active
c Tommaso Sanguini - wwwtommasosanguigniit c 2002 Thomas Suurland - wwwsuuriandcom c Bobby - Cleacutement (weilyncg) Granjon - Blenderorg
Cineacutema 4D 3dsmax Blender
14
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Sources Nerdgennet
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Dynamixyz La performance franccedilaise en Motion CaptureLa start-up franccedilaise Dynamixyz commercialise depuis peu laquo Performer raquo conccedilu en
partenariat avec Supeacutelec deacutedieacute aux professionnels de la motion capture
Lrsquoentreprise franccedilaise Dynamixyz en partenariat avec Supeacutelec est une socieacuteteacute speacutecialiseacutee dans lrsquoanalyse et la synthegravese de visages 3D de haute qualiteacute pour le jeu videacuteo Elle commercialise depuis peu laquo Perfor-mer raquo Cet outil deacutedieacute aux profes-sionnels de la motion capture est capable de capturer avec finesse et preacutecision les expressions drsquoun visage humain pour les retranscrire ensuite sur un personnage 3D Le reacutesultat nrsquoest pas totalement satis-faisant mais srsquoapproche du reacutesultat ultime
Cet outil utilise uniquement une cameacutera embarqueacutee fixeacutee sur un casque Une fois le casque installeacute sur la tecircte de lrsquoacteur le systegraveme tregraves preacutecis de vision par ordinateur suit les moindres mouvements de peau En se basant sur les deacuteformations de la texture du visage le systegraveme calcule les paramegravetres neacutecessaires agrave lrsquoanimation du personnage virtuel deacutesireacute Dyna-mixyz propose ainsi des solutions drsquoanalyses faciales permettant de capter les expressions drsquoun joueur en temps reacuteel dans le but de faire de la reacutealiteacute augmenteacutee ou de piloter son avatar
Preacutesentation
Comment ccedila fonctionne
Plus drsquoinformations sur le site officiel
laquo Performer raquo sera prochainement preacutesenteacute agrave de gros studios comme Ubisoft Montreacuteal ou encore 20th Century Fox
Ce systegraveme leurs permet-trait notamment drsquoeacuteconomi-ser beaucoup de temps et drsquoargent car jusqursquoici il fallait embaucher des centaines drsquoinfographistes pour reacuteali-ser chaque mouvement de bouche agrave la main
15
Dossier 3D
Lrsquoapplication Sculpteo
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Sculpteo Une application de choix pour vos impressions 3D
La start-up franccedilaise speacutecialiste de lrsquoimpression 3D sort une application iOS gratuite pour votre iphone Ipod Touch et iPad 50 ou supeacuterieur
Cette application vous permettra notamment de concevoir des objets uniques en 3D en utilisant la cameacutera de lrsquoiPhone par exemple puis de les acheter directementElle vous permettra eacutegalement de deacutecouvrir une collection de designs drsquoexception reacutealiseacutes par les meilleurs designers 3D et des les finir vous-mecircme Vous pourrez eacutegalement creacuteer votre propre collec-tion Modeacutelisez votre propre Coupe Pixel votre Vase Profil customisez votre coque iPhone et bien plus Vous pouvez aussi partager vos creacuteations sur Twitter ou Facebook ou bien lrsquoenregistrer dans votre iPhone ou iPad
Une fois votre creacuteation personnelle termineacutee vous pourrez lrsquoimprimer et lrsquoacheter tregraves simplement A noter que le prix peut varier entre 2 euros pour un simple deacute monochrome jusqursquoagrave 1500 euros pour un avion en couleur et de taille importante par exempleDes objets tels que les vases les tasses hellip sont impri-meacutes en ceacuteramique
Sculpteo vous offre eacutegalement la possibiliteacute de rencontrer les designers et de deacutecouvrir quelques-uns de leurs plus reacutecents et meilleurs projets utilisant lrsquoimpression 3D
Inutile drsquoavoir des connaisances en dessin 3D Cette application est destineacutee agrave tout le monde et est tregraves simple drsquoutilisation
Plus drsquoinformations sur le site officiel
En quoi consiste Sculpteo
16
Dos
sier
3D
Dyn
amix
yz e
t mot
ion
capt
ure
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Atelier 3DLes bases de la modeacutelisation 3D
17
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Modeacuteliser le robot Multiclics
laquo Dans ce tutoriel consacreacute agrave Cineacutema 4D vous allez apprendre agrave modeacuteliser un robot de faccedilon simple tout en apprenant les outils fondamentaux neacutecessaires pour toutes vos futures creacuteations raquo
Madeleine Benoit
Etudiant et Designer 3D
Le mot de lrsquoauteur laquo Pour reacutealiser ce robot jrsquoai utiliseacute le logiciel Cineacutema 4D Il est com-poseacute uniquement de formes tregraves simples Je nrsquoai en aucun cas chercheacute agrave faire compliqueacute le but eacutetant de creacuteer un tutoriel deacutedieacute au deacutebutant souhaitant eacutevoluer dans le monde de la 3Draquo
01 Commenccedilons par la tecircte Pour commencer creacuteez un simple cube et ajoutez lui 3 segments de plus
en x y et z pour faciliter sa modeacutelisation (pour ce faire allez dans lrsquoonglet
laquo Objets raquo qui se trouve dans la fenecirctre en bas agrave droite de votre eacutecran apregraves
avoir seacutelectionneacute votre cube Convertissez votre cube en objet parameacutetrique
pour pouvoir le modifier (Raccourci C) Basculez ensuite en vue de face et
en mode point pour tenter de reproduire une forme identique agrave la mienne
en alternant outils de deacuteplacement et outils de mise agrave lrsquoeacutechelle Vous remar-
querez que votre forme nrsquoest pas aussi arrondie que la mienne Crsquoest normal
Ajouter un Hyper Nurbs (petit carreacute vert dans la barre drsquooutils en haut de
votre eacutecran) et deacuteplacez votre cube agrave lrsquointeacuterieur Votre forme devrait srsquoarron-
dir agrave preacutesent Rien de bien compliqueacute Pour le cou du robot un simple cylindre suffit
02 Creacuteer les yeuxPour les yeux jrsquoai utiliseacute le logiciel Photoshop un ovale noir et un
autre plus petit qui sera situeacute sur le premier auquel nous applique-
rons une leacutegegravere rotation et une teinte blanche Vous pouvez eacutegalement
creacuteer un arc de cercle de couleur grise pour repreacutesenter la paupiegravere
18
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
04 Le corpsPour modeacuteliser le corps il vous suffit de reprendre les mecircmes eacutetapes que pour
la tecircte en apportant quelques modifications bien entendu
Passez en mode polygone et seacutelectionnez quelques faces au niveau du torse
que vous supprimerez afin de laisser de la place pour le laquo cœur raquo faccedilon
Iron Man
05 Le laquo Cœur raquoPour cette modeacutelisation vous allez avoir besoin de plusieurs eacuteleacutements agrave
commencer par un laquo Tore raquo deux laquo Tubes raquo (de tailles diffeacuterentes) Nous
leurs appliquerons une rotation a 90deg Lrsquoideacutee ici est de seacutelectionner les faces
arriegraveres des tubes et de les reacuteduire gracircce agrave lrsquooutil de mise agrave lrsquoeacutechelle pour
obtenir le reacutesultat ci-contre (couleur blanc et gris) Le tore lui sera disposeacute
en avant (couleur noir) Libre agrave vous de choisir les couleurs qui vous plaisent
pour la finalisation
Vous nrsquoavez plus qursquoagrave replacer le tout sur le corps du robot agrave lrsquoendroit preacutevu
agrave cet effet
03 Importer les YeuxCommencez par creacuteer deux disques auxquels nous appliquerons une rota-
tion a 90deg (astuce maintenir enfonceacutee la touche maj permet une rotation plus
preacutecise) Placez-les devant la tecircte que nous avons creacuteeacutee preacuteceacutedemment Pour
importer une texture il vous suffit de creacuteer un nouveau mateacuteriau en double
cliquant dans la fenecirctre situait en dessous de la timeline Ensuite double
cliquez sur ce nouveau mateacuteriau pour lrsquoeacutediter et allez dans laquo Couleur raquo Vous
trouverez une petite flegraveche agrave coter du mot laquo Texture raquo qui vous permettra
de laquo charger une image raquo Une fois votre image importeacutee deacuteplacez le mateacute-
riau sur le disque Vous constaterez que la texture ne srsquoapplique pas parfai-
tement il faut la retravailler un peu Dans la fenecirctre de laquo calque raquo situeacutee
agrave droite de votre eacutecran vous pouvez voir apparaitre votre texture agrave cocircteacute de
votre disque Seacutelectionnez-la et passez en mode laquo Axes de texture raquo afin de
pouvoir lui appliquer une rotation et quelques deacuteplacements si neacutecessaire
Atelier 3D
Les bases de la modeacutelisation 3D
19
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
07 La roueCommencez par creacuteer une sphegravere et aplatissez lagrave sur les cocircteacutes pour obtenir
une forme de roue Choisissez la texture qui vous plaira sur internet et im-
portez-la de la mecircme faccedilon que pour les yeux Lors de lrsquoeacutedition de la texture
allez dans laquo Couleur raquo et changez lrsquoeacutechantillonnage en laquo SAT raquo Pour donner
un cocircteacute plus reacutealiste agrave votre texture vous pouvez eacutegalement activer le laquo relief raquo
et les laquo normales raquo Une fois activeacutes ouvrez-les et reacute-importez les textures
Dans laquo Normales raquo cliquez sur la flegraveche agrave cocircteacute du mot laquo texture raquo et choisissez
laquo Height2Normal raquo (si vous ne disposez de ce plugin je vous conseille de le
teacuteleacutecharger) Une fois teacuteleacutechargeacute et installeacute activez-le et cliquez sur la petite
image bleuteacutee qui apparait apregraves avoir activeacute le plugin Dans laquo method raquo rem-
placer laquo 4 samples raquo par laquo prewitt 5x5 raquo augmentez le radius agrave 80 et baissezla
hauteur agrave 75 Vous obtiendrez un reacutesultat bien meilleur
08 Finissons par les brasRien de compliqueacute pour cette partie de simples cylindres suffisent pour
creacuteer les bras vous pouvez eacutegalement reacuteutiliser les eacutepaulettes en les modi-
fiants leacutegegraverement pour creacuteer les laquo coudes raquo Concernant les mains agrave preacutesent
il vous suffit de creacuteer un tube modifiez sa taille (gracircce agrave lrsquooutil de mise agrave
lrsquoeacutechelle) augmentez son rayon interne et en supprimer la moitieacute Il vous
suffira ensuite de lui appliquer une rotation et de le placer correctement
06 On continue avec les eacutepaules le bassin et les jambes Une fois de plus il va falloir travailler sa modeacutelisation On repart sur la base drsquoun
cube pour creacuteer le bas du corps Pensez agrave laisser un trou pour la future roue qui
fera office de jambe pour le robot Jrsquoai modeacuteliseacute les eacutepaules par le biais drsquoun cube
mais vous pouvez eacutegalement partir sur la base drsquoun cylindre
laquo Libre agrave vous de choisir les couleurs qui lui iront le mieux raquo
20
Ate
lier
3D
Les
base
s de
la m
odeacutel
isat
ion
3D
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Le monde de LAudiovisuel
Audiovisuel
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
La GoPro HERO HD 3 est de sortie
Avis agrave tous les passionneacutes de sports extrecircmes enfin Gopro a annonceacute la sortie de sa nouvelle mini cameacutera embarqueacutee qui fera son arriveacutee en fin drsquoanneacutee pour la plus
grande joie de tous
On ne preacutesente plus la marque Elle est tellement bien ancreacutee dans les consciences qursquoon entend reacute-guliegraverement parler de GoPro pour deacute-signer une cameacutera embarqueacutee en geacuteneacute-ral
Encore plus fort
La nouvelle GoPro HD3 a eacuteteacute com-plegravetement repenseacutee autant au niveau technique qursquoau niveau look 30 plus compacte 25 plus leacutegegravere et avec une reacutesolution quatre fois plus grande que le preacuteceacutedent modegravele
Trois deacuteclinaisons sont de la partie White Silver et Black Elles filment doreacutenavant agrave 12 millions de pixels et possegravedent un systegraveme Wi-Fi crsquoeacutetait un des points manquant sur la preacuteceacutedente geacuteneacuteration et il fallait acheter un Wi-Fi BacPac pour en profiter Ce sytegraveme Wi-Fi va permettre de controcircler la cameacutera depuis son smartphone (iOS unique-ment puis Android bientocirct) et dans un futur proche de reacutecupeacuterer les donneacutees directement avec son smartphone pour les poster sur les reacuteseaux sociaux
Elles disposent eacutegalement toutes les trois drsquoune batterie de 1050 mAh qui se recharge via le connecteur USB La connectique comprend une sortie micro HDMI un lecteur de cartes microSDHC (jusqursquoagrave 64 Go) ainsi qursquoun port USB 20
Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus perfor-mant pour capturer des images lorsque la luminositeacute ambiante est faible mais qursquoil faudra attendre la mise en place drsquoun nouveau firmware pour en profiter pleinement Il faudra donc garder un oeil sur la sortie de ce nouveau firm-ware
En conclusion si vous ecirctes fan de sports extrecircmes et que vous souhaitez garder un oeil sur vos performances Foncez Vous ne serait pas deacuteccedilu par ce bijoux tech-nologique
Voici le deacutetail des caracteacuteristiques tech-niques HD Hero 3 White
Videacuteo 1080p agrave 30 ips et 720p agrave 60 ipsPhoto 5 Meacutegapixels (3 ips en mode Burst)
Tarif 249 euro
HD Hero 3 Silver
Videacuteo 1080p agrave 30 ips 940p agrave 48 ips et 720p agrave 60 ipsPhoto 11 Meacutegapixels (10 ips en mode Burst)
Tarif 349 euro
HD Hero 3 Black
Videacuteo 4K agrave 12 ips 27K agrave 30 ips 1440p agrave 48 ips 1080p agrave 60 ips et enfin 720p agrave 120 ipsPhoto 12 Meacutegapixels (30 ips en mode Burst)Teacuteleacutecommande Wi-Fi livreacutee dans le bun-dleCompatible avec les applications GoPro
Tarif 449 euro
Pour plus drsquoinformations vous pouvez consulter le site internet officiel
Dos
sier
Aud
iovi
suel
GoP
ro H
ero
HD
3
22Sources PCImpact
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
iPad mini un petit qui se voit tregraves grand
Quelques semaines apregraves sa preacutesentation en grande pompe par Tim Cook le tregraves attendu iPad Mini deacutemarre sa carriegravere commerciale Et alors que les iPad se succegravedent et
se ressemblent lrsquoiPad Mini se deacutemarque drsquoembleacutee avec son format plus compact
Dossier A
udiovisueliPad M
ini
Steve Jobs estimait que personne ne voudrait drsquoun petit format Et pourtant il se trompait Voilagrave qursquoApple nous propose sa premiegravere laquo petite tablette raquo au format 79 pouces censeacutee rivaliser avec les Nexus 7 et autres tablettes Android compactes drsquoun format de 7 poucesPreacutesenteacute comme un iPad laquo de long en large raquo par la communi-cation drsquoApple cet iPad Mini a-trsquoil tout drsquoun grand
LrsquoiPad Mini inaugure un tout nouveau design dans lrsquoesprit assez proche de celui des reacute-cents iPhone 5 et iPod Touch 5e geacuteneacuteration Il est du reste deacuteclineacute selon deux coloris noir ardoise ou blanc argen-teacute Le corps de lrsquoappareil est fait drsquoune coque unibody alu-minium et si sa finesse im-pressionne agrave peine 72mm drsquoeacutepaisseur on note le mecircme travail de lrsquoaluminium sur le chanfrein de lrsquoeacutecran qursquoavec lrsquoiPhone 5 Ceux-ci sont bi-seauteacutes et polis pour un ren-du agrave effet miroir Les amateurs de chiffres retiendront que lrsquoiPad Mini est 23 plus fin et 53 plus leacuteger qursquoun iPad con-ventionnel
Comme son grand fregravere lrsquoiPad Mini dispose de boutons de reacute-glages du volume sur la tranche drsquoun bouton de verrouillage programmable drsquoun bouton de mise en route sur le sommet et de lrsquoineacutevitable bouton central situeacute sous lrsquoeacutecran Les haut-parleurs se signalent par deux seacuteries distinctes drsquoouvertures perforeacutees agrave la base de lrsquoiPad Mini dans le mecircme esprit que sur lrsquoiPhone 5 et pour la premiegravere fois sur un iPad ils deacutelivrent
un son steacutereacuteo Un connect-eur mini-jack se trouve sur le sommet de la tablette
Cocircteacute eacutecran on retrouve bien sucircr ce qui fait son succegraves une diagonale de 79 pouces celui-ci adopte une reacutesolution de 1024x768 pixels Contrai-rement au nouvel iPad on ne retrouve pas drsquoeacutecran reacutetina on espegravere le retrouver dans la prochaine mise agrave jour
23
Site officiel
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Atelier AudiovisuelInitiation au logiciel Motion
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
24
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Animer un logo sous
Lebouteiller Thibault
Etudiant et monteur videacuteo
Atelier A
udiovisuelInitiation au logiciel M
otion
Motion
01 Importation des fichiers
Pour commencer nous allons importer les fichiers neacutecessaires agrave la concep-
tion de cette animation Pour se faire jrsquoai tout drsquoabord reacutealiseacute le logo gracircce
au logiciel Illustrator de la suite drsquoAdobe ougrave jrsquoai enregistreacute chaque partie du
logo en trois fichiers PNG qui me serviront pour lrsquoanimation par la suite
02 Crsquoest parti Maintenant nous pouvons ouvrir Motion Lancez lrsquoapplication et faite un nou-
veau projet Nous allons pouvoir commencer lrsquoanimation tout drsquoabord impor-
tons les fichiers PNG Dans la fenecirctre de gauche dans le menu laquo Navigation raquo
allez chercher vos fichiers puis cliquez sur laquo importation raquo Il se retrouvera
directement dans la timeline Faite de mecircme pour le reste des fichiers
Le mot de lrsquoauteur laquo Pour reacutealiser cette ani-mation de logo jrsquoai utiliseacute le logiciel Motion 5 Jrsquoai drsquoabord reacutealiseacute un logo simple com-poseacute uniquement de texte et drsquoune forme Je nrsquoai utiliseacute que les bases du logiciel qui vous servirons par la suite dans vos futurs projets raquo
laquo Dans ce tutoriel consacreacute agrave Motion de la suite drsquoApple Final Cut Pro nous allons apprendre agrave reacutealiser une animation de logo en utilisant les bases du logicielraquo
25
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
05 2egraveme animationPour cette 2egraveme animation nous allons ensuite animer le fichier laquo logo2 raquo
qui repreacutesente la lettre T Seacutelectionnez-le mettez vous agrave 0s dans la time
line puis retournez dans lrsquoinspecteur et dans laquo transformer raquo puis laquo posi-
tion raquo mettez la variable X agrave -1000 pixels et ajoutez une image cleacute Mettez
vous 1s05 dans la timeline et mettez la variable X agrave 0 pixels Gracircce agrave cette
manipulation nous avons reacutealiseacute une animation de positionnement nous
le voyons gracircce agrave la flegraveche rouge dans le visualiseur qui montre le chemin
que prend la lettre T
Ate
lier
Aud
iovi
suel
Init
iati
on a
u lo
gici
el M
otio
n
03 Ajout drsquoun arriegravere-planNous allons ensuite importer un arriegravere-plan Nous choisirons celui intituleacute
laquo Canvas raquo qui se situe dans le menu laquobibliothegraveque raquo puis laquo contenu raquo
laquo image raquo laquo folio raquo et laquo Canvas raquo Faites importer puis redimensionnez le
pour qursquoil soit de la mecircme taille que la videacuteo Puis deacuteplacez-le en dessous
des autres calques pour faire reacuteapparaicirctre le logo dans la timeline
04 1egravere animationPassons agrave la phase de lrsquoanimation Seacutelectionnez en 1er le fichier laquo logo1 raquo puis
allez dans le menu laquo inspecteur raquo et laquo proprieacuteteacutes raquo Crsquoest ici que nous allons
animer le fichier gracircce agrave des images cleacutes Placez-vous au temps laquo 0s raquo Retour-
nez dans lrsquoinspecteur et dans laquo transformer raquo laquo eacutechelle raquo mettez-le agrave 0 puis
ajoutez une image cleacute gracircce au petit losange agrave droite Voir image Placez-vous
ensuite agrave 2s sur la timeline et mettez lrsquoeacutechelle agrave 65 Pour finir descendez dans
lrsquoinspecteur et affichez laquo controcircle du temps raquo et mettez la vitesse agrave 200 Voilagrave
la 1ere animation est termineacutee
26
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
07 Et voilagrave crsquoest termineacute Notre animation est maintenant termineacute si vous voulez la montrer agrave vos amis
crsquoest simple aller dans le menu laquo partager raquo et seacutelectionnez laquo exporter le film raquo
ou utilisez le raccourci clavier laquo cmd + E raquo Laissez les reacuteglages par deacutefaut et faite
suivant donnez un titre agrave votre animation et enregistrer
Vous avez reacuteussi votre premiegravere animation sur le logiciel Motion pour voir le rendu final rendez vous ici
06 3egraveme animation
Faite la mecircme chose pour le dernier fichier laquo logo3 raquo pour la lettre L il nrsquoy a que
les reacuteglages de la variable X qui change A 0s mettez X agrave 1100 pixels et agrave 1s05
mettez X 0 pixels
laquo A vous de jouer maintenant en reacutealisant vos propres logos animeacutes raquo
Atelier A
udiovisuelInitiation au logiciel M
otion
Si vous aussi vous souhaitez reacutealiser des animations le logiciel Motion 5 est disponible ici pour 4499 euro seulement
27
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
WEB
LEWEBprog MOBILEjeux
LE MONDE DU
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
DO
SSIER WEB
5 PLU
GIN
S JQU
ERy PO
UR
VO
TR
E SITE
5 plugins jQuery pour votre siteAu jour drsquoaujourdrsquohui les sites internet sont de plus en plus eacutevolueacutes et complexes Qui dit complexe dit laquo plus long agrave reacutealiser raquo Crsquoest pourquoi je vais vous preacutesenter 5 plugins jQuery pratiques estheacutetiques et qui vous faciliteront la tacircche
Petit rappelLe jQuery est une librairie Javascript visant agrave simplifier les documents HTML agrave ameacuteliorer la gestion des eacuteveacutenements et les animations Cette librairie contrairement au Javascript (dont lrsquoutilisation pourrait deacutecourager nombres de programmeurs deacutebutants) est simple drsquoutilisation et de compreacutehension De plus cette librairie est mis agrave jour reacuteguliegraverement et son poids tregraves leacuteger permettra une navigation fluide et rapide sur votre siteAlors qursquoattendez-vous pour lrsquoutiliser
Un dernier mot avant de vous preacutesenter ces plugins pour utiliser les plugins jQuery vous devez teacuteleacutecharger (gratuitement bien sucircr) la librairie jQuery puis la placer sur votre site Suite agrave quoi vous devrez appeler entre les balises ltheadgt de votre document HTML la librairie en y entrant cette commande
ltscript type=laquotextjavascriptraquo src=laquoscriptsjqueryminjsraquogt ltscriptgt
Nous pouvons enfin passer aux plugins jQuery agrave avoir sous la main pour creacuteer un site dynamique et interactif
Le laquo Must Have raquo des plugins jQuery pour votre site
1 SlideJS
SlideJS est un plugin jQuery permettant de creacuteer des lsquoslidesrsquo crsquoest-agrave-dire une sorte de diaporama drsquoimages Ce plugin ultra-connu vous permettra de creacuteer de lrsquointeractiviteacute entre vous et vos visiteurs Il est simple drsquoutilisation et vous trouverez les meacutethodes drsquoinstallation sur leur siteSlidesjscom
2FitVidJS
FitVid est une visionneuse videacuteo dite leacutegegravere Contrairement agrave drsquoautres visionneuses videacuteos comme celle de youTube ou de DailyMotion celle-ci est programmeacutee agrave lrsquoaide de HTML5 contrairement agrave ces preacutedeacutecesseurs codeacutes en Flash Flash Mais si Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaicirctre dans les anneacutees agrave venir
La grande innovation de cette visionneuse est qursquoelle est lsquores-ponsiversquo Crsquoest-agrave-dire que la taille (largeur) de la visionneuse srsquoadapte en fonction de la reacutesolution de votre ordinateur et de la taille de votre fenecirctre Fitvidsjscom
3 jQuery Scroll Path
jQuery Scroll Path est un plugin qui permet de deacutefinir un che-min de navigation sur votre site web Baseacute sur le mecircme sys-tegraveme que les canvas il vous permet de dessiner les chemins gracircce aux commandes moveTo et LineTo de lrsquoAPI JavaScript Jquery Scroll Path est une sorte de Prezi (pour les connais-seurs) en JavaScriptExemple
4 Menu dEroulant avec jQuery et CSS3
Ne vous est-il jamais arriveacute de visiter un site et en parcourant le menu drsquoavoir un autre menu imbriqueacute Bien sucircr que si au delagrave de lrsquoaspect estheacutetique ce genre de menu clarifie la navi-gation et la hieacuterarchisation du site Cela permet eacutegalement drsquoameacuteliorer le reacutefeacuterencement de votre site
Lrsquoinstallation de ce plugin nrsquoest cependant pas aussi simple que celle des plugins preacuteceacutedemment citeacutes Pour plus drsquoinfor-mations je vous conseille de visiter le site HTMLdrivenet
5 BigVideojs
BigVideojs est un plugin permettant de placer en fond de votre site une videacuteo afin de mettre en avant vos projets vos vacances etc Il utilise cependant de nombreux autres fi-chiers javascript lrsquoAPI de Videojs jQuery et jQuery UI (Inter-face Utilisateur) Vous devrez donc vous assurez de posseacuteder chacun de ces fichiers sur votre site
Consulter le site de lrsquoauteur
Vous en voulez plus Les 5 prochaines preacutesentations de plugins jQuery arriveront dans le Multiclics 2Drsquoici lagrave jQueryez-bien
29
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
PR
ESEN
TAT
ION
WEB
G
OO
GLE
VO
IT V
RA
I AV
EC I
NG
RES
S Google voit vrai avec Ingress
Ingress le nouveau jeu mobile agrave reacutealiteacute augmenteacutee de Google et deacuteveloppeacute par Niantic Labs connaicirct un franc succegraves encore en phase de becircta fermeacutee le jeu ne devrait pas voir le jour avant le printemps 2013
SynopsisUne nouvelle force inconnue du nom de laquo Shaper raquo est arri-veacutee sur notre planegravete la population se seacutepare alors en deux camps Drsquoun cocircteacute les reacutesistants qui luttent contre la prise de controcircle de la Terre par cette eacutenergie De lrsquoautre les illumineacutes partisans de lrsquoutilisation du laquo Shaper raquo
Une laquo guerre de territoire raquo srsquoengage alors entre les deux camps pour vaincre lrsquoautre il faudra capturer tout au long de vos deacuteplacements des portails qui permettront drsquoagrandir le territoire A la suite vous pourrez augmenter les deacutefenses de vos portails Le but du jeu reste neacuteanmoins de collaborer avec sa faction pour libeacuterer le monde entier de vos ennemis Test
Pour vous lrsquoeacutequipe Multiclics lrsquoa testeacute dans les rues bas nor-mandes Lrsquoutilisation est tregraves simple il suffit juste de se deacute-placer dans la rue vers un portail geacuteneacuteralement placeacute agrave un bacirctiment historique puis de le laquo hacker raquo Un interface tregraves futuriste et ludique utilisant les donneacutees de Google Map et de Google StreetView lequels vous permettront de trouver facilement les portails Le seul beacute-mol reacuteside dans le nombre de portails existants En effet plus votre ville est grande plus il y a de portails les habitants des petites villes sont donc pour lrsquoinstant peacutenaliseacutes devant partfois parcourir quelques kilomegravetres pour trouver un de ses preacutecieux portails
Aperccedilu du jeu
A noter toutefois que le jeu nrsquoest actuellement disponible que pour les teacuteleacutephones Android et teacuteleacutechargeable sur le portail de teacuteleacutechargement Google Demandez degraves maintenant votre accegraves agrave la becircta choisissez votre camp et cautionnez les agissements de votre faction
Carte du Monde - (c) Ingress
Interface de jeu - (c) Ingress 30
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
PR
ESENTAT
ION
WEB
CO
NST
RU
CT 2 - LA FIN
DES JEU
X FLA
SH
Il nrsquoa jamais eacuteteacute aussi facile de creacuteer un jeu gracircce agrave Construct 2
Qui nrsquoa pas voulu au moins une fois dans sa vie creacuteer un petit jeu videacuteo Avant il existait des lo-giciels comme RPG Maker qui vous permettait de creacuteer plus ou moins simplement un jeu ( qui se reacuteveacutelait ecirctre une pacircle copie de Ragnarok 1) Deacute-sormais il y a Construct 2 deacuteveloppeacute par Scirra un logiciel vous permettant de creacuteer des jeux videacuteo 2D gracircce agrave leur moteur de jeu en HTML5 Et le tout sans programmer
Cliquez sur les exemples ci-dessous pour y jouer laquo Ca mrsquointeresse je suis un peu geek dans lrsquoacircme ougrave peut-on trouver des jeux reacutealiseacutes avec Construct 2 ainsi qursquoun peu drsquoaide raquo
Le site de Scirra lrsquoentreprise qui a conccedilu Construct 2 est pour cela une vraie mine drsquoor La partie Arcade du site recense de nombreux jeux reacutealiseacutes avec ce logiciel vous pouvez y jouer directement et uploader vos jeux Gracircce agrave ce site vous trou-verez des tutoriaux complets sur les questions que tout bon deacutebutant dans le domaine se pose mais aussi des questions plus pousseacutees
Je vous invite donc agrave consulter leur site et drsquoessayer quelques jeux qui restent malgreacute leur simpliciteacute des jeux tregraves reacuteussis
Scirracom
(c) Pinkmanrsquos Lab
(c) AirScape
laquo Mais comment ccedila fonctionne raquo
Je mrsquoexplique Construct 2 est un logiciel teacuteleacutechargeable gra-tuitement une fois ouvert il vous permet gracircce agrave la meacutethode du glisser-deacuteposer drsquoy introduire directement des eacuteleacutements du deacutecors comme le background lrsquoimage de votre heacutero etc Et gracircce aux options inclus dans le jeu vous pouvez deacutefinir les fonctions qursquoauront vos images un background fixe un heacutero qui se manie gracircce aux touches du clavier et y inseacuterer des ennemis ou encore deacutefinir un sol par exemple
laquo Bon drsquoaccord mais des jeux en Flash restent plus eacutelaboreacutes raquo
Crsquoest vrai ne vous attendez pas agrave faire un Donkey Kong ou un Super Mario Bross Tout simplement car les possibiliteacutes du logiciel sont limiteacutees mecircme si la version payante deacutebloque plus drsquooptions que la version gratuite Mais le principal atout est qursquoil ne neacutecessite pas de connaissances en programma-tion et ccedila crsquoest le premier point fort de Construct 2 et qursquoil utilise un moteur graphique pour HTML5 A lrsquoheure des ta-blettes des smartphones et de la disparition de Flash vous trouverez en Construct 2 un laquo game-maker raquo simple intuitif et surtout GRATUIT
31
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Le Reacutefeacuterencement une eacutetape cleacute pour faire vivre un site
Le reacutefeacuterencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web pourtant crsquoest un des meilleurs moyens pour apporter agrave un site web ce qursquoil lui faut pour vivre des visiteurs
Si je vous dis Google vous me reacutepondez
Moteur de recherche of course sir Bon maintenant crsquoest vrai que Google est LE geacuteant du web et srsquoest beaucoup diversifieacute Mais agrave la base crsquoeacutetait bel et bien un moteur de recherche programmeacute par des geeks agrave lunettes dans un garage comme le veux la tradition Ameacutericaine A noter que maintenant Google deacutetient environ 60 des parts de marcheacute en matiegravere de moteur de recherche Il est de loin concurrenceacute par yahoo et Bing (Microsoft) qui tournent aux alentours des 10 agrave 15
De nos jours la recherche sur Google est devenue un automatisme et des millions de personnes lrsquoutilise quotidiennement pour trouver des sites qui correspondent agrave leurs attentes Crsquoest donc un des leviers les plus apporteurs de trafic (visites) pour nrsquoimporte quel site Mecircme si lrsquoarriveacute des reacuteseaux sociaux commence agrave avoir un eacutenorme poidshellip
Google a donc la lourde tacircche de laquo trier raquo le web pour vous donner une liste de sites les plus pertinents correspondant agrave votre requecircte
Pour ce faire Google utilise un algorithme tregraves puissant pour fournir (selon luihellip) les meilleurs reacutesultats On comprend donc vite lrsquoutiliteacute drsquoecirctre placeacute en 1egravere position pour un mot-cleacute correspondant agrave son secteur drsquoactiviteacute plutocirct qursquoagrave la 12egraveme pagehellip En effet des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la premiegravere page de reacutesultats de Google qui affiche pour information 10 reacutesultats
Crsquoest ici que le reacutefeacuterenceur intervient son meacutetier optimiser un site pour que Google en tombe amoureux et le reacutecompense en lui donnant une bonne position dans son moteur de recherche
Le reacutefeacuterenceur un meacutetier agrave part entiegravere
Avec le nombre de sites qui ne cesse drsquoaugmenter il faut savoir se faire une place parmi les milliards qui existent Il ne suffit pas drsquoavoir un site magnifique pour reacuteussir il faut des visiteurs Toute entreprise agrave besoin de clients pour vivre il en est de mecircme pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients
Le reacutefeacuterenceur doit donc tout faire pour garantir agrave un site de bien se positionner sur les moteurs de recherche Comment En donnant agrave Google (surtout agrave son algorithme) ce qursquoil aime et ce qursquoil attend drsquoun site web
1egravere eacutetape La seacutelection des bons mots-cleacutes agrave cibler
Pour commencer le reacutefeacuterenceur doit savoir seacutelectionner les meilleurs mots-cleacutes agrave cibler pour chaque site web Cette eacutetape de laquo lrsquoanalyse de mots-cleacutes raquo se fait normalement en amont de la creacuteation drsquoun site web et est primordiale pour ne pas faire de becirctises par la suite
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
32
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Et oui Il ne suffit pas de dire laquo je choisis tel ou tel mot-cleacute parce qursquoil a 500000 recherches par mois sur Google raquo souvent les mots-cleacutes les plus geacuteneacuteriques sont les plus compeacutetitifs et demandent donc beaucoup drsquoefforts et de temps pour avoir des reacutesultats satisfaisants et le temps crsquoest de lrsquoargent Un des meilleurs outils fourni par Google lui-mecircme pour savoir combien de fois par mois est chercheacute un mot-cleacute en particulier se nomme Google Keyword Tool
Une fois cette liste drsquoexpressions agrave cibler eacutetablie le reacutefeacuterenceur va les reacuteutiliser tout au long du projet Vous vous en doutez lrsquoalgorithme de Google serait un peu rouilleacute srsquoil deacutecidait drsquoafficher un site e-commerce qui vend des savons de Marseille sur la requecircte laquo chaussures vintage pour homme raquohellip La faccedilon la plus simple pour se positionner sur un mot-cleacute en particulier est de montrer que le site en question traite bien de cette theacutematique
Le SEO On-Page la premiegravere partie de lrsquoeacutequation
laquo SEO On-Page raquo et laquo SEO Off-Page raquo sont les deux piliers du travail du reacutefeacuterenceur ce sont 2 expressions qui deacutefinissent deux types drsquoactions agrave apporter agrave un site pour preacutetendre agrave un bon positionnement sur Google
Celui agrave reacutealiser avant lrsquoautre est le SEO On-Page crsquoest en fait tout ce qursquoil y a faire SUR (On-Page) le site en lui-mecircme pour faire plaisir agrave Google Et avec ce dernier crsquoest toujours la mecircme histoire il faut essayer de placer ses mots-cleacutes un peu partout sur son site tout en ne bourrinant pas comme un goret sous peine de sanction par Google En effet le bougre nrsquoest pas si becircte si vous abusez de son algorithme il le deacutetecte et vous envoie vers les profondeurs des reacutesultats de recherches Parfois pire votre site peut rejoindre la laquo sandbox raquo (bac agrave sable) de Google crsquoest agrave dire que votre site est compleacutetement rayeacute de lrsquoindex du moteur de recherche Mais nrsquoayez pas peur il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir
Les principaux points agrave respecter pour un bon SEO On-Page
1
2
Dans lrsquoensemble avoir un contenu unique bien reacutedigeacute et pertinent agrave la theacutematique sur laquelle on veut se positionner
La balise lttitlegt de chaque page du site doit ecirctre correctement renseigneacutee crsquoest ce que voit lrsquointernaute sur Google quand il fait une recherche (lien bleu souligneacute) On essaye au mieux de placer ses mots-cleacutes cibles et de ne pas deacutepasser les 70 caractegraveres
3
La balise meta description est le petit texte qui deacutecrit votre page dans les reacutesultats de recherche elle doit aussi ecirctre optimiseacutee pour les moteurs de recherche eacutegalement pour chaque page Attention agrave ne pas deacutepasser les 250 caractegraveres sinon le texte sera tronqueacute
4LrsquoURL de vos pages est aussi important Une page avec lrsquourl laquo moncanardfrcategorie55-produit=id632 raquo se positionnera moins bien que celle-ci laquo moncanardfrgabionsgabion-k2000- raquo
5
La hieacuterarchisation du contenu est sucircrement lrsquoun des paramegravetres les plus importants agrave prendre en compte dans le SEO On-Page Je parle ici des balises de titres HTML qui srsquoeacutetendent de H1 agrave H6 Il faut donc bien structurer son contenu avec plusieurs balises de titres chacune toujours optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
6Bien soigner lrsquoattribut alt des images en y indiquant une phrase deacutecrivant lrsquoimage (et pourquoi pas avec un mot-cleacute dedans optimiseacutee pour les mots-cleacutes deacutefinis dans lrsquoanalyse de mots-cleacutes
7Ne pas heacutesiter agrave mettre en gras les mots-cleacutes dans la page pour encore mieux indiquer agrave Google que ce sont ces mots que lrsquointernaute ne doit pas manquer
8Un maillage interne efficace crsquoest agrave dire que chaque page doit si possible faire des liens vers drsquoautre pages de ce mecircme site
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
33
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Voici en grande partie le travail du reacutefeacuterenceur sur le site en lui-mecircme Il y a bien sur encore des choses agrave dire mais ce sont vraiment les principales actions agrave apporter On remarque eacutegalement que le reacutefeacuterenceur doit ecirctre agrave lrsquoaise avec au minimum le HTMLCSS et de temps en temps le PHP et le Javascript
Une fois le SEO On-Page effectueacute le reacutefeacuterenceur va srsquoattaquer agrave la partie qui va influencer le plus le bon positionnement drsquoun site dans les moteurs de recherche le SEO Off-Page
Le SEO Off-Page des liens des liens toujours plus de liens
Voici le nerf de la guerre pour influencer le plus Google dans sa deacutecision et donc garantir agrave son site le plus de visites possibles les liens retour ou backlinks en anglais crsquoest plus styleacute )
Les backlinks sont tout simplement des liens sur drsquoautres sites qui renvoient vers celui agrave positionner Plus vous avez de backlinks plus Google se dit laquo tiens lui il est mentionneacute beaucoup de fois sur la toile crsquoest qursquoil doit fournir un bon contenu et que les internautes lrsquoappreacutecient allez hop je te mets en premiegravere page raquo
Si vous avez compris ccedila vous avez compris comment fonctionne lrsquoalgorithme de Google agrave vous les $$$ les belles voitures et les filles qui vont avec Bon okhellip Ce nrsquoest pas si simple que ccedila en faitDeacutejagrave il faut les trouver ces liens Et crsquoest le plus gros travail du reacutefeacuterenceur qui consiste souvent agrave faire des partenariats avec drsquoautres sites laquo tiens je trsquoeacutecris un super article sur la nouvelle faccedilon de faire maigrir un chat en eacutechange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigrirvotrechatavecdespissenlitsfr raquo
On peut eacutegalement faire figurer son site dans la multitude drsquoannuaires en ligne pour obtenir un miseacuterable petit lien poster des commentaires sur des blogs etchellip Le meilleur moyen est encore de faire ce qursquoon appelle du laquo linkbaiting raquo dans le jargon du SEO plus simplement crsquoest faire le buzz On trouve une ideacutee geacuteniale qui va faire parler drsquoelle toute seule tout le monde fait des backlinks vers votre site sans que vous le demandiez la nouvelle se repend comme une traicircneacutee de poudre sur les reacuteseaux sociaux crsquoest merveilleux crsquoest magique et crsquoest le recircve de tout reacutefeacuterenceur de reacutealiser une campagne de ce genre Mais bon encore faut-il la trouver cette ideacutee parce que lorsque votre client agrave un site pour vendre des abris de piscine il est difficile de faire le buzz
Le lien est-il isoleacute dans la page (lien en footer) ou au milieu drsquoun contenu pertinent et correspondant au site cible (dans le corps drsquoun article)
Lrsquoancre ou anchor text du lien est-elle optimiseacutee pour le SEO cliquez ici vs fromage de savoie
Le site sur lequel se situe le lien est-il de bonne qualiteacute Pour le savoir Google a instaureacute son propre systegraveme de nota-tion pour les sites web le PageRank (PR) Il attribut donc pour chaque page du web une note de 0 agrave 10 (0 = nul et 10 = seule-ment Googlecomhellip) Un lien sur une page avec un PageRank de 6 est de tregraves bonne qualiteacute et il faudra en gros beaucoup plus de liens avec un PR 0 pour lrsquoeacutegaler
Combien de liens sortants sont eacutegalement sur cette page Si le backlink est sur une page qui comporte 1000 autres liens le laquo jus raquo fournit par cette page se divisera sur tous ces liens Au contraire un backlink sur une page qui comporte uniquement 30 liens sortants aura beaucoup plus de poidst
A savoir eacutegalement que chaque backlink nrsquoa pas le mecircme poids loin de lagrave Il y a ici plusieurs paramegravetres agrave prendre en compte
Et quelques dernier petits conseils en matiegravere de netlinking (construction de liens) des liens qui viennent de sites russes et qui plus est traitent de viagra crsquoest pas bon du tout mais alors pas du tout Il ne manquerait plus que le nombre de ces liens soit aux alentours des 10000 en une journeacutee et Google nrsquoheacutesitera pas agrave vous faire passer par la case sandbox Sans plaisanter ccedila arrive vraiment mais souvent dans le but de faire couler un site une technique laquo blackhat raquo qui se nomme le negative SEO pas tregraves gentil quand ccedila vous arrive (
ATEL
IER
WEB
LE
REacuteF
EacuteREN
CEM
ENT
34
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
Ne jamais sous estimer la puissance du reacutefeacuterencement
Pour conclure cet article qui doit bien srsquoarrecircter agrave un moment je tenais agrave dire que le reacutefeacuterencement est vraiment une pratique agrave ne neacutegliger sous aucun preacutetexte et ce degraves le deacutebut drsquoun projet web En effet si lrsquoon y reacutefleacutechi degraves le deacutebut le travail sera toujours important mais beaucoup moins que si lrsquoon doit faire le reacutefeacuterencement drsquoun site deacutejagrave existant
Ensuite le meacutetier de reacutefeacuterenceur commence agrave ecirctre reconnu en France mais il existe peu de diplocircmes deacutedieacutes agrave cette activiteacute La plupart des reacutefeacuterenceurs ont appris sur le tas via internet via des connaissances etchellip Comme vous lrsquoavez vu crsquoest un meacutetier aux multiples facettes le deacuteveloppement web
doit faire un minimum parti de son bagage de compeacutetences la communication et le marketing sont eacutegalement tregraves importants Il faut aussi savoir ecirctre tregraves curieux et se tenir au courant des derniegraveres avanceacutees dans le domaine puisque lrsquoalgorithme de Google change tregraves souvent et apporte ainsi beaucoup de nouveauteacutes bonnes comme mauvaises pour notre meacutetierhellip
Et pour terminer ne vous faites surtout pas avoir par certains magiciens du reacutefeacuterencement qui vous garantissent des miracles du style laquo Pour euro97 je vous place votre site en 1egravere page de Google en seulement 1 semaine raquo Le reacutefeacuterencement est un vrai travail de longue haleine qui se deacuteroule sur le long terme Plus les mots-cleacutes agrave positionner sont compeacutetitifs plus il faudra du temps pour preacutetendre agrave un bon positionnement sur les moteurs de recherche )
ATELIER W
EB LE R
EacuteFEacuteREN
CEM
ENT
Tanguy Dupreacute
35
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2
MERCION SE
retrouveLE 28 FEVRIER
POURMULTICLICS 2