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