next generation web
Post on 24-Jan-2015
5.716 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 This
You’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 side development is essential to building amazing WordPress 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 dominant platform
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”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Platforms
I want to share information using my brand and graphics.
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.
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.
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
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”+
Economic Realities+
High Consumer Expectations=
Exponential Growth of Universal Platforms
I want it to work in Netscape and Internet Explorer.
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.
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.
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.
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 Non-Proprietary Platforms
I don’t want to license Java for our new device.
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 _____?
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 ____?
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, low friction, 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 what
we’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 draft specifications, 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 DesignIn Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
<meta name="viewport" content="width=device-width; initial-scale=1.0“>
Next Generation Web
Responsive DesignIn Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
if ( jQuery('body').width() <= 320 ) return;
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.
Next Generation Web
TypographyConcept: We’re sick of Arial / Times New Roman / Georgia.
Next Generation Web
TypographyIn 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
Typography
Can 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 TransitionNo 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
TransformsConcept: We should be able to take DOM
objects and perform basic transformations (e.g. rotate, skew) to them.
Next Generation Web
TransformsIn Practice: CSS3 transforms!
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 MediaIn 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 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/
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 StorageIn 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 & DropConcept: Native apps have had intuitive drag &
drop events for a long time. Why can’t web apps?
Next Generation Web
Drag & DropIn Practice: New event handlers for drag and
drop events (plus new File API, for external drag and drop handling).
Next Generation Web
Drag & Drop
Can 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
Geolocation
Can 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 dominant platform
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
top related