Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 for the Ruby Developer



Silicon Valley Ruby on Rails Meetup:

Silicon Valley Ruby on Rails Meetup:
Speaker: Seth Ladd
Date: November 10, 2010



Total Views
Views on SlideShare
Embed Views



14 Embeds 359

http://blog.sethladd.com 271
http://www.linkedin.com 35
http://paper.li 21
https://www.linkedin.com 13
http://www.onlydoo.com 6
http://www.iweb34.com 3
https://twitter.com 2
http://edicolaeuropea.blogspot.com 2
http://web.archive.org 1
http://feeds.feedburner.com 1
http://localhost:3000 1
http://static.slidesharecdn.com 1
http://fasihinf.d106.basf-ag.de:8080 1
http://studysols.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

HTML5 for the Ruby Developer HTML5 for the Ruby Developer Presentation Transcript

  • HTML5 for the Ruby Developer Seth Ladd Google Chrome DevRel
  • Learn JavaScript
  • Any Questions?
  • No, really... Learn JavaScript
  • The Modern Web App 1.Rich front end 1.Business logic 2.JSON REST API 3.Business logic 4.Data store
  • Old 'n Busted Page oriented design Long page loads Online only Server only business logic Synchronous behavior Progressive enhancement
  • New Hotness Action oriented design Insanely fast Offline JavaScript heavy front-end Asynchronous Graceful degradation
  • Still Around Beautiful URLs REST JSON HTTP HTML5 Links Ruby and Rails!!!
  • Audience Participation!
  • http://news.cnet.com/8301-13579_3-20006889-37.html
  • Smart Browsers I found the future of the Internet, it's in my browser.
  • HTML5 one big happy family
  • Storage and Files http://slides.html5rocks.com/#slide9
  • Semantics http://slides.html5rocks.com/#slide17
  • Multimedia http://kurrik-slides.appspot.com/html5-techtalk/#slide18
  • CSS3 http://slides.html5rocks. com/#slide40 Demo!
  • Graphics and Effects http://slides.html5rocks.com/#slide27 Demo!
  • Connectivity and Networking http://slides.html5rocks. com/#slide11 Demo!
  • Device Access http://slides.html5rocks.com/#slide14 Demo!
  • caniuse.com you betcha!
  • html5reset.org don't start from scratch
  • html5boilerplate.com tested, so you don't have to
  • http://bit.ly/rails3html5 pre-configured Rails 3 project using HTML5 Boilerplate
  • HTML5 Boilerplate Cross browser (IE6!) Optimal caching and compression rules Mobile browser optimizations Hooked up to a test script Pre-set best practices Much, much more
  • What would you have me do? Spend my time hacking around issues in older technologies like Internet Explorer 6 or would you like that time spent making the site look the best that it can on better desktop browsers, as well as on the iPhone, iPod Touch, iPad, Blackberry and a whole host of other mobile devices? - Andy Clarke
  • Chrome Frame Plugin your escape hatch
  • Activating Chrome Frame <meta http-equiv="X-UA-Compatible" content=" chrome=1"> ^-- (don't wrap in conditional comments) or, HTTP Header: X-UA-Compatible: chrome=1
  • Target Smart Browsers gracefully degrade
  • Rails 3 The Future is Here
  • <!DOCTYPE html> You're doing it!
  • <meta charset="utf-8"> Not present in template, Rails 3 sets Content-Type header.
  • <%= video_tag "awesome.webm" %>
  • <%= audio_tag "awesome.mp3" %>
  • config.action_dispatch .best_standards_support = true Turns on Chrome Frame. It's the default!
  • HTML5 Input Fields <%= f.number_field %> <%= f.email_field %> <%= f.telephone_field, , :required => true %> etc Search for "Rails 3, HTML 5 and client-side forms validations using Validator"
  • http://bit.ly/rails3offline easy App Cache
  • Rails::Offline match "/application.manifest" => Rails::Offline CACHE MANIFEST javascripts/application.js javascripts/jquery.js images/masthead.png NETWORK: /
  • Build the Best Possible Experience with HTML5 and target Smart Browsers
  • Many Books
  • Resources http://www.html5rocks.com http://slides.html5rocks.com http://html5doctor.com http://caniuse.com http://html5reset.org http://html5boilerplate.com http://diveintohtml5.org http://code.google.com/chrome/chromeframe/
  • Gaze Into the Future