Professionnel

WEBDESIGNER

DOSSIER

GRETADossier professionnel

Juin 2016/Avril 2017

ELABORER LE DESIGN GRAPHIQUE

REALISER UN OUTIL DE COMMUNICATION NUMERIQUE

DecourcelleTHOMAS

DP”

CLAVELRHINOFÉROCK

CONTRIBUER A LA GESTION ET AU SUIVI D’UN PROJET DE COMMUNICATION NUMERIQUEONEDEAL

BOOM BOOM SPACE

DP”2

DP”

SOMMAIRE

O1 Première de couverturePhotographie Decourcelle ThomasCandidat au titre de Webdesigner

DOSSIER PROFESSIONNELFormation GRETA de webdesigner au lycée Maria Casares Du 10 juin 2016 au 12 avril 2017Financement ANPE

Dossier ProfessionnelSession 2017 Juin2016/Avril 2017

O4 AdministratifDéclaration sur l’honneur

Note: Il est possible que le graphisme du dossier profession-nel diffère légèrement dans cette partie au vu des obligations administrative.

O6 Curriculum vitaeExplication de la créationdu CV “ conçu pour l’obtention du stage de janvier /février 2017

O8 RhinoférockCréation de logo, d’affiches et de site internet pour le festival rhinoférock

10 Petit chaperon rougeCréation d’un visuel pour la première de couverture d’un livre.

Choix personnel: Pour cet exercice nous avions libre choix quant à la cible du livre, il pouvait raconter une histoire pour enfant, adolescent ou adulte... personnellement j’ai choisi un public adulte.

Nom patronymique: DECOURCELLEPrénom : ThomasAdresse: 1 rue Claude Granier84000 Avignon

WEBDESIGNER

Titre professionnel visé

DP” 3

12 ClavelRefonte de la communication de l’entreprise

Note: Le site final a été refait après la fin de l’exercice, le tem-plate ne correspondant pas à mes attentes. Nous avons donc opté pour un site codé en bootstrap et le résultat ne tient donc pas compte du template de l’exercice.

14 Mc GrégorCréation d’identité visuel

16 WordpressExemples de travail sur wordpress

Epsylan J’ai choisi de faire un wordpress pour un client fictif d’une entreprise informatique. La société est réel et le contenu pourrait être tout a fait envisageable pour un futur site inter-net. Le site sera présenté dans le dossier deconception.

17 Phaserframework javascript

21 AnnexePHP/mysql

Stage en entrepriseDifférents travaux réalisés durant mon stage en entreprise

Stage chez phoenix 360 Mon stage devait durer 2 mois dans l’entreprise phoenix 360, mais suite à un non professionnal-isme de la part de l’entrepreneur j’ai préféré finir mon stage dans une autre entrepriseMobilhomeservice La seconde entreprise qui m’a accueilli et qui m’a permis de terminer mon stage dans de bonne condi-tion.

COMMENT LIRE CE DOSSIER ?

Utiliser le sommaire ;)Vous trouverez une vue globale des dif-férents projets de l’année.

Chaque projet est décrit dans son intégralité. Néanmoins on retrouvera des points spécifiques expliqués plus en détails dans chaque projet.

Compte rendu de l’année de formation de Decourcelle thomas

18 BoomBoom spacejeu en javascript

22

DP”4

Les documents administratifs

Formation GRETADOCUMENTS OBLIGATOIRES

DÉCLARATION SUR L’HONNEURTITRE PROFESSIONNEL VISÉ

DÉCLARATION :

DECOURCELLE THOMAS

Elle garantit l’authenticité des informations et documents du dossier.Elle doit être nominative, datée et signée.Déclaration sur l’honneur du (de la) candidat(e)Je soussigné(e) DECOURCELLE Thomas déclare sur l’honneur de l’exactitude des renseignements fournis dans ce dossier et être l’auteur des réalisations jointes en annexe.Fait à AVIGNON le pour faire valoir ce que de droit.

Signature :

DÉCLARATION SUR L’HONNEUR

DP”

ADMINISTRATIF

DOCDOCUMENTS

DP” 5

Titre professionnel visé : WEBDESIGNER

WEB DESIGNER

Parcours de formationVous avez effectué des activités professionnelles soit avant d’entrer en forma-tion, soit au cours de votre formation elle-même, lors d’une période d’applica-tion en entreprise ou dans votre organisme de formation. Vous devez compléter ce dossier afin de présenter et de valoriser ce que vous avez mis en pratique durant ces expériences.Ce document est complété avec l’aide du formateur, tout au long du parcours de formation. Le dossier est renseigné sous la responsabilité de l’organisme avec lequel a été signé le contrat de stage. Au cas où le parcours est réalisé dans différents organismes de formation, chacun de ces organismes doit s’assurer que le dossier décrit bien la pratique professionnelle du candidat pour la partie du parcours effectué sous sa responsabilité.A partir de ces informations, le jury évaluera les compétences que vous avez ac-quises au cours de cette période.

DP”6

CV

DP” 7

CURICULUM VITAE

Durant la formation nous avons eu à réaliser un CV “graphique” afin de faciliter l’obtention de notre stage en entreprise pour les péri-odes de janvier/février 2017

J’ai en premier lieu réalisé un petit avatar me représentant qui allait me servir à la place de la photo d’identité.

Ensuite j’ai fait des recher-ches sur internet afin de trouver des images et des inspirations pour la concep-tion du CV.

J’ai ensuite choisi de partir sur l’idée d’une page de journal vintage sur laquelle j’ai divisé les rubriques en fonction des compétences, expriences, loisirs et effets visuels afin d’arriver à une page cohérente.

Mon CV à été fourni avec mon book afin de trouver mon stage. J’ai eu de très bon retour.

CURICULUM VITAE”

Nous devions faire deux pages à mettre en ligne ainsi que le menu.Vous pouvez les retrouver sur le lien :http://thomas.formation-web-greta84.fr/rhino/index.html

DP”8

Logo, Affiches, SiteBrainstorming3 pistes créativesCréation bannière pour site

DESCRIPTION DU SUJET:

Diffusion National produits: rock blues, valeurs: féstif/musical, décideurs: la direction de l’association, image de l’entreprise: créativité/accéssible/stars de demain et actuel, éléments obliga-toire à insérer: logo.Création: Avril 2016

R hinoférock est un projet très complet.Nous avons commencé par faire un brainstorming autour du festival, du rock/blues et de tous les mots qui nous venait à l’ésprit.

- Une fois 3 pistes évidentes dégagés nous avons étudiés les concurrents afin de ne pas reproduire quelque chose d’existant.- Nous avons fabriqué quelques planches tendance pour dé-finir nos couleurs et afiner nos axes principaux de recherche.- A travers divers planche de croquis nous avons établis l’axe principale de création.- A partir d’un choix de recherche, nous avons décliné notre création jusqu’a l’obtention de notre logo final.

Projet

RHINOFÉROCK

Logo Final: Après plusieurs recherche voici le logo que nous avons choisis pour le

rendu final au client.

Menu responsive: Version portable du menu pour le projet du site internet rhinoférock

Création d’identité visuelle complète

Pour ce projet nous avons appris toute la sémantique de google afin d’avoir un code html propre et logique. Nous avons utilisé un maxi-mum de balise html5. Nous avons appris à séparer notre fichier css et ainsi à constitué notre premier site responsive entièrement codé en dur.

LycéeMaria Casares

Avignon

Fréquemment Juillet2016

1&3

DP” 9

Les débuts: Une année 2011 charnière, une date impor-tante ( juin 2011), une naissance, une renaissance. Après 6 festivals réussis, les bénévoles du “prés du blues” ont décidé de formaliser leur union et leurs projets au sein de l’association “le rhino”, et ce, afin de pérenniser le festival du blues rock.Un autre nom, un autre lieu et l’histoire continue avec l’ambition et la volonté de donner envie à des artistes de venir fouler les planches de cette scène, dans ce nouveau lieu, qui leur permettra d’exprimer tout leur talent.

L’esprit est toujours là, avec des moyens et des capacités en adéquation avec le succès et l’évolution de ce rendez-vous musical. Preuve en est, l’intérêt qu’il a suscité au-près du Ministère de la Culture qui a apporté son soutien à la programmation de 2012.Un lieu, un nom: Jean-Philippe Fally, ferronier d’art et passionné de musique, met sa forge à disposition de l’association “le rhino”. Il créa parmi ces oeuvres monu-mentales, un rhinocéros qui nous accueille à la Forge. Donc un autre nom, le Rhinoférock Festival.

Ferronier d’art passionné de musique.Propriétaire de la Forge, Lieu hébergeant l’association Rhinoférock.

Jean-Philippe Fally

CLIENTFéstival rhinoférockTP webdesigner/ GRETA VAUCLUSE

Une fois le logo terminé, nous devions fabriquer plusieurs affiches à différents format, A4 portrait, A4 à l’italienne, A3, 4x3m, les mettre en situation. Nous devions aussi faire des bannières pour le web.

Nous devions aussi faire un template de site sous photo-shop et de le coder en html afin de réaliser un site internet responsive.

Nous avons utilisé photoshop et illustrator, pour les concep-tions graphiques puis sublimetexte pour la création du site.

Template avant/après: Image gauche: template photoshop, Image droite: Site

Vous pouvez retrouvez mes travaux dans mon booket le site test qui se trouve en ligne :

http://thomas.formation-web-greta84.fr/rhino/index.html

Projet

RHINOFÉROCK

Affiches: Ci-contre les exemples de nos créations d’affiches et bannières pour le projet rhino-férock

Exemple de code html pour le site RHINOFÉROCK

Création d’un visuel complèxe

DP”10

• Typographie utilisé: Bodoni MT Regular

Choix des photographiesTravail sur chaque images gràce à photo-shop (détourage, incrustation, travail de réglages, etc...)Harmonisation de l’ambiance pour que le résultat soit idéal.

Projet

PETIT CHAPERON ROUGE

Le projet: Ci-dessus plusieurs images sélectionnées pour le résultat final ainsi que le visuel complexe réalisé pour le projet.

L’HISTOIRE : Il était une fois une petite fille de village, la plus jolie qu’on eût su voir ; sa mère en était folle, et sa mère-grand plus folle encore. Cette bonne femme lui fit faire un petit chaperon rouge, qui lui seyait si bien, que partout on l’appelait le petit chaperon rouge.Un jour sa mère ayant cuit et fait des galettes, lui dit :« Va voir comme se porte ta mère-grand, car on m’a dit qu’elle était malade, porte-lui une galette et ce petit pot de beurre. »Le petit chaperon rouge partit aussitôt pour aller chez sa mère-grand, qui demeurait dans un autre village.En passant dans un bois elle rencontra compère le loup, qui eut bien envie de la manger ; mais il n’osa, à cause de quelques bûcherons qui étaient dans la forêt.Il lui demanda où elle allait ; la pauvre enfant, qui ne savait pas qu’il était dangereux de s’arrêter à écouter un loup, lui dit : « Je vais voir ma mère-grand, et lui porter une galette avec un petit pot de beurre que ma mère lui envoie. »« Demeure-t- elle bien loin ? lui dit le loup.

- Oh ! oui, dit le petit chaperon rouge, c’est par-delà le moulin que vous voyez tout là-bas, à la première maison du village.- Eh bien, dit le loup, je veux l’aller voir aussi ; je m’y en vais par ce chemin ici, et toi par ce chemin- là, et nous verrons qui plus tôt y sera. » Le loup se mit à courir de toute sa force par le chemin qui était le plus court, et la petite fille s’en alla par le chemin le plus long, s’amusant à cueillir des noisettes, à courir après des papillons, et à faire des bouquets des petites fleurs qu’elle rencontrait. Le loup ne fut pas longtemps à arriver à la maison de la mère-grand ; il heurte : toc, toc. « Qui est là ?- C’est votre fille le petit chaperon rouge (dit le loup, en contrefaisant sa voix) qui vous apporte une galette et un petit pot de beurre que ma mère vous envoie. »La bonne mère-grand, qui était dans son lit à cause qu’elle se trouvait un peu mal, lui cria : « Tire la chevillette, la bobinette cherra. » Le loup tira la chevillette et la porte s’ouvrit. Il se jeta sur la bonne femme, et la dévora en moins de rien ; car il y avait plus de trois jours qu’il n’avait mangé.Ensuite il ferma la porte, et s’alla coucher dans le lit de la mère-grand, en attendant le petit chaperon rouge, qui quelques temps après vint heurter à la porte. Toc, toc. « Qui est là ? »Le petit chaperon rouge, qui entendit la grosse voix du loup eut peur d’abord, mais croyant que sa mère-grand était enrhumée, répondit : « C’est votre fille le petit chaperon rouge, qui vous apporte une galette et un petit pot de beurre que ma mère vous envoie. »Le loup lui cria en adoucissant un peu sa voix :« Tire la chevillette, la bobinette cherra. » Le petit chaperon rouge tira la chevil-lette, et la porte s’ouvrit.....

LycéeMaria Casares

Avignon

Fréquement Aout2016

1

DP” 11

xemple d’une étape d’incrustation d’élément dans ma composition.Utilisation de l’outil plume et de masques de fusion pour le détourage.Utilisation des effets de styles, de filtre et de calques de réglages afin d’optimiser le rendu du visuel recherché.

Nous pouvons remarqué la présence d’un tracé réalisé avec l’outil plume, l’utilisation d’une incrusta-tion de couleur, de masque de fusion afin de faire apparaitre que la partie détouré.

- Choix de la main du loup- Détourage à l’outil plume- Création du tracé de travail.- Transformation du tracé en séléction- Masque de fusion afin de supprimer le fond qui ne nous interesse pas.- Ajout d’un fond.- Travail sur les calques de réglages afin de fondre notre élément avec le fond.

LA BASE

Photomontage Choisir plusieurs images à combiner sous photoshop afin de réaliser un visuel complexe pour la première de couverture d’un livre.

Choisir des images libre de droits.

Description du sujet: Réali-sation d’un photomontage complexe de la couverture du livre, le petit chaperon rouge.

Utilisation de filtre photoshop, de calques, de typographie.

L’image doit comprendre obligatoire-ment l’éditeur : “hachette édition” et l’auteur: “Charles Perrault”.

E

Le loup, la voyant entrer, lui dit en se cachant dans le lit sous la couverture : « Mets la galette et le petit pot de beurre sur la huche, et viens te coucher avec moi. » Le petit chaperon rouge se déshabille, et va se mettre dans le lit, où elle fut bien étonnée de voir comment sa mère-grand était faite. Elle lui dit : « Ma mère-grand, que vous avez de grands bras ? - C’est pour mieux t’embrasser, ma fille. - Ma mère-grand, que vous avez de grandes jambes ?- C’est pour mieux courir, mon enfant. - Ma mère-grand, que vous avez de grandes oreilles ? - C’est pour mieux écouter, mon enfant. - Ma mère-grand, que vous avez de grands yeux ? - C’est pour mieux voir, mon enfant. - Ma mère-grand, que vous avez de grandes dents ?- C’est pour te manger. » Et en disant ces mots, ce méchant loup se jeta sur le petit chaperon rouge, et la mangea.

DP”12

Refonte de la communication de l’entreprise

Projet

CLAVEL

Le client: Fondée au debut du XXème siècle par Léon CLAVEL, Pâtissier Confiseur, la confiserie Clavel est reprise par son fils Marcel qui s’implantera à Carpentras en 1934. Son fils René prendra la suite, la pâtisserie est alors située rue Porte d’Orange, elle sera l’incontournable rendez-vous des gourmands grâce aux délicieuses pâtisseries mais également aux chocolats.

Par la suite, ses fils Serge et Jean décident de se lancer dans l’aventure. Très attachés à leur terroir, ils mettent toute leur éner-gie à promouvoir les spécialités provençales. Sous leur impul-sion, le Berlingot de Carpentras connait une nouvelle jeunesse.

Description du sujet:

Refonte du logo

Brainstorming

Création de la papeterie

Création d’un template du site vitrine

Création de serviettes pour le glacier

Création visuel du packaging chocolat

Première recheche de logo sur illustrator:

Différentes pistes de logo avant la déclinaison de la piste finale en vue du logo à proposer au client.

Logo final

Header de mon site clavel

Le site reponse client est en ligne à l’adresse suivante:http://thomas.formation-web-greta84.fr/clavel/clavel/index.html

DP” 13

our ce projet, nous avons commencé par vision-ner le site internet existant de Clavel. Nous avons étudié les différents concurents de cette confise-rie afin de voir ou il se situait sur le marché.

Nous avons fait un brainstorming autour de la confiserie pour dégager trois grands axes.

Après avoir fait quelques croquis pour les recherches de logo, nous avons utilisé illustrator pour les réaliser.

Mon choix s’est porté sur le berlingot, en le dessinant sur illustrator avec l’outil plume. J’ai choisis de l’utiliser à la place du A dans le nom Clavel et de jouer avec la première lettre de Confiseur et de Clavel.

Je voulais que le logo reste sobre et classe pour qu’il reflète le coté prestigieux de cette confiserie.

Mes déclinaisons Après la création de mon logo, commencé par faire le template du site internet, puis j’ai réalisé les cartes de visites, les ser-viettes et le packaging. J’ai été obligé de passer par plusieurs étapes afin de trouver mon resultat finale. Ci-dessous un exemple de mes premiers choix:

Après avoir fait plusieurs tests de template, j’ai choisi un thème boot-strap qui correspondait le plus à mes solutions client.

J’ai ajouté des modules afin de remplir un maximum de contenus logiques qui s’associait aux propositions faites au client.

Le choix du bootstrap me paraissait le plus intéressant quant à la quan-tité de travail à fournir et le résultat voulu.

Le site est responsive. Le site est accessible à l’adresse : http://thomas.formation-web-greta84.fr/clavel/clavel/index.html

Le logo à été réalisé à l’outil plume. La typographie à été choisi avec soin pour le coté “classe”L’utilisation de jeux de lumière gràce à l’opacité m’a per-mis de donner du volume à mon dessin et de jouer avec un contraste intéressant entre une typographie très claire et un dessin complèxe.

P

Planche de proposition client:

On retrouve le packaging, la carte de visiteEt les maquettes du futur site de clavel

Exemple de la one-page du site:

La partie produit du site reponse client.

LycéeMaria Casares

Avignon

Fréquemment Septembre2016

1&3

DP”14

“L’avant-gardiste Wayne McGregor continue de défier les lois de l’anatomie et de remettre en question les évidences chorégraphiques dans FAR. Féru de sciences cognitives et de nouvelles technologies, le chorégraphe britannique s’est inspiré du livre Flesh in the Age of Reason, dans lequel l’historien Roy Porter raconte comment la vision du corps a évolué à partir du siècle des Lumières, de la première encyclopédie de Diderot et des premières autopsies, et comment les découvertes médicales ont remis en question la conception que l’on se faisait alors des mécanismes de la pensée et de l’émotion. Se livrant lui-même à une analyse pointue des mécanismes de la création chorégraphique, McGregor a poursuivi dans FAR son étude des interactions entre corps et esprit pour élargir la palette de son langage gestuel, démarche ayant déjà donné naissance à plusieurs œuvres, dont Entity, présentée par Danse Danse en 2011.

omment le corps exprime-t-il ou inhibe-t-il une intention? Quel modèle mental développe-t-on en situation d’improvisation? Quelles parties des idées sont retenues ou rejetées dans le processus de création? Quels modes de communication utilise-t-on pour traiter les différents concepts évoqués en studio et comment les gestes, les sons et le langage verbal sont-ils utilisés pour incarner ces concepts? Tel est le type de questions que s’est posées le chorégraphe pour donner un nouveau cadre au processus de création de FAR et créer de

nouvelles images et de nouvelles manières de bouger.

Outre la singularité d’un vocabulaire marqué par d’improbables contorsions et extensions, l’élasticité et la surarticulation du corps, des combinai-sons gestuelles insolites et l’incroyable rapidité des changements de direction du mouvement, on retrouve dans FAR le goût pour des environne-ments visuels et sonores puissants. Composée d’un immense panneau d’ampoules LED et espace de jeux d’ombre et lumière contrastés, la scénographie novatrice de rAndom International (rien à voir avec Random Dance) et de l’éclairagiste Lucy Carter (collaboratrice de longue date bardée de prix) contribue à créer l’atmosphère surréelle qu’installe la partition envoûtante de Ben Frost (ex-collaborateur de Brian Eno et brillant compositeur expérimental hautement salué par la critique).

PROJET MCGREGOR

Utilisation de masque de fusion, de gestion d’opacité, de calques de réglages et de filtre de lumière afin de fabriqué une image unique qui me servira de base à mon affiche.

Pour le projet Mc Gregor, nous devions refaire com-plètement l’identité visuelle de son spéctacle FAR. Affiche nouveau spectacle / Banière / 4x3 / Template du site / Plaquette du spectacle Recto format libre / Flyer.

C

LycéeMaria Casares

Avignon

Fréquemment Juillet2016

1&3

DP” 15

Pour ce projet j’ai travaillé essentiellement du photomontage et l’unité graphique.Je voulais mettre l’accent sur la cohérence graphique entre tous mes travaux.

J’ai commencé par faire une planche tendance à la suite de mon brainstorming qui mon inspiré pour une affiche que j’ai décliné en fonction des supports.

J’ai adapté mon visuel aux formats demandés en variant la disposition de mes textes et en cherchant une certaine concordance entre mes placements et le fond.

Chacune de mes créations est donc unique mais néanmoins associés.

PHOTOMONTAGE

Pour la création du templatej’ai choisi de faire un one-page qui garderait toute les informations facilement accessiblent sur un mobile ou une tablette.

L’utilisation d’un bootstrap me paraissait plus logique afin d’avoir un resultat en responsive de bonne qualité.

Utilisation de photoshopPour réaliser un mock-up de plaquette pour la présentation des spéctacles.

Utilisation d’images pour faire une planche tendance d’inspiration pour la création de mon affiche.

J’ai aussi beaucoup utilisé le site existant pour m’inspirer car je trouvais qu’il était de très haute qualité.

Pour ce projet le logiciel photoshopfut le plus utilisé.

Une œuvre d’une grande beauté, qui fascine par son intelligence, touche par sa puissance émotive et nous invite à renouveler le regard que nous posons sur la danse.

« On reconnaît bien le style de McGregor – les dos ondulants, les bras en vrille, les hyperexten-sions exploratrices –, mais on remarque aussi son évolution […] un flamboyant et mystérieux postclassicisme. » (observer.guardian.co.uk, Royaume-Uni)

« La pure originalité des angles tranchants et des courbes exagérées qui parcourent les membres et les torses des danseurs a toujours ébloui – pendant les 15 premières minutes. FAR maintient cette intensité et la mène à son terme. » (The Independent, Londres, Royaume-Uni)”

Refonte de la plaquette

Je me suis servi du texte qu’on nous avait proposé pour m’inspirer dans la création de mes images.

Entre abstrait et effets visuels, recherche d’émotion et de contraste. J’ai beaucoup aimé ce projet.

Brainstorming3 pistes créativesCréation de l’affiche

DP”16

Pour installer un word press, on se connecte à https://fr.wordpress.org/ puis on télécharge wordpress. On le dezippe (avec winzip ou winrar ou un autre logiciel de décompression)

Une fois le dernier wordpress récupéré, on l’upload sur notre serveur.Puis on va se connecter à l’adresse de notre site internet.On accède à la page d’installation par defaut. On rempli le formulaire d’installation avec nos accès à notre base de données. On crée nos

identifiant de connexion à l’administration du wordpress et on laisse le wordpress fabriqué les tables qu’il utilisisera pour son fonctionnement.

Une fois installé, le fichier d’installation s’efface et l’index du wordpress devient l’accès par defaut au site.Pour modifier le site, on utilise l’adresse de base et on ajoute wp-admin pour se connecter à l’administration. Nous devons installer aussi notre thème préalable-ment téléchargé. A partir de ce moment on peut choisir le thème adéquate à notre travail.

Choisir un thème en fonction de la demande du client.

Installation d’un wordpresssur un serveur.

Installation d’un thème .Modification de celui-ci.

Installation de divers extensions.

WORDPRESS

FILE ZILLAPour “uploader”

Affin de mettre en ligne nos sites internet, nous avons utilisé filezilla.

WORDPRESS 4.7.3 AVEC LE THÈME THE7.

Durant le stage, nous avons aussi appris à faire des migrations de word-press.

Grace à une extension, on exporte nos wordpress. Ce qui enregistre notre base de données ainsi que le thème et toutes les modifications que nous avions effectués.

On réinstalle un wordpress basique ou l’on veut importer notre word-press puis on installe le plug-in (extension) qui nous permet de réim-planter la base de données.

De l’interface d’administration de wordpress, on importe grace à l’extension, le fichier qui réinstallera toute la base de données et qui for-matera notre wordpress comme le précedent.

Il est important comme pour tous site internet de vérifier notre worpress sous différents navigateur, il arrive régulièrement que les sites réagissent sensiblement de façon différentes celon si nous l’affichons sous firefox, chrome, opéra ou bien explorer.J’ai tendance à spécifier sous quel navigateur le site à été optimisé.

MigrationU

LycéeMaria Casares

Avignon

Fréquemment 20162017

1&3

DP” 17

PHASER

Phaser est le framework javascript que j’ai utilisé pour la réalisation.

Mouvement de personnage, scrol-ing horizontal, apparition d’ennemi, hit-box et animation du fond.Test de score, et de gestion de vie.Mini jeu ou le but est de collecter des étoiles et des diamants pour faire augmenter son score. Un panneau “exit” apparait quand le score dépasse une certaine valeur.

Premiers pas avec le framework, réalisation de test sur un simili jeu de plateau.

Phaser est un framework “opensource” pour la création de jeu en html5 pour pc, tablette et mobiles. Il utilise éssentiellement du javascript. J’ai utilisé du php/mysql pour la gestion des scores.

Framework

PREMIERS PAS....La création de jeu est un exercice très intéréssant et loin d’être simple, choix du langage, création d’un scénario, création de graphisme, cod-

age, débuguage, équilibrage du jeu, gestion du game-play, gestion des scores, et bien plus encore....ce passage de la formation fut une super aventure !

Pour commencer on télécharge la bibliothèque javascript phaser, on la décompresse puis on la met dans un dossier js.Cette bibliothèque est entièrement stocké dans le fichier phaser.min.js. Il nous suffit donc de l’appeler dans notre page html dans la balise “head” avec la balise “script” (<script type=”text/javas-cript” src=”js/phaser.min.js”></script>)

Nous avons ensuite accès à toutes les fonctions de phaser.J’ai utilisé beaucoup d’exemple qu’il y avait sur leur site afin de comprendre et d’apprendre à utiliser les fonctionnalités dont j’avais besoin pour la création d’un petit jeu.

Pour mes essais j’ai donc fabriqué un petit jeu de plateau que vous pouvez retrouver en ligne. (http://thomas.formation-web-greta84.fr/phaser/index.html

Phaser utilise principalement une structure avec 3 fonctions essentielles, qu’il contient dans la variable principale qui defini le canvas ou va s’afficher le jeu.var game = new Phaser.Game(800, 600, Phaser.AUTO, ‘’, { preload: preload, create: create, update: update });

Les 3 fonctions sont donc preload ou l’on definit ce qui doit se charger pour la creation de notre jeu (chargement des images, déclaration des variables...), la fonction create qui permet la gestion de l’affichage de depart (placement du joueur, des plateformes, gestion de la physique, creation des fonctions de mouvements, d’apparition d’enemi....)et la fonction update qui va permettre de s’adapter en fonction des évènements survenus durant le jeu (gestion des hit-box, boucles et conditions pour la gestion des évènements, fin du jeu...) Pour mon premier jeu c’est la structure que j’ai utilisé mais pour le jeu final, j’ai appris à scinder mes pages et les fonctions de base de phaser.

LycéeMaria Casares

Avignon

Fréquemment Octobrenovembre

2016

2

DP”18

BOOMBOOMSPACEJeu en javascript

<script>(function() { game = new Phaser.Game(800, 600, Phaser.WEBGL, ‘game’); game.state.add(‘Boot’, Tom.Boot); game.state.add(‘Preloader’, Tom.Preloader); game.state.add(‘MainMenu’, Tom.MainMenu); game.state.add(‘Howto’, Tom.Howto); game.state.add(‘Game’, Tom.Game); game.state.start(‘Boot’);})();</script>

Page de démarrage du jeu, avec le tableau des scores récoltés de la base de données mysql.

Structure de base de la fonction qui appel les différents états de jeu. Cette fonction est placé sur mon index.php

our la conception de ce mini-jeu, nous avons pensé à un scénario simple, avec des vagues de soucoupes volantes qui apparaissent en haut de l’ecran et qui le traverse verticalement. Elles ont toutes des vitesses différentes et apparaissent aléatoirement sur la largeur de l’écran.

Le joueur est un petit vaisseau qui se dirige sur tout l’écran grace au flêche du clavier. Il peut détruire les soucoupes volantes grâce à un laser qu’il actionne avec la barre espace. Chaque secoupe à une vie comprise entre 1 et 3, ce qui oblige le joueur à le toucher, dans certain cas, plusieurs fois.

Objectif: création d’un petit jeu de shoot them up.

Ecran de chargement.

Difficulté croissante.

Nombre de vie limité.

Arme évolutive.

Bonus: vitesse déplacement et cadence de tir

Enregistrement de score et pseudo.

Explicationde boom boom space:

Page d’explication de déplacement du joueur

Si une soucoupe depasse le bas d’écran, il réap-parait en haut, jusqu’a ce que le joueur le détru-ise. Une fois la vague détruite, un bonus apparait et une nouvelle vague qui contient le double de soucoupes.

Tous les 8 level, les vagues de soucoupes sont réinitialisé. et leur cadence de tir est accrue.

Vous avez 3 vies pour aller le plus loin possible dans les levels et faire le plus gros score.

Seuls les tirs des soucoupes vous font perdre une vie, les soucoupes elles-mêmes sont traversable sans dommage.

A la fin de vos 3 vies, vous pouvez enregistrer votre pseudo et votre score qui apparaitront dans le tableau des scores si celui-ci fait partie des 25 meilleurs.

P

Exemple de fonction pour la création des aliens.

DP” 19

Représentation d’une vague de soucoupe volante Représentation de l’évolution de l’arme du joueur

Capture d’écran de phpmyadmin,base de données mysql

Pour la création de ce jeu, j’ai utilisé une structure différente.

Une page php index qui charge mes multiples fichiers javascript qui permettront de faire fonctionner le jeu. Puis une partie php qui va faire appel à la base de données pour l’affichage du score.

J’ai séparé le moteur du jeu et les variables du jeu ainsi que les différents états du jeu en plusieurs fichiers javascript afin de mieux comprendre le fonctionnement du frapmework.

Le jeu “boom boom space” est un prototype, il pourrait vraiment être amélioré, plus de bonus, un fond d’ecran animé (pour le moment une accélération du scrolling des étoiles), des déplacements plus complexe des vagues des soucoupes volantes...

J’ai d’ailleurs utilisé beaucoup de graphisme natif aux exemples du framework phaser pour un gain de temps. Avec cet exercice j’ai compris que pour faire un jeu il faut beau-coup de temps.

J’ai travaillé sur ce projet pendant presque un mois. pour arriver à un petit jeu qui fonctionne sans bug avec un gameplay qui permet de s’amuser un peu.

Si je devais refaire un jeu, je prendrais beaucoup plus de temps à la préparation en amont afin d’optimiser mon code lors de la création.

J’aurais aimé développer une version mobile, mais je n’ai pas eu le temps.

Ce travail m’a donné envie de faire un petit jeu pour mobile ou je pourrais intégrer mes création graphique.

DP”20

BOOM BOOMSPACE

RETOUR

UTILISATEURS

Pour faire évoluer un projet, il est conseillé de faire des retours utilisateurs. Pour mon projet de jeu, j’ai utilisé google form pour pouvoir faire un sondage qui m’a permis de récolter quelques retour.

J’ai choisi de faire un petit formulaire de 5 ques-tions, que j’ai envoyé aux utilisateur du jeu.

J’ai appris grâce aux réponses que certaine ques-tions n’était pas forcement judicieuses et par contre j’ai récolté des idées afin d’améliorer le jeu.

Les feedbacks sont très important pour tout projet afin d’améliorer l’expérience des utilisateurs.

Boom boom space création de formulaire avec google form

Grâce à l’enregistrement des scores dans une base de données, j’’avais déjà un certain retour sur les utilisateurs.

• Je peux voir combien de joueurs ont participés.

• Les joueurs qui ont fait plusieurs parties.

• Le temps qu’ils ont passés sur le jeu.

• Les joueurs uniques ou réguliers.

• Les nouveaux joueurs

Exemple des idées d’amélioration pour le jeu.

DP” 21

PHPDurant la formation nous avons fait plusieurs exercices de php et de mysql, nous avons appris à utiliser des bases de données, utiliser phpmyadmin pour les administrer.

Création de formulaire, de moteur de recherche avec les expressions régulières, envoi de notifica-tion sur un portable.

Nous avons fait plusieurs exercices pendant la formation, d’une application qui génère des tables de multiplication à une mini-boutique avec son panier, nous avons utilisé aussi les requetes mysql pour l’utilisation des bases de données. La gestion de multitables a aussi été abordé.

Exemple de formulaire d’envoi d’information par mail, dans une base de données et en notification sms.Exemple de choix multiple utilisé dans un formulaire d’envoi sur une base de données avec des tables croisées.

Exemple de résultats de recherche multita-bles dans une base de données mysql avec un formulaire de recherche.

Il est possible d’utiliser les expressions régulière pour la recherche plus poussé. exemple: ^t trouvera toutes les réponses commençant par t et présente dans la base de données.

BoutiqueNous avons fait une application qui ressemble à une boutique, avec un back-office pour l’administration.

Par exemple, dans l’administration, on gère la création ou la modifica-tion du menu, puis de catégories pour chaque menu, puis d’articles pour chaque catégorie. Travail en local avec easy php puis mise en ligne avec filezilla.

Exemple de recéption de sms après envoi d’un formulaire php

DP”22

STAGE EN

ENTREPRISE

Durant les mois de janvier et février, nous avons participé à un stage entreprise. J’ai dans un premier temps intégré l’entreprise phoenix 360 qui se situe sur Avignon.

Cette société est une start-up qui est en train de lancer une plateforme de vente aux enchères de véhicule sous forme d’une MLM. Ce site est one-deal.com.

J’ai effectué durant ce stage beaucoup d’activités différentes:

Réalisation de vignette pour les réseaux sociauxRemaniement de diaporama powerpointTravail sur WordPressmigration de wordpressIntégration HtmlSupport utilisateursUtilisation de divers logiciels (easylead, socialquizz...)Création d’affiches, de flyer,s de plaquettes, de logos, de kakemonos...Publication de site

J’ai donc travaillé du code, du graphisme, de l’intégration, de l’édition, et du support pour les clients.

Mais à 15 jours de la fin, vu le manque d’organisation dans cette société ou il y avait que des stagiaires pour travailler, j’ai préféré changer de stage et terminer mon stage dans une au-tre entreprise qui s’appel mobilhome service et qui se trouve à Orgon.

J’ai donc retravaillé leur site, pris des photographies, rentré leurs mobilhomes dans l’administration et J’ai géré leurs an-nonces professionnels sur le boncoin.

Page d’accueil de onedeal

Site mobilhomeservice

Entreprise Avignon

Fréquemment janvierfévrier2017

1&2&3

DP” 23

Exemple de logo.

Exemple de petite publicité pour les réseaux sociaux Création du kakemono

Boutique mobilhome sur le boncoin

Beaucoup de mes travaux pour l’entreprise phoenix 360 servent aux utilisateurs de “one-deal”, j’ai appris grâce à ce stage le principe de marketing de réseaux, l’importance de la com-munication et de la veille technologique pour anticiper et prévoir les evolutions obligatoire d’une entreprise pour rester compétitive.

J’ai aimé pouvoir découvrir une start-up à sa création, notre métier demande d’être poliva-lent, d’apporter des solutions efficaces dans différents domaines.

Les gouts et les couleurs, ça se discutent ! ;)