• Like

Loading…

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
21,145
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
214
Comments
0
Likes
21

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. HTML5 one big happy family
  • 13. Storage and Files http://slides.html5rocks.com/#slide9
  • 14. Semantics http://slides.html5rocks.com/#slide17
  • 15. Multimedia http://kurrik-slides.appspot.com/html5-techtalk/#slide18
  • 16. CSS3 http://slides.html5rocks. com/#slide40 Demo!
  • 17. Graphics and Effects http://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