Download - Next Generation Web
![Page 1: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/1.jpg)
Next Generation Web
Next Generation WebWhat HTML5 and Responsive Design Are All About
![Page 2: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/2.jpg)
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
![Page 3: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/3.jpg)
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.
![Page 4: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/4.jpg)
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.
![Page 5: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/5.jpg)
Next Generation Web
What does this have to do with WordPress?
Understanding the cutting edge of client side development is essential to building amazing WordPress sites (and any sites) in the not so
distant future.
![Page 6: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/6.jpg)
Next Generation Web
Audience Poll
How many of you think open / standard web technologies will become the dominant platform
for all app development in the future?(Is Google onto something with ChromeOS?)
![Page 7: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/7.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Non-Proprietary Platforms
![Page 8: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/8.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Platforms
![Page 9: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/9.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Platforms
I want to share information using my brand and graphics.
![Page 10: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/10.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Platforms
I want my customers to see our videos.
![Page 11: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/11.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Platforms
I want to make an interactive game.
![Page 12: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/12.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Platforms
I want to build a rich, native feeling application
![Page 13: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/13.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Universal Platforms
![Page 14: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/14.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Universal Platforms
I want it to work in Netscape and Internet Explorer.
![Page 15: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/15.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Universal Platforms
I want it to work on Mac and Windows.
![Page 16: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/16.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Universal Platforms
I want it to work on desktops and iPhones.
![Page 17: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/17.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Universal Platforms
I want it to work on their TV and tablet.
![Page 18: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/18.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Non-Proprietary Platforms
![Page 19: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/19.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Non-Proprietary Platforms
I don’t want to license Java for our new device.
![Page 20: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/20.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Non-Proprietary Platforms
When is Adobe going to update Flash for my _____?
![Page 21: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/21.jpg)
Next Generation Web
My Unifying Theory of Web Change
More “Devices”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Non-Proprietary Platforms
What do you mean we can’t release a new OS without ____?
![Page 22: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/22.jpg)
Next Generation Web
My Unifying Theory of Web Change
This is not new. Heck, it’s not even recent.
![Page 23: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/23.jpg)
Next Generation Web
Implication
Over time, cross platform, low friction, open standards will continue to supplant
proprietary methods.
Basically, we prefer things that are easy and safe.
![Page 24: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/24.jpg)
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 what
we’ve been leaning on proprietary solutions for will no longer be necessary.
![Page 25: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/25.jpg)
Next Generation Web
Why is this “next generation” web?
(but seriously, many of these are draft specifications, and not all devices support them;
plus we devs are still figuring this all out)
![Page 26: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/26.jpg)
Next Generation Web
Responsive DesignConcept: Adapting your layout to different
contexts – mobile, desktop, tablet, etc.
![Page 27: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/27.jpg)
Next Generation Web
Responsive DesignIn Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
![Page 28: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/28.jpg)
Next Generation Web
Responsive DesignIn Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
<meta name="viewport" content="width=device-width; initial-scale=1.0“>
![Page 29: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/29.jpg)
Next Generation Web
Responsive DesignIn Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
if ( jQuery('body').width() <= 320 ) return;
![Page 30: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/30.jpg)
Next Generation Web
Responsive Design
Can we use this in “current generation” web?
It depends on the use case, but for most practical use cases, yes.
![Page 31: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/31.jpg)
Next Generation Web
TypographyConcept: We’re sick of Arial / Times New Roman / Georgia.
![Page 32: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/32.jpg)
Next Generation Web
TypographyIn Practice: CSS3 @font-face
… with reliable methods (EOT format, SVG) for certain platforms.
![Page 33: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/33.jpg)
Next Generation Web
TypographyIn Practice: Use a Foundry or Open Source Font Repository
(avoid licensing and conversion issues)
![Page 34: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/34.jpg)
Next Generation Web
Typography
Can we use this in “current generation” web?
YES.
![Page 35: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/35.jpg)
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 TransitionNo Transition Transition
![Page 36: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/36.jpg)
Next Generation Web
TransitionsIn Practice: jQuery effects for cross platform, or
cooler, CSS3 transitions.
![Page 37: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/37.jpg)
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)
![Page 38: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/38.jpg)
Next Generation Web
TransformsConcept: We should be able to take DOM
objects and perform basic transformations (e.g. rotate, skew) to them.
![Page 39: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/39.jpg)
Next Generation Web
TransformsIn Practice: CSS3 transforms!
![Page 40: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/40.jpg)
Next Generation Web
TransformsIn Practice: CSS3 transforms!
![Page 41: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/41.jpg)
Next Generation Web
TransformsAlso… 3D transforms!
![Page 42: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/42.jpg)
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.
![Page 43: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/43.jpg)
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
/
![Page 44: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/44.jpg)
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.
![Page 45: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/45.jpg)
Next Generation Web
Better Embedded MediaIn practice: video and audio tags
<video src="video.mp4" width="320" height="200“ controls></video>
<audio src="audio.mp3“ controls></audio>
![Page 46: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/46.jpg)
Next Generation Web
Better Embedded Media
Can we use this in “current generation” web?
Only with script-based fallbacks that leverage proprietary methods in the case of missing support.
Oh, and codecs can be a pain to sort out.http://html5media.info/
![Page 47: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/47.jpg)
Next Generation Web
Local File StorageConcept: Native apps let you store data locally.
Why can’t web apps?(or, cookies aren’t good enough)
![Page 48: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/48.jpg)
Next Generation Web
Local File StorageIn practice: HTML5 Web Storage
New “localStorage” and “sessionStorage” objects in JavaScript.
localStorage.lastname="Smith";document.getElementById("result").innerHTML= "Last name: " + localStorage.lastname;
![Page 49: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/49.jpg)
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
![Page 50: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/50.jpg)
Next Generation Web
Drag & DropConcept: Native apps have had intuitive drag &
drop events for a long time. Why can’t web apps?
![Page 51: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/51.jpg)
Next Generation Web
Drag & DropIn Practice: New event handlers for drag and
drop events (plus new File API, for external drag and drop handling).
![Page 52: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/52.jpg)
Next Generation Web
Drag & Drop
Can we use this in “current generation” web?
It will only work in Firefox and Chrome right now.
![Page 53: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/53.jpg)
Next Generation Web
GeolocationConcept: My web apps should be smart about
where I am right now.
![Page 54: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/54.jpg)
Next Generation Web
GeolocationIn Practice: new Geolocation API (for use in
JavaScript)
![Page 55: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/55.jpg)
Next Generation Web
Geolocation
Can we use this in “current generation” web?
As long as there are fallbacks for IE8 and lower.
![Page 56: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/56.jpg)
Next Generation Web
What about next, next generation web?
Native app parity.
Gaming.http://www.keithclark.co.uk/labs/3dcss/demo/
![Page 57: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/57.jpg)
Next Generation Web
What about next, next generation web?
Primary Technical Hurdles:Performance, Bandwidth.
![Page 58: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/58.jpg)
Next Generation Web
Audience Poll
How many of you think open / standard web technologies will become the dominant platform
for all app development in the future?(Is Google onto something with ChromeOS?)
![Page 59: Next Generation Web](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c2dec34a7959ec238b4602/html5/thumbnails/59.jpg)
Next Generation Web
Next Generation WebWhat HTML5 and Responsive Design Are All About
by Jake Goldman
@jakemgold
slides will be available at 10up.com