Html5 tx - preso
0 likes358 views
This document summarizes a presentation on HTML5 trends from Google IO 2012. It discusses buzzwords like HTML5, JavaScript libraries, responsive design and progressive enhancement. It also covers browser capabilities detection over browser versions, tools for testing, linting and building websites, and knowledge resources. Finally, it lists where to find slides, notes, write-ups and videos from sessions.
Html5 tx - preso
- 1. 3/7/13 HTML5-TX - Google IO 2012 HTML5-TX Highlights Santiago Esteva - TPN Premium Mariano Wahlman - TPN WCT localhost:9005/presentation-output.html#1 1/13
- 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/13 localhost:9005/presentation-output.html#1 2/13
- 3. 3/7/13 HTML5-TX - Google IO 2012 Concepts Re-Education Lets get controversial localhost:9005/presentation-output.html#1 3/13
- 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/13 localhost:9005/presentation-output.html#1 4/13
- 5. 3/7/13 HTML5-TX - Google IO 2012 Tools localhost:9005/presentation-output.html#1 5/13
- 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/13 localhost:9005/presentation-output.html#1 6/13
- 7. 3/7/13 HTML5-TX - Google IO 2012 Knowledge Sources localhost:9005/presentation-output.html#1 7/13
- 8. 3/7/13 HTML5-TX - Google IO 2012 Granny's 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/13 localhost:9005/presentation-output.html#1 8/13
- 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/13 localhost:9005/presentation-output.html#1 9/13
- 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/13 localhost:9005/presentation-output.html#1 10/13
- 11. 3/7/13 HTML5-TX - Google IO 2012 Tech Talks localhost:9005/presentation-output.html#1 11/13
- 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/13 localhost:9005/presentation-output.html#1 12/13
- 13. 3/7/13 HTML5-TX - Google IO 2012 <Thank You!> Important contact information goes here. Santiago Esteva - TPN Premium Mariano Wahlman - TPN WCT localhost:9005/presentation-output.html#1 13/13