Sinatra: The Classiest of Prototypes

Design Miami, March 9, 2011

Transcript

1. Sinatra: The Classiest of Prototypes Design Miami, March 9, 2011 Saturday, March 12, 2011
2. This is a Story Saturday, March 12, 2011
3. Saturday, March 12, 2011 Napoleon Bonaparte, Emperor of France about two hundred years ago LOOOOOVED metric Meters, GRAMS, Seconds is the metric system today
4. Saturday, March 12, 2011 He wanted ten hour days, and hours divided into decihours, centihours, and millihours
5. Saturday, March 12, 2011 About a hundred eighty five years later, a Swiss company made their own decimal time system, where the Napoleonic millihour was called a “Swatch Internet Beat”
6. Saturday, March 12, 2011 They made watches with internet beats You can see it here, below the actual time that normal people used back then and still use today
7. Saturday, March 12, 2011 They made watches with internet beats You can see it here, below the actual time that normal people used back then and still use today
8. Saturday, March 12, 2011 Swatch Internet Beats were universal; even in Miami, you were using the standard time in Switzerland
9. Hypothetical “Miami Internet Beats” Saturday, March 12, 2011
10. Miami Internet Beats Saturday, March 12, 2011
11. Miami Internet Beats • Based on Miami time (including DST) Saturday, March 12, 2011
12. Miami Internet Beats • Based on Miami time (including DST) • Also compatible with: • New York City • Washington DC • Boston Saturday, March 12, 2011
13. Miami Internet Beats • Based on Miami time (including DST) • Also compatible with: • New York City • Washington DC • Boston • Easy-to-use website Saturday, March 12, 2011
14. Making Websites Saturday, March 12, 2011
15. Making Websites •Static HTML + JavaScript Saturday, March 12, 2011
16. Making Websites •Static HTML + JavaScript •CGI-style Saturday, March 12, 2011
17. Making Websites •Static HTML + JavaScript •CGI-style •Framework Saturday, March 12, 2011
18. Framework Saturday, March 12, 2011
19. Framework (Rails) Saturday, March 12, 2011
20. http://sinatrarb.com/ Saturday, March 12, 2011
21. require 'sinatra' get '/hi' do "Hello World!" end Saturday, March 12, 2011
22. Installing • Mac OS X: 1. gem install sinatra • Windows: 1. Install ruby from http://rubyinstaller.org 2. gem install sinatra Saturday, March 12, 2011
23. Getting Started 1. Save as “hello.rb” 2. ruby -rubygems hello.rb 3. Visit http://localhost:4567/hi require 'sinatra' get '/hi' do "Hello World!" end Saturday, March 12, 2011
24. Saturday, March 12, 2011
25. Time Website Saturday, March 12, 2011
26. Time Website •Time Feeds Saturday, March 12, 2011
27. Time Website •Time Feeds •Big showy landing page •HTML •CSS •JavaScript Saturday, March 12, 2011
28. Time Feed require 'sinatra' require 'tzinfo' mt = TZInfo::Timezone.get('America/New_York') get '/time' do mt.now.strftime "%D %T" end Saturday, March 12, 2011
29. Saturday, March 12, 2011
30. Beats Feed get '/beats' do now = mt.now midnight = now.beginning_of_day tomorrow = now.end_of_day seconds = now - midnight total_seconds = tomorrow - midnight beats = (seconds / total_seconds) * 1000 beats.to_s end Saturday, March 12, 2011
31. Saturday, March 12, 2011
32. Time Website Saturday, March 12, 2011
33. Time Website •Time Feeds Saturday, March 12, 2011
34. Time Website •Time Feeds •Big showy landing page Saturday, March 12, 2011
35. Time Website •Time Feeds •Big showy landing page •HTML Saturday, March 12, 2011
36. Time Website •Time Feeds •Big showy landing page •HTML •CSS Saturday, March 12, 2011
37. Time Website •Time Feeds •Big showy landing page •HTML •CSS •JavaScript Saturday, March 12, 2011
38. Time Website Saturday, March 12, 2011
39. Time Website •Time Feeds Saturday, March 12, 2011
40. Time Website •Time Feeds •Big showy landing page Saturday, March 12, 2011
41. Time Website •Time Feeds •Big showy landing page •HTML Saturday, March 12, 2011
42. Time Website •Time Feeds •Big showy landing page •HTML •CSS Saturday, March 12, 2011
43. Time Website •Time Feeds •Big showy landing page •HTML •CSS •JavaScript Saturday, March 12, 2011
44. Quick HAML Review !!! 5 %html %head %title MIAMI %body %h1 INTERNET .description :markdown BEATS is the new time standard. <!DOCTYPE html> <html> <head> <title>MIAMI</title> </head> <body> <h1>INTERNET</h1> <div class='description'> <p>BEATS is the new time standard.</p> </div> </body> </html> Saturday, March 12, 2011
45. HAML in Sinatra get '/' do haml :index end !!! 5 %html %head %title MIAMI INTERNET BEATS %body %h1 MIAMI INTERNET BEATS .description :markdown MIAMI INTERNET BEATS is the new time standard. views/index.haml Saturday, March 12, 2011
46. ERB, Erubis, Builder Saturday, March 12, 2011
47. Helpers #beats=current_beats.round helpers do def current_beats now = miami_time.now seconds = now - now.beginning_of_day total_seconds = now.end_of_day - now.beginning_of_day (seconds / total_seconds) * 1000 end end Saturday, March 12, 2011
48. !!! 5 %html %head %title MIAMI INTERNET BEATS %body .rotationPart %h1 MIAMI INTERNET BEATS .bars #beats=current_beats.round #beatBar.bar #fractionalBeats=(current_beats - current_beats.floor).round(2) #fractionBar.bar #date #dateBar.bar #stopButton stop .description :markdown MIAMI INTERNET BEATS is the new time standard… Saturday, March 12, 2011
49. !!! 5 %html %head %title MIAMI INTERNET BEATS %body .rotationPart %h1 MIAMI INTERNET BEATS .bars #beats=current_beats.round #beatBar.bar #fractionalBeats=(current_beats - current_beats.floor).round(2) #fractionBar.bar #date #dateBar.bar #stopButton stop .description :markdown MIAMI INTERNET BEATS is the new time standard… Saturday, March 12, 2011
50. Time Website Saturday, March 12, 2011
51. Time Website •Time Feeds Saturday, March 12, 2011
52. Time Website •Time Feeds •Big showy landing page Saturday, March 12, 2011
53. Time Website •Time Feeds •Big showy landing page •HTML Saturday, March 12, 2011
54. Time Website •Time Feeds •Big showy landing page •HTML •CSS Saturday, March 12, 2011
55. Time Website •Time Feeds •Big showy landing page •HTML •CSS •JavaScript Saturday, March 12, 2011
56. SASS in Sinatra a:link, a:visited :color #f0f :text-decoration none get '/miamibeats.css' do sass :miamibeats end views/miamibeats.sass Saturday, March 12, 2011
57. CSS in Sinatra body a:link, body a:visited { color: fuchsia; text-decoration: none; } public/miamibeats.sass Saturday, March 12, 2011
58. Time Website Saturday, March 12, 2011
59. Time Website •Time Feeds Saturday, March 12, 2011
60. Time Website •Time Feeds •Big showy landing page Saturday, March 12, 2011
61. Time Website •Time Feeds •Big showy landing page •HTML Saturday, March 12, 2011
62. Time Website •Time Feeds •Big showy landing page •HTML •CSS Saturday, March 12, 2011
63. Time Website •Time Feeds •Big showy landing page •HTML •CSS •JavaScript Saturday, March 12, 2011
64. CoffeeScript in Sinatra Saturday, March 12, 2011
65. CoffeeScript in Sinatra Saturday, March 12, 2011
66. JavaScript in Sinatra document.observe('dom:loaded', function() { var beats; beats = new MiamiBeats(); return $('stopButton').on('click', function(ev, el) { beats.halt = 1; return el.hide(); }); }); public/miamibeats.js Saturday, March 12, 2011
67. Time Website Saturday, March 12, 2011
68. Time Website •Time Feeds Saturday, March 12, 2011
69. Time Website •Time Feeds •Big showy landing page Saturday, March 12, 2011
70. Time Website •Time Feeds •Big showy landing page •HTML Saturday, March 12, 2011
71. Time Website •Time Feeds •Big showy landing page •HTML •CSS Saturday, March 12, 2011
72. Time Website •Time Feeds •Big showy landing page •HTML •CSS •JavaScript Saturday, March 12, 2011
73. Graceful Degradation Saturday, March 12, 2011
74. Saturday, March 12, 2011
75. http://miamibeats.org/ Saturday, March 12, 2011
76. Saturday, March 12, 2011
77. http://bit.ly/beats-src Saturday, March 12, 2011
78. Saturday, March 12, 2011 If you’re interested in learning more about Ruby on Rails (Sinatra’s big brother,) I’ll be speaking at Hack Miami this Saturday out in Weston.
79. http://bit.ly/hack-miami-march Saturday, March 12, 2011 If you’re interested in learning more about Ruby on Rails (Sinatra’s big brother,) I’ll be speaking at Hack Miami this Saturday out in Weston.
80. Saturday, March 12, 2011
81. http://twitter.com/bonzoesc Saturday, March 12, 2011