Next Generation Web

6,461 views
6,338 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
6,461
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
48
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

×