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...
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.
HTML5one big happy family
Storage
and
Fileshttp://slides.html5rocks.com/#slide9
Semantics
http://slides.html5rocks.com/#slide17
Multimediahttp://kurrik-slides.appspot.com/html5-techtalk/#slide18
CSS3http://slides.html5rocks.
com/#slide40
Demo!
Graphics
and
Effectshttp://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 t...
What would you have me do?
Spend my time hacking around issues in older technologies
like Internet Explorer 6 or would you...
Chrome
Frame
Plugin
your escape hatch
Activating Chrome Frame
<meta http-equiv="X-UA-Compatible" content="
chrome=1">
^-- (don't wrap in conditional comments)
o...
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...
http://bit.ly/rails3offline
easy App Cache
Rails::Offline
match "/application.manifest" => Rails::Offline
CACHE MANIFEST
javascripts/application.js
javascripts/jquer...
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://html5res...
Gaze Into
the Future
Upcoming SlideShare
Loading in...5
×

HTML5 for the Ruby Developer

21,828

Published on

Silicon Valley Ruby on Rails Meetup:
www.meetup.com/rubymeetup
Speaker: Seth Ladd
Date: November 10, 2010

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

No Downloads
Views
Total Views
21,828
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
219
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 for the Ruby Developer"

  1. 1. HTML5 for the Ruby Developer Seth Ladd Google Chrome DevRel
  2. 2. Learn JavaScript
  3. 3. Any Questions?
  4. 4. No, really... Learn JavaScript
  5. 5. The Modern Web App 1.Rich front end 1.Business logic 2.JSON REST API 3.Business logic 4.Data store
  6. 6. Old 'n Busted Page oriented design Long page loads Online only Server only business logic Synchronous behavior Progressive enhancement
  7. 7. New Hotness Action oriented design Insanely fast Offline JavaScript heavy front-end Asynchronous Graceful degradation
  8. 8. Still Around Beautiful URLs REST JSON HTTP HTML5 Links Ruby and Rails!!!
  9. 9. Audience Participation!
  10. 10. http://news.cnet.com/8301-13579_3-20006889-37.html
  11. 11. Smart Browsers I found the future of the Internet, it's in my browser.
  12. 12. HTML5one big happy family
  13. 13. Storage and Fileshttp://slides.html5rocks.com/#slide9
  14. 14. Semantics http://slides.html5rocks.com/#slide17
  15. 15. Multimediahttp://kurrik-slides.appspot.com/html5-techtalk/#slide18
  16. 16. CSS3http://slides.html5rocks. com/#slide40 Demo!
  17. 17. Graphics and Effectshttp://slides.html5rocks.com/#slide27 Demo!
  18. 18. Connectivity and Networking http://slides.html5rocks. com/#slide11 Demo!
  19. 19. Device Access http://slides.html5rocks.com/#slide14 Demo!
  20. 20. caniuse.com you betcha!
  21. 21. html5reset.org don't start from scratch
  22. 22. html5boilerplate.com tested, so you don't have to
  23. 23. http://bit.ly/rails3html5 pre-configured Rails 3 project using HTML5 Boilerplate
  24. 24. 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
  25. 25. 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
  26. 26. Chrome Frame Plugin your escape hatch
  27. 27. 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
  28. 28. Target Smart Browsers gracefully degrade
  29. 29. Rails 3 The Future is Here
  30. 30. <!DOCTYPE html> You're doing it!
  31. 31. <meta charset="utf-8"> Not present in template, Rails 3 sets Content-Type header.
  32. 32. <%= video_tag "awesome.webm" %>
  33. 33. <%= audio_tag "awesome.mp3" %>
  34. 34. config.action_dispatch .best_standards_support = true Turns on Chrome Frame. It's the default!
  35. 35. 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"
  36. 36. http://bit.ly/rails3offline easy App Cache
  37. 37. Rails::Offline match "/application.manifest" => Rails::Offline CACHE MANIFEST javascripts/application.js javascripts/jquery.js images/masthead.png NETWORK: /
  38. 38. Build the Best Possible Experience with HTML5 and target Smart Browsers
  39. 39. Many Books
  40. 40. 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/
  41. 41. Gaze Into the Future
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×