Td corrigé Typo : bolonewt / Trebuchet sans MS / Verdana Orange / Violet (netc ... pdf

Typo : bolonewt / Trebuchet sans MS / Verdana Orange / Violet (netc ...

Ergonomie des interfaces; Intégration HTML / CSS; Colorisation sous Photoshop ..... pour me donner des conseils pour dynamiser l'image et corriger mes erreurs. ... client avec le HTML 5, le Web 2.0 et le Feng Shui des interfaces utillisateurs.




part of the document



Typo : bolonewt / Trebuchet sans MS / Verdana
Orange / Violet (netc)


Omagad ya des bestioles qui sortent du parquet, j’ai pas peur. Les fourmis sont grosses, des autres truc bizarres. Sang froid et tout :s
Une nuit.
j’ai du mal à m’inspirer pour la mission principale. Vive les marges, vive les images, j’suis à 28 pages alors que j’ai pas forcé l’écriture.
J’t’avoue tout de suite que j’ai pas écrit quelque chose de phénoménal, des fois c’est pas assez détaillé, des fois ça l’est trop.
Il me manque à inventer une webographie pour les ressources php, html, css.
Le glossaire j’ai envie de dire… fuck off, mon dossier ne s’adresse pas aux newbies. Trop la flème :p

Bizz bizz a tantot.
echanger mes dollars américains
balles et gants de baseball pour Arthur
miel et beurre de pomme pour marie (bouilloire ?)
bouteilles de cidre de glace (2 ?)
sirop d’érable (lourd !)
beurre de sirop d’erable (miam)
niaserie du genre
chopes (pour moi, rouks & cocotte)
Assiette montreal (Francine)
Rapport de stage :
Audrey Masson,
chez Net Communications à Montréal

Mission :

Création d’une application Web pour gérer les feuilles de temps

Missions annexes :

Ergonomie des interfaces
Intégration HTML / CSS
Colorisation sous Photoshop






Professeur tuteur : Hervé Mignot
Maître de stage : Laurent Mastorgio




Année 2007 – 2008 Remerciements
En premier lieu je tiens à remercier Diane Turcotte pour son implication dans la recherche de stage à Montréal ainsi que qu’ Anne Grenet et Sylvie Demorosty des Relations Internationales de l’IUT de Troyes pour leur aide dans l’organisation de ce voyage et surtout les démarches administratives.
Je me dois de remercier l’Office Franco-Québécoise de la Jeunesse, le Conseil Régional de Champagne-Ardenne et le CROUS de Reims pour leurs aides financières, sans quoi je n’aurai pu vivre pleinement ces trois mois à Montréal.
Je souhaite exprimer mes remerciements à Laurent Mastorgio virgule mon maître de stage pour son accueil et la confiance qu’il m’a accordé au sein de Net Communications.
Merci à l’ensemble de l’équipe de m’avoir rapidement intégré, et plus particulièrement à Alexandre, Jean-François, Stéphane et Alain avec qui j’ai eu l’occasion de travailler en collaboration et qui m’ont apportés (je dirais pas de s) de précieux conseils.
Enfin, ce stage n’aurait pu se dérouler si facilement sans la formation d’une qualité exceptionnelle que j’ai reçue de tous les professeurs du département Services et Réseaux de Communication de l’IUT de Troyes. Merci à toute l’équipe enseignante et surtout à Hervé Mignot, mon tuteur de stage et à Oliver Cherrain Chérain t’as jamais su l’écrire :’) pour leur visite de stage car ce fut un moment clé durant ces douze semaines.
Sommaire
 TOC \o "1-3" \u Remerciements  PAGEREF _Toc202121571 \h 4
Sommaire  PAGEREF _Toc202121572 \h 5
Résumé  PAGEREF _Toc202121573 \h 7
I ] L’entreprise  PAGEREF _Toc202121574 \h 8
1. Présentation de l’entreprise  PAGEREF _Toc202121575 \h 8
2. Historique de Net Communications  PAGEREF _Toc202121576 \h 9
3. Contact  PAGEREF _Toc202121577 \h 9
4. Mon rôle  PAGEREF _Toc202121578 \h 10
5. Organigramme  PAGEREF _Toc202121579 \h 11
1. Présentation ?  PAGEREF _Toc202121580 \h 12
III ] Missions annexes :  PAGEREF _Toc202121581 \h 15
1. Ergonomie des interfaces  PAGEREF _Toc202121582 \h 15
Présentation :  PAGEREF _Toc202121583 \h 15
Démarche :  PAGEREF _Toc202121584 \h 16
Réactions :  PAGEREF _Toc202121585 \h 16
2. Intégration HTML / CSS  PAGEREF _Toc202121586 \h 17
Présentation :  PAGEREF _Toc202121587 \h 17
Démarche :  PAGEREF _Toc202121588 \h 17
Réactions :  PAGEREF _Toc202121589 \h 18
3. Colorisation des personnages de TocTocToc  PAGEREF _Toc202121590 \h 19
Présentation :  PAGEREF _Toc202121591 \h 19
Démarche :  PAGEREF _Toc202121592 \h 19
Réactions :  PAGEREF _Toc202121593 \h 21
Réactions :  PAGEREF _Toc202121594 \h 22
4. Pour la culture…  PAGEREF _Toc202121595 \h 23
Mon avenir :  PAGEREF _Toc202121596 \h 24
Conclusion :  PAGEREF _Toc202121597 \h 25
Annexes  PAGEREF _Toc202121598 \h 26
Conférence chez Yu-Centrik : La phénoménologie des interfaces  PAGEREF _Toc202121599 \h 26
Faudrait le faire tenir sur une seule page

Résumé
Ma formation en DUT Services et Réseaux de Communication se décompose en trois semestres de cours puis de douze semaines de stage en entreprise. Le stage a pour but d’enrichir et de valider mes acquis mais aussi de me donner un aperçu du travail en entreprise. J’ai désiré trouver un stage dans une société de services en Ingénierie de l’Internet afin d’avoir un réel aperçu de ce qu’est une entreprise tournée exclusivement vers le Web.
J’ai songé un cours instant à effectuer mon stage à réelle proximité de chez moi cependant suite à quelques recherches infructueuses dans les Ardennes, j’ai envisagé de partir à l’étranger.
Montréal connaît une effervescence dans le secteur des nouvelles technologies appuyée par les fonds et les subventions provenant du Québec. C’est pourquoi, en plus de la francophonie, j’ai choisi cette destination.
Après la validation de mon dossier au CEGEP André- Laurendeau, Diane s’est rendue à la cité du Multimédia et l’entreprise Net Communications s’est dite prête à m’accueillir puisqu’elle allait recevoir pour début avril le feu vert pour un projet de grande ampleur nommé Toc Toc Toc.
Je suis donc partie avec l’aide de l’Office Franco-Québécoise de la Jeunesse et le Conseil Régional de Champagne Ardennes à Montréal, du 3 Avril au 26 Juin 2008.
I ] L’entreprise : Net Communications
1. Présentation
L’entreprise Net Communications évolue dans le domaine du multimédia et plus particulièrement vers un phénomène montant au Québec qu’est la télévision interactive. Grâce à son expérience au niveau des nouvelles technologies, l’entreprise développe ses propres applications logicielles pour gérer les demandes des clients de manière simple et efficace.
Net Communications est présente dans le secteur des nouvelles technologies depuis les débuts de l’expansion d’Internet. Elle a ainsi grandi au rythme d’Internet et dans un cadre familial puisque ses dirigeants Daniel et Luc Béland, président et vice-président gardent la direction de l’entreprise depuis maintenant 14 ans.
Grâce à de prestigieux clients, Net Communications s’étend vers l’international : en Europe et plus précisément en Belgique et en Suisse. Elle est également en étroite collaboration avec les chaînes télévisées canadienne canadiennes afin d’adapter des séries pour enfants en site et jeux vidéos pour le Web.
2. Historique
Créée en 1994 à Saint-Jean-sur-Richelieu, Net Communications est une entreprise familiale qui évolue en premier lieu sur le secteur du commerce électronique. À cette date Internet est encore au stade primaire et il est difficile de trouver des parts de marché sur ce secteur. C’est pourquoi Net Communications se lance comme fournisseur d’accès et propose des applications Web.
L’entreprise évolue en même temps que les nouvelles technologies, elle possède aujourd’hui une place d’affaires dans la cité du Multimédia et une salle d’hébergement à Montréal. Avec un total de 35 employés Net Communications offre des solutions variées pour une clientèle commerciale, industrielle et institutionnelle. Ses domaines de prédilections prédilection sont donc les télécommunications, le Web et la télévision interactive. Plus précisément elle œuvre en tant que concepteur, développeur et éditeur de sites Web et d’applications logicielles.
3. Organigramme
 4. Mon rôle
Arrivée au sein de l’entreprise, une réunion a eu lieu avec mon maître de stage pour déterminer quel allait être mon poste au sein de l’entreprise l’équipe. La première phase fut de situer si je serai allais me trouver du côté technique ou du côté graphique. J’ai préféré commencer avec un domaine que je maîtrisais comme l’intégration de site Web et par la suite évoluer vers d’autres domaines comme la programmation PHP ou encore Flash suivant les besoins nécessaires. Ma formation étant pluridisciplinaire, je ne maîtrisais pas parfaitement chacun des domaines mais souhaitais les approfondir. Mon profil fut qualifié d’hybride et j’ai rejoint le côté graphisme pour débuter avec de l’intégration, comme convenu.
5. Contact
Net Communications Cité Multimédia 50, rue Queen, bureau 201 Montréal (Québec) H3C 2N5 Canada
Téléphone : 514.871.1844 Fax : 514.499.1805
Site Web : http://www.netc.net/ Courriel :  HYPERLINK "mailto:netcommunications@netc.net" netcommunications@netc.net
II ] Mission principale : Application Web
1. Présentation
Objectifs et besoins
Dans chaque entreprise, il est primordial de pouvoir gérer les temps de chaque ressource. Or chez Net communications, la gestion des temps n’atteint pas la perfection. En effet, chaque employé saisi saisit dans une application Web le nombre d’heures qu’il a passé passées ? sur chaque projet et pour quelle tâche.
Exemple : ===s/s timesheet===
Le souci réside dans le fait que ces données ne subissent ensuite aucun traitement. Elles sont gérées uniquement par la maison mère à Saint-Jean-sur-Richelieu pour la facturation. Ainsi lorsque Laurent Mastorgio désire un récapitulatif de l’affectation de ses ressources, il doit faire face à un délais de quatre jour jours pour recevoir ce document, et quatre jour bis en gestion de projet, c’est toute la rentabilité de l’entreprise qui est remise en cause.
C’est pourquoi, dès mon arrivée dans l’entreprise il m’a fait part de ???
Cible

Ressources humaines

Contraintes

2. Démarche :
Analyse de la base de données et création d’une synthèse de la BD
Brainstorming avec l’autre stagiaire ça fait bourrin affecté de la mission sur les fonctionnalités de l’application Web à réaliser
Création d’un cahier des charges conjointement avec l’autre stagiaire
Planification et attribution des tâches (Gantt Project)
Ergonomie de l’application (Photoshop)

Planning
Création du gabarit
Programmation php
Intégration des fonctions
Débogage

III ] Missions annexes :
1. Ergonomie des interfaces
Présentation :
En septembre 2007, Téléfiction, maison de production reconnue, lançait sa nouvelle série pour enfants Toc Toc Toc, sur les ondes de Radio-Canada et de Télé-Québec. En parallèle, le site Web de la série, coréalisé par l’agence Net Communications, faisait lui aussi ses premiers adeptes.
Sur les ondes canadiennes, « Télé-Québec » et « Radio-Canada » ont lancé en septembre 2007 une nouvelle série pour les enfants de 3 à 7 ans. Créée par Téléfiction, Toc Toc Toc connaît un vif succès, par conséquent la maison de production a décidé de travailler en étroite collaboration avec Net Communications afin de développer un volet Web animant l’imaginaire des enfants et stimulant leur sens de la découverte et de la curiosité. L’objectif fut atteint, et la maison de production a signé un nouveau contrat
À l’heure actuelle c’est la deuxième version du jeu qui est à l’étude et en phase de réalisation.
Créer une deuxième version du jeu Toc Toc Toc est une mission délicate car elle doit à la fois augmenter le nombre de visiteurs et surtout répondre à la grande curiosité et au besoin de nouveauté bof mais je trouve pas mieux des fidèles internautes.
J’avais réalisé pour le projet de feuille de temps une analyse et des maquettes ergonomiques quant à l’application Web. Mon travail fut reconnu par mon maître de stage et il m’a encouragé à développer ma fibre ergonomique pour un projet de plus grande ampleur. C’est ainsi que j’ai rejoint l’équipe de Toc Toc Toc pour la deuxième saison de Toc Toc Toc répétition.
Démarche :
Ne connaissant absolument pas l’univers de Toc Toc Toc lors de mon affectation au projet, j’ai profité de ce statut de candide pour tester le jeu de la saison I. J’ai relevé une première partie de lacunes, de détails pouvant être améliorés lors de la saison II.
Suite à cette première phase de tests, je me suis familiarisé tu es une fille ! avec cet univers en regardant quelques épisodes de la série. Cette courte phase m’a permis de comprendre et de mieux situer l’ambiance magique de cette série pour enfant.
Le dossier de spécifications rédigé par Laurent Mastorgio m’a donné un aperçu plus concret de ce que serait la version II du jeu.
Ce jeu inclus une grande nouveauté qu’est la possibilité de s’inscrire sur le site. Cette phase est non obligatoire mais fortement recommandé recommandée (pour des raisons techniques). Elle doit donc subtilement inciter le joueur a créé à créer un compte. J’ai étudié l’interface proposée par l’infographiste et proposé soumis quelques modifications nécessaires pour faciliter la tâche de l’enfant lors de l’inscription et/ou de l’identification.
S’en suit une réunion avec Stéphane et Laurent pour enrichir les recommandations ergonomiques. Enfin j’ai rédigé un rapport à destination du client dans le but de valider ces recommandations. Vous trouvez en annexe ce rapport. Oyay c’est bien ça
Réactions :
Travailler sur Toc Toc Toc II fut un exercice intéressant car l’ergonomie des interfaces est un domaine dans lequel je suis à l’aise. Stéphane a une expérience de qualité dans ce domaine, j’ai donc pris note de ses réflexions sur l’organisation et les éléments importants de la phase d’inscription. De plus, il est bien plus motivant de travailler sur un projet qui va réellement voir le jour. Cette expérience m’a permis d’affiner mes centres d’intérêts dans le domaine du Web.
2. Intégration HTML / CSS
Présentation :
Je suis arrivée dans l’entreprise dans une période dite creuse. Les équipes venaient de terminer les projets de grandes ampleurs ampleur. Stéphane, le directeur artistique m’a affilié à l’équipe pour l’intégration d’un site web statique. J’ai donc travaillé avec Michel, intégrateur en chef et Jean-François, intégrateur également également intégrateur.
Démarche :
Alexandre, l’infographiste a réalisé les maquettes. Il a fallu réfléchir à la découpe de la maquette et commencer à réfléchir au envisager le code en conséquence. Nous avons remarqué des éléments récurrents dans les maquettes : un menu en haut et une colonne gauche qui restaient relativement les mêmes suivant notre position dans le site. Le site étant assez grand : (50 pages en version française et de même pour la version anglaise, nous avons élaboré un gabarit que nous avons dupliqué pour créer la version française. Puis cette dernière fut dupliquée pour la version anglaise.
Ayant déjà deux intégrateurs chargés de la mission, je me suis seulement occupée à préparer les images. Ensuite j’ai intégré les contenus en adaptant le code CSS suite aux recommandations de l’infographiste.
Réactions :
Il faut admettre que cette mission ne fut pas enrichissante sur le point technique mais elle m’a permise permis d’observer comment fonctionnait l’équipe ainsi que la relation avec le client.
J’ai remarqué que les étapes étaient les mêmes que lors de nos projets tuteurés.
La cliente n’était pas entièrement satisfaite du design qu’elle avait pourtant validé elle-même une semaine auparavant. En réalité, elle trouvait le site trop massif, son jugement avait été faussé par les résolutions d’écran.
Nous avons donc du réorganisé réorganiser les pages et les images. La cliente avait entre-temps modifié de nombreuses fois le contenu du site. Ce dernier s’adaptait donc mal au CSS actuel. Le chargé de projet étant réticent au fait de changer de design sans l’approbation de la cliente, j’ai gardé mon point de vue qu’en terme d’ergonomie et visuellement parlant nous pouvions faire mieux.
J’ai alors réorganisé la page et créé une maquette confrontant la version actuelle et ma proposition. Assurant au chargé de projet que grâce au CSS, ces changements ne seraient pas excessivement longs, il m’a donné son accord.
Ce fut valorisant pour moi de prendre plus part au projet plutôt que de découper des images. Cette initiative menée à terme a encouragé le chargé de projet de à me donner plus de responsabilités dans la suite du stage.
3. Colorisation des personnages de TocTocToc
Présentation :
La saison II du jeu de Toc Toc Toc est adaptée de la série télévisée éponyme où les acteurs sont réels. Pour rendre le jeu le plus fidèle possible, Alexandre, l’infographiste s’en est directement inspiré. Chaque personnage possède sa propre animation récurrente : animation lors du déplacement, lors d’une attente, etc.
Démarche :
L’infographiste a commencé par créer les croquis sur papier. Ils sont ensuite numérisés pour les transformer sur Photoshop. S’en suivent un nettoyage de ces croquis et un affinage des traits.
Pour créer le personnage animé, nous partons d’une image qui est succinctement modifié modifée par rapport à la position principale du personnage.
===perso/acteur (sur le Web toctoctoc.ca)===
C’est à ce stade que j’interviens pour coloriser chaque dessin en fonction des couleurs de la série. La méthode de travail fut bien différente que celle vu vue en première année d’études. Je n’ai pas utilisé les outils de densité « + » et « - « - » pour créer l’ombrage.
Les calques sont organisés de la façon suivante :
Les contours noirs du personnage m’ont servi à délimiter les différentes zones de couleur. Grâce à ses contours fermés, l’outil de sélection « Baguette magique » m’a fait gagné gagner un temps précieux. En effet, il permet de sélectionner automatiquement une zone fermée. Il ne me restait plus qu’à appliquer la couleur adéquate sur le calque dédié à cet effet. Pour les zones plus délicates comme le visage virgule j’ai utilisé directement le pinceau ou l’outil de sélection « Polygone » qui permet de délimiter manuellement une zone.
L’étape suivante consiste à créer les zones de lumière du personnage. J’ai du imaginer quel serait quelles seraient les zones lumineuses et a contrario les zone zones d’ombre suivant l’endroit d’où provenait l’éclairage. Ce masque avait des particularité particularités spécifiques : je définissais mes zones plus claires en blanc puis appliquait appliquais un effet « Overlay » à 70% d’opacité pour donner l’effet souhaité.
N’ayant aucune expérience dans le domaine du dessin, Alexandre était présent pour me donner des conseils pour dynamiser l’image et corriger mes erreurs. Étant donné que j’ai eu dix planches à coloriser, j’ai eu le temps de m’adapter à la technique utilisée et j’ai pu affiner ma vue en trois dimensions pour imaginer les zones d’ombrage.
Ensuite, j’appliquais un simple masque avec un dégradé de couleur spécifique auquel on ajoute un effet « Multiply » avec une opacité de 70%. C’est une astuce d’Alexandre pour rendre le personnage plus en relief.
Enfin, un calque du personnage tout en noir servait à rattraper les détails dans le cas où les surfaces n’auraient pas été colorisées au pixel près.
Extraits des personnage personnages de Kao et Zalaé :
 Réactions :
J’ai beaucoup apprécié cette mission car elle a stimulé mon inexistante âme créative j’adore :’). J’ai pu éprouver une certaine sensibilité quant au choix des couleurs et aux formes afin de mettre en valeur les magnifiques dessins d’Alexandre. Il est également satisfaisant de voir l’évolution du croquis papier jusqu’à l’animation finale.
Le projet Toc Toc Toc est arrivé très tard dans mon stage. : lors des trois dernières semaines. Alexandre avait créé d’autres maquettes, je les ai numérisé numérisées puis nettoyer nettoyées sur Photoshop virgule cependant je n’ai malheureusement pas eu le temps de commencer la colorisation.
4. Pour la culture…
=== Logo Yu Centrik===
Lors de ces trois mois de stage, j’ai également élargi ma culture Web en participant à une conférence Web donnée par Yu-Centrik. C’est une entreprise montréalaise basée essentiellement sur l’ergonomie et le design des interfaces. La conférence portait sur, entres autres, portait entre autre sur la conception d’application Web côté client avec le HTML 5, le Web 2.0 et le Feng Shui des interfaces utillisateurs. Ces différentes présentations ne furent pas sans me rappeler les cours de Karim Chibout en première année ou encore ceux de Jérôme Landré. Les notions d’accessibilité, d’ergonomie et d’évolution du Web sont les débats d’aujourd’hui auquel je me suis vivement intéressée. Vous trouverez un exemple en annexe.
=== Logo Faisabilité / Couts / Ressources ===
J’ai assisté à une réunion ayant pour thème la gestion de projet. Je connais ce domaine car nous l’avons étudié en cours de première et deuxième année et je me suis rendue compte que les discours étaient les mêmes venant d’un professionnel que d’un professeur mais nos profs sont des professionnels!. A savoir que le plus important en gestion de projet est de maîtriser trois données essentielles : Faisabilité, coûts et ressources.
Mon avenir :
Dès mon arrivée dans l’entreprise j’étais indécise quant à la fonction que j’allais pouvoir occupé occuper. La formation est tellement polyvalente que je ne savais toujours pas vers quoi me spécialiser. En réalité, ce fut certainement le but de mon stage. Au terme de ces trois mois je peux affirmer que je désire m’orienter dans l’ergonomie des interfaces Web et dans l’intégration HTML / CSS. Cette orientation va en continuité avec les matières enseignées avec pédagogie lors de ma formation en Services et Réseaux de Communication. Je souhaite toutefois explorer d’avantage mes capacités en programmation PHP car j’estime en avoir les capacités. C’est pourquoi à la rentrée 2008 je rentre en licence « Multimédia Internet Webmaster » qui est orientée intégration HTML / CSS, programmation PHP et gestion de projet.
Les trois mois en entreprise m’ont démontré que suivre une méthodologie de gestion de projet est d’une importance capitale pour gérer une équipe et rendre les projets rentables. Ainsi, je tiens à enrichir ce domaine lors de mes poursuites d’études sans toutefois délaisser les bases de ma formation : le développement pour le Web.
Conclusion :
Lorsque je dresse le bilan de ces douze semaines chez Net Communications, plusieurs conclusions viennent à moi. Tout d’abord, ce stage fut une expérience nouvelle dans le type d’entreprise que je cherchais à découvrir : une Société de Services en Ingénierie de l’Internet (SS2I). J’ai eu la possibilité d’observer les méthodes de travail, le déroulement des différentes phases d’un projet, etc. En réalité ces méthodes ne diffèrent que très peu par rapport à celles enseignées durant la formation SRC et appliquées lors des projets tuteurés.
Ensuite, malgré le grand retard dans l’approbation des projets comme Toc Toc Toc saison II et la feuille de temps ; virgule j’ai travaillé dans des domaines variés qui ont enrichi mes connaissances et qui m’ont fait découvrir d’autres techniques comme la colorisation. Avec plus de temps, j’aurai aurais pu m’impliquer d’avantage davantage dans cette dernière et m’exercer sur la tablette graphique.
Enfin, vivre mon stage à l’étranger m’a fait découvrir une certaine culture dans le monde du travail que j’aurai la possibilité de confronter avec celle d’une entreprise française dans les années à venir.
Annexes
Conférence chez Yu-Centrik : La phénoménologie des interfaces
Ce diagramme montre qu’une personne parvient à réaliser un équilibre entre ses compétences (skills) et ses buts (challenges). Deux états émotionnels sont particulièrement importants dans cette théorie : l’anxiété, quand les compétences sont en dessous du niveau requis pour les buts, et l’ennui, lors du contraire. Le Flow caractérise la position intermédiaire. Ce diagramme est d’un psychologue hongrois :  HYPERLINK "http://www4.fnac.com/Shelf/comments_list.aspx?PRID=1476861" Mihaly Csikszentmihalyi.











Audrey Masson ==Logo SRC==
Stagiaire chez Net Communications Inc, Montréal.

Juin 2008 Page  PAGE 27 /  NUMPAGES 27


 :