blog de stage

Vous êtes lecteur de mon rapport de stage et avez déjà découvert la partie "v1.2 de Milan mes Cadeaux" ? (visit us at http://milan-mescadeaux.com) Alors cet article est fait pour vous !

J'ai immortalisé sur le papier les versions antérieures du contenu des articles, qui ne seront plus jamais en ligne. Mais il y a un petit vide à l'endroit qui illustre la solution adoptée, dans la série de captures d'écran, l'une n'est pas montée à bord, la voici :

v1.2

v1 et v1.1

Cher blog de stage, bonjour.

Cela fait très longtemps que je n’ai pas posté ! Si je t’expliquais que mon serveur ftp filezilla est cassé, et que cela pousse moins à la consommation d’échanges avec wordpress, tu me dirais que ce n’est pas une vraie bonne raison. Si je te disais que je te trompe avec des feuilles de papier blanc, tu me dirais de me moderniser, garder un bon rythme d’écriture numérique, PIERRE QUI ROULE N’AMASSE PAS MOUSSE, et de laisser tomber mes papyrus. Mea culpa, blog de stage, mea culpa !

Mais si je te rappelle que je ne suis pas notée sur toi, mais sur un rapport de stage que j’ai à rendre dans 15 jours, là, tu n’as rien à redire. Et tu as tort.

Blog de stage, on va voir comment on se débrouille, mais je vais essayer de te compléter encore un peu ! Je sais déjà que tu ne m’en veux pas de tricher sur les dates d’écriture (rétro-horodatage),et que ce qui t’importe c’est que je puisse conserver une mémoire numérique de ce stage chez Milan. Tu ne m’en voudras pas non plus si j’écris de moins longs articles et que je me contente de poster des images, liens, captures d’écran… d’ailleurs, il vaut mieux, parce qu’à force de blablas… blablablabla !
(mais s’il n’en est rien, tu ne te fâcheras pas quand même ;-) !)

Hihihi, alors je te dis à très bientôt, merci d’avoir été patient, ne change pas d’adresse !

Bises de ta blagueuse #1

Ps : où va le monde !?

Proposition graphique faite pour Milan Mes Cadeaux ...

Papiers-cadeaux numérisés au scanner, constitution d'une bonne banque de patterns photoshop... Mais l'ensemble est très quitch, j'avoue !! : )

Mardi 20, réunion avec Yasmina, Lou et Damien pour la conception de la v2 de Milan Mes Cadeaux. Nous avons aussi eu le service marketing au téléphone, qui nous à annoncé les premières ébauches du mailing de rentrée. Il y aura 3 chainages (0-5 , 5-8, 8-13) + anniversaire, et des nouvelles subdivisions (éveil, nature, lecture, multimédia ...)

Nous cherchons un moyen de présenter toutes ces offres sans être rébarbatifs, sans obliger l'utilisateur à venir chercher l'information, et en utilisant le moins de place possible.

Je pense alors à un système de menu circulaire dont voici une ébauche très rapide :

page swf (aller en bas).

Aujourd'hui il n'y a pas grand monde à la cellule. Guillaume, Lou et moi sommes les seuls à ne pas partir en pom pom poropom pont. Et c'est une journée très productive, musique dans les oreilles, à fond les manettes, pas de "parasitages" externes.

Le matin, je finis de faire le benchmarking pour le graphisme d'autres sites ayant des ambiances Nature et Anniversaire. Résultat des courses : je ne tombe sur aucune perle qui m'apporte une solution miracle ... et c'est normal ! Mais quelques sites montrent de bons exemples de pictos plus simples... une ambiance générale intéressante ... certaines petites touches d'humour ou des fioritures graphiques que j'apprécie.

[ pour accéder au word complet, c'est ici ]

Un autre point positifs de ce benchmark est que j'ai aussi fait un tour d'horizon de graphistes/ illustrateurs d'univers jeunesse. J'ai tout particulièrement aimé le site el le blog de Philippe Jalbert :
http://www.philippejalbert.com/
http://platdujour.over-blog.org/

Ce talentueux illustrateur et auteur de livres travaille pour plusieurs magazines de Milan, ainsi que pour Toboclic, d'où est tiré Bétiz, le personnage qui figure sur le site Mes Cadeaux à la partie Anniverssaire.
Dans l'idéal, c'est ce style d'illustration et de colorisation vectorielle que j'aimerais voir figurer sur la v2 des primes dématérialisées. Ce style enfantin est déjà un peu celui qu'Arielle à mis en place avec les éléments du mailing printemps. Il serait bon de continuer à le développer et à l'enrichir.

L'autre jour en attendant le train, j'ai eu une idée pour une anim d'intro. Elle est principalement basée sur le principe d'explication détaillé de l'anim de l'hébergeur gandi - voir mercredi 07/05-... Alors plutôt que d'en rester à un story-board griffonné sur un bout de papier, j'ai voulu la mettre en place, comme un "brouillon au propre"...

Cela m'a permis de me documenter d'avantage sur le mouvement d'un 'walk cycle', sur ce site notamment : webmonkey
J'ai aussi retrouvé des planches d'anatomie que j'avais une fois vues dans un livre et que je recherchais depuis longtemps ! : walk cycle tutorial

Un test d’intégration dans un navigateur a ensuite révélé que la superposition de l'animation par-dessus la zone de login est plutôt compliquée… Mais bon, dans tous les cas, ce n’est qu’un premier jet pour donner la couleur de l’idée.

Terminée pendant le week-end, cette anim a été un autre petit exercice d’utilisation de flash plutôt agréable !

voir l'anim :

L'une des modifications listées pour la nouvelle version concerne le graphisme : le rendu des premiers pictogrammes n'est pas satisfaisant car ils ne 'collent' pas avec l'ensemble du site.

Une nouvelle recherche dans les banques d'icones fut fructueuse :

utilisés:

[accueil - contact - récits - multimédia - activités - chansons - mp3 - pdf]

[...en vue d'une v2...]

Visite des sites Mootools et Adobe Spry, parcours leurs galeries d'exemples de fond en large.

Cela pourra être très utile de connaitre la gamme d'effets proposés. Ici, j'oriente la recherche en vue de la version 2 des primes démat.

Samples retenus :

ADOBE

{ http://labs.adobe.com/technologies/spry/samples/effects/blind_sample.html

http://labs.adobe.com/technologies/spry/samples/effects/grow_sample.html

http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html }
= différentes formes de transition (d'apparitition) pour la visibilité d'un div true / false.

http://labs.adobe.com/technologies/spry/samples/effects/
multiple_slides_sample.html ***
4 boutons côte-à-côte. OnRelease : un <div> se déroule (slide vertical), et est remplacé par un 2nd, 3ème, 4ème au clic des boutons suivants.

http://labs.adobe.com/technologies/spry/samples/effects/
fade_grow_sample.html
(genre de rollover sur images, avec fade-out puis fade-in...mais lent)

MOOTOOLS :

http://demos.mootools.net/Fx.Morph
http://demos.mootools.net/Fx.Slide
http://demos.mootools.net/Tips

(mais aussi, pour "autre" : /Asset.css et Fx.Scroll (excellent))

Le widget de Audric permet aux utilisateurs qui ont plusieurs abonnements MMC de naviguer entre les primes sans avoir a s'identifier plusieurs fois.

Ces liens apparaissent dans le menu et les boutons reprennent l'identité visuelle de chaque espace.

Ce découpage montre les états actif et inactif (voir article de l'astuce css qui peut être complété par cet excellent lien ; ).