Next Generation Web

Next Generation WebWhat HTML5 and Responsive Design Are All About Next Generation Web

About Me: Jake Goldman• President (& chief engineer!) @ 10up LLC, a WordPress development & strategy agency• Author of over a dozen WordPress plug-ins• Dozens of clients, from university like Bates College to WP.com VIP clients like TechCrunch• Writer/expert reviewer @ Smashing Magazine• @jakemgold Next Generation Web

About ThisYou’ll walk away in 45 minutes as experts in HTML5, CSS3, Responsive Design, and astonishing presentation / educational techniques required to do that. Next Generation Web

About This You’ll walk away in 45 minutes as experts in HTML5, CSS3, Responsive Design, and astonishing presentation / educational techniques required to do that.You’ll have strategic insight into what’s driving change in web and a glimpse at cutting edge techniques. Next Generation Web

What does this have to do with WordPress?Understanding the cutting edge of client sidedevelopment is essential to building amazingWordPress sites (and any sites) in the not so distant future. Next Generation Web

Audience Poll How many of you think open / standard web technologies will become the dominantplatform for all app development in the future? (Is Google onto something with ChromeOS?) Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations =Exponential Growth of Non-Proprietary Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations = Exponential Growth of Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” I want to share information +using my brand and graphics. Economic Realities + High Consumer Expectations = Exponential Growth of Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” I want my customers + to see our videos. Economic Realities + High Consumer Expectations = Exponential Growth of Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” I want to make an+ interactive game. Economic Realities + High Consumer Expectations = Exponential Growth of Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” I want to build a rich, +native feeling application Economic Realities + High Consumer Expectations = Exponential Growth of Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations =Exponential Growth of Universal Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” +I want it to work in Netscape and Internet Economic Realities Explorer. + High Consumer Expectations = Exponential Growth of Universal Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic RealitiesI want it to work on Mac and Windows. + High Consumer Expectations =Exponential Growth of Universal Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic RealitiesI want it to work on desktops and iPhones. + High Consumer Expectations = Exponential Growth of Universal Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic RealitiesI want it to work on their TV and tablet. + High Consumer Expectations =Exponential Growth of Universal Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations =Exponential Growth of Non-Proprietary Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic Realities +I don’t want to license Java for our new device. High Consumer Expectations = Exponential Growth of Non-Proprietary Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic Realities +When is Adobe going to update Flash for my _____? High Consumer Expectations = Exponential Growth of Non-Proprietary Platforms Next Generation Web

My Unifying Theory of Web Change More “Devices” + Economic RealitiesWhat do you mean we can’t release a new OS + without ____? High Consumer Expectations = Exponential Growth of Non-Proprietary Platforms Next Generation Web

My Unifying Theory of Web Change This is not new. Heck, it’s not even recent. Next Generation Web

Implication Over time, cross platform, lowfriction, open standards will continue to supplant proprietary methods.Basically, we prefer things that are easy and safe. Next Generation Web

What does all of this have to do with this talk?What’s exciting about these technologies is that they’re reaching a point where 90% of whatwe’ve been leaning on proprietary solutions for will no longer be necessary. Next Generation Web

Why is this “next generation” web? (but seriously, many of these are draftspecifications, and not all devices support them; plus we devs are still figuring this all out) Next Generation Web

Responsive DesignConcept: Adapting your layout to different contexts – mobile, desktop, tablet, etc. Next Generation Web

Responsive DesignIn Practice: CSS3 media queries (+ meta viewport tags + smart JavaScript) Next Generation Web

Responsive Design In Practice: CSS3 media queries (+ meta viewport tags + smart JavaScript)<meta name="viewport" content="width=device-width; initial-scale=1.0“> Next Generation Web

Responsive Design In Practice: CSS3 media queries (+ meta viewport tags + smart JavaScript)if ( jQuery(body).width() <= 320 ) return; Next Generation Web

Responsive DesignCan we use this in “current generation” web? It depends on the use case, but for most practical use cases, yes. Next Generation Web

TypographyConcept: We’re sick of Arial /Times New Roman / Georgia. Next Generation Web

Typography In Practice: CSS3 @font-face… with reliable methods (EOT format, SVG) for certain platforms. Next Generation Web

TypographyIn Practice: Use a Foundry or Open Source Font Repository (avoid licensing and conversion issues) Next Generation Web

TypographyCan we use this in “current generation” web? YES. Next Generation Web

TransitionsConcept: Changing from one state to another(color, size, positioning, etc.) should be a little more gentle on the eyes, a little less binary. No Transition Transition Next Generation Web

TransitionsIn Practice: jQuery effects for cross platform, or cooler, CSS3 transitions. Next Generation Web

Transitions Can we use this in “current generation” web?Only for nonessential effects. Not compliant with any shipped version of Internet Explorer.(can still “jump” between states; if it’s essential, there’s always the jQuery / script way) Next Generation Web

Transforms Concept: We should be able to take DOMobjects and perform basic transformations (e.g. rotate, skew) to them. Next Generation Web

TransformsIn Practice: CSS3 transforms! Next Generation Web

TransformsAlso… 3D transforms! Next Generation Web

Transforms Can we use this in “current generation” web?Only for nonessential, basic effects. Internet Explorer supports 2D in IE9 (no 3D). Firefox just added 3D. Implementation inconsistent for 3D. Next Generation Web

Transitions + Transforms! + other CSS3 stuff This is where it gets trippy.http://css3.bradshawenterprises.com/accordions/ http://www.shayhowe.com/wp-content/themes/letscounthedays/articles/css3-owl/http://designlovr.com/examples/dynamic_stack_of _index_cards/ Next Generation Web

Better Embedded MediaConcept: We should be able to play videos and audio without needing a proprietary plug-in built for our device / OS. Next Generation Web

Better Embedded Media In practice: video and audio tags<video src="video.mp4" width="320" height="200“ controls></video> <audio src="audio.mp3“ controls></audio> Next Generation Web

Better Embedded MediaCan we use this in “current generation” web? Only with script-based fallbacks that leverageproprietary methods in the case of missing support. Oh, and codecs can be a pain to sort out. http://html5media.info/ Next Generation Web

Local File StorageConcept: Native apps let you store data locally. Why can’t web apps? (or, cookies aren’t good enough) Next Generation Web

Local File Storage In practice: HTML5 Web Storage New “localStorage” and “sessionStorage” objects in JavaScript.localStorage.lastname="Smith";document.getElementById("result").innerHTML= "Last name: " + localStorage.lastname; Next Generation Web

Local File Storage Can we use this in “current generation” web? If you’re willing to forgo slightly older browsers (e.g.IE7), or build in workarounds should the browser lack support for the new objects. http://www.w3schools.com/html5/html5_webstorage.asp Next Generation Web

Drag & Drop Concept: Native apps have had intuitive drag &drop events for a long time. Why can’t web apps? Next Generation Web

Drag & Drop In Practice: New event handlers for drag anddrop events (plus new File API, for external drag and drop handling). Next Generation Web

Drag & DropCan we use this in “current generation” web?It will only work in Firefox and Chrome right now. Next Generation Web

GeolocationConcept: My web apps should be smart about where I am right now. Next Generation Web

GeolocationIn Practice: new Geolocation API (for use in JavaScript) Next Generation Web

GeolocationCan we use this in “current generation” web? As long as there are fallbacks for IE8 and lower. Next Generation Web

What about next, next generation web? Native app parity. Gaming.http://www.keithclark.co.uk/labs/3dcss/demo/ Next Generation Web

What about next, next generation web?Primary Technical Hurdles:Performance, Bandwidth. Next Generation Web

Audience Poll How many of you think open / standard web technologies will become the dominantplatform for all app development in the future? (Is Google onto something with ChromeOS?) Next Generation Web

Next Generation WebWhat HTML5 and Responsive Design Are All About by Jake Goldman @jakemgold slides will be available at 10up.com Next Generation Web

http://10up.com	1024
http://www.socialreflections.com	1022
http://10up.vip.dev	74
http://feeds.feedburner.com	59
http://storify.com	25
http://lanyrd.com	11
http://socialschmuck.com	8
http://translate.googleusercontent.com	3
http://10up.dev	2

Next Generation Web

by Jake Goldman

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 2,228

Statistics