Gamify with SVG / Canvas over Facebook Open Graph

1,271 views

Published on

I present how using very simple HTML5 techniques integrating SVG in the DOM we can have a mobile HTML5 app on "creating moods" with a short production cycle. The I show how to integrate it to Facebook with a pure JavaScript solution.

Published in: Technology, Art & Photos
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,271
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Gamify with SVG / Canvas over Facebook Open Graph

  1. 1. Gamify with Canvas over Facebook Open Graph Pietro Polsinelli @ppolsinelli
  2. 2. If only I remembered who these guys are. 2 Matteo Bicocchi “pupunzi” http://pupunzi.com Pino Panzarella https://twitter.com/pugusel
  3. 3. Aim: a mobile HTML5 app for expressing your mood on Facebook. 3
  4. 4. Original mockup
  5. 5. Structure of the app 5
  6. 6. 7
  7. 7. How to Add Scalable Vector Graphics toYour Web Page http://www.sitepoint.com/add- svg-to-web-page/ Inline SVG XML Embedded IntoYour HTML5 Page “The method works in all HTML5 browsers and also permits animation, scripting and CSS” 8
  8. 8. http://picmood.com 9
  9. 9. 11
  10. 10. Available in DOM 12
  11. 11. 13
  12. 12. From SVG to CANVAS to BASE64 Paintbrush.js 14
  13. 13. Generate Canvas -> Visual Effects
  14. 14. Persistence: Facebook!
  15. 15. Encode in image in POST -> in HD -> post to FB with FB- JS API
  16. 16. https://developers.facebook.com/docs /reference/javascript/
  17. 17. 20
  18. 18. Nice that: - “works” in the limited means of the mobile browser JS environment. No (app specific) server, no database. P.S. : Same for pictures and videos taken from your phone!!! Scales!
  19. 19. Get the levels right http://www.flickr.com/ photos/dreamtea/sets/ 72157634248345402/ 22
  20. 20. Otherwise... 23
  21. 21. This is how it should be. 24
  22. 22. Oh gosh the cat... 25
  23. 23. 26 Zombie owner...
  24. 24. No owner? 27
  25. 25. Until there were none. 28
  26. 26. HTML5 love / hate
  27. 27. - So little is implemented uniformly of HTML5 specification - Android’s … - Media performance (sound, animation) seems intentionally botched. “An HTML5 audio library for mobile that tries to actually work” http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually- work-on-mobile/ HATE 30
  28. 28. Practical, low cost aspects of html5: - Ease of reform / release often / expand: This is a great advantage in balancing / fun phase which in games is a considerable part - CTRL-R compile - Used to beautiful fonts / typographic design. It’s a nightmare in say Unity3d. LOVE 31
  29. 29. HTML5 apps are ideal for gamified solution, as integration in web sites / intranets, social networks is natural. HTML5 ideal for gamified solutions.
  30. 30. My twitter stream is mostly dedicated to game design: http://twitter.com/ppolsinelli A blog on game design http://designagame.eu

×