Multiclics #1 Le Magazine des néo-médias by multi clics

Message de remerciement Tout d’abord, merci de lire le premier numéro de Multiclics, et j’espère que vous pourrez lire avec plaisir les 2 prochains numéros. Je tiens également à remercier les personnes extérieures qui ont participé à l’élaboration du magazine: Tanguy Dupré, Pierre Leverrier et Teddy Voisin. Je vous laisse découvrir notre magazine, bonne lecture !

Bienvenu dans Multiclics #1 Commençons par un petit rappel des faits... Multiclics est un webzine dédié aux néo-médias, il comporte 4 composantes : l’infographie 2D, 3D, Audiovisuel et Web. Et cela tombe bien car pour chaque composante, Multiclics possède son spécialiste. L’équipe est composée de 4 étudiants issus du DUT Services et Réseaux de Communication de Saint-Lô. On y retrouve Alexis Dunas, rédacteur en chef de la partie 2D, Benoît Madeleine rédacteur en chef de la partie 3D, Thibault Lebouteiller rédacteur en chef de la partie Audiovisuel, Simon Michel rédacteur en chef du magazine et de la partie web. Nous avons conçu ce magazine dans le but d’aider les néophytes dans ces domaines. Chaque partie du magazine présente des ressources, des nouveautés, des comparatifs, des dossiers sur des sujets ciblés ainsi que des tutoriaux. Notre but est que vous, lecteurs, puissiez élargir votre champ de compétences et vos connaissances en terme de culture média. Et n’oubliez pas, notre webzine est avant tout un webzine collaboratif, alors si vous souhaitez participer à l’expérience Multiclics, contactez nous à contact@multiclics.fr ! Simon Michel Redacteur en chef

Sommaire Infographie 2D Dossier 2D : 570 Méga-pixels pour découvrir l’univers - page 5 Scandale chez Ikéa - page 6 Bien choisir sa tablette graphique - page 7 Atelier 2D : Réaliser Mr Multiclics sous Illustrator - page 8

Infographie 3D Dossier 3D : Comparaison des grands logiciels de créations 3D - page 13 Dynamixyz - page 15 Sculptéo - page 16 Atelier 3D : Modéliser le robot Multiclics - page 17

AudioVisuel Dossier AudioVisuel : La GoPro HD Hero 3 - page 22 Ipad mini - page 23 Atelier AudioVisuel : Animer un logo sous Motion - page 24

Web Dossier Web : 5 Plugins jQuery pour améliorer votre site - page 29 Google voit vrai avec Ingress ! - page 30 Construct 2 la fin des jeux en Flash - page 31 Atelier Web : Le référencement: une étape clé pour faire vivre un site - page 32

Le monde de la 2D

INFOGRAPHIE 2D

Infographie 2D Actu

Dossier Infographie 2D 570 Méga-pixels pour découvrir l’univers

570 Méga-pixels pour découvrir l’univers Selon les scientifiques l’univers serait composé à 72% d’une mystérieuse « énergie noire », dont on ne sait encore pas grand chose, mais qui passionne le monde scientifique. La dernière invention des chercheurs dans ce domaine est un appareil photo ultra-perfectionné conçu pour percer le mystère de cette énigmatique énergie.

La «Dark Energy Camera» est l’appareil photo le plus sensible jamais créé pour fournir des images parfaites de l’Univers. Cet appareil a été conçu dans les laboratoires de Fermilab dans l’Illinois par la firme « Dark Energy Survey ». Fleuron des APN (Appareil photo numérique), ce fabuleux appareil photo est équipé de 74 capteurs CCD (ChargeCoupled Device, ou dispositif à transfert de charge) pour une résolution incroyable de 574 mégapixels très exactement. Cette performance scientifique permettra de capturer des clichés inédits jusqu’à huit milliards d’années lumière. Perchée au sommet d’une montagne au Chili, la « Dark Energy Camera » vient s’ajouter au télescope « Blanco 4m », et fait de ce dernier l’outil d’observation spatial le plus puissant au monde.

La mission principale de ce nouveau « joujou » scientifique à plusieurs millions de dollars consiste à examiner ce qu’il y a en dehors de la voie lactée afin de mieux comprendre l’expansion de l’univers. Cependant, les chercheurs espèrent que les photos obtenues permettront également d’en savoir un peu plus sur la nature de cette mystérieuse énergie noire qui demeure inconnue jusqu’à maintenant.

Les scientifiques misent donc sur cet appareil ultra-perfectionné pour apporter un peu de lumière sur les mystères du cosmos.

www.darkenergysurvey.org

Dossier Infographie 2D Enorme scandale chez Ikéa

Enorme scandale graphique chez IKEA ! L’enseigne d’ameublement suédoise IKEA prise en flagrant délit de trucage graphique digne des plus grandes heures de l’époque stalinienne. Pour pouvoir vendre ses produits dans le monde entier et étendre son image à l’international, nombre de marques sont prêtes à tout : s’adapter à des climats plus ou moins rudes, manger du riz et autres chiens, ou encore s’enfoncer un chapeau de cow-boy sur la tête...

Chez IKEA, marque suédoise bien connue pour ses meubles en kit aux noms imprononçables, on est prêt à tout, même à supprimer les femmes des campagnes de publicité. Étonnant pour une enseigne issue d’un pays ou l’égalité homme-femme n’est pas qu’une simple déclaration et où les femmes ministres ne sont pas nommées pour atteindre un quota, mais pour accomplir un travail. Ainsi, pour vendre ses meubles en Arabie Saoudite, pays de la stricte ségrégation homme-femme, la multinationale suédoise a eu recours à Photoshop pour faire disparaître toutes ces femmes qu’on ne saurait voir !

Chez IKEA, la réaction ne s’est pas fait attendre. Le groupe s’est confondu en excuses et a indiqué qu’il allait revoir et rectifier ses processus dans les délais les plus brefs. Dans un communiqué, Inter IKEA Systems regrette ce qui s’est passé et comprend que les gens soient indignés. Le groupe affirme que son franchisé saoudien n’avait pas réclamé que les photos soient retouchées. L’erreur s’est produite pendant le processus de travail avant la présentation du projet de catalogue IKEA pour l’Arabie saoudite.

L’affaire a fait grand bruit en Suède où l’on ne badine pas avec ces pratiques, qui reviennent tout simplement à faire de la ségrégation. Ewa Björling, ministre du commerce extérieur a déclaré : “cela ne se fait pas de supprimer ni d’effacer les femmes de la réalité. Si l’Arabie Saoudite n’autorise pas aux femmes d’être vues, entendues ou de travailler, elle se passe de la moitié de son capital intellectuel”, tadis que Birgitta Ohlsson, ministre des affaires européennes a qualifié ce comportement de “moyen-âgeux”.

www.ikea.com Sources: Graphiline.com

Infographie 2D Comparatif tablette graphique

Dossier Infographie 2D Bien choisir sa tablette graphique

Bien choisir sa tablette graphique Vous êtes un dessinateur chevronné ou amateur et la sensation d’un crayon sur le grain d’une feuille de papier vous manque quand vous travaillez sur votre logiciel favori ? Alors une tablette tactile semble la meilleure solution pour retrouver la fluidité du trait sur papier, directement sur l’écran. Cependant les écarts de prix peuvent surprendre, voire même rebuter les néophytes. Comment justifier qu’une tablette, de même marque, passe d’un modèle de 40 euros à 400 euros ? La taille

Il en existe différentes surfaces de tablette, justifiant en partie les différences de prix. Les modèles 1er prix sont des tablettes A6 4/3 soit une surface active d’environ 13 x 10 cm. Ce format est bien adapté pour les écrans de même ratio : il est hélas passé de mode. Il ne correspond plus qu’aux ‘’anciens’’ LCD 15/17/19 et 20 pouces. Contrairement aux idées reçues, ce format n’est pas forcement moins précis. La différence majeure est l’amplitude de mouvement que vous aurez à faire : sur une tablette A4, pour aller d’un bout à l’autre de l’écran vous devrez faire un grand geste, alors que sur une A6 un petit mouvement de poignet suffira. Depuis quelques années, la mode est passée au wide (format Cinéma) avec des tablettes A5 (148mm × 210mm) ou A4 (210mm X 297 mm) beaucoup plus chères. Cependant une tablette A5 ne vous sera d’aucune utilité à moins d’en avoir un usage professionnel ou si la taille de votre écran le justifie au risque, de perdre de la précision : si vous travaillez par exemple, sur un 22 pouces ou supérieur.

La marque

Wacom est une garantie, ce sont les leaders du marché de la tablette graphique. Leurs produits sont résistants, précis et esthétiques. Les NGS sont correctes, sans valoir Wacom tant au niveau de la solidité que de la précision.

Quant à Trust, Aiptek ou Genius elles sont, d’après leur réputation, à fuir comme la peste pour leur manque de précision et leur fiabilité sommaire.

La précision du stylo

Il s’agit en gros de la finesse avec laquelle la tablette pourra reproduire votre geste (léger, appuyé, forcé, …). 512 niveaux de pression sont le minimum exigible, ne descendez pas en dessous. Même si on obtient une meilleure précision avec 1024 niveaux, c’est suffisant dans la plupart des cas, surtout si vous débutez. Les stylos les plus évolués ont des mines remplaçables au fur et à mesure de leur usure. Plusieurs jeux de mines peuvent également être proposés, pour permettre à l’utilisateur de retranscrire au mieux le rendu de son papier préféré. Si vous êtes un débutant, et que vous vous apprêtez à acheter votre premier bébé, je vous recommanderais de commencer avec une petite tablette pas trop chère. En effet, ça ne sert à rien de débuter avec une super tablette de pro à 600 euros. Ca fait envie bien sur, mais vous ne vous rendrez probablement pas compte de sa qualité. Autant commencer par une petite A6 d’entrée de gamme à 40€, comme la Bamboo de chez Wacom, avec laquelle vous pourrez faire vos armes, progresser et que vous rentabiliserez très vite. Deux ans plus tard, vous pourrez craquer pour la dernière Intuos et ressentir toute la différence.

www.wacom.com Sources : Lesnumériques.com

Atelier Infographie 2D Tutoriel Illustrator

Réaliser Mr. Multiclics Sur Adobe Illustrator Dunas Alexis

« Dans ce tutoriel consacré à Adobe llustrator nous allons apprendre comment utiliser des formes simples pour réaliser une image plus complexe. Armez-vous de votre plume(P) et allons-y ! »

Etudiant, illustrateur et graphiste

Le mot de l’auteur : «Rien de bien compliqué dans ce tutoriel. Mr. Multiclics est entierement réalisé avec des formes simples ! Donc, à vos souris/stylets et c’est parti ! ».

01 Partir de formes simples Mr. Multiclics est fait à partir de formes très simples. Nous allons dans un premier temps réaliser ces formes. Prenez l’habitude de créer de nouveaux calques dans un nouveau dossier à chaque nouvelle forme et n’oubliez 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 tête! Il ne vous reste plus qu’à vous armer de votre outil Plume(P) pour tracer ces formes en sélectionnant la couleur de votre choix.

02 Les yeux Nous allons commencer par « donner vie » aux yeux. Avant tout, il vous faut cacher les autres calques. Pour ce faire : cliquez sur le petit icône en forme d’œil à droite de vos calques afin de les faire disparaître. Ceci étant fait, nous allons pouvoir ajouter du relief à ces yeux. Créez deux calques dans le même groupe que la forme des yeux, l’un nous servira pour les ombres et l’autre pour la lumière (high-lights). Commençons par les ombres : ici le but principal est de créer du relief que la lumières viendra rehausser. Sur le calque des ombres : créez des formes de croissant en bas à droite à l’intérieur de chaque œil à l’aide de l’outil Plume(P). Remplissez-les avec une couleur un petit peu plus foncée que la forme de base mais en faisant attention de rester dans les même. Pour la lumière, utilisez la même en variant la taille en fonction du volume et de la forme que vous souhaitez donner aux yeux

Les pupilles

Rien de moins compliqué ! Sur un nouveau calque, créez deux formes ovales dans les yeux et remplissez les avec du noir ou une autre couleur assez foncée. Créez 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 lumière. Libre à vous de lui dessiner les yeux bioniques ou le monocle de vos rêves!

Atelier Infographie 2D Tutoriel Illustrator

La bouche

L’une des partie les plus compliquées sans l’être vraiment, la bouche ou grille de Mr. Multiclics. Pour commencer, après avoir créé un nouveau calque créez votre forme de base (ici nous allons réaliser un genre de bouche d’aération à la sauce « space-marines ») avec la couleur de votre choix en restant dans les mêmes tons que les précédentes. Vous l’aurez compris, il s’agit une nouvelle fois de jouer avec les ombres et les lumières pour donner du volume et représenter les fentes d’une bouche d’aération. Dessinez de fines striures de couleur plus foncée et plus claire que la forme de base.

05 Détails de la tête Ici adaptez la forme et la couleur des ombres et lumières en fonction du volume et de la forme que vous souhaitez attribuer à votre personnage.

06 D’une 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 lumières. Pour cela même méthode qu’aux étapes précédentes à la différence près que les ombres ainsi que les lisérés de lumière viendront barrer les formes de bases en lui donnant un aspect de tuyau d’aspirateur. Encore une fois, libre à vous de réaliser vos propres formes de bras. Au passage : réalisez les ombres et les lumières sur les coudes et les épaules avec des formes plus grosses et plus arrondies pour leur donner un aspect bombé.

Atelier Infographie 2D Tutoriel Illustrator

Les pinces

Rien de beaucoup plus compliqué ici : l’étape la plus rapide de ce tutoriel! Faites preuve de votre sens de la perspective et créez des formes ressemblant à des fers à cheval ou autres aimants tout droit sortis d’un cartoon. Pour ce qui est des reliefs, essayer de réaliser vos formes pour donner un aspect carré et cubique à vos pinces.

Le corps

Vous avez réalisé le plus dur et ce n’est pas cette nouvelle étape qui devrait vous poser problème! Avant de commencer penser à garder de la place au centre du buste pour y inscrire votre signature. Ensuite, créez 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 l’effet arrondie de votre robot.

Signature

Ici, à vous d’apposer votre marque! Deux possibilités s’offrent à vous: la première est d’utiliser directement l’outil Texte(T), la seconde étant de faire votre lettre vous même a l’aide de l’outil Plume(P). Ceci étant fait, il ne vous reste plus qu’à définir les reliefs en jouant avec les reflets et leurs ombres.

Le curseur

Créez la forme d’un curseur de souris à l’aide d’un gris assez clair et attribuezlui un contour noir dans les vignettes appropriées. Puis dessinez les reflets de lumière dans une couleur plus claire sur un coté du curseur et les ombres d’une couleur plus foncée sur le coté opposé. Rien ne vous oblige à réaliser ce curseur et je vous encourage, encore une fois, à laisser libre cours à votre imagination pour réaliser des accessoires originaux à votre robot!

Pour le fun!

Pour la petite touche humoristique qui fera la différence, je vous conseille d’ajouter un petit accessoire sur la tête de votre robot en fonction du style que voulez lui attribuer. Pour réaliser l’antenne de Mr. Multiclics je me suis inspiré des vielles antennes de télévision pour rester dans l’esprit retro de notre mascotte.

Atelier Infographie 2D Tutoriel Illustrator

Note finale

Enregistrez votre fichier Illustrator. Puis ouvrez Photoshop et importer votre fichier Illustrator: Fichier> Importer> Votre fichier. Libre à vous de réaliser une ambiance ou un décor sur lequel vous viendrez greffer votre robot. Ajoutez des calques de réglage dégradé: Calque> Nouveau calque de réglage> Courbe de transfert de dégradé, avec une couleur violette partant sur du orange. Passez ce nouveau calque en mode de fusion Lumière tamisée ou Incrustation, selon votre préférence (ajustez l’opacité, si besoin). Il se produit un changement global au niveau de l’illustration, les calques de réglages vont donner une nouvelle teinte à l’image, plus cohérente.

Conseil

Importer sur Illustrator

Sur Illustrator, créez un nouveau document: Fichier> Nouveau> Document A4 au format portrait. Importer votre image de base (si vous partez d’un modèle ou d’un dessin): Fichier> Importer. De préférence sur le calque 1, puis double-cliquer sur ce calque. Une fenêtre apparaît, renommez le calque comme il vous convient (référence) et cocher « modèle ». Cette option permet une meilleure visibilité lors du passage en mode tracé du vectoriel.

« Ensuite libre à vous de choisir les couleurs pour l’habiller ou d’appliquer cette méthode à vos projets personnels »

Le monde de la 3D

Infographie 3D

Vous désirez débuter dans le monde de la 3D ? Vous ne savez pas quel logiciel utilisé ? Cet article est là pour répondre à ce besoin !

Dossier 3D Dynamixyz et motion capture

Comparaison des grands logiciels de créations 3D

Aujourd’hui, il existe une multitude de logiciels proposant d’évoluer dans le monde de la 3D. Nous parcourrons ici les trois plus connus (et probablement les trois meilleurs) en survolant les différences essentielles et en les comparant selon plusieurs points.

Maxon Cinema 4D Cinema 4D est un logiciel extrêmement riche et très intuitif. Ses principaux avantages selon moi sont : la compatibilité sur Mac OSX, la richesse et le nombre d’outils/modules directement intégrés, une facilité de manipulations des vues, une modélisation très simple et intuitive et enfin la clarté des options de chaque objet (textures, déformations, dynamique) ainsi qu’une hiérarchie très bien pensée. J’utilise personnellement Cinéma 4D pour toutes mes créations et j’en suis très satisfait. Il reste néanmoins très couteux et n’est donc pas adapté à tout le monde. Mais rassurez-vous, depuis le 11 juin 2012, MAXON a mis à disposition des étudiants une version très complète appelée Cinéma 4D Etudiant que vous pouvez vous procurer ici

Je rappelle que cette version gratuite ne doit pas être utilisée à des buts commerciales.

Modélisation Cinéma 4D apporte les fonctionnalités que la plupart des logiciels de création 3D digne de ce nom peuvent apporter. Mais nous remarquerons quelques exclusivités assez pratiques. Il est impossible de passer à côté de l’outil HyperNurbs qui permet de modéliser des objets plus ou moins complexes en un minimum de temps grâce à quelques lignes simples (Spline). Reliées entre elles, elles forment un objet tridimensionnel complexe travaillant avec des ngones – polygones avec un nombre illimités de côtés. Les HyperNurbs sont entièrement paramétrables et permettent d’obtenir des formes dites « organiques » très naturelles.

Animation L’animation sur Cinema 4D se fait d’une manière très simple: une ligne du temps avec des images clés pour chaque objet indiquant les nouvelles positions et déformations à adopter. Notons tout de même que chaque paramètre est séparé sur une piste propre, ce qui apporte une meilleure clarté et un confort supplémentaire lors de la création d’animation complexe. Il existe également l’animation non-linéaire qui permet de créer des animations par calque c’est-à-dire la possibilité de définir une animation complexe sur un claque, le bloquer et superposer des mouvements supplémentaires sur un second claque pour y ajouter des mouvements supplémentaires.

Rendu Le moteur de rendu de Cinéma 4D est célèbre pour sa rapidité et sa relative faible consommation de ressources. Il intègre le calcul de réflexion, réfraction, … et de nombreux modules peuvent être ajoutés pour accéder à diverses fonctionnalités comme un anticrénelage. De plus un système de rendu par réseau est inclu et est facilement mis en place. A noter aussi la présence d’un rendu multi-passes avancé permettant la création de différentes couches (canal alpha, ombres, réflexion, …) et d’un calcul du déplacement sous-polygonal très rapide permettant de créer des imperfections dans vos modèles 3D pour créer un rendu plus naturel et plus réaliste.

Dossier 3D Dynamixyz et motion capture

Autodesk 3D Studio Max Ce logiciel a pris une grande majorité du marché des logiciels de 3D et est utilisé par la plupart des designer 3D, celui-ci offre un éventail d’outils incroyables et très puissants. 3ds Max possède une grande communauté ce qui nous offre un grand nombre de tutoriels en ligne. Autodesk 3D studio offre également une version gratuite pour les étudiants que vous pouvez vous procurer ici

Modélisation

Animation

3D Studio Max est doté des outils les plus complets du secteur. Il offre la possibilité de créer des objets organiques et paramétriques basés sur les polygones, les splines et les NURBS (un peu à l’instar de Cinema 4D). Une centaine d’outils sont prévus pour la modélisation polygonale, ce qui rend ce logiciel très complet. De plus ProOptimizer diminue la complexité des objets jusqu’à 75 % sans aucune perte de détails.

Rendu

Nous retrouvons évidemment la timeline classique, avec ses images clés pour l’animation d’objets, mais le logiciel intègre de plus les animations procédurales qui permettent d’animer des foules et des bipèdes (CAT). Ensuite, il existe des outils de gestion de muscles, de peau et de squelettes (3ds Max bones, cinématique inverse, rigging, …) directement intégrés pour apporter une maîtrise très précise des animations de personnages et un résultat plus réaliste.

Le moteur de rendu haute performance est Quicksilver. Celui-ci permet des prévisualisations de qualités et de créer des éclairages photo-réalistes rapidement (via mental ray). On a également la possibilité de manipuler une région donnée dans le Viewport du logiciel et dans la mémoire d’image « Framebuffer » grâce à la fonction Reveal. Enfin, les rendus par passes multiples avancés sont intégrés pouvant créer par exemple des gammes dynamique (HDR) pour les ré-assembler dans 3ds Max Composite.

Blender La grande force de Blender réside dans sa gratuité ! Il bénéficie d’une grande communauté d’utilisateurs passionnés et professionnels. Celui-ci est doté de nombreux outils très variés et ultra-complets. On retrouve la gestion d’animations, modélisations, rendus, … Mais aussi la possibilité de créer votre propre jeu vidéo directement dans Blender en utilisant toute la puissance de rendu qu’offre ce logiciel. La prise en main de Blender est néanmoins assez déroutante au premier abord, le système est pensé différemment des autres produits du marché. Mais de nombreux tutoriels existent et la communauté est très active. Cinéma 4D

c Tommaso Sanguini - www.tommasosanguigni.it

3dsmax

Blender

c 2002 Thomas Suurland - www.suuriand.com

c Bobby - Clément (weilyncg) Granjon - Blender.org

Sources : Nerdgen.net

Dossier 3D L’application Sculpteo

Dynamixyz : La performance française en Motion Capture La start-up française Dynamixyz commercialise depuis peu « Performer », conçu en partenariat avec Supélec, dédié aux professionnels de la motion capture.

Présentation L’entreprise française Dynamixyz en partenariat avec Supélec, est une société spécialisée dans l’analyse et la synthèse de visages 3D de haute qualité pour le jeu vidéo. Elle commercialise depuis peu « Performer ». Cet outil dédié aux professionnels de la motion capture est capable de capturer avec finesse et précision les expressions d’un visage humain pour les retranscrire ensuite sur un personnage 3D. Le résultat n’est pas totalement satisfaisant mais s’approche du résultat ultime.

Comment ça fonctionne ? Cet outil utilise uniquement une caméra embarquée, fixée sur un casque. Une fois le casque installé sur la tête de l’acteur, le système, très précis, de vision par ordinateur suit les moindres mouvements de peau. En se basant sur les déformations de la texture du visage, le système calcule les paramètres nécessaires à l’animation du personnage virtuel désiré. Dynamixyz propose ainsi des solutions d’analyses faciales permettant de capter les expressions d’un joueur en temps réel dans le but de faire de la réalité augmentée ou de piloter son avatar. « Performer » sera prochainement présenté à de gros studios comme Ubisoft Montréal ou encore 20th Century Fox. Ce système leurs permettrait notamment d’économiser beaucoup de temps et d’argent car, jusqu’ici, il fallait embaucher des centaines d’infographistes pour réaliser chaque mouvement de bouche à la main ! Plus d’informations sur le site officiel

Dossier 3D Dynamixyz et motion capture

Sculpteo : Une application de choix pour vos impressions 3D La start-up française, spécialiste de l’impression 3D sort une application iOS gratuite pour votre iphone, Ipod Touch et iPad 5.0 ou supérieur.

En quoi consiste Sculpteo ? Cette application vous permettra notamment de concevoir des objets uniques en 3D, en utilisant la caméra de l’iPhone par exemple, puis de les acheter directement. Elle vous permettra également de découvrir une collection de designs d’exception réalisés par les meilleurs designers 3D et des les finir vous-même ! Vous pourrez également créer votre propre collection. Modélisez votre propre Coupe Pixel, votre Vase Profil, customisez votre coque iPhone et bien plus. Vous pouvez aussi partager vos créations sur Twitter ou Facebook ou bien l’enregistrer dans votre iPhone ou iPad. Une fois votre création personnelle terminée vous pourrez l’imprimer et l’acheter très simplement. A noter que le prix peut varier entre 2 euros pour un simple dé monochrome jusqu’à 1500 euros pour un avion en couleur et de taille importante par exemple. Des objets tels que les vases, les tasses … sont imprimés en céramique.

Sculpteo vous offre également la possibilité de rencontrer les designers et de découvrir quelquesuns de leurs plus récents et meilleurs projets utilisant l’impression 3D. Plus d’informations sur le site officiel

Inutile d’avoir des connaisances en dessin 3D ! Cette application est destinée à tout le monde et est très simple d’utilisation ! 16

Atelier 3D

Les bases de la modĂŠlisation 3D

Atelier 3D Les bases de la modélisation 3D

Modéliser le robot Multiclics Madeleine Benoit

« Dans ce tutoriel consacré à Cinéma 4D, vous allez apprendre à modéliser un robot de façon simple tout en apprenant les outils fondamentaux nécessaires pour toutes vos futures créations. »

Etudiant et Designer 3D Le mot de l’auteur : « Pour réaliser ce robot, j’ai utilisé le logiciel Cinéma 4D. Il est composé uniquement de formes très simples. Je n’ai en aucun cas cherché à faire compliqué, le but étant de créer un tutoriel dédié au débutant souhaitant évoluer dans le monde de la 3D».

01 Commençons par la tête ! Pour commencer, créez un simple cube et ajoutez lui 3 segments de plus en x, y et z pour faciliter sa modélisation (pour ce faire, allez dans l’onglet « Objets » qui se trouve dans la fenêtre en bas à droite de votre écran après avoir sélectionné votre cube. Convertissez votre cube en objet paramétrique pour pouvoir le modifier (Raccourci : C). Basculez ensuite en vue de face et en mode point pour tenter de reproduire une forme identique à la mienne en alternant outils de déplacement et outils de mise à l’échelle. Vous remarquerez que votre forme n’est pas aussi arrondie que la mienne, C’est normal ! Ajouter un Hyper Nurbs (petit carré vert dans la barre d’outils en haut de votre écran) et déplacez votre cube à l’intérieur. Votre forme devrait s’arrondir à présent. Rien de bien compliqué ! Pour le cou du robot, un simple cylindre suffit.

02 Créer les yeux Pour les yeux, j’ai utilisé le logiciel Photoshop: un ovale noir et un autre plus petit qui sera situé sur le premier auquel nous appliquerons une légère rotation et une teinte blanche. Vous pouvez également créer un arc de cercle de couleur grise pour représenter la paupière.

Importer les Yeux

Commencez par créer deux disques auxquels nous appliquerons une rotation a 90° (astuce : maintenir enfoncée la touche maj permet une rotation plus précise). Placez-les devant la tête que nous avons créée précédemment. Pour importer une texture, il vous suffit de créer un nouveau matériau en double cliquant dans la fenêtre situait en dessous de la timeline. Ensuite, double cliquez sur ce nouveau matériau pour l’éditer et allez dans « Couleur ». Vous trouverez une petite flèche à coter du mot « Texture » qui vous permettra de « charger une image ». Une fois votre image importée, déplacez le matériau sur le disque. Vous constaterez que la texture ne s’applique pas parfai-

Atelier 3D Les bases de la modélisation 3D

tement, il faut la retravailler un peu. Dans la fenêtre de « calque » située à droite de votre écran, vous pouvez voir apparaitre votre texture à côté de votre disque. Sélectionnez-la et passez en mode « Axes de texture » afin de pouvoir lui appliquer une rotation et quelques déplacements si nécessaire.

Le corps

Pour modéliser le corps, il vous suffit de reprendre les mêmes étapes que pour la tête en apportant quelques modifications bien entendu. Passez en mode polygone et sélectionnez quelques faces au niveau du torse que vous supprimerez afin de laisser de la place pour le « cœur » façon Iron Man.

05 Le « Cœur » Pour cette modélisation, vous allez avoir besoin de plusieurs éléments, à commencer par un « Tore », deux « Tubes » (de tailles différentes). Nous leurs appliquerons une rotation a 90°. L’idée, ici, est de sélectionner les faces arrières des tubes et de les réduire grâce à l’outil de mise à l’échelle pour obtenir le résultat ci-contre (couleur blanc et gris). Le tore lui, sera disposé en avant (couleur noir). Libre à vous de choisir les couleurs qui vous plaisent pour la finalisation. Vous n’avez plus qu’à replacer le tout sur le corps du robot à l’endroit prévu à cet effet. .

Atelier 3D Les bases de la modélisation 3D

On continue avec les épaules, le bassin et les jambes !

Une fois de plus il va falloir travailler sa modélisation. On repart sur la base d’un cube pour créer le bas du corps. Pensez à laisser un trou pour la future roue qui fera office de jambe pour le robot. J’ai modélisé les épaules par le biais d’un cube, mais vous pouvez également partir sur la base d’un cylindre.

La roue

Commencez par créer une sphère et aplatissez là sur les côtés pour obtenir une forme de roue. Choisissez la texture qui vous plaira sur internet et importez-la de la même façon que pour les yeux. Lors de l’édition de la texture, allez dans « Couleur » et changez l’échantillonnage en « SAT ». Pour donner un côté plus réaliste à votre texture, vous pouvez également activer le « relief » et les « normales ». Une fois activés, ouvrez-les et ré-importez les textures. Dans « Normales », cliquez sur la flèche à côté du mot « texture » et choisissez « Height2Normal » (si vous ne disposez de ce plugin, je vous conseille de le télécharger). Une fois téléchargé et installé, activez-le et cliquez sur la petite image bleutée qui apparait après avoir activé le plugin. Dans « method », remplacer « 4 samples » par « prewitt 5x5 », augmentez le radius à 80 % et baissezla hauteur à 75 %. Vous obtiendrez un résultat bien meilleur.

08 Finissons par les bras Rien de compliqué pour cette partie, de simples cylindres suffisent pour créer les bras, vous pouvez également réutiliser les épaulettes en les modifiants légèrement pour créer les « coudes ». Concernant les mains à présent, il vous suffit de créer un tube, modifiez sa taille (grâce à l’outil de mise à l’échelle), augmentez son rayon interne et en supprimer la moitié. Il vous suffira ensuite de lui appliquer une rotation et de le placer correctement.

« Libre à vous de choisir les couleurs qui lui iront le mieux ! » 20

Le monde de L'Audiovisuel

Audiovisuel

Dossier Audiovisuel GoPro Hero HD 3

La GoPro HERO HD 3 est de sortie Avis à tous les passionnés de sports extrêmes, enfin Gopro a annoncé la sortie de sa nouvelle mini caméra embarquée, qui fera son arrivée en fin d’année pour la plus grande joie de tous.

n ne présente plus la marque. Elle est tellement bien ancrée dans les consciences qu’on entend régulièrement parler de GoPro pour désigner une caméra embarquée en général. Encore plus fort ?

Le constructeur ajoute que le capteur optique de la HD Hero 3 est plus performant pour capturer des images lorsque la luminosité ambiante est faible, mais qu’il faudra attendre la mise en place d’un nouveau firmware pour en profiter pleinement. Il faudra donc garder un oeil sur la sortie de ce nouveau firmware.

La nouvelle GoPro HD3 a été complètement repensée autant au niveau technique qu’au niveau look. 30 % plus compacte, 25 % plus légère et avec une résolution quatre fois plus grande que le précédent modèle. Trois déclinaisons sont de la partie: White, Silver et Black. Elles filment dorénavant à 12 millions de pixels et possèdent un système Wi-Fi, c’était un des points manquant sur la précédente génération et il fallait acheter un Wi-Fi BacPac pour en profiter. Ce sytème WiFi va permettre de contrôler la caméra depuis son smartphone (iOS uniquement puis Android bientôt) et, dans un futur proche, de récupérer les données directement avec son smartphone pour les poster sur les réseaux sociaux. Elles disposent également toutes les trois d’une batterie de 1050 mAh qui se recharge via le connecteur USB. La connectique comprend une sortie micro HDMI, un lecteur de cartes microSDHC (jusqu’à 64 Go) ainsi qu’un port USB 2.0.

Voici le détail des caractéristiques techniques : HD Hero 3 White : Vidéo : 1080p à 30 ips et 720p à 60 ips Photo : 5 Mégapixels (3 ips en mode Burst) Tarif : 249 € HD Hero 3 Silver : Vidéo : 1080p à 30 ips, 940p à 48 ips et 720p à 60 ips Photo : 11 Mégapixels (10 ips en mode Burst) Tarif : 349 € HD Hero 3 Black :

En conclusion, si vous êtes fan de sports extrêmes et que vous souhaitez garder un oeil sur vos performances. Foncez! Vous ne serait pas déçu par ce bijoux technologique.

Vidéo : 4K à 12 ips, 2,7K à 30 ips, 1440p à 48 ips, 1080p à 60 ips et enfin 720p à 120 ips Photo : 12 Mégapixels (30 ips en mode Burst) Télécommande Wi-Fi livrée dans le bundle Compatible avec les applications GoPro Tarif : 449 € Pour plus d’informations, vous pouvez consulter le site internet officiel:

www.gopro.com Sources: PCImpact

Dossier Audiovisuel iPad Mini

iPad mini, un petit qui se voit très grand !

Quelques semaines après sa présentation en grande pompe par Tim Cook, le très attendu iPad Mini démarre sa carrière commerciale. Et alors que les iPad se succèdent et se ressemblent, l’iPad Mini se démarque d’emblée avec son format plus compact. Steve Jobs estimait que personne ne voudrait d’un petit format. Et pourtant il se trompait ! Voilà qu’Apple nous propose sa première « petite tablette », au format 7,9 pouces, censée rivaliser avec les Nexus 7 et autres tablettes Android compactes d’un format de 7 pouces. Présenté comme un iPad « de long en large » par la communication d’Apple, cet iPad Mini a-t’il tout d’un grand ? L’iPad Mini inaugure un tout nouveau design dans l’esprit assez proche de celui des récents iPhone 5 et iPod Touch 5e génération. Il est du reste décliné selon deux coloris : noir ardoise ou blanc argenté. Le corps de l’appareil est fait d’une coque unibody aluminium et si sa finesse impressionne, à peine 7,2mm d’épaisseur, on note le même travail de l’aluminium sur le chanfrein de l’écran qu’avec l’iPhone 5. Ceux-ci sont biseautés et polis pour un rendu à effet miroir. Les amateurs de chiffres retiendront que l’iPad Mini est 23% plus fin et 53% plus léger qu’un iPad conventionnel.

Comme son grand frère, l’iPad Mini dispose de boutons de réglages du volume sur la tranche, d’un bouton de verrouillage programmable, d’un bouton de mise en route sur le sommet, et de l’inévitable bouton central situé sous l’écran. Les hautparleurs se signalent par deux séries distinctes d’ouvertures perforées à la base de l’iPad Mini, dans le même esprit que sur l’iPhone 5 et, pour la première fois sur un iPad, ils délivrent un son stéréo. Un connecteur mini-jack se trouve sur le sommet de la tablette. Côté écran, on retrouve bien sûr ce qui fait son succès, une diagonale de 7,9 pouces, celui-ci adopte une résolution de 1024x768 pixels. Contrairement au nouvel iPad, on ne retrouve pas d’écran rétina, on espère le retrouver dans la prochaine mise à jour.

Site officiel

Atelier Audiovisuel Initiation au logiciel Motion

« Dans ce tutoriel consacré à Motion de la suite d’Apple Final Cut Pro, nous allons apprendre à réaliser une animation de logo, en utilisant les bases du logiciel»

Lebouteiller Thibault Etudiant et monteur vidéo

Atelier Audiovisuel Initiation au logiciel Motion

Animer un logo sous Motion Le mot de l’auteur : « Pour réaliser cette animation de logo, j’ai utilisé le logiciel Motion 5. J’ai d’abord réalisé un logo simple composé uniquement de texte et d’une forme. Je n’ai utilisé que les bases du logiciel qui vous servirons par la suite dans vos futurs projets ».

01 Importation des fichiers Pour commencer, nous allons importer les fichiers nécessaires à la conception de cette animation. Pour se faire j’ai tout d’abord réalisé le logo grâce au logiciel Illustrator de la suite d’Adobe où j’ai enregistré chaque partie du logo en trois fichiers PNG qui me serviront pour l’animation par la suite.

02 C’est parti ! Maintenant nous pouvons ouvrir Motion. Lancez l’application et faite un nouveau projet. Nous allons pouvoir commencer l’animation, tout d’abord, importons les fichiers PNG. Dans la fenêtre de gauche dans le menu « Navigation », allez chercher vos fichiers puis cliquez sur « importation » . Il se retrouvera directement dans la timeline. Faite de même pour le reste des fichiers.

Atelier Audiovisuel Initiation au logiciel Motion

Ajout d’un arrière-plan

Nous allons ensuite importer un arrière-plan. Nous choisirons celui intitulé « Canvas » qui se situe dans le menu «bibliothèque » puis « contenu » , « image », « folio » et « Canvas ». Faites importer puis redimensionnez le pour qu’il soit de la même taille que la vidéo. Puis déplacez-le en dessous des autres calques pour faire réapparaître le logo dans la timeline.

1ère animation

Passons à la phase de l’animation. Sélectionnez en 1er le fichier « logo1 » puis allez dans le menu « inspecteur » et « propriétés ». C’est ici que nous allons animer le fichier grâce à des images clés. Placez-vous au temps « 0s ». Retournez dans l’inspecteur et dans « transformer » « échelle » mettez-le à 0% puis ajoutez une image clé grâce au petit losange à droite. Voir image. Placez-vous ensuite à 2s sur la timeline et mettez l’échelle à 65%. Pour finir, descendez dans l’inspecteur et affichez « contrôle du temps » et mettez la vitesse à 200%. Voilà la 1ere animation est terminée. Cliquez ici pour voir le résultat

05 2ème animation Pour cette 2ème animation, nous allons ensuite animer le fichier « logo2 » qui représente la lettre T. Sélectionnez-le, mettez vous à 0s dans la time line puis retournez dans l’inspecteur et dans « transformer » puis « position », mettez la variable X à -1000 pixels et ajoutez une image clé. Mettez vous 1s05 dans la timeline et mettez la variable X à 0 pixels . Grâce à cette manipulation nous avons réalisé une animation de positionnement, nous le voyons grâce à la flèche rouge dans le visualiseur qui montre le chemin que prend la lettre T.

Faite la même chose pour le dernier fichier « logo3 » pour la lettre L. il n’y a que les réglages de la variable X qui change. A 0s mettez X à 1100 pixels et à 1s05 mettez X 0 pixels.

Atelier Audiovisuel Initiation au logiciel Motion

3ème animation

Et voilà c’est terminé !

Notre animation est maintenant terminé si vous voulez la montrer à vos amis c’est simple aller dans le menu « partager » et sélectionnez « exporter le film » ou utilisez le raccourci clavier « cmd + E ». Laissez les réglages par défaut et faite suivant, donnez un titre à votre animation et enregistrer. Vous avez réussi votre première animation sur le logiciel Motion pour voir le rendu final rendez vous ici.

RENDU FINAL

« A vous de jouer maintenant en réalisant vos propres logos animés ! » Si vous aussi, vous souhaitez réaliser des animations, le logiciel Motion 5 est disponible ici pour 44,99 € seulement.

LE MONDE DU WEB

LEWEB prog MOBILE jeux

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

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

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

DOSSIER WEB 5 plugins jquery pour votre site

5 plugins jQuery pour votre site

Le « Must Have » des plugins jQuery pour votre site 1 . SlideJS SlideJS est un plugin jQuery permettant de créer des ‘slides’, c’est-à-dire une sorte de diaporama d’images. Ce plugin ultraconnu vous permettra de créer de l’interactivité entre vous et vos visiteurs. Il est simple d’utilisation et vous trouverez les méthodes d’installation sur leur site. Slidesjs.com 2.FitVidJS FitVid est une visionneuse vidéo dite légère. Contrairement à d’autres visionneuses vidéos comme celle de YouTube ou de DailyMotion, celle-ci est programmée à l’aide de HTML5 contrairement à ces prédécesseurs codés en Flash. Flash ? Mais si... Vous savez cette norme qui ne fonctionne pas sur les smartphones ou tablettes et qui risque de disparaître dans les années à venir . La grande innovation de cette visionneuse est qu’elle est ‘responsive’. C’est-à-dire que la taille (largeur) de la visionneuse s’adapte en fonction de la résolution de votre ordinateur et de la taille de votre fenêtre. Fitvidsjs.com 3. jQuery Scroll Path jQuery Scroll Path est un plugin qui permet de définir un chemin de navigation sur votre site web. Basé sur le même système que les canvas, il vous permet de dessiner les chemins grâce aux commandes moveTo et LineTo de l’API JavaScript. Jquery Scroll Path est une sorte de Prezi (pour les connaisseurs) en JavaScript. Exemple

4. Menu dEroulant avec jQuery et CSS3 Ne vous est-il jamais arrivé de visiter un site et en parcourant le menu d’avoir un autre menu imbriqué ? Bien sûr que si, au delà de l’aspect esthétique, ce genre de menu clarifie la navigation et la hiérarchisation du site. Cela permet également d’améliorer le référencement de votre site. L’installation de ce plugin n’est cependant pas aussi simple que celle des plugins précédemment cités. Pour plus d’informations je vous conseille de visiter le site HTMLdrive.net 5. BigVideo.js BigVideo.js est un plugin permettant de placer en fond de votre site, une vidéo afin de mettre en avant vos projets, vos vacances, etc... Il utilise cependant de nombreux autres fichiers javascript : l’API de Video.js, jQuery et jQuery UI (Interface Utilisateur). Vous devrez donc vous assurez de posséder chacun de ces fichiers, sur votre site. Consulter le site de l’auteur Vous en voulez plus ? Les 5 prochaines présentations de plugins jQuery arriveront dans le Multiclics #2. D’ici là, jQueryez-bien!

PRESENTATION WEB gOOGLE VOIT VRAI AVEC INGRESS

Google voit vrai avec Ingress ! Ingress, le nouveau jeu mobile à réalité augmentée de Google et développé par Niantic Labs connaît un franc succès, encore en phase de bêta fermée, le jeu ne devrait pas voir le jour avant le printemps 2013.

Synopsis

Une nouvelle force inconnue du nom de « Shaper » est arrivée sur notre planète, la population se sépare alors en deux camps. D’un côté les résistants, qui luttent contre la prise de contrôle de la Terre par cette énergie. De l’autre les illuminés, partisans de l’utilisation du « Shaper ». Une « guerre de territoire » s’engage alors entre les deux camps, pour vaincre l’autre, il faudra capturer, tout au long de vos déplacements, des portails qui permettront d’agrandir le territoire. A la suite vous pourrez augmenter les défenses de vos portails. Le but du jeu reste néanmoins de collaborer avec sa faction pour libérer le monde entier de vos ennemis.

Test

Pour vous, l’équipe Multiclics l’a testé dans les rues bas normandes. L’utilisation est très simple, il suffit juste de se déplacer dans la rue, vers un portail, généralement placé à un bâtiment historique puis de le « hacker ». Un interface très futuriste, et ludique utilisant les données de Google Map et de Google StreetView, lequels vous permettront de trouver facilement les portails. Le seul bé-mol réside 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 l’instant pénalisés, devant partfois parcourir quelques kilomètres pour trouver un de ses précieux portails...

Carte du Monde - (c) Ingress

A noter toutefois que le jeu n’est actuellement disponible que pour les téléphones Android et téléchargeable sur le portail de téléchargement Google. Demandez dès maintenant votre accès à la bêta, choisissez votre camp et cautionnez les agissements de votre faction.

Aperçu du jeu

Interface de jeu - (c) Ingress

Qui n’a pas voulu, au moins une fois dans sa vie créer un petit jeu vidéo ? Avant il existait des logiciels comme RPG Maker qui vous permettait de créer plus ou moins simplement un jeu ( qui se révélait être une pâle copie de Ragnarok 1). Désormais, il y a Construct 2, développé par Scirra, un logiciel vous permettant de créer des jeux vidéo 2D grâce à leur moteur de jeu en HTML5. Et le tout sans programmer !

« Mais, comment ça fonctionne ? » Je m’explique. Construct 2 est un logiciel téléchargeable gratuitement, une fois ouvert, il vous permet grâce à la méthode du glisser-déposer d’y introduire directement des éléments du décors comme le background, l’image de votre héro, etc... Et grâce aux options inclus dans le jeu vous pouvez définir les fonctions qu’auront vos images : un background fixe, un héro qui se manie grâce aux touches du clavier et y insérer des ennemis ou encore définir un sol par exemple.

Cliquez sur les exemples ci-dessous pour y jouer

PRESENTATION WEB construct 2 - la fin des jeux flash

Il n’a jamais été aussi facile de créer un jeu grâce à Construct 2

« Bon d’accord, mais des jeux en Flash restent plus élaborés ! » C’est vrai, ne vous attendez pas à faire un Donkey Kong, ou un Super Mario Bross. Tout simplement car les possibilités du logiciel sont limitées même si la version payante débloque plus d’options que la version gratuite . Mais le principal atout est qu’il ne nécessite pas de connaissances en programmation, et ça, c’est le premier point fort de Construct 2 et qu’il utilise un moteur graphique pour HTML5. A l’heure des tablettes, des smartphones, et de la disparition de Flash, vous trouverez en Construct 2 un « game-maker » simple, intuitif et surtout GRATUIT !

« Ca m’interesse, je suis un peu geek dans l’âme, où peut-on trouver des jeux réalisés avec Construct 2 ainsi qu’un peu d’aide... » Le site de Scirra, l’entreprise qui a conçu Construct 2, est pour cela une vraie mine d’or. La partie Arcade du site recense de nombreux jeux réalisés avec ce logiciel, vous pouvez y jouer directement et uploader vos jeux. Grâce à ce site, vous trouverez des tutoriaux complets sur les questions que tout bon débutant dans le domaine se pose, mais aussi des questions plus poussées. Je vous invite donc à consulter leur site et d’essayer quelques jeux, qui restent, malgré leur simplicité, des jeux très réussis. Scirra.com

ATELIER WEB LE RéFéRENCEMENT

{Le Référencement{ une étape clé pour faire vivre un site

Le référencement ou SEO (Search Engine Optimization) en anglais est encore un domaine peu connu dans le monde du web, pourtant c’est un des meilleurs moyens pour apporter à un site web ce qu’il lui faut pour vivre : des visiteurs !

Si je vous dis Google vous me répondez ? Moteur de recherche, of course sir ! Bon maintenant c’est vrai que Google est LE géant du web et s’est beaucoup diversifié. Mais à la base c’était bel et bien un moteur de recherche programmé par des geeks à lunettes dans un garage comme le veux la tradition Américaine. A noter que maintenant Google détient environ 60 % des parts de marché en matière de moteur de recherche. Il est de loin concurrencé par Yahoo et Bing (Microsoft) qui tournent aux alentours des 10 à 15 %. De nos jours la recherche sur Google est devenue un automatisme, et des millions de personnes l’utilise quotidiennement pour trouver des sites qui correspondent à leurs attentes. C’est donc un des leviers les plus apporteurs de trafic (visites) pour n’importe quel site. Même si l’arrivé des réseaux sociaux commence à avoir un énorme poids… Google a donc la lourde tâche de « trier » le web pour vous donner une liste de sites les plus pertinents correspondant à votre requête.

Pour ce faire, Google utilise un algorithme très puissant pour fournir (selon lui…) les meilleurs résultats. On comprend donc vite l’utilité d’être placé en 1ère position pour un mot-clé correspondant à son secteur d’activité plutôt qu’à la 12ème page… En effet, des statistiques montrent que la plupart du temps les gens ne vont pas plus loin que la première page de résultats de Google, qui affiche pour information, 10 résultats.

Le référenceur, un métier à part entière Avec le nombre de sites qui ne cesse d’augmenter il faut savoir se faire une place parmi les milliards qui existent. Il ne suffit pas d’avoir un site magnifique pour réussir, il faut des visiteurs ! Toute entreprise à besoin de clients pour vivre, il en est de même pour un site web qui a besoin de visiteurs qui pourront par la suite devenir des clients. Le référenceur doit donc tout faire pour garantir à un site de bien se positionner sur les moteurs de recherche. Comment ? En donnant à Google (surtout à son algorithme) ce qu’il aime et ce qu’il attend d’un site web. 1ère étape : La sélection des bons motsclés à cibler

C’est ici que le référenceur intervient, son métier : optimiser un site pour que Google en tombe amoureux et le récompense en lui donnant une bonne position dans son moteur de recherche.

Pour commencer le référenceur doit savoir sélectionner les meilleurs motsclés à cibler pour chaque site web. Cette étape de « l’analyse de mots-clés » se fait normalement en amont de la création d’un site web et est primordiale pour ne pas faire de bêtises par la suite.

Une fois cette liste d’expressions à cibler établie, le référenceur va les réutiliser tout au long du projet. Vous vous en doutez, l’algorithme de Google serait un peu rouillé s’il décidait d’afficher un site e-commerce qui vend des savons de Marseille sur la requête « chaussures vintage pour homme »… La façon la plus simple pour se positionner sur un mot-clé en particulier est de montrer que le site en question traite bien de cette thématique.

Le SEO On-Page : la première partie de l’équation « SEO On-Page » et « SEO Off-Page » sont les deux piliers du travail du référenceur, ce sont 2 expressions qui définissent deux types d’actions à apporter à un site pour prétendre à un bon positionnement sur Google. Celui à réaliser avant l’autre est le SEO On-Page, c’est en fait tout ce qu’il y a faire SUR (On-Page) le site en lui-même pour faire plaisir à Google. Et avec ce dernier c’est toujours la même histoire, il faut essayer de placer ses mots-clés un peu partout sur son site, tout en ne bourrinant pas comme un goret sous peine de sanction par Google. En effet, le bougre n’est pas si bête, si vous abusez de son algorithme il le détecte et vous envoie vers les profondeurs des résultats de recherches. Parfois pire, votre site peut rejoindre la « sandbox » (bac à sable) de Google, c’est à dire que votre site est complétement rayé de l’index du moteur de recherche ! Mais n’ayez pas peur, il faut vraiment y aller fort pour se retrouver dans ce cachot dont il est difficile de sortir !

atelieR WEB LE RéFéRENCEMENT

Et oui, Il ne suffit pas de dire « je choisis tel ou tel motclé parce qu’il a 500000 recherches par mois sur Google », souvent les mots-clés les plus génériques sont les plus compétitifs et demandent donc beaucoup d’efforts et de temps pour avoir des résultats satisfaisants, et le temps c’est de l’argent ! Un des meilleurs outils, fourni par Google luimême, pour savoir combien de fois par mois est cherché un mot-clé en particulier se nomme Google Keyword Tool.

Les principaux points à respecter pour un bon SEO On-Page

1 2 3 4 5 6 7 8

Dans l’ensemble, avoir un contenu unique, bien rédigé et pertinent à la thématique sur laquelle on veut se positionner. La balise <title> de chaque page du site doit être correctement renseignée, c’est ce que voit l’internaute sur Google quand il fait une recherche (lien bleu souligné). On essaye au mieux de placer ses mots-clés cibles et de ne pas dépasser les 70 caractères. La balise meta description est le petit texte qui décrit votre page dans les résultats de recherche, elle doit aussi être optimisée pour les moteurs de recherche, également pour chaque page. Attention à ne pas dépasser les 250 caractères, sinon le texte sera tronqué. L’URL de vos pages est aussi important. Une page avec l’url « moncanard.fr/categorie55-/produit?=id,632 » se positionnera moins bien que celle-ci « moncanard.fr/gabions/gabion-k2000- ». La hiérarchisation du contenu est sûrement l’un des paramètres les plus importants à prendre en compte dans le SEO On-Page. Je parle ici des balises de titres HTML qui s’étendent de H1 à H6. Il faut donc bien structurer son contenu avec plusieurs balises de titres, chacune toujours optimisée pour les mots-clés définis dans l’analyse de mots-clés. Bien soigner l’attribut alt des images en y indiquant une phrase décrivant l’image (et pourquoi pas avec un mot-clé dedans ? optimisée pour les mots-clés définis dans l’analyse de mots-clés. Ne pas hésiter à mettre en gras les mots-clés dans la page pour encore mieux indiquer à Google que ce sont ces mots que l’internaute ne doit pas manquer. Un maillage interne efficace, c’est à dire que chaque page doit si possible faire des liens vers d’autre pages de ce même site. 33

ATELIER WEB LE RéFéRENCEMENT

Voici en grande partie, le travail du référenceur sur le site en lui-même. Il y a bien sur encore des choses à dire, mais ce sont vraiment les principales actions à apporter. On remarque également que le référenceur doit être à l’aise avec au minimum le HTML/CSS et de temps en temps le PHP et le Javascript. Une fois le SEO On-Page effectué, le référenceur va s’attaquer à la partie qui va influencer le plus le bon positionnement d’un 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 décision, et donc garantir à son site le plus de visites possibles : les liens retour, ou backlinks en anglais, c’est plus stylé :) Les backlinks sont tout simplement des liens sur d’autres sites qui renvoient vers celui à positionner. Plus vous avez de backlinks, plus Google se dit « tiens, lui il est mentionné beaucoup de fois sur la toile, c’est qu’il doit fournir un bon contenu, et que les internautes l’apprécient, allez hop, je te mets en première page ! ».

Si vous avez compris ça, vous avez compris comment fonctionne l’algorithme de Google, à vous les $$$, les belles voitures et les filles qui vont avec ! Bon ok… Ce n’est pas si simple que ça en fait. Déjà, il faut les trouver ces liens ! Et c’est le plus gros travail du référenceur qui consiste souvent à faire des partenariats avec d’autres sites : « tiens je t’écris un super article sur la nouvelle façon de faire maigrir un chat, en échange tu le postes sur ton site et tu fais un lien vers mon site faitesmaigr irvotrechatavecdespissenlits.fr ». On peut également faire figurer son site dans la multitude d’annuaires en ligne pour obtenir un misérable petit lien, poster des commentaires sur des blogs, etc… Le meilleur moyen est encore de faire ce qu’on appelle du « linkbaiting » dans le jargon du SEO, plus simplement c’est faire le buzz. On trouve une idée géniale qui va faire parler d’elle toute seule, tout le monde fait des backlinks vers votre site sans que vous le demandiez, la nouvelle se repend comme une traînée de poudre sur les réseaux sociaux, c’est merveilleux, c’est magique et c’est le rêve de tout référenceur de réaliser une campagne de ce genre ! Mais bon, encore faut-il la trouver cette idée, parce que lorsque votre client à un site pour vendre des abris de piscine, il est difficile de faire le buzz...

A savoir également que chaque backlink n’a pas le même poids, loin de là ! Il y a ici plusieurs paramètres à prendre en compte :

* Le lien est-il isolé dans la page (lien en footer) ou au milieu d’un contenu pertinent et correspondant au site cible (dans le corps d’un article).

*L’ancre ou anchor text du lien est-elle optimisée pour le SEO ? cliquez ici vs fromage de savoie.

* Le site sur lequel se situe le lien est-il de bonne qualité ?

Pour le savoir Google a instauré son propre système de notation pour les sites web, le PageRank (PR). Il attribut donc pour chaque page du web une note de 0 à 10 (0 = nul et 10 = seulement Google.com…). Un lien sur une page avec un PageRank de 6 est de très bonne qualité et il faudra, en gros, beaucoup plus de liens avec un PR 0 pour l’égaler.

Combien de liens sortants sont également sur cette page ? Si le backlink est sur une page qui comporte 1000 autres liens, le « jus » 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.

Et quelques dernier petits conseils en matière de netlinking (construction de liens), des liens qui viennent de sites russes et qui plus est traitent de viagra, c’est 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 journée, et Google n’hésitera pas à vous faire passer par la case sandbox. Sans plaisanter, ça arrive vraiment, mais souvent dans le but de faire couler un site, une technique « blackhat » qui se nomme le negative SEO, pas très gentil quand ça vous arrive :(

Pour conclure cet article qui doit bien s’arrêter à un moment, je tenais à dire que le référencement est vraiment une pratique à ne négliger sous aucun prétexte, et ce dès le début d’un projet web. En effet, si l’on y réfléchi dès le début, le travail sera toujours important, mais beaucoup moins que si l’on doit faire le référencement d’un site déjà existant ! Ensuite le métier de référenceur commence à être reconnu en France, mais il existe peu de diplômes dédiés à cette activité. La plupart des référenceurs ont appris sur le tas, via internet, via des connaissances, etc… Comme vous l’avez vu c’est un métier aux multiples facettes, le développement web

doit faire un minimum parti de son bagage de compétences, la communication et le marketing sont également très importants. Il faut aussi savoir être très curieux et se tenir au courant des dernières avancées dans le domaine puisque l’algorithme de Google change très souvent et apporte ainsi beaucoup de nouveautés, bonnes comme mauvaises pour notre métier… Et pour terminer, ne vous faites surtout pas avoir par certains magiciens du référencement qui vous garantissent des miracles du style « Pour €97 je vous place votre site en 1ère page de Google en seulement 1 semaine ! ». Le référencement est un vrai travail de longue haleine qui se déroule sur le long terme. Plus les mots-clés à positionner sont compétitifs, plus il faudra du temps pour prétendre à un bon positionnement sur les moteurs de recherche :)

atelier WEB LE RéFéRENCEMENT

Ne jamais sous estimer la puissance du référencement

Tanguy Dupré

MERCI

ON SE retrouve LE 28 FEVRIER

POUR MULTICLICS #2