David Torondel / Portfolio | Blog
19795
paged,page,page-id-19795,page-template,page-template-blog-large-image-whole-post-php,paged-3,page-paged-3,ajax_updown,page_not_loaded,,vertical_menu_enabled,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Polupalo – jeu Flash sur le cycle de l’eau

J’ai un planning très très chargé en ce moment, beaucoup de projets simultanés, ce qui explique un peu le ralentissement des mises à jour (et le mise en pause des projets persos), mais j’aurais prochainement quelques travaux à vous montrer ! En attendant, voici un petit jeu en Flash, réalisé pour l’Agence de l’eau Seine-Normandie, via l’association « le temps presse » qui s’est occupé de la conception/scénarisation. En 2006 j’avais déjà réalisé sur le même thème un jeu beaucoup plus conséquent, avec de la vidéo, plusieurs types de jeux, etc. Plus d’une demi-heure de jeu, mais l’ensemble est à télécharger. La déclinaison que nous venons de finir est elle jouable en ligne. Les illustrations des personnages sont de Laure Scellier, je me suis occupé pour ma part de la réalisation de l’interface graphique, des animations, de l’illustration du paysage et de la programmation de l’ensemble.

 

polupalo

Cliquer sur l’image pour voir le jeu, ou cliquer ici.

Read More

Links of the week (4)

Bon, ma série des « link of the week » s’est un peu transformé en « link of the year », vu la fréquence…

Il faut dire que je ne trouve pas tant que ca de liens intéressants à partager… Voici quand même une dizaine de liens !
Tout d’abord voici 3 sites que j’ai trouvé simplement beaux :

ndrc

J’ai particulièrement trouvé intéressant et astucieux le parti-prix de « casser » les verticales par les formes de couleur en fond de page. La palette de couleur est elle aussi agréable.

 

siete

J’aime beaucoup le visuel du header, la structure de la page est intéressante aussi, bref une charte très réussie à mon goût !

 

forty

Pour ce dernier, je ne suis pas fan de la mise en page, mais j’aime beaucoup la gamme de couleurs utilisée.

 

Pour continuer, un site de recherche d’icones.

icones

Il en existe déjà plusieurs, en voici une sélection, mais c’est le premier à ma connaissance en français, ce qui est surtout intéressant pour la recherche par critères, on ne sait pas toujours la traduction des termes…

Donc une bonne initiative, qu’il faut à mon soutenir !

 

Pour finir, voici 6 sites dédiées à WordPress, mon « top 6″  quand je recherche des infos sur ce moteur ! Wpchannel propose des tutoriaux vidéos, en français, ce qui est vraiment très pratique ! L’auteur « commet » aussi le site Protuts, qui est une mine d’infos, avec des tutoriels aussi. Idem pour Geekeries, Fran6 et les autres indiqués.

wpchannel

protuts

geekeries

fran6

debuter

blogtoolbox

Voilà, c’est tout pour cette fois !

Read More

Forum et blog

wpBonjour à tous, j’ai pour éventuel projet de lancer prochainement un forum, lié à un blog WordPress (sur le graphisme). Je cherche donc des solutions pour lier ces 2 supports, et pour l’instant j’ai un peu de mal à mettre en place ça… J’ai commencé par installer Onepress, mais je viens de m’apercevoir que cette solution n’était pas compatible avec la dernière version de WordPress.

Je trouve plusieurs plugins et solutions diverses, mais il me semble difficile de tout tester… D’où ce message, si quelqu’un a déjà expérimenté ce genre de « mélange » et accepterait de me donner quelques conseils, je suis preneur !

D’ailleurs il n’est pas forcément judicieux d’utiliser phpBB, il existe aussi d’autres systèmes de blogs, peut-être plus adaptés à une utilisation liée à WordPress. Là aussi, si vous avez des conseils… Merci d’avance !

Read More

Illustration isométrique BTP

Désolé pour le manque de mise à jour en ce moment, mais j’ai beaucoup de dossiers à gérer en même temps !

Voici une illustration que je viens de faire, déclinaison d’une autre déjà montrée ici. Au final ce sera une animation Flash, destinée à tourner en boucle sur des stands de salon. Cliquer sur l’image pour la voir en plus grand.

Chantier

Edit 17 oct : Pour répondre au commentaire de Heneman, pour ce genre d’illustration je me fais d’abord une « grille » dans Illustrator, que j’imprime, et qui me sers de repère pour mon croquis de base. Voici ci-dessous ce que ca donne :

chantier2

Le croquis n’est pas ultra précis, le but est vraiment de faire valider l’agencement des éléments par le client. Une fois validé, je met le croquis sur un calque dans Illustrator, et je retrace par dessus. Dans ce cas précis, comme il fallait une vue vraiment du dessus, je n’ai pas utilisé une grille « standard » isométrique. D’un côté l’angle est à 30°, de l’autre à 45°.

Mais dans la plupart des cas, j’utilise une grille avec les 2 angles à 30°. J’ai mis à disposition le fichier Illustrator de base de cette grille.

Read More

Portofolio v7 – étape 1

logoComme annoncé précédemment, je vais refaire entièrement mon site portfolio. Mon but final est d’avoir un site à la fois attractif et original visuellement, tout en ayant une facilité de mise à jour. J’ai donc opté pour le principe d’un site basé sur le moteur WordPress, qui me permettra d’avoir un module d’administration « tout fait », mais aussi de bons outils de tris croisés (catégories, tags, moteur de recherche…). La difficulté est donc de partir d’un outil (WordPress) certes très puissant, mais qui a une structure assez « classique ». Donc un gros travail de personnalisation !

 

Je suis parti d’un thème de base, pour arriver à cette structure. Vous pouvez passer d’un thème à l’autre via le menu déroulant « theme switcher » (tnet v00, tnet v01…). Pour l’instant aucun travail graphique, cette étape viendra plus tard !

 

J’ai donc commencé en farfouillant les CSS et les ai modifiés en fonction de ce que je voulais. Pour cette partie, un outil très très pratique est l’extension Firebug de Firefox. Une fois installé, cela ajoute en bas de la fenêtre de Firefox une petite icone, qui permet d’afficher tous le code, structure, css de la page visitées. Indispensable pour bien appréhender comment est construite une page, et donc la modifier.

 

Regardez par exemple dans la capture d’écran ci-dessous : j’ai activé Firebug et le mode « inspection », ensuite je survole n’importe quel élément dans la page, et en bas s’affiche le code correspondant, la classe CSS, etc. Et à droite les attributs de la classe, dans quel fichier, à quel numéro de ligne, etc.

 

firebug_little

Donc j’ai modifié les attributs CSS des zones qui m’interessaient, à savoir les sidebar, header, etc. selon le schéma suivant :

structure2

 

Je suis donc parti de ça :

avant

pour arriver à ça :

apres

 

Donc une page très très large (8000 pixels), divisée en 4 sections. Pour naviguer entre ces sections horizontales, j’ai voulu utiliser une bibliothèque javascript qui permet un défilement progressif dans les liens « ancre » d’une page. Il s’agit de « Tiny scrolling« . Un exemple de site utilisant ce javascript : Horizontal way ou encore celui-ci qui est plus proche de ce que je veux faire.

 

Pas de souci pour intégrer le javascript à WordPress, mais première déconvenue, dans mon cas le contenu des pages autres que le portfolio seront en Flash, et les liens dans les Flash ne fonctionnaient pas en « progressif ». Nouveau farfouillage en ligne, pour tomber sur un commentaire sur le site du script, ou une personne fourni une version « personnalisée » du script, qui selon lui fonctionne avec du Flash. Re-installation, cette fois les liens depuis un fichier Flash fonctionnent bien, mais au passage c’est le scroll avec la molette de souris qui ne fonctionne plus ! J’ai donc passé un peu de temps à comparer les 2 fichiers javascripts, pour récupérer la molette sur la version compatible Flash… sachant que je ne suis pas du tout programmeur, ca a été un peu laborieux, mais ca semble fonctionner (sauf sur IE).

 

Ensuite, il a fallu régler un autre souci : la partie portfolio, donc avec les articles WordPress, sont en 2e section, donc les liens internes à WordPress devaient intégrer le lien ancre correspondant. J’ai essayé de jouer avec les réglages de permaliens, sans succés. J’ai donc été demander de l’aide sur le forum WordPress… La discussion est visible ici. Et donc grâce à l’aide de « Gaz pumped » et « Comme une image« , qui m’a gentiment écrit un filtre php qui permet d’ajouter le lien ancre automatiquement !

 

Voilà ou j’en suis ! La base « technique » est donc en place, maintenant je vais pouvoir m’atteler à la partie qui m’est plus « facile » : le graphisme ! Et ensuite, le remplissage… A suivre !

Read More

Quels sont les graphistes que vous préférez ?

Je souhaite faire prochainement un article sur ce blog présentant les « meilleurs » graphistes français. Certes cette notion est forcément subjective, donc disont au moins « ma » sélection de graphistes dont j’apprécie vraiment le travail. J’ai bien sur déjà ma petite liste, mais forcément je ne connais pas tous les graphistes, donc je me suis dit que je pourrais vous mettre à contribution, vous lecteurs !

Donc n’hésitez pas à me dire quels sont les graphistes français que vous affectionnez, que ce soit en commentaires sur ce blog ou par mail, comme vous préférez !

Read More

Illustrations pédagogiques

Je travaille en ce moment à la réalisation d’un DVD ludo-pédagogique sur le thème des bonnes habitudes alimentaires. J’ai déjà montré ici les décors réalisés pour l’occasion, voici quelques autres images : la mascotte de la société qu’il a fallu redessiner et décliner dans quelques poses, et quelques copies d’écran de l’application. Je réalise la charte graphique, l’animation et la programmation Flash (interface, navigation, quiz…).

 

avenance

 

Voici également quelques images d’animations Flash réalisées pour Mobiclic, pour un jeu sur le thème des robots, dont j’ai déjà montré quelques éléments précédemment. Pour voir les animations, il faudra acheter le magazine en kiosque :)

 

mobiclic_robots

 

ccccblog2

Pour rester dans le sujet du multimédia pédagogique, j’ai réalisé dernièrement la personnalisation d’un blog WordPress pour la société ComCiComCa, un blog dédié aux réalisation de l’agence dans le domaine du multimédia éducatif et ludo-pédagogique.

 

ntvb

Par ailleurs, pour les surfers invétérés du web, je vous informe que j’ai mis à jour ma page Netvibes !

Vous y trouverez la sélection des liens que je vais voir tous les jours, une collection de liens vers des blogs BD et d’illustrateurs, mais aussi des liens vers des blogs de graphistes et des graphzines, sans oublier de la veille techno (web 2.0, etc.), une sélection de bons sites sur WordPress, et autres…

 

Read More

[Chronique Musique] Belleruche

belleruche

Photo : Patrick Schoeneich

 

Il me semble que ce sera la première fois sur ce blog que je parle de musique ! Il faut dire que le sujet est casse-gueule, vu que les goûts musicaux sont quelque chose de très subjectifs. Je sais déjà que la plupart des personnes des personnes qui vont lire cette article y seront insensibles, mais si cela permet à au moins 2 ou 3 personnes de découvrir une musique qu’ils ne connaissent pas et vont apprécier, ca vaut le coup quand même !

 

Le groupe dont je souhaite vous parler s’appelle Belleruche, derrière ce nom particulier se cache un trio londonien. J’apprécie particulièrement la voix de la chanteuse, Kathrin de Boer, qui est accompagné par un guitariste, Ricky Fabulous, et DJ Modest aux platines. Je ne suis pas du tout un connaisseur averti en musique, je fonctionne au coup de coeur, sans me soucier de savoir quel courant musical j’écoute… Qui plus est, plus ca va et moins j’y comprend quelque chose dans ce domaine ! :)

 

Mais pour essayer quand même de vous situer ça, selon les articles que j’ai pu lire sur ce groupe, il s’agirait de Trip-hop down tempo, ou de Nu-Jazz, voir de hip-hop soul. Oui, moi aussi j’essaye de parler djeuns si je veux.

 

Le souci est que je n’ai trouvé qu’un seul morceau sur Deezer, donc pour pouvoir vous faire écouter ça un peu, j’ai du me rabattre sur Youtube, qui propose quelques vidéos live.

 

Voici déjà le morceau disponible sur Deezer :

Minor Swing est une reprise d’un classique de Django Reinhardt.

Ci dessous, 3 autres morceaux parmi ceux que je préfère, en vidéo cette fois, ce sont des enregistrement live d’un concert à Paris, en 2008 :

spacer

spacer

Voilà, et si vous voulez en savoir et en écouter plus, vous pouvez aller sur leur page Myspace ou sur leur site.

Read More

Site Flash – Grille de rentrée M6

Chaque rentrée, les médias communiquent à la presse leurs nouvelle programmation. Conférences de presse, plaquette, et parfois (de plus en plus) via un site web. J’ai pu cette année réaliser la charte graphique et l’animation du site tout en Flash pour la chaine de télévision M6.

 

Le but était de minimiser l’interface pour faire la part belle à l’image, au mouvement. La principale difficulté technique a été de gérer de gérer le plein écran pour toutes les images, vidéos, diaporamas… et d’essayer de conserver une navigation fluide malgré le poids important des éléments.

 

Le résultat est visible ici :http://data.groupem6.fr/rentree/

 

basegrillem6

Réalisé dans le cadre de ma collaboration avec l’agence ComCiComCa.

Read More