HTML5 for the Ruby Developer

25,665 views
24,737 views

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
25,665
On SlideShare
0
From Embeds
0
Number of Embeds
397
Actions
Shares
0
Downloads
222
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

HTML5 for the Ruby Developer

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

×