Des outils et des hommes

535 vues

Publié le

Publié dans : Technologie
2 commentaires
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
535
Sur SlideShare
0
Issues des intégrations
0
Intégrations
66
Actions
Partages
0
Téléchargements
2
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

×