Your SlideShare is downloading. ×
Developing web applications in 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing web applications in 2010

1,797

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 …

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,797
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
64
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Developing web applications in 2010 Ignacio Coloma - icoloma@extrema-sistemas.com http://extrema-sistemas.com
  • 2. What? Enumerate changes and best practices in the last ten years of web development
  • 3. Why? Because your application will be judged solely by its presentation layer.
  • 4. PC specs, circa 1999
  • 5. http://en.wikipedia.org/wiki/Moore's_law
  • 6. Average PC 98/99 500 mHz PII / K6 64 MB RAM 10 GB HDD
  • 7. 10 GB ? iPod nano: 8-16 GB iPod classic: 160 GB http://store.apple.com
  • 8. 500 MHz + 64MB RAM? iPhone 3GS: 600 MHz + 256 MB RAM
  • 9. HTML 4.0-4.1 Developed between Apr 98 – Dec 99
  • 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. 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. Two selects
  • 13. Multiple Autocompleter
  • 14. Javascript Javascript in the browser is a reality
  • 15. BUT
  • 16. SEO Google can index HTML, but it will not execute your javascript code
  • 17. Browser history Users are familiar with the “back” button.
  • 18. Security http://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q3-Q4-2009.pdf
  • 19. Accessibility WAI-ARIA: Accessible Rich Internet Applications Suite http://www.w3.org/WAI/intro/aria
  • 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. 5 Million blind people As much as the total population of Madrid
  • 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. How many of you are planning to get old?
  • 24. Spanish pop. > 65 compared to 15-64 http://www.oecd.org/dataoecd/17/18/35379092.pdf
  • 25. Javascript libraries Prototype, JQuery, Mootools, YUI, Ext
  • 26. Progressive enhancement Design HTML only Add javascript later
  • 27. Old <input onchange=”foo()”>
  • 28. New <input id=”price”> <script> $('price').on('change', foo); </script>
  • 29. Browser Server Javascript transforms into this: Server produces this:
  • 30. <html> <head> <link type=”text/css”> <script type=”text/javascript”> </head> Old <body> <div>My contents</div> </body> </html>
  • 31. <html> <head> <link type=”text/css”> </head> New <body> <div>My contents</div> <script type=”text/javascript”> </body> </html>
  • 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. 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. 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. Improve performance By following 14 rules http://stevesouders.com/hpws/rules.php
  • 36. Measure, don't guess What's faster, Facebook or LinkedIn?
  • 37. Measure, don't guess http://webpagetest.org
  • 38. Other tools Google PageSpeed YSlow! Firebug net tab
  • 39. Best thing for performance Aim for simplicity
  • 40. http://stuffthathappens.com/blog/2008/03/05/simplicity/
  • 41. CSS We will talk about that, too Photo: http://www.flickr.com/photos/cassidy/46518700/
  • 42. CSS 2.1 Sept 2009
  • 43. CSS 3 Still a working draft -moz-* -webkit-* -o-*
  • 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. New attribute selectors [att=value] (all but IE6)
  • 46. Rounded borders .mystyle { border: 2px solid #888; -mox-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; }
  • 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. 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. Browser market share
  • 50. Chrome http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  • 51. Internet Explorer http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  • 52. Firefox http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  • 53. Safari http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers
  • 54. Trends http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1#
  • 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. IE6 on the way out 37signals, youtube, google apps, apple
  • 57. Hacks for IE
  • 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. 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. IE7.js by Dean Edwards ie7.js, ie8.js, ie9.js http://code.google.com/p/ie7-js/
  • 61. HTML5 <canvas> <svg> <video>, <audio> GeoLocation API Offline applications Client-side storage Web workers ...etc...
  • 62. Flash Poor SEO Not open Not supported on iPad Open alternatives (HTML5, CSS3, SVG, Canvas)
  • 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. Questions?
  • 65. Thanks! Ignacio Coloma - icoloma@extrema-sistemas.com http://extrema-sistemas.com http://icoloma.blogspot.com

×