Html5 tx - preso

475 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
475
On SlideShare
0
From Embeds
0
Number of Embeds
138
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 tx - preso

  1. 1. 3/7/13 HTML5-TX - Google IO 2012 HTML5-TX Highlights Santiago Esteva - TPN Premium Mariano Wahlman - TPN WCTlocalhost:9005/presentation-output.html#1 1/13
  2. 2. 3/7/13 HTML5-TX - Google IO 2012 Buzzwords and Hot Topics · HTML5 · Javascript without Libraries · Javascript libraries - localstorage: lawnchair - data visualization: d3 - mv**: Backbone, Angular - js-driven feature detection: modernizr · Accessibility · Responsive Design · Progressive Enhancement vs Graceful degradation · Grunt · Browser Versions are dead! #html5tx 2/13localhost:9005/presentation-output.html#1 2/13
  3. 3. 3/7/13 HTML5-TX - Google IO 2012 Concepts Re-Education Lets get controversiallocalhost:9005/presentation-output.html#1 3/13
  4. 4. 3/7/13 HTML5-TX - Google IO 2012 Browser Versions are dead! Provide the best experience for each environment · Optimize based on capabilities rather than on linear scale - Embrace browsers differences - Enforce feature detection #html5tx 4/13localhost:9005/presentation-output.html#1 4/13
  5. 5. 3/7/13 HTML5-TX - Google IO 2012 Toolslocalhost:9005/presentation-output.html#1 5/13
  6. 6. 3/7/13 HTML5-TX - Google IO 2012 Tools · Testing IE - Modern IE · Creating Mockups - Foundations , Bootstrap · CSS Preprocessor - Compass · Live reload CSS, JS - Live Reload · Developer Chrome Version - Canary · CSS Lint - CSS Lint · JS Lint - JS Lint · Text Editor - Sublime Text 2 · Task-based build tool - Grunt · Browser Capabilities - Can I use · Should that be a div, span or...? - Which Element #html5tx 6/13localhost:9005/presentation-output.html#1 6/13
  7. 7. 3/7/13 HTML5-TX - Google IO 2012 Knowledge Sourceslocalhost:9005/presentation-output.html#1 7/13
  8. 8. 3/7/13 HTML5-TX - Google IO 2012 Grannys cookbook! · Mozilla Developer Network - link · Yahoo Developer Network - link · Performance - YSlow, Best Practices - High Performance Networking in Google Chrome · Ajax Accessible and Crawlable Applications - link #html5tx 8/13localhost:9005/presentation-output.html#1 8/13
  9. 9. 3/7/13 HTML5-TX - Google IO 2012 Assorted Thoughts · Push state to pretend to change url · RequireJS used for dependencies · As you grow you need to change backend to scale, but not the front end · Only update partials · Laptops and desktops for creating, phone and tablets for consuming · Responsive web is more than squishy · Foundation or Bootstrap for prototyping · CSS preprocessors, scss, sass, or less · SMACSS Scalable and Modular Architecture of CSS book · Embrace unpredictability. · Put comments inside function for debugging instead of on top code //comment · Feature Testing vs Browser Sniffing (user agent detection for example) #html5tx 9/13localhost:9005/presentation-output.html#1 9/13
  10. 10. 3/7/13 HTML5-TX - Google IO 2012 Community Project http://a11yproject.com/ A11Y Project (/) The Accessibility Project A community-driven effort to make web accessibility easier. Learn more (./about.html) Contribute on Github (http://github.com/a11yproject/a11yproject.com) Latest Posts How–to: Use Quick Tip: Never remove Quick Test: Check How-to: Future proof rl=apiain oe"plcto" CSS outlines Comprehension Level your accessibility (/posts/how-to-use- (/posts/never-remove- (/posts/check- efforts. (/posts/future- application-role) css-outlines) comprehension-level) proof-your-accessibility) NEVER use r l = p l c t o oeapiain Removing CSS outlines without Using these tools you can check Ways to make your accessibility on a widely containing element proper fallbacks can make it the reading level of your written effort as future proof as possible. such as < o y if your page bd> impossible to navigate your site content. #html5tx 10/13localhost:9005/presentation-output.html#1 10/13
  11. 11. 3/7/13 HTML5-TX - Google IO 2012 Tech Talkslocalhost:9005/presentation-output.html#1 11/13
  12. 12. 3/7/13 HTML5-TX - Google IO 2012 Sessions · Slides - link: http://lanyrd.com/2013/html5tx/slides/ · Notes - link: http://lanyrd.com/2013/html5tx/notes/ · Write-ups - link: http://lanyrd.com/2013/html5tx/writeups/ · Links - link: http://lanyrd.com/2013/html5tx/links/ · Photos - link: http://lanyrd.com/2013/html5tx/photos/ · Videos - link (http://lanyrd.com/2013/html5tx/video/) · All Coverage: http://lanyrd.com/2013/html5tx/coverage/ #html5tx 12/13localhost:9005/presentation-output.html#1 12/13
  13. 13. 3/7/13 HTML5-TX - Google IO 2012 <Thank You!> Important contact information goes here. Santiago Esteva - TPN Premium Mariano Wahlman - TPN WCTlocalhost:9005/presentation-output.html#1 13/13

×