Jeu Final 4ème session : Jeu 2D et bande annonce

Bonjour tout le monde!

La fin des classe est proche. Comme projet final de fin de session en production multimédia IV, nous devions créer un jeu en ActionScript 3 (AS3). Le sujet était libre donc certains l'ont fait avec une petite perspective et d'autres vue de haut comme moi. Le but du jeu est de détruire les 25 policiers par niveau, ce qui augmente votre score mais si vous touchez un autre véhicule qu'une police, vous perdez autant de points que vous en auriez gagnez en touchant un policier. J'espère que ce jeu vous plaira! Nous avions aussi un projet final en technique d'animation II de faire la bande annonce du jeu.

Alors, sans plus attendre, les voici!

Le jeu

La publicité

Étape 8 - Conclusion

Je crois que j'ai atteint mon objectif qui était de me faire "désiré" par les employeurs. la force de ce concept est la simplicité. La faiblesse serait le design, qui n'est pas ma grande force. J'ai trouvé ce projet beaucoup trop long. On aurait facilement pu le réduire à 3 ou 4 étapes. La méthode du persona est plus ou moins aléatoire...

Étape 7 - Maquette finale

Mes projets:


Mes actualités:


J'ai pris en compte certains commentaires.
J'ai modifier un peu la couleur des liens pour les différencier à ce qui n'est pas un lien.
J'ai rajouter un pied de page très minimaliste
J'ai mis les MES en minuscule pour avoir un peu plus d'uniformité.

Étape 6 - Maquette préliminaire

La page des actualités:


la page des projets:


Voici les maquettes préliminaires de mon site.

Je voulais quelque chose de très simple et épuré tout en gardant une bonne ergonomie.

Nous voyons très bien dans quelles sections nous sommes grâce au changement de couleur du texte dans le menu mais aussi un gros "MES" s'inscrit au-dessus. Avec ce mot qui est rajouté, l'utilisateur reste avec l'idée qu'il navigue dans un portfolio et en plus, mes informations des compétences et mes qualités comme travailleur sont indiqué en permanence à droite des pages.

Pour la navigation secondaire et ternaire, le même code de couleur est utilisé: le beige pour indiquer qu'il s'agit d'un lien et le rouge pour indiquer que nous avons sélectionné tel objet

Étape 5 - Exploration

Harmonie de couleurs



Typographie

Verdana


Ambiance visuelle

Ambiance chaleureuse pour inciter un futur employeur à rester sur le site et à découvrir mes projets, ainsi qu'au lecteur puisque il s'agit d'un blogue et je vais commenter l'actualité technologique. L'employeur va bien entendu savoir mes opinions sur certains points donc celui-ci va pouvoir en apprendre plus sur moi.

Le site sera très simple, très peu de "fla-fla" inutile. Il va seulement contenir l'essentiel

Étape 4 - Concevoir l'interactivité de la page-écran

Modèle de conception (design pattern)
Quel modèle de conception ou design pattern choisirez-vous ?
"Main navigation" puisque il est impensable de penser qu'un site web à plusieurs pages n'aient pas de menu qui relient les pages entre elles


Esquisse fonctionnelle (wired frame)



Lors du survol du menu principal (Acutalités, Projets), Un "Mes" apparaitra au haut du bouton survolé pour complété le nom parce que ce sont Mes projet, Mes compétences. Dans projets, par défaut vous avez tous les projets apparents mais vous pouvez rendre seulement visible les travaux de "Design" ou de "Prog/Intégration".

Quelles sont les fonctionnalités particulières du site?
vous pouvez rendre seulement visible les travaux de "Design" ou de "Prog/Intégration".

Étape 3 - Le contenu de votre site

Définir le contenu
Énumérer - Catégoriser - Structurer

Quel est le contenu de votre site en texte et en image?

La plupart des images seront regroupées dans la section des projets. Le texte me présentant sera dans la section des informations. La section actualités intègrera mon blogue avec différents articles sur l'informatique, la technologie et le web. La section compétences comprendra mes compétences acquises, les logiciels que j'utilise et mes habiletés.
Dans la section projets, mes différents travaux seront présentés avec un petit texte en dessous des images pour identifier quels langages ont été utilisés pour créer ce site et une petite présentation de l'entreprise.

Rédiger les différents contenus de vos deux pages à produire pour le prochain cours. Quel type de texte?
Texte facilement lisible et non décoratif avec un bon contraste entre les caractères et le fond de la page

Tables des matières
Projets - Boréal Design
Languages utilisés:
HTML/CSS
PHP
SQL

Boréal Design est une entreprise québécoise spécialisé dans la construction et la vente de Kayaks de mer à des prix compétitifs

Mes actualités
Motorola Xoom VS Apple Ipad 2

La tablette de Motorola vient d'être lancé au Canada. Est-ce l'ipad Killer qu'on attend depuis longtemps? Je le crois.

Les caractéristiques techniques et les connectiques dépassent ceux de la tablette 2ème génération d'Apple. Par connectique, je veux bien sur parler des standards établis comme le USB (Universal Serial Bus), Fente pour Micro SD, entrée HDMI et VGA. Est-ce que le ipad 2 à ça? Vous me diriez que vous pourriez les acheter. Mais si on fait un petit calcul, La motorola coûte un peu plus cher que le ipad mais avec l'ipad, vous n'avez aucune des connectiques mentionnées plus haut et à 40$ pour chacun des périphériques, le prix dépasse et de loin celui de la Xoom.

Philippe Boivin
Étudient en multimédia
Cégep de Sainte-Foy


Compétences:
HTML/CSS
SQL
PHP
ActionScript
Javascipt


Qualités:
Entregent
Travaillant
Organisé
Motivé
Meneur d’hommes



Contactez-moi


Quel sera le ton du site?
Ton professionnel

Structurer le contenu

Étape 1 et 2 : Projet 3

Étape 1 - Définir la problématique et se fixer des objectifs

Définir la problématique

Thème choisi : Le portfolio de Philippe Boivin, Intégrateur et programmeur en multimédia

Les objectifs du site : Me faire connaître en tant que futur employé d'un employeur potentiel,

Besoins des usagers : Savoir les compétences du potentiel futur employé

Enjeux ergonomiques : Convivialité et stabilité des page-écrans


Se fixer des objectifs

Objectifs personnels :

• Aider mon utilisateur à ne pas se perdre sur le portfolio en gardant l'uniformité de ma mise en page.
  
• Le diriger rapidement et facilement vers mes compétences.

Paramètres techniques : Travaille sur Windows 7 avec Firefox 4.0.1 avec une connexion 10 m bits/sec

Étape 2 - Fiche de votre persona

L’identité

Richard Turcotte est un homme de 32 ans. Il a deux enfants et est marié avec sa femme. Il gagné 45000 par année. Il est Directeur des ressources humaines chez MORGAM industries, une entreprise évolutif dans le domaine du multimédia. Il vit dans la ville de Québec au lac beauport dans une grande maison à deux étages. Il aime le plein air et aller à la pèche avec son fils de 12 ans. Il pratique le rugby, le soccer et le vélo.

Le comportement (Web)
Richard travaille sur un poste Windows parce qu’il joue à des jeux vidéos de temps en temps mais surtout parce qu’il n’aime pas MAC et ses limitations logicielles. Il visite plusieurs types de sites de nouvelles technologiques : Infos-du-net.com, technostérone, etc… Il visite aussi des sites d’emploi comme Workopolis, Emploi-Québec et jobboom pour y dénicher des nouveaux candidats. Il visite également plusieurs portfolios des futurs candidats.

Le scénario d’utilisation
Richard veut trouver la perle rare pour compléter son équipe créative et passionnée. Il regarde surtout les compétences du candidat et ses projets qu’il a réalisé. S’il ne trouve pas exactement le profil recherché. Il est une personne qui priorise le savoir-être au savoir-faire.

Interface Web Mobile

Dans mon cours de Design interactivité II, nous avions un projet qui consistait à transformer un interface d'un site web et l'adapter pour une utilisation mobile

J'ai pris le site de
Taxi Laurier car je crois qu'il y a un intérêt pour une utilisation accessible par téléphone

Voici les résultats sur l'interface d'un iphone 3GS.

Accueil:



Page "Service":

Technique d'animation II: Cycle marche et course

réalisé avec flash cs4:

Technique d'animation 2 - Cycle Marche et course from Philippe Boivin on Vimeo.