Developing web applications in 2010
4 likes599 views
The document discusses the evolution of web development from 2010, focusing on changes in technology, best practices, and the importance of user experience and accessibility. It highlights performance metrics, the impact of page load times on user retention and revenue, and the transition from outdated technologies to modern standards like HTML5 and CSS3. A call to embrace simplicity, measure performance, and adapt to current trends in web applications is emphasized throughout.
![New attribute selectors
[att=value] (all but IE6)](https://image.slidesharecdn.com/ueminternational-100421162735-phpapp02/85/Developing-web-applications-in-2010-45-320.jpg)
![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](https://image.slidesharecdn.com/ueminternational-100421162735-phpapp02/85/Developing-web-applications-in-2010-58-320.jpg)
Developing web applications in 2010
- 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
- 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
- 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.
- 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
- 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?
- 38. Other tools Google PageSpeed YSlow! Firebug net tab
- 39. Best thing for performance Aim for simplicity
- 41. CSS We will talk about that, too Photo: http://www.flickr.com/photos/cassidy/46518700/
- 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/
- 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