eval gobelins

Consignes.txt

CONSIGNES : 

Créer une application informant sur les nouveaux tweets reçus sur Twitter et comprenant le mot "Future".

La partie gauche est en CANVAS.
Les tweets arrivent par la gauche et partent vers la droite, en s'éloignant en profondeur.
La taille de départ du tweet dépend de la taille du message.
La couleur plus ou moins au hasard (par exemple dans un theme kuler).

A droite SVG + HTML/CSS (Je vous laisse choisir quel techno où...)

A chaque fois qu'un tweet arrive (soit dès son affichage, soit quand il sort à droite du canvas, c'est encore mieux), on met la partie SVG + HTML/CSS à jour avec : 

Le pourcentage de replies. 
Le pourcentage de RT 
Le pourcentage de messages géotaggés. 

Le tweet le plus retweeté (et son nombre de RT). 

Le pourcentage de tweets comprenant un @reply
Le pourcentage de tweets comprenant un #hashtag
Le pourcentage de tweets comprenant un lien

Le nombre de followers ayant reçu l'ensemble des tweets 
Le nombre de followings des posteurs de tweets

Et ensuite ? 

Faites vous plaisir ! ! ! 
Vous pouvez (sans ordre de préférence) :
OK - utiliser des typos @font-face. 
OK - améliorer le canvas pour faire des anim sympas. 
OK - Faire en sorte que la partie droite soit visible Hors-ligne
- Faire en sorte que la partie droite soit visible sur Mobile
- Faire d'autre type de graph que des bargraphs ( camembert ? ... )
- Faire du WEBGL plutôt que du canvas2D
OK - Faire des anims CSS de ouf sur la partie droite (par exemple une anim sur l'apparition des différents infos...)
OK - Faire des anim de ouf sur le SVG (genre la couleur qui flash quand on change une valeur et/ou quand on change de dizaine ? )
- Ajouter de l'audio...
- Faire ce qui vous passe par la tête, comme pendant tout le cours, n'hésitez pas à transgresser les règles si c'est pour le bien de l'application ! 


Infos Supplémentaires : 

- Le design proposé est un guide, n'hésitez pas à faire mieux (c'est pas compliqué vu mon niveau en graphisme ! )
- Le mode "éval" n'interdit pas de poser des questions, ne restez pas bloqué sur quelquechose trop longtemps. 

Bons conseils : 

- Commencez avec l'architecture du HTML5 Boilerplate, vous gagnerez du temps précieux sur des petites choses.
- Utilisez les libs vues en cours, JQuery, Raphael et ThreeJS entre autres (Handlebars... si vous voullez)
- Regardez bien le contenu de l'objet tweet renvoyé par le websocket, il contient des infos que vous pourriez être tenté de "calculer" vous mêmes.

Liens : 
http://html5boilerplate.com/
http://www.fontsquirrel.com/
https://github.com/mrdoob/three.js/
http://raphaeljs.com/
http://www.handlebarsjs.com/
https://developer.mozilla.org/fr/
http://www.jshint.com/
http://www.htmlfivewow.com/
https://demos.mozilla.org/fr/
http://svg-wow.org/

La grille d'évaluation : 

Appropriation du cours : 6
Architecture : 3
Clarté et style : 3
Performances : 2 
Commentaires et nommage : 2 
Créativité : 4 

Bonus / Malus : 
Ne fonctionne pas : jusqu'à -2 
Envoyé en retard : -2  
Non respect des consignes : jusqu'à -2 
Code en français : -1 
Vouvoiement du prof pendant l'éval : -1 (l'élève visé se reconnaitra :) )
Référence à la cité de la peur dans le code ou le design : +1 

BONNE CHANCE !