gamify with svg / canvas over facebook open graph
DESCRIPTION
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.TRANSCRIPT
![Page 1: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/1.jpg)
Gamify with Canvas over
Facebook Open Graph
Pietro Polsinelli @ppolsinelli
![Page 2: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/2.jpg)
If only I remembered who these guys are.
2
Matteo Bicocchi “pupunzi” http://pupunzi.com
Pino Panzarella https://twitter.com/pugusel
![Page 3: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/3.jpg)
Aim: a mobile HTML5 app for expressing
your mood on Facebook. 3
![Page 4: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/4.jpg)
Original mockup
![Page 5: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/5.jpg)
Structure of the app
5
![Page 6: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/6.jpg)
![Page 7: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/7.jpg)
7
![Page 8: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/8.jpg)
How to Add Scalable Vector Graphics to Your
Web Page http://www.sitepoint.com/add-
svg-to-web-page/
Inline SVG XML Embedded Into Your HTML5
Page
“The method works in all HTML5 browsers
and also permits animation, scripting and
CSS”
8
![Page 10: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/10.jpg)
![Page 11: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/11.jpg)
11
![Page 12: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/12.jpg)
Available in DOM 12
![Page 13: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/13.jpg)
13
![Page 14: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/14.jpg)
From SVG to CANVAS to BASE64
Paintbrush.js 14
![Page 15: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/15.jpg)
Generate Canvas -> Visual Effects
![Page 16: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/16.jpg)
![Page 17: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/17.jpg)
Persistence:
Facebook!
![Page 18: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/18.jpg)
Encode in image in POST -> in HD -> post to FB with FB- JS
API
![Page 19: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/19.jpg)
https://developers.facebook.com/docs
/reference/javascript/
![Page 20: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/20.jpg)
20
![Page 21: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/21.jpg)
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!
![Page 22: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/22.jpg)
Get the levels right
http://www.flickr.com/
photos/dreamtea/sets/
72157634248345402/
22
![Page 23: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/23.jpg)
Otherwise...
23
![Page 24: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/24.jpg)
This is how it should be.
24
![Page 25: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/25.jpg)
Oh gosh the cat...
25
![Page 26: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/26.jpg)
26
Zombie owner...
![Page 27: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/27.jpg)
No owner?
27
![Page 28: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/28.jpg)
Until there were none. 28
![Page 29: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/29.jpg)
HTML5 love / hate
![Page 30: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/30.jpg)
- 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
![Page 31: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/31.jpg)
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
![Page 32: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/32.jpg)
HTML5 apps are ideal for
gamified solution, as integration
in web sites / intranets, social
networks is natural.
HTML5 ideal for gamified solutions.
![Page 33: Gamify with SVG / Canvas over Facebook Open Graph](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c7d07c4a79599d758b4573/html5/thumbnails/33.jpg)
My twitter stream is mostly dedicated to game design:
http://twitter.com/ppolsinelli
A blog on game design http://designagame.eu