Embed Size (px)
DESCRIPTION
Silicon Valley Ruby on Rails Meetup: www.meetup.com/rubymeetup Speaker: Seth Ladd Date: November 10, 2010
Citation preview
HTML5 for the Ruby Developer
Seth LaddGoogle Chrome DevRel
Learn JavaScript
Any Questions?
No, really...Learn JavaScript
The Modern Web App
1.Rich front end1.Business logic
2.JSON REST API3.Business logic4.Data store
Old 'n Busted
Page oriented designLong page loadsOnline onlyServer only business logicSynchronous behaviorProgressive enhancement
New Hotness
Action oriented designInsanely fastOfflineJavaScript heavy front-endAsynchronousGraceful degradation
Still Around
Beautiful URLsRESTJSONHTTPHTML5LinksRuby 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.
HTML5one big happy family
Multimediahttp://kurrik-slides.appspot.com/html5-techtalk/#slide18
CSS3http://slides.html5rocks.com/#slide40
Demo!
Graphicsand
Effectshttp://slides.html5rocks.com/#slide27
Demo!
Connectivityand
Networkinghttp://slides.html5rocks.com/#slide11
Demo!
caniuse.com
you betcha!
html5reset.org
don't start from scratch
html5boilerplate.com
tested, so you don't have to
http://bit.ly/rails3html5pre-configured Rails 3 project
using HTML5 Boilerplate
HTML5 Boilerplate
Cross browser (IE6!)Optimal caching and compression rulesMobile browser optimizationsHooked up to a test scriptPre-set best practicesMuch, 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
ChromeFramePluginyour 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
TargetSmart
Browsersgracefully degrade
Rails 3The 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 MANIFESTjavascripts/application.jsjavascripts/jquery.jsimages/masthead.pngNETWORK:/
Build the Best Possible Experiencewith HTML5
and target Smart Browsers
Many Books
Resources
http://www.html5rocks.comhttp://slides.html5rocks.comhttp://html5doctor.comhttp://caniuse.comhttp://html5reset.orghttp://html5boilerplate.comhttp://diveintohtml5.orghttp://code.google.com/chrome/chromeframe/
Gaze Into the Future
