Developing web applications in 2010




             Ignacio Coloma - icoloma@extrema-sistemas.com
                       ...
What?
 Enumerate changes and best practices
in the last ten years of web development
Why?
Because your application
  will be judged solely
 by its presentation layer.
PC specs, circa 1999
http://en.wikipedia.org/wiki/Moore's_law
Average PC 98/99
  500 mHz PII / K6
    64 MB RAM
    10 GB HDD
10 GB ?
                         iPod nano: 8-16 GB
                         iPod classic: 160 GB




http://store.apple.c...
500 MHz + 64MB RAM?
iPhone 3GS: 600 MHz + 256 MB RAM
HTML 4.0-4.1
Developed between Apr 98 – Dec 99
Select multi
<select name="toppings" multiple="multiple" size="5">
   <option value="mushrooms">mushrooms</option>
   <opt...
Checkboxes
<label><input type="checkbox" name="mushrooms"> mushrooms</label>
<label><input type="checkbox" name="greenpepp...
Two selects
Multiple Autocompleter
Javascript
Javascript in the browser is a reality
BUT
SEO
    Google can index HTML, but
it will not execute your javascript code
Browser history
Users are familiar with the “back” button.
Security




http://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q3-Q4-2009.pdf
Accessibility
  WAI-ARIA: Accessible Rich Internet Applications Suite




http://www.w3.org/WAI/intro/aria
Size of the accessible market?
               45 million blind people worldwide
          314 million people with signific...
5 Million blind people
As much as the total population of Madrid
40 million vision loss
                         31th country in the world
                     (bigger than Argentina, Can...
How many of you
are planning to get old?
Spanish pop. > 65 compared to 15-64




http://www.oecd.org/dataoecd/17/18/35379092.pdf
Javascript libraries
Prototype, JQuery, Mootools, YUI, Ext
Progressive enhancement
     Design HTML only
     Add javascript later
Old
<input onchange=”foo()”>
New
<input id=”price”>
<script>
  $('price').on('change', foo);
</script>
Browser             Server




Javascript transforms into this:            Server produces this:
<html>
           <head>
              <link type=”text/css”>
              <script type=”text/javascript”>
           </h...
<html>
           <head>
              <link type=”text/css”>
           </head>

New        <body>
              <div>My ...
Performance
                  .1 to 1 sec: no feedback necessary
             1 to 10 sec: add some feedback (spinners)
  ...
Impact on revenue
                  Google: +500 ms → -20% traffic
              Yahoo: +400 ms → -5-9% full-page traffic
...
Still not convinced?
          Starting 2010, Google has added performance
                    to the PageRank algorithm

...
Improve performance
                              By following 14 rules




http://stevesouders.com/hpws/rules.php
Measure, don't guess
What's faster, Facebook or LinkedIn?
Measure, don't guess




http://webpagetest.org
Other tools
Google PageSpeed
     YSlow!
 Firebug net tab
Best thing for performance
       Aim for simplicity
http://stuffthathappens.com/blog/2008/03/05/simplicity/
CSS
                         We will talk about that, too




Photo: http://www.flickr.com/photos/cassidy/46518700/
CSS 2.1
Sept 2009
CSS 3
Still a working draft
        -moz-*
      -webkit-*
         -o-*
New pseudo-classes
                      :first-child (all but IE6)
                      :last-child (all but IE)
       ...
New attribute selectors
   [att=value] (all but IE6)
Rounded borders
.mystyle {
  border: 2px solid #888;
  -mox-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-r...
box-shadow
.mystyle {
  -moz-box-shadow: 0 0 10px #000;
  -webkit-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
}
Lots of new selectors
           border-image, CSS transitions, text-shadow,
                  @font-face, CSS transforms....
Browser market share
Chrome




http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
Internet Explorer




http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
Firefox




http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
Safari




http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
Trends




http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1#
Pay attention to your audience

Stats for jquery.com
(29/3/2009)


http://royal.pingdom.com/2010/04/16/does-internet-explo...
IE6 on the way out
37signals, youtube, google apps, apple
Hacks for IE
IE-specific stylesheets
<!--[if IE 7]>
<link type="text/css" href="/ie_hacks7.css" rel="stylesheet">
<![endif]-->

<!--[if...
IE-specific selectors
/* IE 6 and below */
     * html #uno { color: red }
     #once { _color:blue }
/* IE 7 and below */...
IE7.js
                                   by Dean Edwards
                                   ie7.js, ie8.js, ie9.js




ht...
HTML5
     <canvas>
       <svg>
<video>, <audio>
 GeoLocation API
Offline applications
Client-side storage
   Web workers...
Flash
                   Poor SEO
                   Not open
            Not supported on iPad
Open alternatives (HTML5, ...
Things are changing
                   Youtube supports <video>
              Google Maps 3 uses Geolocation API
         ...
Questions?
Thanks!




Ignacio Coloma - icoloma@extrema-sistemas.com
                     http://extrema-sistemas.com
               ...
Upcoming SlideShare
Loading in …5
×

Developing web applications in 2010

2,091 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
  • Be the first to comment

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

×