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 ov...
About ThisYou’ll walk away in 45 minutes as experts in  HTML5, CSS3, Responsive Design, and  astonishing presentation / ed...
About This  You’ll walk away in 45 minutes as experts in    HTML5, CSS3, Responsive Design, and    astonishing presentatio...
What does this have to do with          WordPress?Understanding the cutting edge of client sidedevelopment is essential to...
Audience Poll How many of you think open / standard web    technologies will become the dominantplatform for all app devel...
My Unifying Theory of Web Change           More “Devices”                   +         Economic Realities                  ...
My Unifying Theory of Web Change           More “Devices”                  +          Economic Realities                  ...
My Unifying Theory of Web Change               More “Devices” I want to share information                       +using my ...
My Unifying Theory of Web Change             More “Devices”  I want my customers  +    to see our videos.            Econo...
My Unifying Theory of Web Change             More “Devices”   I want to make an+   interactive game.           Economic Re...
My Unifying Theory of Web Change              More “Devices”  I want to build a rich,                       +native feelin...
My Unifying Theory of Web Change             More “Devices”                   +           Economic Realities              ...
My Unifying Theory of Web Change                 More “Devices”                          +I want it to work in Netscape an...
My Unifying Theory of Web Change                More “Devices”                       +              Economic RealitiesI wa...
My Unifying Theory of Web Change                  More “Devices”                          +                Economic Realit...
My Unifying Theory of Web Change                More “Devices”                         +              Economic RealitiesI ...
My Unifying Theory of Web Change           More “Devices”                   +         Economic Realities                  ...
My Unifying Theory of Web Change                    More “Devices”                            +                  Economic ...
My Unifying Theory of Web Change                More “Devices”                         +               Economic Realities ...
My Unifying Theory of Web Change             More “Devices”                      +            Economic RealitiesWhat do yo...
My Unifying Theory of Web Change        This is not new.    Heck, it’s not even recent.                             Next G...
Implication      Over time, cross platform, lowfriction, open standards will continue to      supplant proprietary methods...
What does all of this have to do with this talk?What’s exciting about these technologies is that they’re reaching a point ...
Why is this “next generation” web?     (but seriously, many of these are draftspecifications, and not all devices support ...
Responsive DesignConcept: Adapting your layout to different contexts – mobile, desktop, tablet, etc.                      ...
Responsive DesignIn Practice: CSS3 media queries (+ meta    viewport tags + smart JavaScript)                             ...
Responsive Design  In Practice: CSS3 media queries (+ meta      viewport tags + smart JavaScript)<meta  name="viewport"  c...
Responsive Design   In Practice: CSS3 media queries (+ meta       viewport tags + smart JavaScript)if ( jQuery(body).width...
Responsive DesignCan we use this in “current generation” web?  It depends on the use case, but for most          practical...
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.             ...
TypographyIn Practice: Use a Foundry or Open Source Font Repository           (avoid licensing and conversion issues)     ...
TypographyCan we use this in “current generation” web?                   YES.                                   Next Gener...
TransitionsConcept: Changing from one state to another(color, size, positioning, etc.) should be a little more gentle on t...
TransitionsIn Practice: jQuery effects for cross platform, or             cooler, CSS3 transitions.                       ...
Transitions Can we use this in “current generation” web?Only for nonessential effects. Not compliant with any         ship...
Transforms   Concept: We should be able to take DOMobjects and perform basic transformations (e.g.            rotate, skew...
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...
Transitions + Transforms!                 + other CSS3 stuff         This is where it gets trippy.http://css3.bradshawente...
Better Embedded MediaConcept: We should be able to play videos and audio without needing a proprietary plug-in          bu...
Better Embedded Media            In practice: video and audio tags<video src="video.mp4" width="320" height="200“ controls...
Better Embedded MediaCan we use this in “current generation” web?   Only with script-based fallbacks that leveragepropriet...
Local File StorageConcept: Native apps let you store data locally.            Why can’t web apps?           (or, cookies a...
Local File Storage       In practice: HTML5 Web Storage    New “localStorage” and “sessionStorage”             objects in ...
Local File Storage Can we use this in “current generation” web? If you’re willing to forgo slightly older browsers (e.g.IE...
Drag & Drop Concept: Native apps have had intuitive drag &drop events for a long time. Why can’t web apps?                ...
Drag & Drop  In Practice: New event handlers for drag anddrop events (plus new File API, for external drag               a...
Drag & DropCan we use this in “current generation” web?It will only work in Firefox and Chrome right now.                 ...
GeolocationConcept: My web apps should be smart about           where I am right now.                                 Next...
GeolocationIn Practice: new Geolocation API (for use in                 JavaScript)                                   Next...
GeolocationCan we use this in “current generation” web? As long as there are fallbacks for IE8 and lower.                 ...
What about next, next          generation web?           Native app parity.                 Gaming.http://www.keithclark.c...
What about next, next   generation web?Primary Technical Hurdles:Performance, Bandwidth.                       Next Genera...
Audience Poll How many of you think open / standard web    technologies will become the dominantplatform for all app devel...
Next Generation WebWhat HTML5 and Responsive Design Are All About            by Jake Goldman              @jakemgold slide...
Upcoming SlideShare
Loading in …5
×

Next Generation Web

7,123 views

Published on

How HTML5, CSS3, and Responsive Design Are Reshaping the Web

Published in: Technology, Business
1 Comment
4 Likes
Statistics
Notes
  • I Got The Full File, I Just Wanna Share to You Guyszz.. It's Working You Can The Download The Full File + Instructions Here : http://gg.gg/setupexe
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,123
On SlideShare
0
From Embeds
0
Number of Embeds
2,370
Actions
Shares
0
Downloads
55
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Next Generation Web

  1. 1. Next Generation WebWhat HTML5 and Responsive Design Are All About Next Generation Web
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations =Exponential Growth of Non-Proprietary Platforms Next Generation Web
  8. 8. My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations = Exponential Growth of Platforms Next Generation Web
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations =Exponential Growth of Universal Platforms Next Generation Web
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. My Unifying Theory of Web Change More “Devices” + Economic Realities + High Consumer Expectations =Exponential Growth of Non-Proprietary Platforms Next Generation Web
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. My Unifying Theory of Web Change This is not new. Heck, it’s not even recent. Next Generation Web
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. Responsive DesignConcept: Adapting your layout to different contexts – mobile, desktop, tablet, etc. Next Generation Web
  27. 27. Responsive DesignIn Practice: CSS3 media queries (+ meta viewport tags + smart JavaScript) Next Generation Web
  28. 28. 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
  29. 29. Responsive Design In Practice: CSS3 media queries (+ meta viewport tags + smart JavaScript)if ( jQuery(body).width() <= 320 ) return; Next Generation Web
  30. 30. 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
  31. 31. TypographyConcept: We’re sick of Arial /Times New Roman / Georgia. Next Generation Web
  32. 32. Typography In Practice: CSS3 @font-face… with reliable methods (EOT format, SVG) for certain platforms. Next Generation Web
  33. 33. TypographyIn Practice: Use a Foundry or Open Source Font Repository (avoid licensing and conversion issues) Next Generation Web
  34. 34. TypographyCan we use this in “current generation” web? YES. Next Generation Web
  35. 35. 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
  36. 36. TransitionsIn Practice: jQuery effects for cross platform, or cooler, CSS3 transitions. Next Generation Web
  37. 37. 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
  38. 38. Transforms Concept: We should be able to take DOMobjects and perform basic transformations (e.g. rotate, skew) to them. Next Generation Web
  39. 39. TransformsIn Practice: CSS3 transforms! Next Generation Web
  40. 40. TransformsIn Practice: CSS3 transforms! Next Generation Web
  41. 41. TransformsAlso… 3D transforms! Next Generation Web
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Local File StorageConcept: Native apps let you store data locally. Why can’t web apps? (or, cookies aren’t good enough) Next Generation Web
  48. 48. 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
  49. 49. 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
  50. 50. Drag & Drop Concept: Native apps have had intuitive drag &drop events for a long time. Why can’t web apps? Next Generation Web
  51. 51. Drag & Drop In Practice: New event handlers for drag anddrop events (plus new File API, for external drag and drop handling). Next Generation Web
  52. 52. Drag & DropCan we use this in “current generation” web?It will only work in Firefox and Chrome right now. Next Generation Web
  53. 53. GeolocationConcept: My web apps should be smart about where I am right now. Next Generation Web
  54. 54. GeolocationIn Practice: new Geolocation API (for use in JavaScript) Next Generation Web
  55. 55. GeolocationCan we use this in “current generation” web? As long as there are fallbacks for IE8 and lower. Next Generation Web
  56. 56. What about next, next generation web? Native app parity. Gaming.http://www.keithclark.co.uk/labs/3dcss/demo/ Next Generation Web
  57. 57. What about next, next generation web?Primary Technical Hurdles:Performance, Bandwidth. Next Generation Web
  58. 58. 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
  59. 59. Next Generation WebWhat HTML5 and Responsive Design Are All About by Jake Goldman @jakemgold slides will be available at 10up.com Next Generation Web

×