Sinatra: the Classiest of Prototypes

1,659 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,659
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • Napoleon Bonaparte, Emperor of France about two hundred years ago\n\nLOOOOOVED metric\n\nMeters, GRAMS, Seconds is the metric system today\n
  • He wanted ten hour days, and hours divided into decihours, centihours, and millihours\n
  • 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”\n
  • They made watches with internet beats\n\nYou can see it here, below the actual time that normal people used back then and still use today\n
  • Swatch Internet Beats were universal; even in Miami, you were using the standard time in Switzerland\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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.\n
  • \n
  • Sinatra: the Classiest of Prototypes

    1. 1. Sinatra:The Classiest of Prototypes Design Miami, March 9, 2011
    2. 2. This is a Story
    3. 3. Hypothetical“Miami Internet Beats”
    4. 4. Miami Internet Beats
    5. 5. Miami Internet Beats• Based on Miami time (including DST)
    6. 6. Miami Internet Beats• Based on Miami time (including DST)• Also compatible with: • New York City • Washington DC • Boston
    7. 7. Miami Internet Beats• Based on Miami time (including DST)• Also compatible with: • New York City • Washington DC • Boston• Easy-to-use website
    8. 8. Making Websites
    9. 9. Making Websites• Static HTML + JavaScript
    10. 10. Making Websites• Static HTML + JavaScript• CGI-style
    11. 11. Making Websites• Static HTML + JavaScript• CGI-style• Framework
    12. 12. Framework
    13. 13. Framework (Rails)
    14. 14. http://sinatrarb.com/
    15. 15. require sinatraget /hi do  "Hello World!"end
    16. 16. Installing• Mac OS X: 1. gem install sinatra• Windows: 1. Install ruby from http://rubyinstaller.org 2. gem install sinatra
    17. 17. Getting Startedrequire sinatraget /hi do  "Hello World!"end1. Save as “hello.rb”2. ruby -rubygems hello.rb3. Visit http://localhost:4567/hi
    18. 18. Time Website
    19. 19. Time Website• Time Feeds
    20. 20. Time Website• Time Feeds• Big showy landing page • HTML • CSS • JavaScript
    21. 21. Time Feedrequire sinatrarequire tzinfomt = TZInfo::Timezone.get(America/New_York)get /time do  mt.now.strftime "%D %T"end
    22. 22. Beats Feedget /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_send
    23. 23. Time Website
    24. 24. Time Website• Time Feeds
    25. 25. Time Website• Time Feeds• Big showy landing page
    26. 26. Time Website• Time Feeds• Big showy landing page • HTML
    27. 27. Time Website• Time Feeds• Big showy landing page • HTML • CSS
    28. 28. Time Website• Time Feeds• Big showy landing page • HTML • CSS • JavaScript
    29. 29. Time Website
    30. 30. Time Website• Time Feeds
    31. 31. Time Website• Time Feeds• Big showy landing page
    32. 32. Time Website• Time Feeds• Big showy landing page • HTML
    33. 33. Time Website• Time Feeds• Big showy landing page • HTML • CSS
    34. 34. Time Website• Time Feeds• Big showy landing page • HTML • CSS • JavaScript
    35. 35. Quick HAML Review <!DOCTYPE html>!!! 5 <html>%html   <head>  %head     <title>MIAMI</title>    %title MIAMI   </head>   <body>  %body     <h1>INTERNET</h1>    %h1 INTERNET     <div class=description>    .description       <p>BEATS is the      :markdown       new time standard.</p>        BEATS is the     </div> new time standard.   </body> </html>
    36. 36. HAML in Sinatra get / do   haml :index endviews/index.haml!!! 5%html  %head    %title MIAMI INTERNET BEATS  %body    %h1 MIAMI INTERNET BEATS    .description      :markdown        MIAMI INTERNET BEATS is the new time standard.
    37. 37. ERB, Erubis, Builder
    38. 38. Helpers    #beats=current_beats.roundhelpers 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  endend
    39. 39. !!! 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…
    40. 40. !!! 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…
    41. 41. Time Website
    42. 42. Time Website• Time Feeds
    43. 43. Time Website• Time Feeds• Big showy landing page
    44. 44. Time Website• Time Feeds• Big showy landing page • HTML
    45. 45. Time Website• Time Feeds• Big showy landing page • HTML • CSS
    46. 46. Time Website• Time Feeds• Big showy landing page • HTML • CSS • JavaScript
    47. 47. SASS in Sinatraget /miamibeats.css do  sass :miamibeatsendviews/miamibeats.sassa:link, a:visited  :color #f0f  :text-decoration none
    48. 48. CSS in Sinatrapublic/miamibeats.sassbody a:link, body a:visited {  color: fuchsia;  text-decoration: none; }
    49. 49. Time Website
    50. 50. Time Website• Time Feeds
    51. 51. Time Website• Time Feeds• Big showy landing page
    52. 52. Time Website• Time Feeds• Big showy landing page • HTML
    53. 53. Time Website• Time Feeds• Big showy landing page • HTML • CSS
    54. 54. Time Website• Time Feeds• Big showy landing page • HTML • CSS • JavaScript
    55. 55. CoffeeScript in Sinatra
    56. 56. CoffeeScript in Sinatra
    57. 57. JavaScript in Sinatrapublic/miamibeats.js  document.observe(dom:loaded, function() {    var beats;    beats = new MiamiBeats();    return $(stopButton).on(click, function(ev, el) {      beats.halt = 1;      return el.hide();    });  });
    58. 58. Time Website
    59. 59. Time Website• Time Feeds
    60. 60. Time Website• Time Feeds• Big showy landing page
    61. 61. Time Website• Time Feeds• Big showy landing page • HTML
    62. 62. Time Website• Time Feeds• Big showy landing page • HTML • CSS
    63. 63. Time Website• Time Feeds• Big showy landing page • HTML • CSS • JavaScript
    64. 64. Graceful Degradation
    65. 65. http://miamibeats.org/
    66. 66. http://bit.ly/beats-src
    67. 67. http://bit.ly/hack-miami-march
    68. 68. http://twitter.com/bonzoesc

    ×