Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 95 Anuncio

Flourish2011

Descargar para leer sin conexión

The browser has been called the "most hostile software development
environment imaginable." While at the same time, the ubiquity of the
browser is exactly what makes a web application so powerful. A good
web application is designed to run everywhere and for everyone. Today
that means supporting more browsers on more devices than any time in
history. This session will explore the challenges (and fun) of
building sites in a multi-platform and multi-device world while still enabling features of the Open Web like HTML5 and CSS3.

The browser has been called the "most hostile software development
environment imaginable." While at the same time, the ubiquity of the
browser is exactly what makes a web application so powerful. A good
web application is designed to run everywhere and for everyone. Today
that means supporting more browsers on more devices than any time in
history. This session will explore the challenges (and fun) of
building sites in a multi-platform and multi-device world while still enabling features of the Open Web like HTML5 and CSS3.

Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a Flourish2011 (20)

Anuncio

Más reciente (20)

Anuncio

Flourish2011

  1. 1. REAL WORLD WEB DEVELOPMENT Image: http://earthobservatory.nasa.gov/IOTD/view.php?id=896 Mark Meeker / Flourish! 2011 / Chicago, IL / April 2, 2011
  2. 2. Alternate Title: How to build web sites and applications that work for everyone and I do mean everyone - any browser, any OS (which really means anything non-Windows), small screens, no keyboard, with cookies blocked, disabled JavaScript, blind, colorblind, thinks Flash is evil, thinks Silverlight is even worse, uses an old browser, stuck on a really slow connection (or is an AT&T customer), or only uses their thumb. And do it in a way that you can start using all the new and cool stuff available with the Open Web Platform and HTML5.
  3. 3. “ The primary design principle underlying the Web’s usefulness and growth is universality. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality—from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware that can connect to the Internet: ” stationary or mobile, small screen or large. -Tim Berners-Lee
  4. 4. “ Browsers are the most hostile software engineering environment possible. ” - Douglas Crockford
  5. 5. Agenda ‣ Current state of the browser space ‣ What’s about to change ‣ A bit of history ‣ How to approach the future ‣ Impact on mobile ‣ Resources
  6. 6. Current State
  7. 7. http://gs.statcounter.com/#browser_version-ww-monthly-200807-201103
  8. 8. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Source: http://meyerweb.com/eric/browsers/timeline-structured.html
  9. 9. http://www.geek.com/articles/mobile/android-ecosystem-seen-through-the-lens-of-tweetdeck-20101019/
  10. 10. Speed? Size? Capabilities?
  11. 11. What’s About to Change
  12. 12. http://blog.mozilla.com/blog/2011/03/25/the-first-48-hours-of-mozilla-firefox-4/
  13. 13. http://www.nytimes.com/2011/03/27/business/27unboxed.html?src=busln
  14. 14. http://slides.html5rocks.com/#timeline-slide
  15. 15. http://html5rocks.com
  16. 16. http://html5r0cks.com
  17. 17. https://developer.mozilla.org/en/HTML/HTML5
  18. 18. http://www.opera.com/docs/specs/presto25/html5/
  19. 19. http://www.apple.com/html5/
  20. 20. http://ie.microsoft.com/testdrive/
  21. 21. HTML ‣ New Tags ‣ Web Forms 2.0 (new input field types) ‣ Multimedia (audio and video) ‣ 2D and 3D Drawings (Canvas and WebGL)
  22. 22. http://www.diveintohtml5.org/forms.html
  23. 23. CSS ‣ Selectors ‣ Typography ‣ Visuals (rounded corners, gradients) ‣ Transitions and animations
  24. 24. JavaScript ‣ New Selectors ‣ Client Side Storage ‣ Web Workers ‣ Drag and Drop API ‣ Geolocation
  25. 25. A Bit of History
  26. 26. “ In '93 to '94, every browser had its own flavor of HTML. So it was very difficult to know what you could put in a Web page and reliably have most of your ” readership see it. -Tim Berners-Lee
  27. 27. VS.
  28. 28. Source: A long defunct page on Geocities
  29. 29. Britannica.com Browser Support Page, Circa 2002
  30. 30. Hulu.com - 2011 April Fools
  31. 31. Mozilla/3.0 (Win95; I) Netscape 3.0 User Agent
  32. 32. Mozilla/3.0 (compatible; MSIE 3.0; Windows NT 5.0) IE 3.0 User Agent String
  33. 33. Approaches for the Future
  34. 34. Dangerous V Approaches for the Future
  35. 35. Mozilla/5.0 (Windows; U; MSIE 9.0; Windows NT 9.0; en-US) Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8pre) Gecko/20071015 Firefox/2.0.0.7 Navigator/9.0 Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2.3) Gecko/20100401 Firefox/4.0 (.NET CLR 3.5.30729) Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27 Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.17 (KHTML, like Gecko) Chrome/11.0.654.0 Safari/534.17 http://www.useragentstring.com
  36. 36. Version 10.0 Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00 Source: http://dev.opera.com/articles/view/opera-ua-string-changes/
  37. 37. http://turbotax.com in Chrome version 11.0
  38. 38. http://turbotax.com in Firefox version 4.0
  39. 39. http://www.apple.com/html5/
  40. 40. “ “This site works best in Safari 4” is ok where “This site works best in IE4” wasn’t?!? Open standards or double standards? ” - @csssquirrel
  41. 41. http://html5readiness.com/
  42. 42. http://html5readiness.com/
  43. 43. http://html5readiness.com/
  44. 44. I hope CSS3 will be a standard in the near future, right now you cant really use anything of it ’cause not every browser supports it. I think till every browser is somewhat close to being the same (render wise), we’ll be stuck working to get the lowest common css version working. I can’t wait to start using the new CSS3 standard, but I don’t think we can start just yet. Especially when IE isn’t supported in some of these. Considering that half the population still uses IE6, I won’t be implementing CSS3 anytime soon. photo: http://www.flickr.com/photos/goldfishsnaps/2830876853/ quotes: http://forabeautifulweb.com/blog/about/fearful
  45. 45. http://www.ie6countdown.com/
  46. 46. Better V Approaches for the Future
  47. 47. Do websites need to look exactly the same in every browser?
  48. 48. http://dowebsitesneedtolookexactlythesameineverybrowser.com
  49. 49. http://www.quirksmode.org
  50. 50. http://www.findmebyip.com/litmus
  51. 51. http://meyerweb.com/eric/tools/css/reset/
  52. 52. Progressive Enhancement ‣ Start with basic HTML ‣ Add CSS styles (but work ok without) ‣ Add JavaScript (but work ok without)
  53. 53. http://tv.yahoo.com
  54. 54. http://tv.yahoo.com
  55. 55. http://www.orbitz.com
  56. 56. http://gestureworks.com/
  57. 57. Graded Browser Support ‣ A-Grade: Known Knowns ‣ C-Grade: Known Unknowns ‣ X-Grade: Unknown Unknowns
  58. 58. http://developer.yahoo.com/yui/articles/gbs/
  59. 59. http://jquerymobile.com/gbs/
  60. 60. Feature Detection ‣ Check for a capability before using it ‣ Avoids browser detection
  61. 61. http://www.modernizr.com/
  62. 62. http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car/index
  63. 63. Mobile
  64. 64. “ Devices really should be treated as a spectrum (based on capabilities) rather than put into a mobile vs. desktop bin. ” - Joaquin Lippincott
  65. 65. “ We control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. ” - John Allsopp
  66. 66. http:///news.ycombinator.com
  67. 67. http:///news.ycombinator.com
  68. 68. http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  69. 69. Responsive Design ‣ Serve a single version for all devices / screens ‣ Modify layout, image sizes, functionality ‣ Uses “media queries” ‣ Similar concept to print stylesheets
  70. 70. 320 x 480 1024 x 768
  71. 71. http://elections.chicagotribune.com/ 1024px Wide
  72. 72. http://elections.chicagotribune.com/ 768px Wide
  73. 73. http://elections.chicagotribune.com/ 320px Wide
  74. 74. http://mediaqueri.es/
  75. 75. Resources
  76. 76. Tools ‣ Firebug plugin for Firefox ‣ Chrome Developer Tools ‣ Safari Web Inspector ‣ IE Developer Tools (F12) ‣ Opera Dragonfly
  77. 77. Tools ‣ Fiddler (Windows) ‣ Charles (Mac) ‣ HttpFox (firefox add-on)
  78. 78. Cross Browser Testing ‣ crossbrowsertesting.org ‣ IE Application Compatibility Images ‣ Virtual Machines ‣ Phone Emulators ‣ Keynote MITE
  79. 79. http://wurfl.sourceforge.net/
  80. 80. http://www.diveintohtml5.org/
  81. 81. Designing with Web Standards Jeffery Zeldman Designing with Progressive Enhancement New Riders Press HTML5 for Web Designers Jeremy Keith (abookapart.com) CSS3 for Web Designers Dan Cederholm (abookapart.com)
  82. 82. http://code.google.com/chrome/chromeframe/
  83. 83. Licensed under a Creative Commons attribution license

×