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.

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>

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 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/

Chrome

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

Internet Explorer


Firefox


Safari


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

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/

Thanks!

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

Developing web applications in 2010

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Developing web applications in 2010

Ähnlich wie Developing web applications in 2010 (20)

Mehr von Ignacio Coloma

Mehr von Ignacio Coloma (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Developing web applications in 2010