developing web applications in 2010
DESCRIPTION
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.TRANSCRIPT
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 / K664 MB RAM10 GB HDD
10 GB ?iPod nano: 8-16 GBiPod classic: 160 GB
http://store.apple.com
500 MHz + 64MB RAM?iPhone 3GS: 600 MHz + 256 MB RAM
HTML 4.0-4.1Developed 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
JavascriptJavascript in the browser is a reality
BUT
SEOGoogle can index HTML, but
it will not execute your javascript code
Browser historyUsers are familiar with the “back” button.
http://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q3-Q4-2009.pdf
Security
AccessibilityWAI-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 loss87% in developing countries
http://www.who.int/mediacentre/factsheets/fs282/en/
5 Million blind peopleAs much as the total population of Madrid
40 million vision loss31th 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 librariesPrototype, JQuery, Mootools, YUI, Ext
Progressive enhancementDesign HTML onlyAdd javascript later
Old<input onchange=”foo()”>
New<input id=”price”> <script>
$('price').on('change', foo); </script>
Browser Server
Server produces this:Javascript transforms into this:
Old
<head><link type=”text/css”><script type=”text/javascript”>
</head>
<html>
</html>
<body> <div>My contents</div></body>
New
<head><link type=”text/css”>
</head>
<html>
</html>
<body> <div>My contents</div>
<script type=”text/javascript”></body>
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 revenueGoogle: +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.ppthttp://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 performanceBy following 14 rules
http://stevesouders.com/hpws/rules.php
Measure, don't guessWhat's faster, Facebook or LinkedIn?
Measure, don't guess
http://webpagetest.org
Other toolsGoogle PageSpeed
YSlow! Firebug net tab
Best thing for performanceAim for simplicity
http://stuffthathappens.com/blog/2008/03/05/simplicity/
CSS
Photo: http://www.flickr.com/photos/cassidy/46518700/
We will talk about that, too
CSS 2.1Sept 2009
CSS 3Still 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 selectorsborder-image, CSS transitions, text-shadow,
@font-face, CSS transforms...
http://a.deveria.com/caniuse/#agents=All&eras=All&cats=CSS3&statuses=AllPhoto: 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
http://royal.pingdom.com/2010/04/16/does-internet-explorer-have-more-than-a-billion-users/http://ejohn.org/blog/determining-browser-market-share/
Stats for jquery.com (29/3/2009)
IE6 on the way out37signals, 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 lte IE 6]><link type="text/css" href="/ie_hacks6.css" rel="stylesheet"><![endif]-->
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.jsby Dean Edwardsie7.js, ie8.js, ie9.js
http://code.google.com/p/ie7-js/
HTML5<canvas>
<svg><video>, <audio>GeoLocation API
Offline applicationsClient-side storage
Web workers...etc...
FlashPoor SEONot open
Not supported on iPadOpen alternatives (HTML5, CSS3, SVG, Canvas)
Things are changingYoutube supports <video>
Google Maps 3 uses Geolocation APIGoogle Gears stalled waiting for HTML 5
http://www.flickr.com/photos/cooldesignz/1794226846/
Questions?
