Sinatra: the Classiest of Prototypes
•Download as KEY, PDF•
0 likes•1,019 views
This document discusses using the Sinatra web framework to build a "Time Website" that provides time and beats feeds for Miami. It would include a landing page with HTML, CSS, and JavaScript, as well as feeds that use Sinatra and Ruby gems to dynamically generate the current time and beats. The document provides examples of setting up and using Sinatra, along with suggestions for implementing features like Sass, CoffeeScript, and graceful degradation.
Recommended
Recommended
More Related Content
What's hot
What's hot (17)
Viewers also liked
Similar to Sinatra: the Classiest of Prototypes
Similar to Sinatra: the Classiest of Prototypes (20)
Recently uploaded
Recently uploaded (20)
Sinatra: the Classiest of Prototypes
- 1. Sinatra: The Classiest of Prototypes Design Miami, March 9, 2011
- 2. This is a Story
- 11. Miami Internet Beats • Based on Miami time (including DST)
- 12. Miami Internet Beats • Based on Miami time (including DST) • Also compatible with: • New York City • Washington DC • Boston
- 13. Miami Internet Beats • Based on Miami time (including DST) • Also compatible with: • New York City • Washington DC • Boston • Easy-to-use website
- 14. Making Websites
- 15. Making Websites • Static HTML + JavaScript
- 16. Making Websites • Static HTML + JavaScript • CGI-style
- 17. Making Websites • Static HTML + JavaScript • CGI-style • Framework
- 18. Framework
- 21. require 'sinatra' get '/hi' do   "Hello World!" end
- 22. Installing • Mac OS X: 1. gem install sinatra • Windows: 1. Install ruby from http://rubyinstaller.org 2. gem install sinatra
- 23. Getting Started require 'sinatra' get '/hi' do   "Hello World!" end 1. Save as “hello.rb” 2. ruby -rubygems hello.rb 3. Visit http://localhost:4567/hi
- 25. Time Website
- 26. Time Website • Time Feeds
- 27. Time Website • Time Feeds • Big showy landing page • HTML • CSS • JavaScript
- 28. Time Feed require 'sinatra' require 'tzinfo' mt = TZInfo::Timezone.get('America/New_York') get '/time' do   mt.now.strftime "%D %T" end
- 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
- 32. Time Website
- 33. Time Website • Time Feeds
- 34. Time Website • Time Feeds • Big showy landing page
- 35. Time Website • Time Feeds • Big showy landing page • HTML
- 36. Time Website • Time Feeds • Big showy landing page • HTML • CSS
- 37. Time Website • Time Feeds • Big showy landing page • HTML • CSS • JavaScript
- 38. Time Website
- 39. Time Website • Time Feeds
- 40. Time Website • Time Feeds • Big showy landing page
- 41. Time Website • Time Feeds • Big showy landing page • HTML
- 42. Time Website • Time Feeds • Big showy landing page • HTML • CSS
- 43. Time Website • Time Feeds • Big showy landing page • HTML • CSS • JavaScript
- 44. 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>
- 45. HAML in Sinatra get '/' do   haml :index end views/index.haml !!! 5 %html   %head     %title MIAMI INTERNET BEATS   %body     %h1 MIAMI INTERNET BEATS     .description       :markdown         MIAMI INTERNET BEATS is the new time standard.
- 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
- 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…
- 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…
- 50. Time Website
- 51. Time Website • Time Feeds
- 52. Time Website • Time Feeds • Big showy landing page
- 53. Time Website • Time Feeds • Big showy landing page • HTML
- 54. Time Website • Time Feeds • Big showy landing page • HTML • CSS
- 55. Time Website • Time Feeds • Big showy landing page • HTML • CSS • JavaScript
- 56. SASS in Sinatra get '/miamibeats.css' do   sass :miamibeats end views/miamibeats.sass a:link, a:visited   :color #f0f   :text-decoration none
- 57. CSS in Sinatra public/miamibeats.sass body a:link, body a:visited { Â Â color: fuchsia; Â Â text-decoration: none; }
- 58. Time Website
- 59. Time Website • Time Feeds
- 60. Time Website • Time Feeds • Big showy landing page
- 61. Time Website • Time Feeds • Big showy landing page • HTML
- 62. Time Website • Time Feeds • Big showy landing page • HTML • CSS
- 63. Time Website • Time Feeds • Big showy landing page • HTML • CSS • JavaScript
- 66. JavaScript in Sinatra public/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();     });   });
- 67. Time Website
- 68. Time Website • Time Feeds
- 69. Time Website • Time Feeds • Big showy landing page
- 70. Time Website • Time Feeds • Big showy landing page • HTML
- 71. Time Website • Time Feeds • Big showy landing page • HTML • CSS
- 72. Time Website • Time Feeds • Big showy landing page • HTML • CSS • JavaScript
Editor's Notes
- \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 &#x201C;Swatch Internet Beat&#x201D;\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&#x2019;re interested in learning more about Ruby on Rails (Sinatra&#x2019;s big brother,) I&#x2019;ll be speaking at Hack Miami this Saturday out in Weston.\n
- \n