0
KILL ALL
HUMANS!
I. Robot
Forensic Anthropologist
Making
Burgers with
JavaScript
November 11, 2010
Saturday, November 13, ...
Who am I
Saturday, November 13, 2010
Who am I
• Diogo Antunes
Saturday, November 13, 2010
Who am I
• Diogo Antunes
• JavaScript developer @ SAPO
Saturday, November 13, 2010
Who am I
• Diogo Antunes
• JavaScript developer @ SAPO
• @dicode
Saturday, November 13, 2010
Who am I
• Diogo Antunes
• JavaScript developer @ SAPO
• @dicode
• http://js.sapo.pt
Saturday, November 13, 2010
Should I stay or should I
go?
Saturday, November 13, 2010
Should I stay or should I
go?
• we are going to talk about JavaScript
Saturday, November 13, 2010
Should I stay or should I
go?
• we are going to talk about JavaScript
• so I will skip some steps
Saturday, November 13, 2...
Should I stay or should I
go?
• we are going to talk about JavaScript
• so I will skip some steps
• but feel free to bug m...
Should I stay or should I
go?
Saturday, November 13, 2010
GO AWAY!!!
http://images.icanhascheezburger.com/completestore/
2...
What are we talking
about?
Saturday, November 13, 2010
What are we talking
about?
• JavaScript
Saturday, November 13, 2010
thank you captain obvious
http://www.eiaonline.com/upl...
What are we talking
about?
• JavaScript
• Raphaël - JavaScript Library
Saturday, November 13, 2010
What are we talking
about?
• JavaScript
• Raphaël - JavaScript Library
• LibSAPO.js - for event handling and
stuff
Saturday...
What are we talking
about?
• JavaScript
• Raphaël - JavaScript Library
• LibSAPO.js - for event handling and
stuff
• and mo...
Raphaël - wtf?
Saturday, November 13, 2010
http://chericos.org/system/files/images/raphael_logo.jpg
Raphaël - wtf?
• JavaScript library to simplify work with
vector graphics
Saturday, November 13, 2010
Raphaël - wtf?
• JavaScript library to simplify work with
vector graphics
• uses SVG W3C recommendation and
VML
Saturday, ...
Raphaël - wtf?
• JavaScript library to simplify work with
vector graphics
• uses SVG W3C recommendation and
VML
• so every...
Raphaël - wtf?
• JavaScript library to simplify work with
vector graphics
• uses SVG W3C recommendation and
VML
• so every...
Raphaël - wtf?
• JavaScript library to simplify work with
vector graphics
• uses SVG W3C recommendation and
VML
• so every...
Raphaël - why?
Saturday, November 13, 2010
Raphaël - why?
• lightweight - 20k
Saturday, November 13, 2010
Raphaël - why?
• lightweight - 20k
• cross browser support
Saturday, November 13, 2010
Raphaël - why?
• lightweight - 20k
• cross browser support
• it’s easy to work with
Saturday, November 13, 2010
Raphaël - why?
• lightweight - 20k
• cross browser support
• it’s easy to work with
• made by Dmitry Baranovskiy who
total...
Raphaël - how?
Saturday, November 13, 2010
Raphaël - how?
• download it
Saturday, November 13, 2010
Raphaël - how?
• download it
• include it in your html
<script type="text/javascript" src="raphael.js"></script>
Saturday,...
Raphaël - how?
• download it
• include it in your html
<script type="text/javascript" src="raphael.js"></script>
• and cod...
Raphaël - demos
Saturday, November 13, 2010
You can check the website and see
Raphaël - demos
Saturday, November 13, 2010
a tiger
Raphaël - demos
Saturday, November 13, 2010
text rendering - helvetica example
Raphaël - demos
Saturday, November 13, 2010
a maze game
Raphaël - demos
Saturday, November 13, 2010
how to rotate images
Raphaël - demos
Saturday, November 13, 2010
well, event the logo is vector based
Raphaël - the basics
• creating your canvas
Saturday, November 13, 2010
Raphaël - the basics
• creating your canvas
var canvas = Raphael("container", 400, 300);
Saturday, November 13, 2010
creat...
Raphaël - the basics
• creating your canvas
var canvas = Raphael("container", 400, 300);
var canvas = Raphael(container, 4...
Raphaël - the basics
• creating your canvas
var canvas = Raphael("container", 400, 300);
var canvas = Raphael(container, 4...
Raphaël - the primitives
var paper = Raphael(10,10, 500, 500);
paper.circle(100, 100, 50);
Saturday, November 13, 2010
cir...
Raphaël - the primitives
• var paper = Raphael(10,10, 500, 500);
paper.rect(200, 200, 100, 50);
Saturday, November 13, 201...
Raphaël - the primitives
var paper = Raphael(10,10, 500, 500);
paper.rect(300, 300, 100, 50, 5);
Saturday, November 13, 20...
Raphaël - the primitives
var paper = Raphael(10,10, 500, 500);
paper.ellipse(400, 400, 40, 20);
Saturday, November 13, 201...
Raphaël - see it happen
var paper = Raphael(10, 10, 500, 500);
var path = paper.path("M20 20L245 245");
Saturday, November...
Raphaël - see it happen
• var paper = Raphael(10, 10, 500, 500);
var path = paper.path("M20 20L245 245");
var square = pap...
Raphaël - see it happen
var paper = Raphael(10, 10, 500, 500);
var path = paper.path("M20 20L245 245");
var square = paper...
Raphaël - see it happen
var paper = Raphael(10, 10, 500, 500);
var path = paper.path("M20 20L245 245");
var square = paper...
Raphaël - text
• you can use raphael with cufon to
enhance your site look
Saturday, November 13, 2010
you can use raphael ...
Raphaël - demo svg to js :)
• so you use some graphic sw to make
an svg
Saturday, November 13, 2010
like gimp or illustrat...
Raphaël - demo svg to js :)
• so you use some graphic sw to make
an svg
• then you want to use it with Raphaël
Saturday, N...
Raphaël - demo svg to js :)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator:Adobe Illustrator 15.0.1, SVG Export Plu...
Raphaël - demo svg to js :)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator:Adobe Illustrator 15.0.1, SVG Export Plu...
Raphaël - demo svg to js :)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator:Adobe Illustrator 15.0.1, SVG Export Plu...
Raphaël - demo svg to js :)
var paper = Raphael(0, 0, 296, 87);
Saturday, November 13, 2010
get your stage done
Raphaël - demo svg to js :)
var paper = Raphael(0, 0, 296, 87);
var cheesePath = paper.path("M6.767,10.197c0,0,1.997,14.08...
Raphaël - demo svg to js :)
var paper = Raphael(0, 0, 296, 87);
var cheesePath = paper.path("M6.767,10.197c0,0,1.997,14.08...
Raphaël - demo svg to js :)
SVG file Raphaël
Saturday, November 13, 2010
raphaël version rendered in chrome
now make it eas...
where are the burgers?
Saturday, November 13, 2010
where are the burgers?
Saturday, November 13, 2010
here they are
where are the burgers?
Saturday, November 13, 2010
big deal... i can do that in my sleep
http://zedomax.com/blog/wp-conten...
let’s make a game!
Saturday, November 13, 2010
http://techau.tv/blog/images/GameOnExhibitionmythoughts_12815/GameOn.jpg
let’s make a game!
• using raphaël to manage graphics
Saturday, November 13, 2010
let’s make a game!
• using raphaël to manage graphics
• and LibSAPO.js to handle events and
stuff
Saturday, November 13, 20...
LibSAPO.js - wtf?
Saturday, November 13, 2010
LibSAPO.js - wtf?
• SAPO JavaScript Library
Saturday, November 13, 2010
LibSAPO.js - wtf?
• SAPO JavaScript Library
• previously Prototypejs based
Saturday, November 13, 2010
LibSAPO.js - wtf?
• SAPO JavaScript Library
• previously Prototypejs based
• now Prototypejs free :)
Saturday, November 13...
LibSAPO.js - wtf?
• SAPO JavaScript Library
• previously Prototypejs based
• now Prototypejs free :)
• module oriented
Sat...
LibSAPO.js - why?
Saturday, November 13, 2010
LibSAPO.js - why?
• oriented to SAPO needs
Saturday, November 13, 2010
LibSAPO.js - why?
• oriented to SAPO needs
• feature add on demand
Saturday, November 13, 2010
LibSAPO.js - why?
• oriented to SAPO needs
• feature add on demand
• bug solving simpler and quicker
Saturday, November 13...
LibSAPO.js - why?
• oriented to SAPO needs
• feature add on demand
• bug solving simpler and quicker
• modular and perform...
LibSAPO.js - how?
Saturday, November 13, 2010
LibSAPO.js - how?
• all in http://js.sapo.pt/
Saturday, November 13, 2010
LibSAPO.js - how?
• all in http://js.sapo.pt/
• include /SAPO/
Saturday, November 13, 2010
LibSAPO.js - how?
• all in http://js.sapo.pt/
• include /SAPO/
• and then the module you want
Saturday, November 13, 2010
LibSAPO.js - how?
• all in http://js.sapo.pt/
• include /SAPO/
• and then the module you want
• in our case
Saturday, Nove...
LibSAPO.js - how?
• all in http://js.sapo.pt/
• include /SAPO/
• and then the module you want
• in our case
• /SAPO/Dom/Ev...
LibSAPO.js - demo
<div id="clickMe">click Me</div>
<script type="text/javascript">
var clickMe = s$('clickMe');
SAPO.Dom.E...
the game!
Saturday, November 13, 2010
the game!
• so you have two slices of bread
Saturday, November 13, 2010
the game!
• so you have two slices of bread
• and 3 ingredients
Saturday, November 13, 2010
the game!
• so you have two slices of bread
• and 3 ingredients
• now we’re making it to other people
Saturday, November 1...
the game!
• so you have two slices of bread
• and 3 ingredients
• now we’re making it to other people
• so you need to put...
the game!
• so you have two slices of bread
• and 3 ingredients
• now we’re making it to other people
• so you need to put...
the game! - ingredients
• making the ingredients with raphaël
Saturday, November 13, 2010
the game! - ingredients
• making the ingredients with raphaël
• since they are js objects you can
reuse it
Saturday, Novem...
the game! - ingredients
• making the ingredients with raphaël
• since they are js objects you can
reuse it
• scale it
Satu...
the game! - ingredients
• making the ingredients with raphaël
• since they are js objects you can
reuse it
• scale it
• an...
the game!
• now lets put the elements in place
and make a cute start button
Saturday, November 13, 2010
the game!
• Scoreboard
Saturday, November 13, 2010
the game!
• Scoreboard
• with right and wrong feedback
Saturday, November 13, 2010
the game!
• let’s set the events for start
Saturday, November 13, 2010
the game!
• let’s set the events for start
• add the elements to our burger
Saturday, November 13, 2010
the game!
• let’s set the events for start
• add the elements to our burger
• let’s put a counter
Saturday, November 13, 2...
wanna play?
Saturday, November 13, 2010
http://common1.csnimages.com/lf/1/hash/2328/2773778/1/Jaxx-Jr-Kids-Foam-Bean-
Bag-...
wanna play?
• http://dicode.org/codebits2010/
makingBurgers.html
• http://6svz.sl.pt
Saturday, November 13, 2010
Questions?
Saturday, November 13, 2010
Do we still have time?
Saturday, November 13, 2010
http://home.btconnect.com/brettoliver1/images/Masterclock/binary_clock....
gRaphaël
Saturday, November 13, 2010
partial print screen of http://g.raphaeljs.com/
gRaphaël
• put the goodness into charts!
Saturday, November 13, 2010
gRaphaël
• put the goodness into charts!
• having raphael.js included
Saturday, November 13, 2010
gRaphaël
• put the goodness into charts!
• having raphael.js included
• Download and include g.raphael.js
and any (or all)...
gRaphaël
pie chart
var r = Raphael(10, 50, 640, 480);
r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2]);
Saturday, No...
gRaphaël
bar chart
var r = Raphael(10, 50, 640, 480);
r.g.barchart(10, 10, 320, 240, [[55, 20, 13, 32, 5, 1, 2]]);
Saturda...
gRaphaël
line chart
var r = Raphael(10, 50, 640, 480);
r.g.linechart(10, 10, 320, 240, [0, 1, 2, 3, 4, 5, 6],
[55, 20, 13,...
gRaphaël
dot chart
var r = Raphael(10, 50, 640, 480);
r.g.dotchart(10, 10, 320, 240, [0, 1, 2, 3, 4, 5, 6],
[55, 20, 13, 3...
that’s all folks!
Saturday, November 13, 2010
Diogo Antunes
JavaScript developer @ SAPO
twitter: @dicode
email: diogo.j.antunes@co.sapo.pt
im: diogoantunes@sapo.pt
http...
• Thanks to:
• Dmitry Baranovskiy - slides
inspiration and examples from the
website
• Hugo França - graphics for the
game...
Credits
Please check notes in each slide to
check slide notes which reference
each images i have used in this
presentation...
Upcoming SlideShare
Loading in...5
×

Making burgers with JavaScript

3,275

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,275
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Making burgers with JavaScript"

  1. 1. KILL ALL HUMANS! I. Robot Forensic Anthropologist Making Burgers with JavaScript November 11, 2010 Saturday, November 13, 2010
  2. 2. Who am I Saturday, November 13, 2010
  3. 3. Who am I • Diogo Antunes Saturday, November 13, 2010
  4. 4. Who am I • Diogo Antunes • JavaScript developer @ SAPO Saturday, November 13, 2010
  5. 5. Who am I • Diogo Antunes • JavaScript developer @ SAPO • @dicode Saturday, November 13, 2010
  6. 6. Who am I • Diogo Antunes • JavaScript developer @ SAPO • @dicode • http://js.sapo.pt Saturday, November 13, 2010
  7. 7. Should I stay or should I go? Saturday, November 13, 2010
  8. 8. Should I stay or should I go? • we are going to talk about JavaScript Saturday, November 13, 2010
  9. 9. Should I stay or should I go? • we are going to talk about JavaScript • so I will skip some steps Saturday, November 13, 2010
  10. 10. Should I stay or should I go? • we are going to talk about JavaScript • so I will skip some steps • but feel free to bug me if you need Saturday, November 13, 2010 don’t like JavaScript????
  11. 11. Should I stay or should I go? Saturday, November 13, 2010 GO AWAY!!! http://images.icanhascheezburger.com/completestore/ 2008/12/22/128744751250625583.jpg
  12. 12. What are we talking about? Saturday, November 13, 2010
  13. 13. What are we talking about? • JavaScript Saturday, November 13, 2010 thank you captain obvious http://www.eiaonline.com/uploaded_images/captobvious-738633-747223.jpg
  14. 14. What are we talking about? • JavaScript • Raphaël - JavaScript Library Saturday, November 13, 2010
  15. 15. What are we talking about? • JavaScript • Raphaël - JavaScript Library • LibSAPO.js - for event handling and stuff Saturday, November 13, 2010
  16. 16. What are we talking about? • JavaScript • Raphaël - JavaScript Library • LibSAPO.js - for event handling and stuff • and more... Saturday, November 13, 2010 if we have time... basically
  17. 17. Raphaël - wtf? Saturday, November 13, 2010 http://chericos.org/system/files/images/raphael_logo.jpg
  18. 18. Raphaël - wtf? • JavaScript library to simplify work with vector graphics Saturday, November 13, 2010
  19. 19. Raphaël - wtf? • JavaScript library to simplify work with vector graphics • uses SVG W3C recommendation and VML Saturday, November 13, 2010
  20. 20. Raphaël - wtf? • JavaScript library to simplify work with vector graphics • uses SVG W3C recommendation and VML • so every graphic element is a DOM Node Saturday, November 13, 2010
  21. 21. Raphaël - wtf? • JavaScript library to simplify work with vector graphics • uses SVG W3C recommendation and VML • so every graphic element is a DOM Node • so you can add events to it... YAY! Saturday, November 13, 2010
  22. 22. Raphaël - wtf? • JavaScript library to simplify work with vector graphics • uses SVG W3C recommendation and VML • so every graphic element is a DOM Node • so you can add events to it... YAY! • supports FF3+ SF3+ Ch5+ Op9.5+ IE6+ Saturday, November 13, 2010
  23. 23. Raphaël - why? Saturday, November 13, 2010
  24. 24. Raphaël - why? • lightweight - 20k Saturday, November 13, 2010
  25. 25. Raphaël - why? • lightweight - 20k • cross browser support Saturday, November 13, 2010
  26. 26. Raphaël - why? • lightweight - 20k • cross browser support • it’s easy to work with Saturday, November 13, 2010
  27. 27. Raphaël - why? • lightweight - 20k • cross browser support • it’s easy to work with • made by Dmitry Baranovskiy who totally ROCKS!!! Saturday, November 13, 2010
  28. 28. Raphaël - how? Saturday, November 13, 2010
  29. 29. Raphaël - how? • download it Saturday, November 13, 2010
  30. 30. Raphaël - how? • download it • include it in your html <script type="text/javascript" src="raphael.js"></script> Saturday, November 13, 2010
  31. 31. Raphaël - how? • download it • include it in your html <script type="text/javascript" src="raphael.js"></script> • and code it! Saturday, November 13, 2010 So in your script tag you can use Raphael but wait... what does this really do? and have
  32. 32. Raphaël - demos Saturday, November 13, 2010 You can check the website and see
  33. 33. Raphaël - demos Saturday, November 13, 2010 a tiger
  34. 34. Raphaël - demos Saturday, November 13, 2010 text rendering - helvetica example
  35. 35. Raphaël - demos Saturday, November 13, 2010 a maze game
  36. 36. Raphaël - demos Saturday, November 13, 2010 how to rotate images
  37. 37. Raphaël - demos Saturday, November 13, 2010 well, event the logo is vector based
  38. 38. Raphaël - the basics • creating your canvas Saturday, November 13, 2010
  39. 39. Raphaël - the basics • creating your canvas var canvas = Raphael("container", 400, 300); Saturday, November 13, 2010 creating a canvas on element with id container, giving it width 400 and height 300
  40. 40. Raphaël - the basics • creating your canvas var canvas = Raphael("container", 400, 300); var canvas = Raphael(container, 400, 300); Saturday, November 13, 2010 creating a canvas on element container (previously selected or created), giving it width 400 and height 300
  41. 41. Raphaël - the basics • creating your canvas var canvas = Raphael("container", 400, 300); var canvas = Raphael(container, 400, 300); var canvas = Raphael(10, 10, 400, 300); Saturday, November 13, 2010 creating a canvas on top 10 and left 10 of your page giving it width 400 and height 300
  42. 42. Raphaël - the primitives var paper = Raphael(10,10, 500, 500); paper.circle(100, 100, 50); Saturday, November 13, 2010 circle args (xcenter, ycenter, radius)
  43. 43. Raphaël - the primitives • var paper = Raphael(10,10, 500, 500); paper.rect(200, 200, 100, 50); Saturday, November 13, 2010 rect args (x, y, width, height)
  44. 44. Raphaël - the primitives var paper = Raphael(10,10, 500, 500); paper.rect(300, 300, 100, 50, 5); Saturday, November 13, 2010 rect with rounded corners args (x, y, width, height, radius)
  45. 45. Raphaël - the primitives var paper = Raphael(10,10, 500, 500); paper.ellipse(400, 400, 40, 20); Saturday, November 13, 2010 ellipse args (xcenter, ycenter, hradius, vradius)
  46. 46. Raphaël - see it happen var paper = Raphael(10, 10, 500, 500); var path = paper.path("M20 20L245 245"); Saturday, November 13, 2010 create a path - move to 20, 20 Line Till 145, 145
  47. 47. Raphaël - see it happen • var paper = Raphael(10, 10, 500, 500); var path = paper.path("M20 20L245 245"); var square = paper.rect(15, 15, 10, 10); Saturday, November 13, 2010 create a rectangule
  48. 48. Raphaël - see it happen var paper = Raphael(10, 10, 500, 500); var path = paper.path("M20 20L245 245"); var square = paper.rect(15, 15, 10, 10); square.animateAlong(path, 4000); Saturday, November 13, 2010 make the rectangule animate through the path
  49. 49. Raphaël - see it happen var paper = Raphael(10, 10, 500, 500); var path = paper.path("M20 20L245 245"); var square = paper.rect(15, 15, 10, 10); square.animateAlong(path, 4000, function(){ setInterval(function(){ square.rotate(1); }, 10); }); Saturday, November 13, 2010 and animate rotation in the end...
  50. 50. Raphaël - text • you can use raphael with cufon to enhance your site look Saturday, November 13, 2010 you can use raphael with cufon to enhance your site look - do not abuse!!!
  51. 51. Raphaël - demo svg to js :) • so you use some graphic sw to make an svg Saturday, November 13, 2010 like gimp or illustrator
  52. 52. Raphaël - demo svg to js :) • so you use some graphic sw to make an svg • then you want to use it with Raphaël Saturday, November 13, 2010
  53. 53. Raphaël - demo svg to js :) <?xml version="1.0" encoding="utf-8"?> <!-- Generator:Adobe Illustrator 15.0.1, SVG Export Plug-In . SVGVersion: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="296px" height="86.811px" viewBox="0 0 296 86.811" enable-background="new 0 0 296 86.811" xml:space="preserve"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="52.7769" y1="-4.7632" x2="271.7753" y2="83.2362"> <stop offset="0" style="stop-color:#FBB31B"/> <stop offset="1" style="stop-color:#FDD858"/> </linearGradient> <path fill="url(#SVGID_1_)" d="M6.767,10.197c0,0,1.997,14.082,20.844,19.404c3.484,1.108,20.097,5.415,25.104,9.688 c0.44,0.134,17.162,10.868,20.787,14.432s14.347,11.632,19.921,16.735s11.465,12.482,12.739,12.85s3.293,0.924,4.941,0 s4.771-4.134,6.861-6.232s10.98-7.547,13.433-8.96s10.315-5.903,13.327-7.751s17.265-11.646,21.045-15.457 c3.192-1.106,6.315-2.958,8.493-3.347s25.459-4.583,27.804-1.907c3.803-0.711,9.068-2.409,10.987-3.34s6.605-3.521,6.605-3.521 s7.754-3.467,10.855-3.186c3.104,0.282,6.045,1.998,14.852-1.344c8.809-3.342,14.371-9.2,19.752-7.401s17.279,10.287,15.77,21.276 c0.26,2.564-1.074,11.543,0.408,11.562c1.48,0.02,8.861-0.249,8.699-2.838s-3.24-16.284-6.578-20.747 c-3.336-4.463-9.035-13.457-17.533-15.738c-2.246-0.005-87.95-1.256-104.335-4.177S71.715,1.003,59.395,2.384 c-3.461,0.802-22.562-0.335-32.25,2.391S6.767,10.197,6.767,10.197z"/> </svg> Saturday, November 13, 2010 when you edit and svg file in a text editor you get
  54. 54. Raphaël - demo svg to js :) <?xml version="1.0" encoding="utf-8"?> <!-- Generator:Adobe Illustrator 15.0.1, SVG Export Plug-In . SVGVersion: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="296px" height="86.811px" viewBox="0 0 296 86.811" enable-background="new 0 0 296 86.811" xml:space="preserve"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="52.7769" y1="-4.7632" x2="271.7753" y2="83.2362"> <stop offset="0" style="stop-color:#FBB31B"/> <stop offset="1" style="stop-color:#FDD858"/> </linearGradient> <path fill="url(#SVGID_1_)" d="M6.767,10.197c0,0,1.997,14.082,20.844,19.404c3.484,1.108,20.097,5.415,25.104,9.688 c0.44,0.134,17.162,10.868,20.787,14.432s14.347,11.632,19.921,16.735s11.465,12.482,12.739,12.85s3.293,0.924,4.941,0 s4.771-4.134,6.861-6.232s10.98-7.547,13.433-8.96s10.315-5.903,13.327-7.751s17.265-11.646,21.045-15.457 c3.192-1.106,6.315-2.958,8.493-3.347s25.459-4.583,27.804-1.907c3.803-0.711,9.068-2.409,10.987-3.34s6.605-3.521,6.605-3.521 s7.754-3.467,10.855-3.186c3.104,0.282,6.045,1.998,14.852-1.344c8.809-3.342,14.371-9.2,19.752-7.401s17.279,10.287,15.77,21.276 c0.26,2.564-1.074,11.543,0.408,11.562c1.48,0.02,8.861-0.249,8.699-2.838s-3.24-16.284-6.578-20.747 c-3.336-4.463-9.035-13.457-17.533-15.738c-2.246-0.005-87.95-1.256-104.335-4.177S71.715,1.003,59.395,2.384 c-3.461,0.802-22.562-0.335-32.25,2.391S6.767,10.197,6.767,10.197z"/> </svg> Saturday, November 13, 2010 you have path info for raphaël use
  55. 55. Raphaël - demo svg to js :) <?xml version="1.0" encoding="utf-8"?> <!-- Generator:Adobe Illustrator 15.0.1, SVG Export Plug-In . SVGVersion: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="296px" height="86.811px" viewBox="0 0 296 86.811" enable-background="new 0 0 296 86.811" xml:space="preserve"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="52.7769" y1="-4.7632" x2="271.7753" y2="83.2362"> <stop offset="0" style="stop-color:#FBB31B"/> <stop offset="1" style="stop-color:#FDD858"/> </linearGradient> <path fill="url(#SVGID_1_)" d="M6.767,10.197c0,0,1.997,14.082,20.844,19.404c3.484,1.108,20.097,5.415,25.104,9.688 c0.44,0.134,17.162,10.868,20.787,14.432s14.347,11.632,19.921,16.735s11.465,12.482,12.739,12.85s3.293,0.924,4.941,0 s4.771-4.134,6.861-6.232s10.98-7.547,13.433-8.96s10.315-5.903,13.327-7.751s17.265-11.646,21.045-15.457 c3.192-1.106,6.315-2.958,8.493-3.347s25.459-4.583,27.804-1.907c3.803-0.711,9.068-2.409,10.987-3.34s6.605-3.521,6.605-3.521 s7.754-3.467,10.855-3.186c3.104,0.282,6.045,1.998,14.852-1.344c8.809-3.342,14.371-9.2,19.752-7.401s17.279,10.287,15.77,21.276 c0.26,2.564-1.074,11.543,0.408,11.562c1.48,0.02,8.861-0.249,8.699-2.838s-3.24-16.284-6.578-20.747 c-3.336-4.463-9.035-13.457-17.533-15.738c-2.246-0.005-87.95-1.256-104.335-4.177S71.715,1.003,59.395,2.384 c-3.461,0.802-22.562-0.335-32.25,2.391S6.767,10.197,6.767,10.197z"/> </svg> Saturday, November 13, 2010 and you have color info for linear gradient
  56. 56. Raphaël - demo svg to js :) var paper = Raphael(0, 0, 296, 87); Saturday, November 13, 2010 get your stage done
  57. 57. Raphaël - demo svg to js :) var paper = Raphael(0, 0, 296, 87); var cheesePath = paper.path("M6.767,10.197c0,0,1.997,14.082,20.844,19.404c3.484,1.108,20.097,5.415,25.104,9.688"+ "c0.44,0.134,17.162,10.868,20.787,14.432s14.347,11.632,19.921,16.735s11.465,12.482,12.739,12.85s3.293,0.924,4.941,0"+ "s4.771-4.134,6.861-6.232s10.98-7.547,13.433-8.96s10.315-5.903,13.327-7.751s17.265-11.646,21.045-15.457"+ "c3.192-1.106,6.315-2.958,8.493-3.347s25.459-4.583,27.804-1.907c3.803-0.711,9.068-2.409,10.987-3.34s6.605-3.521,6.605-3.521"+ "s7.754-3.467,10.855-3.186c3.104,0.282,6.045,1.998,14.852-1.344c8.809-3.342,14.371-9.2,19.752-7.401s17.279,10.287,15.77,21.276"+ "c0.26,2.564-1.074,11.543,0.408,11.562c1.48,0.02,8.861-0.249,8.699-2.838s-3.24-16.284-6.578-20.747"+ "c-3.336-4.463-9.035-13.457-17.533-15.738c-2.246-0.005-87.95-1.256-104.335-4.177S71.715,1.003,59.395,2.384"+ "c-3.461,0.802-22.562-0.335-32.25,2.391S6.767,10.197,6.767,10.197z"); Saturday, November 13, 2010 put your path in it
  58. 58. Raphaël - demo svg to js :) var paper = Raphael(0, 0, 296, 87); var cheesePath = paper.path("M6.767,10.197c0,0,1.997,14.082,20.844,19.404c3.484,1.108,20.097,5.415,25.104,9.688"+ "c0.44,0.134,17.162,10.868,20.787,14.432s14.347,11.632,19.921,16.735s11.465,12.482,12.739,12.85s3.293,0.924,4.941,0"+ "s4.771-4.134,6.861-6.232s10.98-7.547,13.433-8.96s10.315-5.903,13.327-7.751s17.265-11.646,21.045-15.457"+ "c3.192-1.106,6.315-2.958,8.493-3.347s25.459-4.583,27.804-1.907c3.803-0.711,9.068-2.409,10.987-3.34s6.605-3.521,6.605-3.521"+ "s7.754-3.467,10.855-3.186c3.104,0.282,6.045,1.998,14.852-1.344c8.809-3.342,14.371-9.2,19.752-7.401s17.279,10.287,15.77,21.276"+ "c0.26,2.564-1.074,11.543,0.408,11.562c1.48,0.02,8.861-0.249,8.699-2.838s-3.24-16.284-6.578-20.747"+ "c-3.336-4.463-9.035-13.457-17.533-15.738c-2.246-0.005-87.95-1.256-104.335-4.177S71.715,1.003,59.395,2.384"+ "c-3.461,0.802-22.562-0.335-32.25,2.391S6.767,10.197,6.767,10.197z"); cheesePath.attr({fill: '0-#FBB31B-#FDD858', stroke: 'none'}); Saturday, November 13, 2010 add the linear gradient ‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour› removed the stroke so doesn’t default to black
  59. 59. Raphaël - demo svg to js :) SVG file Raphaël Saturday, November 13, 2010 raphaël version rendered in chrome now make it easy you have a php script that does this
  60. 60. where are the burgers? Saturday, November 13, 2010
  61. 61. where are the burgers? Saturday, November 13, 2010 here they are
  62. 62. where are the burgers? Saturday, November 13, 2010 big deal... i can do that in my sleep http://zedomax.com/blog/wp-content/uploads/2009/02/burger-bed.jpg
  63. 63. let’s make a game! Saturday, November 13, 2010 http://techau.tv/blog/images/GameOnExhibitionmythoughts_12815/GameOn.jpg
  64. 64. let’s make a game! • using raphaël to manage graphics Saturday, November 13, 2010
  65. 65. let’s make a game! • using raphaël to manage graphics • and LibSAPO.js to handle events and stuff Saturday, November 13, 2010
  66. 66. LibSAPO.js - wtf? Saturday, November 13, 2010
  67. 67. LibSAPO.js - wtf? • SAPO JavaScript Library Saturday, November 13, 2010
  68. 68. LibSAPO.js - wtf? • SAPO JavaScript Library • previously Prototypejs based Saturday, November 13, 2010
  69. 69. LibSAPO.js - wtf? • SAPO JavaScript Library • previously Prototypejs based • now Prototypejs free :) Saturday, November 13, 2010
  70. 70. LibSAPO.js - wtf? • SAPO JavaScript Library • previously Prototypejs based • now Prototypejs free :) • module oriented Saturday, November 13, 2010
  71. 71. LibSAPO.js - why? Saturday, November 13, 2010
  72. 72. LibSAPO.js - why? • oriented to SAPO needs Saturday, November 13, 2010
  73. 73. LibSAPO.js - why? • oriented to SAPO needs • feature add on demand Saturday, November 13, 2010
  74. 74. LibSAPO.js - why? • oriented to SAPO needs • feature add on demand • bug solving simpler and quicker Saturday, November 13, 2010
  75. 75. LibSAPO.js - why? • oriented to SAPO needs • feature add on demand • bug solving simpler and quicker • modular and performance target Saturday, November 13, 2010 to fork other js framework would be harder to code reuse and recode addons
  76. 76. LibSAPO.js - how? Saturday, November 13, 2010
  77. 77. LibSAPO.js - how? • all in http://js.sapo.pt/ Saturday, November 13, 2010
  78. 78. LibSAPO.js - how? • all in http://js.sapo.pt/ • include /SAPO/ Saturday, November 13, 2010
  79. 79. LibSAPO.js - how? • all in http://js.sapo.pt/ • include /SAPO/ • and then the module you want Saturday, November 13, 2010
  80. 80. LibSAPO.js - how? • all in http://js.sapo.pt/ • include /SAPO/ • and then the module you want • in our case Saturday, November 13, 2010
  81. 81. LibSAPO.js - how? • all in http://js.sapo.pt/ • include /SAPO/ • and then the module you want • in our case • /SAPO/Dom/Event/0.1/ Saturday, November 13, 2010
  82. 82. LibSAPO.js - demo <div id="clickMe">click Me</div> <script type="text/javascript"> var clickMe = s$('clickMe'); SAPO.Dom.Event.observe(clickMe, 'click', function(){ alert(this.innerHTML + " - DONE & handled as you like! "); }.bindObjEvent(clickMe)); </script> Saturday, November 13, 2010 this is a simple LibSAPO.js demo for event handling
  83. 83. the game! Saturday, November 13, 2010
  84. 84. the game! • so you have two slices of bread Saturday, November 13, 2010
  85. 85. the game! • so you have two slices of bread • and 3 ingredients Saturday, November 13, 2010
  86. 86. the game! • so you have two slices of bread • and 3 ingredients • now we’re making it to other people Saturday, November 13, 2010
  87. 87. the game! • so you have two slices of bread • and 3 ingredients • now we’re making it to other people • so you need to put the ingredients Saturday, November 13, 2010
  88. 88. the game! • so you have two slices of bread • and 3 ingredients • now we’re making it to other people • so you need to put the ingredients • in the correct amount and order Saturday, November 13, 2010
  89. 89. the game! - ingredients • making the ingredients with raphaël Saturday, November 13, 2010
  90. 90. the game! - ingredients • making the ingredients with raphaël • since they are js objects you can reuse it Saturday, November 13, 2010
  91. 91. the game! - ingredients • making the ingredients with raphaël • since they are js objects you can reuse it • scale it Saturday, November 13, 2010
  92. 92. the game! - ingredients • making the ingredients with raphaël • since they are js objects you can reuse it • scale it • and use it as many times as you want Saturday, November 13, 2010
  93. 93. the game! • now lets put the elements in place and make a cute start button Saturday, November 13, 2010
  94. 94. the game! • Scoreboard Saturday, November 13, 2010
  95. 95. the game! • Scoreboard • with right and wrong feedback Saturday, November 13, 2010
  96. 96. the game! • let’s set the events for start Saturday, November 13, 2010
  97. 97. the game! • let’s set the events for start • add the elements to our burger Saturday, November 13, 2010
  98. 98. the game! • let’s set the events for start • add the elements to our burger • let’s put a counter Saturday, November 13, 2010
  99. 99. wanna play? Saturday, November 13, 2010 http://common1.csnimages.com/lf/1/hash/2328/2773778/1/Jaxx-Jr-Kids-Foam-Bean- Bag-Gamer-Chair.jpg
  100. 100. wanna play? • http://dicode.org/codebits2010/ makingBurgers.html • http://6svz.sl.pt Saturday, November 13, 2010
  101. 101. Questions? Saturday, November 13, 2010
  102. 102. Do we still have time? Saturday, November 13, 2010 http://home.btconnect.com/brettoliver1/images/Masterclock/binary_clock.jpg
  103. 103. gRaphaël Saturday, November 13, 2010 partial print screen of http://g.raphaeljs.com/
  104. 104. gRaphaël • put the goodness into charts! Saturday, November 13, 2010
  105. 105. gRaphaël • put the goodness into charts! • having raphael.js included Saturday, November 13, 2010
  106. 106. gRaphaël • put the goodness into charts! • having raphael.js included • Download and include g.raphael.js and any (or all) of g.line.js, g.bar.js, g.dot.js and g.pie.js into your HTML page Saturday, November 13, 2010
  107. 107. gRaphaël pie chart var r = Raphael(10, 50, 640, 480); r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2]); Saturday, November 13, 2010 xcenter, ycenter, radius, data
  108. 108. gRaphaël bar chart var r = Raphael(10, 50, 640, 480); r.g.barchart(10, 10, 320, 240, [[55, 20, 13, 32, 5, 1, 2]]); Saturday, November 13, 2010 x, y, w, h, data
  109. 109. gRaphaël line chart var r = Raphael(10, 50, 640, 480); r.g.linechart(10, 10, 320, 240, [0, 1, 2, 3, 4, 5, 6], [55, 20, 13, 32, 5, 1, 2]); Saturday, November 13, 2010 x, y, w, h, xdata, ydata
  110. 110. gRaphaël dot chart var r = Raphael(10, 50, 640, 480); r.g.dotchart(10, 10, 320, 240, [0, 1, 2, 3, 4, 5, 6], [55, 20, 13, 32, 5, 1, 2], [1, 1, 1, 1, 1, 1, 1], {max: 3}); Saturday, November 13, 2010 x, y, w, h, xdata, ydata, caption, opts (in this case dot weight)
  111. 111. that’s all folks! Saturday, November 13, 2010
  112. 112. Diogo Antunes JavaScript developer @ SAPO twitter: @dicode email: diogo.j.antunes@co.sapo.pt im: diogoantunes@sapo.pt http://js.sapo.pt http://libsapojs.blogs.sapo.pt http://dicode.org Saturday, November 13, 2010
  113. 113. • Thanks to: • Dmitry Baranovskiy - slides inspiration and examples from the website • Hugo França - graphics for the game Saturday, November 13, 2010
  114. 114. Credits Please check notes in each slide to check slide notes which reference each images i have used in this presentation Saturday, November 13, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×