TEST#DATAVISAJ
Des outilset des hommes
Des outilset des tâches
Des outils, des tâches  et des hommes         Voilà...
Souviens-toi de Michaël...
Parce que, parfois, c’est compliqué
Savoir quoi faire
Savoir quoi vouloir faire
Savoir vouloir faire
dataviz : interactive ?
dataviz : interactive ?           NON ?Alors tu fais ce que tu veux,       tout est bon.
dataviz : interactive ?         OUI ?        Super !Reste plus qu’à souffrir...
dataviz : interactive ?         OUI ?        Super !Reste plus qu’à rigoler :)
Une forme, un espoir
Un choix, des critères
Facilité de mise en placeInteractivité               Performance
Facilité de mise en placeInteractivité               Performance
Facilité de mise en place                            PNG                      DOM                SVG         CanvasInterac...
PNG• un tag <img> et on est bon• position via CSS, transitions et animations• :hover, bien pour actions simples• jouer ave...
DOM• “dessiner” avec des <div>s• souple, simple, terrain connu, aucun risque• ça va, quoi.
DOM et PNG sontsympa, mais limitésils sont un peu trop carrés, quand même.
Pour faire des choses pointues,   il faut des outils pointus
Pour faire des choses pointues,   il faut des outils pointus          comme ton zizi
Pour faire des choses pointues,   il faut des outils pointus        des trucs de pro, quoi...
Pour faire des choses pointues,   il faut des outils pointus        des trucs de pro, quoi...
SVG• mise en oeuvre “relativement” simple• haut niveau de potentiel interactif• librairies là pour aider• ça va aller
SVG• mise en oeuvre “relativement” simple• haut niveau de potentiel interactif• librairies là pour aider• ça va aller
SVG, c’est quoi ?Le SVG, c’est du vectoriel dans la page HTML.Donc :- le rendu est en temps réel (attention performance)- ...
ATTENTION CODE ATTENTION CODE ATTENTIONATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTIONTOUTE UTILISATION UNTANT SOIT PEU AVANCÉENÉCESSITE L’UTILISATIONDE LA PROGRAMMATION...
ATTENTION CODE ATTENTION CODE ATTENTIONTOUTE UTILISATION UNTANT SOIT PEU AVANCÉENÉCESSITE L’UTILISATIONDE LA PROGRAMMATION...
ATTENTION CODE ATTENTION CODE ATTENTION                Mais bon,               on s’en fout,                  hein ?ATTENT...
Workflöw SVG• Adobe Illustrator• Exporter en SVG• Récupérer le code, le placer dans sa page• et voilà...
Workflöw SVG• Adobe Illustrator• Exporter en SVG• Récupérer le code, le placer dans sa page• et voilà...               - Tr...
émo
démo
Workflöw SVGMais tout ça n’est intéressant que si ça devient interactif.
émo
démo
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Bref,
Fais le grand saut !
Voilà, merci.  Là : https://github.com/boblemarin/-datavisajLà aussi : http://boblemarin.github.com/-datavisaj/          E...
Prochain SlideShare
Chargement dans…5
×

Des outils et des hommes

558 vues

Publié le

Publié dans : Technologie
2 commentaires
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
558
Sur SlideShare
0
Issues des intégrations
0
Intégrations
64
Actions
Partages
0
Téléchargements
3
Commentaires
2
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Des outils et des hommes

  1. 1. TEST#DATAVISAJ
  2. 2. Des outilset des hommes
  3. 3. Des outilset des tâches
  4. 4. Des outils, des tâches et des hommes Voilà...
  5. 5. Souviens-toi de Michaël...
  6. 6. Parce que, parfois, c’est compliqué
  7. 7. Savoir quoi faire
  8. 8. Savoir quoi vouloir faire
  9. 9. Savoir vouloir faire
  10. 10. dataviz : interactive ?
  11. 11. dataviz : interactive ? NON ?Alors tu fais ce que tu veux, tout est bon.
  12. 12. dataviz : interactive ? OUI ? Super !Reste plus qu’à souffrir...
  13. 13. dataviz : interactive ? OUI ? Super !Reste plus qu’à rigoler :)
  14. 14. Une forme, un espoir
  15. 15. Un choix, des critères
  16. 16. Facilité de mise en placeInteractivité Performance
  17. 17. Facilité de mise en placeInteractivité Performance
  18. 18. Facilité de mise en place PNG DOM SVG CanvasInteractivité Performance
  19. 19. PNG• un tag <img> et on est bon• position via CSS, transitions et animations• :hover, bien pour actions simples• jouer avec les <map> pour faire plus complexe dans l’interaction• c’est écrit png, mais jpg et gif aussi, hein...
  20. 20. DOM• “dessiner” avec des <div>s• souple, simple, terrain connu, aucun risque• ça va, quoi.
  21. 21. DOM et PNG sontsympa, mais limitésils sont un peu trop carrés, quand même.
  22. 22. Pour faire des choses pointues, il faut des outils pointus
  23. 23. Pour faire des choses pointues, il faut des outils pointus comme ton zizi
  24. 24. Pour faire des choses pointues, il faut des outils pointus des trucs de pro, quoi...
  25. 25. Pour faire des choses pointues, il faut des outils pointus des trucs de pro, quoi...
  26. 26. SVG• mise en oeuvre “relativement” simple• haut niveau de potentiel interactif• librairies là pour aider• ça va aller
  27. 27. SVG• mise en oeuvre “relativement” simple• haut niveau de potentiel interactif• librairies là pour aider• ça va aller
  28. 28. SVG, c’est quoi ?Le SVG, c’est du vectoriel dans la page HTML.Donc :- le rendu est en temps réel (attention performance)- les formes “existent” dans le DOM (events)- on peut les modifier à la volée
  29. 29. ATTENTION CODE ATTENTION CODE ATTENTIONATTENTION CODE ATTENTION CODE ATTENTION
  30. 30. ATTENTION CODE ATTENTION CODE ATTENTIONTOUTE UTILISATION UNTANT SOIT PEU AVANCÉENÉCESSITE L’UTILISATIONDE LA PROGRAMMATION,DU CODE : ÉVÉNEMENTS, VARIABLES, INSTANCES...ATTENTION CODE ATTENTION CODE ATTENTION
  31. 31. ATTENTION CODE ATTENTION CODE ATTENTIONTOUTE UTILISATION UNTANT SOIT PEU AVANCÉENÉCESSITE L’UTILISATIONDE LA PROGRAMMATION,DU CODE : ÉVÉNEMENTS, VARIABLES, INSTANCES...ATTENTION CODE ATTENTION CODE ATTENTION
  32. 32. ATTENTION CODE ATTENTION CODE ATTENTION Mais bon, on s’en fout, hein ?ATTENTION CODE ATTENTION CODE ATTENTION
  33. 33. Workflöw SVG• Adobe Illustrator• Exporter en SVG• Récupérer le code, le placer dans sa page• et voilà...
  34. 34. Workflöw SVG• Adobe Illustrator• Exporter en SVG• Récupérer le code, le placer dans sa page• et voilà... - Trop facile !
  35. 35. émo
  36. 36. démo
  37. 37. Workflöw SVGMais tout ça n’est intéressant que si ça devient interactif.
  38. 38. émo
  39. 39. démo
  40. 40. Conclusion: c’est une question de style...
  41. 41. Conclusion: c’est une question de style...
  42. 42. Conclusion: c’est une question de style...
  43. 43. Conclusion: c’est une question de style...
  44. 44. Conclusion: c’est une question de style...
  45. 45. Conclusion: c’est une question de style...
  46. 46. Bref,
  47. 47. Fais le grand saut !
  48. 48. Voilà, merci. Là : https://github.com/boblemarin/-datavisajLà aussi : http://boblemarin.github.com/-datavisaj/ Et surtout : http://google.com

×