Developing web applications in 2010

1,931 views
1,892 views

Published on

This is an introductory talk we delivered at Universidad Europea de Madrid for the International Week of Technological Innovation. We introduce concepts such as accessibility and performance in modern web development, current browser market state and evolution, and some approaches to introduce CSS3.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,931
On SlideShare
0
From Embeds
0
Number of Embeds
410
Actions
Shares
0
Downloads
64
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Developing web applications in 2010

  1. 1. Developing web applications in 2010 Ignacio Coloma - icoloma@extrema-sistemas.com http://extrema-sistemas.com
  2. 2. What? Enumerate changes and best practices in the last ten years of web development
  3. 3. Why? Because your application will be judged solely by its presentation layer.
  4. 4. PC specs, circa 1999
  5. 5. http://en.wikipedia.org/wiki/Moore's_law
  6. 6. Average PC 98/99 500 mHz PII / K6 64 MB RAM 10 GB HDD
  7. 7. 10 GB ? iPod nano: 8-16 GB iPod classic: 160 GB http://store.apple.com
  8. 8. 500 MHz + 64MB RAM? iPhone 3GS: 600 MHz + 256 MB RAM
  9. 9. HTML 4.0-4.1 Developed between Apr 98 – Dec 99
  10. 10. Select multi <select name="toppings" multiple="multiple" size="5"> <option value="mushrooms">mushrooms</option> <option value="greenpeppers">green peppers</option> <option value="onions">onions</option> <option value="tomatoes">tomatoes</option> <option value="olives">olives</option> </select>
  11. 11. Checkboxes <label><input type="checkbox" name="mushrooms"> mushrooms</label> <label><input type="checkbox" name="greenpeppers"> green peppers</label> <label><input type="checkbox" name="onions"> onions</label> <label><input type="checkbox" name="tomatoes"> tomatoes</label> <label><input type="checkbox" name="olives"> olives</label>
  12. 12. Two selects
  13. 13. Multiple Autocompleter
  14. 14. Javascript Javascript in the browser is a reality
  15. 15. BUT
  16. 16. SEO Google can index HTML, but it will not execute your javascript code
  17. 17. Browser history Users are familiar with the “back” button.
  18. 18. Security http://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q3-Q4-2009.pdf
  19. 19. Accessibility WAI-ARIA: Accessible Rich Internet Applications Suite http://www.w3.org/WAI/intro/aria
  20. 20. Size of the accessible market? 45 million blind people worldwide 314 million people with significant vision loss 87% in developing countries http://www.who.int/mediacentre/factsheets/fs282/en/
  21. 21. 5 Million blind people As much as the total population of Madrid
  22. 22. 40 million vision loss 31th country in the world (bigger than Argentina, Canada, Greece or Australia) http://en.wikipedia.org/wiki/List_of_countries_by_population
  23. 23. How many of you are planning to get old?
  24. 24. Spanish pop. > 65 compared to 15-64 http://www.oecd.org/dataoecd/17/18/35379092.pdf
  25. 25. Javascript libraries Prototype, JQuery, Mootools, YUI, Ext
  26. 26. Progressive enhancement Design HTML only Add javascript later
  27. 27. Old <input onchange=”foo()”>
  28. 28. New <input id=”price”> <script> $('price').on('change', foo); </script>
  29. 29. Browser Server Javascript transforms into this: Server produces this:
  30. 30. <html> <head> <link type=”text/css”> <script type=”text/javascript”> </head> Old <body> <div>My contents</div> </body> </html>
  31. 31. <html> <head> <link type=”text/css”> </head> New <body> <div>My contents</div> <script type=”text/javascript”> </body> </html>
  32. 32. Performance .1 to 1 sec: no feedback necessary 1 to 10 sec: add some feedback (spinners) > 10 sec: the user is no longer here http://www.useit.com/papers/responsetime.html
  33. 33. Impact on revenue Google: +500 ms → -20% traffic Yahoo: +400 ms → -5-9% full-page traffic Amazon: +100 ms → -1% sales Firefox: +2 seg → -15% downloads Evaluation performed on the front page. http://stevesouders.com/docs/wordcamp-20090530.ppt http://blog.mozilla.com/metrics/2010/04/05/firefox-page-load-speed-–-part-ii/
  34. 34. Still not convinced? Starting 2010, Google has added performance to the PageRank algorithm http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  35. 35. Improve performance By following 14 rules http://stevesouders.com/hpws/rules.php
  36. 36. Measure, don't guess What's faster, Facebook or LinkedIn?
  37. 37. Measure, don't guess http://webpagetest.org
  38. 38. Other tools Google PageSpeed YSlow! Firebug net tab
  39. 39. Best thing for performance Aim for simplicity
  40. 40. http://stuffthathappens.com/blog/2008/03/05/simplicity/
  41. 41. CSS We will talk about that, too Photo: http://www.flickr.com/photos/cassidy/46518700/
  42. 42. CSS 2.1 Sept 2009
  43. 43. CSS 3 Still a working draft -moz-* -webkit-* -o-*
  44. 44. New pseudo-classes :first-child (all but IE6) :last-child (all but IE) :nth-child(odd|even) (all but IE) ...maybe you see a pattern here... http://www.quirksmode.org/css/contents.html
  45. 45. New attribute selectors [att=value] (all but IE6)
  46. 46. Rounded borders .mystyle { border: 2px solid #888; -mox-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; }
  47. 47. box-shadow .mystyle { -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; }
  48. 48. Lots of new selectors border-image, CSS transitions, text-shadow, @font-face, CSS transforms... http://a.deveria.com/caniuse/#agents=All&eras=All&cats=CSS3&statuses=All Photo: http://www.flickr.com/photos/dailypic/2168453083/
  49. 49. Browser market share
  50. 50. Chrome http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  51. 51. Internet Explorer http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  52. 52. Firefox http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  53. 53. Safari http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  54. 54. Trends http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1#
  55. 55. Pay attention to your audience Stats for jquery.com (29/3/2009) http://royal.pingdom.com/2010/04/16/does-internet-explorer-have-more-than-a-billion-users/ http://ejohn.org/blog/determining-browser-market-share/
  56. 56. IE6 on the way out 37signals, youtube, google apps, apple
  57. 57. Hacks for IE
  58. 58. IE-specific stylesheets <!--[if IE 7]> <link type="text/css" href="/ie_hacks7.css" rel="stylesheet"> <![endif]--> <!--[if lte IE 6]> <link type="text/css" href="/ie_hacks6.css" rel="stylesheet"> <![endif]--> http://www.quirksmode.org/css/condcom.html
  59. 59. IE-specific selectors /* IE 6 and below */ * html #uno { color: red } #once { _color:blue } /* IE 7 and below */ *:first-child+html #dos { color: red } #doce { *color: blue } /* or #color:blue */ /* IE 7 and above */ html >body #tres { color: red } /* IE 8 and above */ html >/**/body #cuatro { color: red } http://ajaxian.com/archives/css-browser-hacks
  60. 60. IE7.js by Dean Edwards ie7.js, ie8.js, ie9.js http://code.google.com/p/ie7-js/
  61. 61. HTML5 <canvas> <svg> <video>, <audio> GeoLocation API Offline applications Client-side storage Web workers ...etc...
  62. 62. Flash Poor SEO Not open Not supported on iPad Open alternatives (HTML5, CSS3, SVG, Canvas)
  63. 63. Things are changing Youtube supports <video> Google Maps 3 uses Geolocation API Google Gears stalled waiting for HTML 5 http://www.flickr.com/photos/cooldesignz/1794226846/
  64. 64. Questions?
  65. 65. Thanks! Ignacio Coloma - icoloma@extrema-sistemas.com http://extrema-sistemas.com http://icoloma.blogspot.com

×