Scénarisation et Création Multimédia

Bonsoir, les amies je conclus donc ce petit exercice d’étude de site avec le site d’une marque que nous connaissons tous : VANS

Un petit d’histoire tout d’abord cette marque est californienne elle a été créé par Paul Van Doren en 1966, à l’origine elle vendait des chaussures de skateboard aujourd’hui sa gamme de produit est extrêmement étendue (sac, vêtement etc.) tout en gardant un design très proche de son produit le plus célèbre et apprécié le modèle dit #44.

Le graphisme :
Le design de ce site est lui aussi fortement inspiré de celui des produits qui ont fait le succès de la marque.

L’ergonomie de ce site se construit sur 2 « étages » :
- Le premier regroupe les différents catégories de produits que la marque

Chacun des onglets étant en fait un lien qui même vers un site spécifique par exemple skate avec skate.vans.com
- Le second lui est en fait le menu de navigation principale du site, on retrouve les onglets les plus importants et les plus utiles au fan de la marque.

Entre les deux on retrouve l’élément qui reprend le design du site que l’on a déjà pu voir sur de nombreux produits de la marque avec notamment un tapissage du logo.

Ensuite on peut observer un récapitulatif des dernières news de de la marque par une petite animation flash.
Ces derniers sont illustrés toujours dans le sens de la marque c’est-à-dire dynamique tendance et coloré.
On retrouve les différentes compétitions et autres évènements qu’elle a organisés ou auxquelles elle a participé.

Ensuite pour garder un lien avec sa cible qui est friande des réseaux sociaux, on retrouve les liens qui
mènent aux différents sites communautaires les plus prisés.

On retrouve enfin une liste des dernières actualités de la marque que l’on peut filtrer pour qu’il concerne uniquement la France ou toute l’Europe avec pour chacune de ces « news » un petit « J’aime » qui font encore une fois le lien avec facebook.

Nous permettons de suivre les actus de notre marque de les partager avec nos amis.
Les couleurs du site:

R: 0  V: 0 B : 0 # 000000

R: 131  V: 27 B : 26 # 831b1a

Avec un des dégradés de rouge au noir et des dégradés allant de ce rouges à un rouge encore plus foncé.

Avec une grande surface blanche pour laisser respirer un peu ce site.

La programmation du site :

Une grande partie du site est programmé en HTML, mais  il y a aussi quelques éléments qui sont en Flash comme les images des news, et la vidéo qui se trouve sur la page d’accueil du site.
Cela permet d’avoir un meilleur référencement  avec des éléments les plus important en gras tel que le nom de la marque ou les sportifs qui participent aux évènements mais aussi avec les outils en Flash d’avoir un meilleur design.

On retrouve aussi quelques éléments Javascript qui permet de créer une interaction avec le serveur sur lequel se trouve le site

Stratégie :

Ce site confirme et suit le positionnement de la marque c’est-à-dire le « dynamisme » et l’aspect tendance avec une pointe de « old school » les éléments qui font références au logo assez ancien et modèles célèbres soulignes cet aspect.
Les cibles sont les jeunes de 14-25 ans urbains revenus A et B qui sont à la recherche de produits tendance et classique, on peut aussi préciser qu’ils sont pour la plupart « fan » de la marque, ils viennent sur ce site pour rester à la page, se tenir au courant des nouveautés et des évènements à venir.

Objectifs du site :
- Garder le contact avec les « fan » de cette marque
- Informer sur les nouveaux évènements
- Faire découvrir les nouveaux produits de la marque
- Faire découvrir l’univers particuliers de cette marque

Promesse :

Vans, le « old school »  tendance.

Ton :

Dynamique, tendance et décalé

Bonjours jeune étudiantes, étudiants je reviens vers vous afin de vous proposer une analyse du site internet de la marque « Gas bijoux » Une marque qui prend racine dans le sud de la France.

André Gas n’a que 25 ans quand il se retrouve dans la très célèbre station balnéaire de Saint-Tropez où se retrouve toute la Jet Set. Le jeune homme vient d’obtenir son diplôme des Beaux-Arts et il en est sorti major de sa promotion ! Au lieu, comme d’autres, de s’enfermer dans un atelier pour peindre et se faire un nom, André Gas, il y a 35 ans, préfère se balader sur les plages méditerranéennes et notamment à Saint- Tropez. Il se lance alors dans l’artisanat et commence à proposer ses créations sur les plages.

Le graphisme:

L’ergonomie de ce site est excellente

C’est un site simple en navigation :

• Il y a un menu principal avec les rubriques essentielles :l’atelier,boutique,Eshop, actualités, presse, newsletter, recherche.

Grâce a ce menu, en un seul regard, l’internaute c’est où il doit cliquer selon ce qu’il désire savoir comme informations

. On peu également parlé de dynamisme et d’interactivité grâce au photo qui défile sur la page d’accueil, réaliser grâce a jQuery.

Les couleurs dominantes :

La programmation du site internet:

Tecnhique :

Le site est fait en HTML, ce qui permet un meilleur référencement car contrairement au flash, le texte n’est pas représenté comme une image. Les moteurs de recherche peuvent donc parcourir le contenu du site.

Le site est bien référencer car quand on tape les mots « bijoux » « gas » on tombe en premier lieu sur le site internet de la marque de bijoux.

Lorsque l’on arrive sur le site internet de la marque sur la page d’accueil on peu voir que des photo défilé dans un cadre le site internet utilise le jQuery.

jQuery est une bibliothèque JavaScript libre qui porte sur l’interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.

jQuery1 se présente comme un unique fichier de 227 ko (31 ko dans sa version compressée).

Le framework contient notamment les fonctionnalités suivantes :

• Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ;

• Événements ;

• Effets et animations ;

• Manipulations des feuilles de style en cascade (ajout/suppression des classes, d’attributs…) ;

• AJAX ;

• Plugins ;

• Utilitaires (version du navigateur…).

Dimension structuré et rectiligne :

En effet le site internet est très bien structuré pour une lecture rapide et clair des informations délivrés par le site.

Lorsque l’on navigue sur le site les page garde la même structure avec le menu qui reste a la même place ainsi que le logo, en revanche la partie ou les photos défile sur la page d’accueil devient le contenu des autres pages.

La stratégie:

Les couleurs : les couleurs du site évoque la féminité avec la couleur rose saumon, le bleu évoque la liberté, la légèreté mais aussi la mer méditerrané car il ne faut pas oublier que « Gas bijoux » et une marque du sud de la France.

La couleur blanche quand a elle impose un ton serieu au site internet vue qu’il ce veut commerciale.

Le site est bien évidement a tendance commerciale sont but est de promouvoir les produits de la marque et ainsi de les vendre.

Conclusion :

Pour se donner cette image luxueuse ils ont des produits design en France et un site internet sobre et précis, qui a vraiment un but commerciale. Le site internet de cette marque sudiste ce voulais très simple et clair pour son utilisation afin que les internautes puisse naviguer en toute simplicité.

Contrairement à la plupart des personnes, j’ai décidé d’opter pour un site national mais peu connu, celui de l’Abattoir de Chalon sur Saône. L’Abattoir est un centre national des Arts de la Rue de Chalon sur Saône. Il s’agit donc d’un site dédié à la culture de cette ville et de sa région.

Pourquoi ce choix ?

Tout d’abord car il s’agit d’une institution me tenant à cœur car elle évoque à la fois l’Art, plus précisément les Arts de Rue et également car celle-ci est située à Chalon sur Saône

LE GRAPHISME

L’ergonomie de ce site est excellente

C’est un site simple en navigation :

• Il y a un menu principal avec les rubriques essentielles : actualité, compagnies, médiation diffusion, l‘abattoir

• Il y a un menu secondaire : à télécharger, calendrier, résidence

=> En un seul regard, l’internaute c’est où il doit cliquer selon ce qu’il désire savoir comme informations

Nous pouvons également parler de dynamisme et d’interactivité :

• Sur la page d’accueil, des photographies défilent (photo représentant le lieu et les spectacles) : Ces photographies, en plus de conférer un côté dynamique au site, informent également l’internaute sur les prochaines grandes dates à retenir. C’est à la fois esthétique et utile !

• Lien avec l’internaute grâce à l’inscription à la newsletter : C’est un élément essentiel pour garder le contact avec l’internaute, en lui envoyant régulièrement des newsletters afin de le tenir informer des manifestations à venir ainsi que de le stimuler pour qu’il prenne part aux événements proposés.

• Lien Facebook : ce lien permet de suivre de plus près, à chaque seconde, les actualités de l’Abattoir

LES COULEURS

Les couleurs dominantes utilisées sont le orange, bleu, noir, gris, blanc

Ces couleurs ne sont pas choisies par hasard car elles permettent de jongler à la fois entre un univers artistique et un univers institutionnel.

• Le orange symbolise le dynamisme, l’énergie et l’imagination (dimension artistique)
• Le bleu, la rêverie, la confiance et la sécurité (dimension à la fois institutionnelle et artistique)
• Le noir,  la distinction et le mystère (dimension artistique)
• Le gris, le modernisme et la sobriété (dimension institutionnelle)
• Le blanc, la pureté et l’innocence (dimension artistique)

La visite virtuelle (même s’il ne s’agit que de deux plans) reste tout de même appréciable car cela donne une dimension humaine et familiale à l’institution : elle devient accessible dans l’espace et l’internaute peut savoir comment elle est organisée.

LA PROGRAMMATION DU SITE

Le site est fait en HTML, ce qui permet un meilleur référencement car contrairement au flash, le texte n’est pas représenté comme une image. Les moteurs de recherche peuvent donc parcourir le contenu du site.

Cependant, si nous ne tapons pas « L’abattoir » avec  « Chalon sur Saône » à la suite, celui-ci n’est pas du tout référencé. Certes, il s’agit d’une institution locale, mais une optimisation du site, en plus approfondie, pourrait permettre à l’organisme de gagner en place dans le classement du moteur de recherche.

La présence au sein de quelques annuaires pourrait également contribuer à un meilleur référencement. Effectivement, les échanges de liens ciblés (vers les compagnies par exemple) s’avéreraient efficaces.

Nous pouvons noter qu’une infime partie du site est fait en flash. Il s’agit du bandeau de photographies qui défilent sur la page d’accueil.

LA STRATEGIE

En ce qui concerne la stratégie adoptée par cette institution pour ce site, nous avons deux points essentiels à mettre en avant :

1. Une dimension artistique qui est mise en avant grâce à différents procédés, tels que :

• Les dessins : ils représentent la vie de Chalon sur Saône ainsi que les lieux où se déroulent les évènements organisés par l’Abattoir : la péniche, les quais de Saône, l’ancienne sucrerie, Nicéphore Cité ; tout en leur apportant une dimension artistique et décalée.

• Les couleurs : comme dit précédemment, les couleurs évoquent la rêverie (blanc) et le dynamisme (orange)
• Les formes arrondies : elles apportent de la douceur et de la légèreté au site, ce qui confère une impression de monde à part où tout est possible : L’internaute se sent rassuré et en confiance, il peut alors laisser part à son imagination.

=> Cette dimension artistique confère un univers onirique au site

1. Mais aussi une dimension institutionnelle :

• Formes rectilignes : elles apportent du sérieux au contenu et à la forme. En effet, même s’il s’agit d’un centre des Arts de Rue, l’institution veut prouver que son travail est fait de manière réfléchie et organisée. Ces formes rectilignes viennent donc recadrer le côté artistique du site.

• Site structuré : Les éléments sont bien organisés, par exemple sous forme de colonnes pour le menu secondaire. Tout les éléments sont alignés : les textes sont alignés par rapport aux images, les images par rapport aux images. Le site respire dans le sens où il y a suffisamment d’espace entre chaque informations.

=> Cette dimension institutionnelle confère un univers sérieux au site

CONCLUSION

Il s’agit d’un site révélant à la fois d’une dimension artistique grâce à ses couleurs, ses formes qui confèrent un univers onirique et imaginaire mais aussi une dimension institutionnelle avec ses formes et sa structure qui apportent quant à elles du sérieux au site.

Nous pouvons également parler d’un site design, moderne et épuré qui bénéficie d’une ergonomie excellente permettant à l’internaute de trouver rapidement les informations souhaitées mais aussi de prendre du plaisir à parcourir et découvrir le site.

Bonjour la compagnie !

Aujourd’hui nous allons nous intéresser à l’analyse du site Yves Saint-Laurent. Un site on ne peut plus élégant digne de son nom !

Yves Saint-Laurent n’est pas un couturier, c’est un artisan, un fabricant de bonheur !

Histoire de la marque :

En 1961, Yves Saint Laurent et Pierre Bergé, deux inséparables de longues dates décident de lancer ensemble leur propre maison de couture. YSL crée sa première collection en 1962. Tuniques, caban, sportswear couture, pureté, décontraction, associations de couleurs : les codes de la marques sont nés : de suite, le succès est au rendez-vous.

Ainsi les années 1960 sont celles de la reconnaissance du style Saint Laurent qui ne cesse d’innover. Mais la véritable consécration a lieu en 1966, lorsqu’il lance le smoking pour femme, qui rapidement, deviendra LA pièce incontournable de son dress code. Il libère les femmes. La même année, il invente Yves Saint Laurent Rive Gauche, le prêt à porter féminin de luxe.

Les passionnés de mode se mirent alors à porter les créations anticonformistes de M. Saint Laurent dans leur vie de tous les jours, marquant ainsi la première étape d’une démocratisation de la mode.

Parfums, Maquillage, Prêt-à-porter féminin et masculin, chaussures, sacs, maroquinerie, bijoux, foulards, cravates et lunettes… Les collections de la maison Yves Saint Laurent se sont aujourd’hui bien développées.

C’est en janvier 2002, qu’il décide de faire ses adieux à la haute-couture. Depuis 2004, Sephano Pilati est le directeur artistique de la marque.

Aujourd’hui, Yves Saint Laurent comprend environ 70 magasins dans le monde, c’est peu. Mais les collections sont aussi distribuées dans des grands magasins multi-marques comme le Printemps, Le Bon Marché…

“J’ai participé à la transformation de mon époque. Je l’ai fait avec des vêtements, ce qui est sûrement moins important que la musique, l’architecture, la peinture… mais quoi qu’il en soit, je l’ai fait.”

Analyse graphique :

Maintenant, on va s’intéresser à la partie purement graphique.

Lorsque l’on tape dans la barre d’adresse www.ysl.com, on arrive sur une page où les couleurs noires et blanches sont prédominantes. Le fond noir, symbolise l’élégance, le raffinement, la sobriété, mais fait surtout appel au milieu du luxe. Il est marié avec des écritures blanches, qui l’a nous donne un aspect de pureté, de simplicité. L’alliance de ces deux couleurs nous transporte à travers le monde du luxe, de la mode, et de ces choses onirique. Quatre photos aux couleurs vives, principalement le orange, donne de la luminosité et de l’attractivité à la page d’accueil. On est ainsi transporté dans un univers magique. Un univers attirant, nous faisant voyagé à travers une marque symbolique. Le positionnement luxueux de la marque, se retrouve ainsi dans les pages du site web.

La palette RVB :

Au niveau de la typographie, elle reste simple et dynamique à la fois. Le logo, qui date de 1961, a été réalisé par Adolphe Jean-Marie Mouron, autrement appelé Cassandre, qui était un des plus grand graphiste de son temps, est placé au centre de la place, ce qui lui procure ici un effet d’importance. Pour la petite anecdote, un seul logo fut proposé à Yves Saint Laurent et à Pierre Bergé, celle des lettres YSL entrelacé, ce fut le bon !

Et oui, le monde de la mode adore les changements, et pourtant les logos des maisons de luxe sont immuables.  Pour cause, le logo Yves Saint Laurent n’a pas pris une ride en 50 ans, et n’a jamais été retouché depuis sa création.
C’est aussi ce fameux Cassandre, qui a réalisé la typographie, toujours la même année, pour la Maison. Une typographie simple, assez carrée. Elle représente l’univers de la marque,  avant-gardiste sur son temps.

Aussi, sur la page d’accueil, nous remarquons que plusieurs redirections sont possible.

Tout d’abord, nous allons nous intéresser à la partie « Fashion and accesories ». Ici, il faut déjà choisir sa langue, (anglais ou français). Le choix reste maigre. On se demande si pour une marque à la notoriété internationale, ce n’est pas un peu faible. Ne manque t-il pas une déclinaison en chinois ? Surtout lorsque l’on sait que le marché du luxe en chine est en perpétuelle croissance.

Les pages qui renvoient à cette partie, sont travaillés. Le design est très épuré. Les couleurs principales ne changent pas au fils des pages. Le noir et le blanc, sont donc bien synonyme de raffinement et de Luxe.

On trouve un menu est riche ( Collections, Maison Yves Saint Laurent, Evenements, Boutiques…). Il est relativement simple d’utilisation, et l’on trouve rapidement ce que l’on y cherche. Il y a de nombreuses vidéos, qui rendent le site très attractif et attrayant.

La partie « Beauty and Fragances » est plus sobre. Ici, lorsque l’on clique sur cet onglet, nous sommes redirigé sur une page où nous devons choisir notre continent et par conséquent notre pays. Les langues sont ainsi plus nombreuses. Cela est sûrement dû au fait, que les produits beauté et parfums touche une cible différentes,beaucoup plus jeune et beaucoup plus large que les produits Haute-Couture.

Après avoir cliqué sur le pays de notre choix, nous tombons sur une page aux couleurs différentes. Cette fois-ci le blanc domine, et les écritures sont un camaïeu de couleur or, doré. On est transporté dans un univers plus glamour, plus “colorée”.

Là encore, le menu est riche, et l’on retrouve de nombreuses vidéos, et des informations précieuses sur toute la gamme des produits beauté.

Ici, la relation avec l’internaute, n’est plus la même. On ressent plus de complicité. Cela peut se prouver par la page : “l’invitée de la chronique” qui offre des conseils beauté.

Les pages ont l’air aussi mieux structurés, mieux organisés.

Prenons l’exemple avec la page maquillage :

Analyse technique  :

Le site Yves Saint Laurent est attractif, de par ses nombreuses pages et redirections. Il capte l’attention de l’internaute, par un design simple et impactant. Un design sobre et élégant, qui nous fait voyager à travers le monde du luxe.

Grâce au code source de la page, nous pouvons voir que le langage de base utilisé est le HTML. Il s’agit d’un langage simple, facile d’utilisation et accessible à tous. Il permet de donner les informations essentielles pour la structure du document.

Il existe cependant une différenciation entre les deux parties. Effectivement, « Fashion and accessories » est réalisé sous Flash, ce qui permet une certaine interactivité entre l’internaute et la marque. Cela permet d’avoir en plus, une musique d’ambiance, des animations, des vidéos… Pour la marque, c’est un plus, car avec ce procédé, elle peut faire partager ses campagnes publicitaires, des vidéos des défilés…
En revanche, la partie « Beauty and Fragances » est réalisée en Javascript. Cela apporte un côté plus leger et l’affichage de la page est ainsi beaucoup plus rapide.

On observe également la présence de flux RSS, dans le but de se tenir informé des nouveautés de la marque sur les réseaux sociaux.

Stratégie de communication :

Les objectifs de la marque sont principalement affectifs. L’image de celle-ci est particulièrement mise en avant sur la majorité des pages du site. Les objectifs cognitifs, sont aussi très présents dans ce site. De nombreux produits mais aussi les différentes campagnes font qu’il est essentiel pour la marque de rappeler aux consommateurs ses plus. La partie conative est surtout présente dans la partie “Beauty and Fragances”.

La marque n’a pas qu’une seule et unique cible. La partie concernant « Fashion and accessories » s’adresse une cible autant bien féminine que masculine vouant une passion certaine pour le milieu de la Haute Couture luxe, âgés de plus de 35 ans, et ayant des revenus bien évidemment assez élevés, de la classe A et B.

En ce qui concerne la partie « Fragances and beauty », la marque s’adresse ici à une cible plus large, 25-49 ans, aux hommes et femmes aimant les produits de qualité et accordant un certains soins à leur esthétisme et apparence.

En revanche, le site s’adresse aussi au grand public, la cible secondaire de la marque, aimant la mode, le luxe, et vouant une curiosité à la marque.

Yves Saint Laurent se positionne en tant que marque de luxe, assez avant-gardiste sur son temps. C’est une marque qui n’a cesser d’innover depuis ces débuts, et qui à révolutionner le milieu de la Haute Couture.

Le ton et l’ambiance employée restent très élégants et sobres. Le texte est peu présent sur ce site. Les produits sont mis en avant d’une manière gracieuse et attirante.

Conclusion :

Le site Yves Saint Laurent est tout simplement une petite merveille au niveau graphique, technique mais aussi au niveau informatif. Il s’agit, en effet, d’un site riche aussi bien sur la forme que sur le fond.

C’est un site en parfaite cohérence avec la stratégie de communication menée par la marque luxueuse. Il nous plonge dans un univers typiquement onirique. Les différentes vidéos, animations nous poussent à voyager un bon moment à travers ce site.

Bonjour à toutes et à tous !

Voici un tutoriel pour les  journalistes en herbe. Vous allez apprendre comment rendre une photo basique en photo de journal, avec ses défauts d’impression, ses effets de papiers abimés et son effet noir et blanc.

Ce tutoriel est spécifique au logiciel Photoshop (peu importe la version). Pour vous le procurer, vous pouvez télécharger la version d’essai disponible sur le site Adobe : http://www.adobe.com/fr/downloads/ .

Ce tutoriel s’effectuera en 7 étapes.

C’est parti !

Etape N°1

Ouvrez votre image.

La qualité de l’image doit très être de haute qualité pour un meilleur résultat.

Etape N°2

• Double-cliquez sur l’arrière plan pour convertir votre image en calque. Nommez ensuite le calque.
  

• Passez votre image en noir et blanc.
  

Voici le résultat :

• Ensuite allez dans la rubrique Luminosité / Contraste (Image > Réglages > Luminosité/Contraste…) et accentuez la luminosité à 100 et le contraste à 30.

Etape N°3

• Dupliquez votre image. Plusieurs possibilités s’offrent à vous :

- La version normale qui consiste à faire un clic droit sur le calque de notre photo et de cliquer sur “Dupliquer le calque…”.

- La version raccourcie qui consiste à appuyer sur le bouton Alt de votre clavier tout en cliquant avec votre souris (clic gauche) pour faire glisser la photo dupliquée. Vous verrez ainsi apparaître un second calque dans la rubrique “Calques” qui correspondra au nom de votre photo suivi du mot “copie”.

• Sur votre photo dupliquée, allez dans la rubrique “Seuil” pour intensifier l’aspect noir et blanc. Essayez d’obtenir un juste milieu entre le noir et le blanc, il ne faut pas que la photo soit trop blanche. Il faut garder les contours du visages et les traits visibles pour optimiser le résultat final.

Voici le résultat :

Etape N°4

• Sur ce même calque, appliquez le filtre “Esquisse” en choisissant “Trames de Demi-Teintes” (Filtre > Esquisse > Trames de Demi-Teintes). Dans les réglages, appliquez une Taille 1 et un Contraste de 50. Le Type est de type Point.

Voici le résultat :

Etape N°5

Sur ce même calque, changez le mode “Normal”  en mode “Produit” et baissez l’Opacité à 25%.

Voici le résultat :

Etape N° 6

Aplatissez votre image, en évitant d’écraser votre ordinateur (jeu de mots Ramoutcho ), mais plutôt en suivant la flèche rouge comme indiqué sur l’image.

En cliquant sur la liste déroulante, cliquez sur “Aplatir l’image”.  Cela permet de réunir les deux calques en un seul.

Etape N° 7

Appliquez le filtre “Textures” dans la rubrique “Filtre”. Le Plaquage de Texture sera de type Toile, la Mise à l’échelle à 50%, le Relief à 6 et la Lumière en Haut droite. Vous pouvez néanmoins modifier ces données pour correspondre au mieux à vos attentes.

Et voici le résultat final :

Vous pouvez ensuite mettre en situation votre image comme ci-dessous.

NB : le résultat peut toujours être amélioré. Vous n’avez qu’à reprendre chacune des étapes en jouant sur les valeurs.

A vous de jouer maintenant !

Bonjour à tous !

Aujourd’hui, pour une mise en page sympathique et originale de vos documents, je vais vous apprendre à insérer une image et à l’habiller dans un bloc de texte.

Nous utiliserons pour cela la version CS3 d’Indesign.

1ère étape :

Vous avez sur votre écran votre page avec votre texte.

Importer votre image en faisant  Ctrl+D ou Fichier + Importer

Pour habiller votre image avec du texte rendez vous dans la barre Fenêtre à Habillage de texte

Une fenêtre apparait :

Vous pouvez ensuite choisir la façon dont vous voulez habiller votre image.

Sélectionnez l’image avec le curseur de sélection ou sélection directe.

-         L’icône habillage autour du rectangle de sélection, permet de créer un habillage rectangulaire autour de votre objet. Les contours sont délimités par le cadre de la sélection d’objet.

-          L’icône, habillage de la forme de l’objet (logo), correspond à l’habillage du contour de la forme. Dans Options de contour à type, choisir Détection des contours. L’ordinateur détecte automatiquement la forme de l’objet. Vous pouvez également aller dans la barre Objet + masque + option et choisir Détection  des contours dans « Type ». Puis Ok.

Votre texte encadre donc votre image.

2ème étape :

Avec le curseur de sélection directe vous pouvez modifier les limites du contour de façon personnalisée.

Les icônes permettent de choisir le décalage entre le texte et l’image en haut en bas à gauche et à droite.

Dans Option d’habillage :

Habiller : vous pouvez choisir d’habiller le texte uniquement à gauche ou uniquement à droite.

L’icône  empêche l’apparition du texte dans l’espace disponible à droite et à gauche du bloc.

L’icône  empêche l’apparition du texte dans l’espace disponible en dessous du bloc. Celui-ci est automatiquement renvoyé dans la colonne suivante ou dans le bloc de texte suivant.

« Fait passer le paragraphe avoisinant en haut de la colonne suivante ou du bloc de texte suivante »

3ème étape :

Si  vous avez des « trous » dans votre image que vous souhaitez remplir de texte, il vous suffit de cocher dans la fenêtre habillage de texte, l’option Inclure les contours intérieurs. Cette manipulation est possible que si vous êtes au préalable dans la catégorie habiller la forme de l’objet (logo).

Vous pouvez ainsi créer des pages de textes personnalisées grâce à ces astuces toutes simples !

Bonjour tout le monde, je vais aujourd’hui analyser le site de Malabar, je me suis concentrée sur ce site car depuis le changement de la mascotte Mr Malabar le site a été modifié et redynamisé, au bonheur des petits comme…des grands !

1) La malabarmania

Un rectangle composé de deux boudins de couleur rose que l’on peut  partager cela vous dit quelque chose ?

Et oui, c’est notre fameux Malabar, qui a été inventé en 1858 par la société Kréma Lance.

Depuis ce jour la marque à su évoluer avec ses fans !

C’est en 1969 que Mr Malabar devient la mascotte. De 1980 à 2000, la marque malabar met en place sa célèbre sagas de vignettes : «  qu’en y en a marre, y a Malabar ».  Les aventures de Monsieur Malabar sont alors racontées sous forme de courtes bandes dessinées.

2004 : qui n’a jamais collé un tatouage à son voisin de classe ?

Les anim’tatoos débarquent !

2011 : Malabar fait sa révolution, la nouvelle mascotte : Mabulle remplace notre cher et tendre Mr malabar…

Comment est construit le site malabar ?

Le site malabar.fr a été construit en flash ce qui lui apporte beaucoup de dynamisme et ce qui lui  permet d’être plus réactif avec l’internaute. La page d’accueil animée permet de capter l’internaute et intrigue sur le contenu des pages.

Nous arrivons tout d’abord sur une page d’accueil assez originale et amusante puisqu’elle présente les différentes rubriques du site en animation et qu’elle se déplace en fonction du choix de l’internaute. Cela crée une véritable interactivité avec lui.

Nous pouvons donc choisir notre rubrique de deux manières différentes soit en cliquant sur l’animation proposée dans la page d’accueil soit en cliquant dans la barre de menus en haut.

En cliquant sur un des onglets, on s’aperçoit qu’il se colore, permettant ainsi à l’internaute de mieux visualiser où il se trouve.

Le logo malabar ,en haut à gauche de la barre de menus, ne change jamais de position et reste très visible à chaque changement de rubriques.

Nous trouvons dans ce site 5 pages bien distinctes présentant des informations très complémentaires qui sont toutes très attirantes. Chaque page entretient le lien de proximité avec l’internaute. Nous allons pouvoir “jouer avec Mabulle”, télécharger des fonds d’écrans,des tattoos… cela permet à malabar une certaine forme de fidélisation et cela va également favoriser le rapprochement consommateurs – produits. De plus la rubrique FAQ va permettre une sorte de dialogue et d’échange avec la marque qui répondra aux interrogations que peuvent se poser les personnes visitant le site.

voici un exemple de page : la rubrique Bulle’o'max

En bas du site, nous retrouvons le logo d’un réseau social qui nous renvoie instantanément à la page Facebook de Malabar. (qui soit dit en passant se révèle beaucoup moins attractive que le site.)

Les caractéristiques graphiques du site internet :

En arrivant sur la page d’accueil du site internet de malabar nous comprenons tout de suite l’esprit de la marque et son univers qui se veut très enfantin, et très coloré.

En effet il y a énormément de couleurs vives : on retrouve du rouge, jaune, rose, vert, bleu mais les couleurs dominantes restent tout de même le rose et le jaune. On se demande bien pourquoi tiens…!

Ces couleurs vives très attrayantes sont très caractéristiques des valeurs de la marque. Un univers imaginaire, joyeux, acidulé, plein de vie, un monde enfantin qui d’une part permettra aux enfants de se retrouver et de s’imaginer un grand nombre d’aventures avec  la mascotte d’aujourd’hui Mabulle ; et d’autre part leur donnera envie de goûter tous les malabars et de parcourir les différentes rubriques du site.

Quant aux adultes ce site reste assez ludique et attirant car cela les replongent dans les souvenirs de leur enfance ( même si la mascotte a changé les malabars restent les mêmes n’est ce pas ? )

Par conséquent Malabar cible à la fois les petits et les grands. En effet le site est très bien conçu pour attirer les enfants et leurs donner envie d’acheter des malabars mais tout le monde sait bien qu’au final ce sont les parents qui vont devoir débourser pour ces chewing gum !

Il y a également énormément de formes, de dessin, nous rentrons dans un univers de rue enfantine avec un mur en brique rouge présent tout au long du site, des bulles de chewing-gum, des graffitis (rappelant, je pense, l’univers des tatoos), des toits d’immeubles, des skates, et Mabulle (qui ressemble un peu à un chat de gouttière nous pouvons l’avouer ! )

La typographie utilisée ressemble à celle des graffitis, et est assez présente dans ce site internet faisant intégralement partie du décor et du design.

Les caractéristiques graphiques du site internet :

Grâce au code source du site nous pouvons constater que le langage utilisé est le langage HTML. Nous retrouvons également du langage javascript et des styles CSS ( qui vont permettre de mettre en page et d’appliquer des styles aux textes). Dans la balise meta nous pouvons constater que les keywords sont : malabar, tattoo , tattoos , jeu, famille , collectionner, collectionne. Ce site en flash joue sur les animations pour créer de forts impacts visuels et ainsi être  plus facilement mémorisé dans l’esprit des internautes.

Pour les personnes ne bénéficiant pas d’un haut débit (et oui, il faut penser à tout le monde…) le site Malabar propose une version html beaucoup plus légère (ou flash sera inexistant) et résumant en une page le contenu du site. Cela paraît tout de suite beaucoup moins dynamique et aura BEAUCOUP moins d’impact que le site en flash !

La stratégie de communication :

Les principaux objectifs de malabar sont affectifs et concerne son image. Ce site internet capitalise plus sur les animations, sur les jeux, sur les fonds d’écrans…que sur les produits ! sa stratégie créative est basée sur le principe de la lovemark ( on aime la marque,on achète ses produits pour tout l’imaginaire qu’elle renvoie comme ses valeurs, sa culture, son histoire… ) on devient des “fans absolus” de la marque et nous n’envisageons pas de la remplacer par une autre !

Malabar entretient un lien fort avec ses consommateurs et ne veut pas le perdre, le site fait tout pour se rapprocher le plus possible de sa cible : les enfants ! par conséquent le ton adopté par Malabar est ludique et simple !!

Pour conclure un site original, amusant qui plaît autant au petits qu’au grands !

Bonjour à tous,

Aujourd’hui nous allons voir comment  afficher  une carte  de Grenoble et ses villes jumelées avec Google Maps (ou tout autre ville c’est juste pour l’exemple).

Pour cela nous allons utiliser comme base le tutoriel de Google ainsi que son  code source.

http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/tutorial.html

Pour arriver à réaliser notre tutoriel nous allons nous y prendre en 3 étapes

1-    Récupérer le tutoriel Google et le comprendre

2-    Trouver les coordonnées GPS de la ville de Grenoble

3-    Rajouter les coordonnées GPS des villes jumelées

1- Récupérer le tutoriel Google et le comprendre.

Nous remarquons que ce code source  donne 1 page  avec une zone qui prend toute la place définie ici par le 100% qui porte le nom  de « map canva »

Une fois cette page chargée, on va appeler la fonction « initialize » au chargement  qui nous donne 2 possibilités

-       création de page

-       récupération fichier JavaScript (qui nous sert de lien avec Google)

MAP options permet de définir différents paramètres : coordonnées GPS de la ville souhaitée, le zoom, centrage mais aussi le type de carte : terrain, route, satellite…

Google nous explique tout en dessous. C’est en anglais bien évidemment mais je vous rassure il n’ y a pas besoin d’être bilingue.

Ensuite nous allons télécharger un logiciel Webstorm qui est un logiciel d’édition web.

http://www.jetbrains.com/webstorm/

(version gratuite pour 30 jours). Bande de petits veinards !

Nous allons créer un nouveau fichier que nous appellerons tutoriel 1 et nous allons copier le code source de Google à l’intérieur.

Pour voir ce que cela donne nous allons  dans View – Open In Browser et nous voyons apparaître  une carte d’Amérique.

Etape 2 : Rentrer les coordonnées GPS de la ville de Grenoble

Ce n’est pas  l’Amérique qui nous intéresse mais Grenoble.

Nous créons donc un nouveau fichier que nous appelons tutoriel 2 et nous recopions une nouvelle fois le code source que nous allons cette fois-ci modifier.

Nous devons changer les coordonnées GPS qui sont ici  soulignés en bleu et les remplacés par les coordonnées de Grenoble :

Pour trouver les coordonnées nous allons sur :

http://www.easy-concept.com/aide/geocode3.php ou nous rentrons la ville souhaitée.

Nous allons maintenant copier ses coordonnées dans notre code source  (ici en bleu)

Puis nous allons rajouter un titre afin que quand on passe la souris sur la ville de Grenoble par exemple son nom s’affiche.

Pour cela nous allons de nouveau sur la page Google, cette fois ci dans  l’onglet Overlays- Markers.

Google nous explique ensuite ce qu’il faut rajouter

On va a nouveau copier le texte dans notre tutoriel 2 en changeant les informations, ici  nous changeons le titre ou on met Grenoble ( ou autre ville souhaitée).

Quand on va à nouveau  dans  View – Open in browser cette fois ci cela nous donne Grenoble et le marqueur s’affiche quand on passe dessus. Le zoom a été réduit également pour qu’on puisse voir toute la carte.

3- Trouver les coordonnées des villes jumelées :

Nous allons à nouveau créer un nouveau fichier tutoriel 3 ou nous faisons un copier coller.

Nous allons voir sur Wikipedia quelles sont les villes jumelées avec Grenoble.

Catane (Italie)

Sfax (Tunisie)

Essen (Allemagne)

Halle (Saxe-Anhalt) (Allemagne)

Corato (Italie)

Oxford (Royaume-Uni)

Phoenix (Etats-Unis)

Nous allons de nouveau sur easy concept pour trouver les coordonnées.

http://www.easy-concept.com/aide/geocode3.php

Il y  a beaucoup de villes, nous n’en  ferons que deux pour montrer comment faire.

Nous  changeons le titre des coordonnées afin de savoir que c’est Grenoble vu que nous allons insérer d’autres coordonnées. On redonne des variables par rapport au nom afin que l’on puisse retrouver les villes.

Ensuite nous allons de nouveau  créer des marqueurs avec Overlays – marker afin de pouvoir a nouveau afficher le nom des villes quand on passe dessus.

Ensuite nous reactualisons la page et cela nous donne

Voilà nos villes sont affichées c’est pas beau quand même !