Semaine du 19 au 23 mai

Journal : Semaine du lundi 19 au vendredi 23 mai

Voici mes entrées de journal pour cette première semaine de stage.

> Lundi 19 mai 2014

Aujourd’hui,  premier jour de stage, j’ai bien évidement pris connaissance avec l’ensemble de l’équipe et son univers. Durant cette première journée, j’ai un découvert les outils de travail de l’agence, Jean-Philippe m’a présenté leurs plateforme de travail pour les créations webs, le CMS Webo-Facto. Il m’a également expliqué ce qu’était le Responsive Web Design.

<< Un site web adaptatif (anglais RWD pour responsive web design) est une notion de conception de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel. >>
Wikipédia

Ce genre de travail donc s’effectuer principalement avec des « Media Queries » grâce à JQuery et par conséquent JavaScript. Jean-Philippe m’a donc montré concrètement les différents états d’affichage d’un tableau  ou d’un menu en fonction du support d’affichage.

Anne m’a également montré ce qu’elle pouvait faire pour un site web, l’établissement de la charte graphique, des logos, des différentes conceptions de site web …

Jean-Philippe m’a également parlé qu’ils allaient (lui et Swan) participé aux JAS de La Rochelle, et que peut être je pourrais les aider à concevoir une sorte d’animation ou de présentation interactive de leurs agences. L’idée étant de mettre à dispositions des visiteurs un ordinateur ou une tablette pour présenter de façon agréable et interactive l’agence, et de pars la qualité graphique et visuelle de l’application, ses compétences.


> Mardi 20 mai 2014

Swan était absent lors de cette journée. J’ai d’abord pris l’initiative de me renseigner un peu plus sur ces Journées Aliments & Santés (JAS) et j’ai bien compris que :

  • les Journées Aliments & Santés (JAS) est un événement organisé par le CRITT de La Rochelle, regroupant pendant 2 jours (18 & 19 juin) plusieurs centaines d’acteurs dans le marché de l’agro-alimentaire et du cosmétique.
  • c’est événement important donc pour l’agence puisque qu’il réunira de nombreux acteurs se situant dans le domaine d’application de l’entreprise, représentant donc des opportunités de contrats et de clientèles

J’ai également pris plus de connaissance avec JavaScript, que j’avais déjà abordé en fin d’année de DUT à l’IUT de La Rochelle (langage où je n’avais pas compris grand chose) notamment en consultant ce qui ce fait avec JavaScript, JQuery, AJAX. Mais également en effectuant les cours fournis par le W3Schools.

Jean-Philippe m’a donc reparlé de ces fameuses journées, et m’a exposé vaguement ces idées pour cette application pour présenter l’agence.

  • Il faut quelque chose de simple, un peu à la façon de windows 8, des grosses icônes qui mènerait vers des pages présentant les savoirs faire de l’agence de façon très synthétisé, un peu à la manière d’un diaporama. Le but est d’avoir un bel aspect visuel.
  • Je devrais travaillé avec Swan pour connaître le contenu de cette application et la façon dont il sera organisé et avec Anne et Léa pour les aspects visuels, les chartes graphiques, le graphismes …

Mais Swan n’étant pas là et beaucoup de flou restant sur ces « JAS », j’ai installé en attendant sur mon ordinateur After Effect. Le temps de le télécharger, j’ai vagabondé sur le web pour trouver des exemples intéressants pour créer un début d’application. Léa m’a appris de me servir (de façon générale et basique,  ce logiciel est ultra-complet) d’After Effect pour le montage vidéo et/ou la création d’animation Flash (fichiers SWF).


> Mercredi 21 mai 2014

En arrivant le matin nous nous sommes regroupés avec Swan et Léa pour faire le point sur ce que nous allions préparer pour les JAS,  après un brainstorming et avoir discuté de cela pendant 30 minutes, nous avions certaines choses importantes à déterminé :

  • Quels supports et moyen allaient être mis à disposition pendant les JAS ? Un téléviseur ? Un vidéoprojecteur ?
  • En fonction de cela, vaudrait-il mieux une animation tournant en boucle présentant l’agence à la manière d’une vidéo publicitaire ? Ou plutôt une animation où les visiteurs pourront interagir avec  pour découvrir l’agence ?

Nous nous sommes dit alors que l’on pourrait faire un brouillon des deux possibilités. Personnellement, j’ai pensé qu’un Prezi aurait pu plaire, alors j’ai s’ils connaissaient cet outil : non. Après leurs avoir rapidement présenter ce qui ce faisait avec Prezi, ils ont trouvé l’idée assez intéressante  et que je pouvais donc en faire un rapidement pour le montrer à Jean-Philippe. En attendant Swan à préparer rapidement un document avec le plan, ou plutôt comment les informations allaient être présenté (d’un point de vue hiérarchique) :

La Sacrée Com possède principalement deux pôles de compétences, les créations graphiques, avec des logotypes, des chartes graphique, des cartes de visites, des PLV (Publicité sur Lieu de Vente), plaquettes, etc. Et les création web, avec des sites internet simple, en RWD, site de e-commerce, etc. Mes productions suivront donc cet axe, deux pôles majeurs et distinct découpé en plusieurs sous-axes.

J’ai donc commencé à faire mon Prezi, ce qui a été franchement très rapide, dont voici le lien permettant de le consulter :

http://prezi.com/ia8hyqtaedki/?utm_campaign=share&utm_medium=copy

L’après-midi j’ai commencé à faire l’animation interactive, enfin, on dira « application » pour simplifier. J’ai choisi de mettre cela en place avec HTML/CSS/JavaScript, puisque cela m’a sembler en cohérence avec ce que faisait et savait faire l’agence.

J’ai d’abord créer une première page HTML , en y insérant 2 images pour chaque pôle (un crayon pour le graphique, la planète terre avec « www » en dessous pour le web). L’idée était de faire un menu à la façon d’un « Thumbnail », il s’agit de menus très simple formés d’icônes uniquement. J’ai ensuite mis sur les images des liens menant vers les pages suivantes, dont je n’ai créer uniquement le squelette. J’entend par « squelette » la création du fichier et ces quelques lignes à l’intérieur :

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>
Squelette d'une page HTML

En recherchant sur le web j’ai trouvé un plugin JQuery léger et sympathique sur (http://www.queness.com/) pour ajouter un effet de zoom et de grossissement sur l’image au survol de la souris avec la pseudo-classe « hover » de CSS. J’ai ensuite ajouter un titre et une description qui s’affiche sur l’icône au survol de la souris également.

Vous pouvez visualisez tout cela en cliquant ici.

J’ai héberger les fichiers que j’ai créer pour l’agence sur ce site, ils sont normalement accessible à cette adresse :

http://anthozano.fr/perso/


> Jeudi 22 mai 2014

J’ai mis le Prezi de côté pour  le moment au profit de l’application, j’ai montré ce que j’avais fais hier à Léa, ça lui a plus, et que ça lui ferrait un support pour modifier les feuilles de styles pour avoir un design correct et plus beau.

De mon côté j’ai continué mon l’application, en créant le second niveau hiérarchique, où l’on accéde à un autre menu thumbnail détaillant les créations de l’agence suivant l’axe principale choisi, avec Swan nous avons déterminé 4 sous-axes pour chaque axe principale. Oula, ça devient compliqué ! Voici une carte mentale pour imager tout cela :

Menu principal

J’ai repris les même animations que pour le menu principal mais je pense les changer et les adapter à la thématique de leurs contenu, par exemple Léa m’a proposé de faire apparaître un écran, une tablette et un mobile successivement dans la catégorie des sites RWD. L’idée est à travaillé ! pour le moment je compte finir toute la structure et ensuite personnalisé, détaillé et animé le tout.

Après avoir créer le squelette de toute les pages et créer tout les menus (3 menus et 8 pages donc) j’ai remarquer qu’on se perdait facilement dans les pages, j’ai alors décidé de mettre en place des boutons de navigation :

  • Au premier niveau hiérarchique (menu principal), je n’ai mis aucun bouton puisqu’il s’agit de la page d’accueil, ce genre de bouton n’a pas lieu d’être à ce niveau.
  • Au second niveau (seconds menus), j’ai simplement insérer un bouton retour, puisque l’utilisateur n’a traversé qu’un niveau hiérarchique il a besoin de revenir en arrière que d’une seule page

  • Au troisième niveau (sur les pages détaillants chaque rubrique), j’ai insérer deux boutons, un retour, comme précédemment, pour revenir au sous-menu, et un bouton accueil, pour revenir au menu principal.

Pour placer ces boutons j’ai utilisé la propriété « fixed » de CSS qui est assez intéressante, cela permet de fixer une balise à une position fixe et indépendante du reste de la page, le bouton restera toujours au même endroit sur l’écran donc :

#retour {
  position: fixed;
  top: 5px; left: 5px;
}
Propriété CSS fixed

Enfin de journée j’ai commencé à rechercher des solutions pour mettre en place des diaporamas dans les pages, je suis tombé sur des exemples en CSS incroyable. Quand je dis incroyable, c’est que je ne pensais même pas que CSS était capable de faire des choses pareilles, je pensais qu’il fallait forcément au minimum du javascript; mais le problème est que ces solutions en « pur » CSS sont extrêmement compliqué à mettre en place et nécessite une grande maîtrise de CSS.

J’ai fouiner dans les codes sources de ses exemples, je suis tombé sur des feuilles de styles effrayantes faisant plus de 1200 lignes …


> Vendredi 23 mai 2014

Journée de retour au lycée.

Aujourd’hui j’ai malgré tout revu et refait en majeure partie la rédaction de mon journal sur moodle.

Retour à la présentation de l’agence

 Entrée de journal suivant

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *