Html5 tx - preso

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


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



Concepts Re-Education
Lets get controversial



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



Tools



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



Knowledge Sources



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



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



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- eﬀorts. (/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



Tech Talks



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



<Thank You!>
Important contact information goes here.

Santiago Esteva - TPN Premium
Mariano Wahlman - TPN WCT


Html5 tx - preso

More Related Content

What's hot

Viewers also liked

Similar to Html5 tx - preso

Recently uploaded

Html5 tx - preso