Developing web applications in 2010

Developing web applications in 2010 Ignacio Coloma - icoloma@extrema-sistemas.com http://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.com

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> <option value="greenpeppers">green peppers</option> <option value="onions">onions</option> <option value="tomatoes">tomatoes</option> <option value="olives">olives</option> </select>

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>

Two selects

Multiple Autocompleter

Javascript Javascript in the browser is a reality

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 significant vision loss 87% in developing countries http://www.who.int/mediacentre/factsheets/fs282/en/

5 Million blind people As much as the total population of Madrid

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

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”> </head> Old <body> <div>My contents</div> </body> </html>

<html> <head> <link type=”text/css”> </head> New <body> <div>My contents</div> <script type=”text/javascript”> </body> </html>

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

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/

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

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) :nth-child(odd|even) (all but IE) ...maybe you see a pattern here... http://www.quirksmode.org/css/contents.html

New attribute selectors [att=value] (all but IE6)

Rounded borders .mystyle { border: 2px solid #888; -mox-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; }

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... http://a.deveria.com/caniuse/#agents=All&eras=All&cats=CSS3&statuses=All Photo: http://www.flickr.com/photos/dailypic/2168453083/

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-explorer-have-more-than-a-billion-users/ http://ejohn.org/blog/determining-browser-market-share/

IE6 on the way out 37signals, youtube, google apps, apple

Hacks for IE

IE-specific stylesheets   http://www.quirksmode.org/css/condcom.html

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

IE7.js by Dean Edwards ie7.js, ie8.js, ie9.js http://code.google.com/p/ie7-js/

HTML5 <canvas> <svg> <video>, <audio> GeoLocation API Offline applications Client-side storage Web workers ...etc...

Flash Poor SEO Not open Not supported on iPad Open alternatives (HTML5, CSS3, SVG, Canvas)

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/

Questions?

Thanks! Ignacio Coloma - icoloma@extrema-sistemas.com http://extrema-sistemas.com http://icoloma.blogspot.com

http://icoloma.blogspot.com	199
http://sysdent.net23.net	32
http://www.slideshare.net	26
http://extrema-sistemas.com	10
http://icoloma.blogspot.com.es	6
http://icoloma.blogspot.co.uk	4
http://icoloma.blogspot.in	4
http://feeds.feedburner.com	4
http://antidiagonal.blogspot.com	3
http://static.slidesharecdn.com	3
http://www.extrema-sistemas.com	2
http://icoloma.blogspot.it	2
http://www.lmodules.com	1
http://icoloma.blogspot.de	1
http://extrema-sistemas.es	1
http://icoloma.blogspot.fr	1

Developing web applications in 2010

by Ignacio Coloma on Apr 21, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 299

Statistics

Developing web applications in 2010 — Presentation Transcript