hdc 2010 keynote: html5, jquery and the open web
DESCRIPTION
What a wild decade it has been for web developers! The post dot com bubble has seen a widening gap between technology used in the mass market and the leading edge of innovation. The slowed adoption of advancing technology has posed a significant challenge for developers as well as an opportunity for creative innovation. Couple these challenges with new demands for engaging the user and you have an environment ripe for rapid change. With the increased dialog and engagement between browser vendors, developers and users; innovative solutions such as jQuery; and the push for unification around the Open Web, what will unfold over the coming years? Join in the discussion as we explore the impact that HTML 5, jQuery and the Open Web will have on businesses, society and the changing market.TRANSCRIPT
@jdsharp
HTML5, jQuery & The Open Web
Heartland Developers Conference 2010Omaha, Nebraska
Monday, September 13, 2010
Started developing for the web in 1996
AOL was a popular browser of choice2400bps modem
Monday, September 13, 2010
T H E j O U E R Y C O M P A N Y
9 employees, 3 contractors, 8 states5 jQuery Team Members
Co-founded appendTo in October 2009
Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer!
Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer! (j/k LOL!)
Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer! (j/k LOL!)
Internet Explorer 7Internet Explorer 8(Internet Explorer 9)
Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer! (j/k LOL!)
Internet Explorer 7Internet Explorer 8(Internet Explorer 9)
Net
scap
e N
avig
ator
Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer! (j/k LOL!)
Internet Explorer 7Internet Explorer 8(Internet Explorer 9)
Net
scap
e N
avig
ator
AOL Browser
Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer! (j/k LOL!)
Internet Explorer 7Internet Explorer 8(Internet Explorer 9)
Net
scap
e N
avig
ator
Firefox 1, 2, 3, (4)
AOL Browser
Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer! (j/k LOL!)
Internet Explorer 7Internet Explorer 8(Internet Explorer 9)
Net
scap
e N
avig
ator
Firefox 1, 2, 3, (4)
AOL Browser
Opera 2, 3, 4, 5, 6, 7, 8, 9, 10Monday, September 13, 2010
Internet Explorer 4Internet Explorer 5Internet Explorer 6
no more Internet Explorer! (j/k LOL!)
Internet Explorer 7Internet Explorer 8(Internet Explorer 9)
Net
scap
e N
avig
ator
Firefox 1, 2, 3, (4)
AOL Browser
Opera 2, 3, 4, 5, 6, 7, 8, 9, 10
Mobile?
Monday, September 13, 2010
5 Doctypes3 CSS Versions
Flash, Silverlight, ActiveX, JavaAppletsASP (Classic), ASP.net, Java, PHP, Ruby, Python,
FilemakerSQL Server, Oracle, MySQL, Postgres, CouchDB,
MongoDB, AccessHTTP, FTP, SMTP, SSL, gopher://
Ajax, Comet, SOAP, and the REST.flv, .wmv, .mp3, .ogg, .mov
Monday, September 13, 2010
5 Doctypes3 CSS Versions
Flash, Silverlight, ActiveX, JavaAppletsASP (Classic), ASP.net, Java, PHP, Ruby, Python,
FilemakerSQL Server, Oracle, MySQL, Postgres, CouchDB,
MongoDB, AccessHTTP, FTP, SMTP, SSL, gopher://
Ajax, Comet, SOAP, and the REST.flv, .wmv, .mp3, .ogg, .mov
and this too => ColdFusion
Monday, September 13, 2010
Face two challenges
integration(technical/does it work)
adoption(skills/experience)
Monday, September 13, 2010
jQuery changed that, opened the door for skills acquisition and lowered the barrier to entry...
Monday, September 13, 2010
It showed what was possible and brought new
life to an established technology
Monday, September 13, 2010
var sessions = document.getElementsByClassName(‘sessions’);for ( var i = 1; i < sessions.length; ) { sessions[i].className += ‘ awesome’; i += 2;}
Monday, September 13, 2010
So what does jQuery do?- Selecting Elements from the DOM- Creating new elements- Modifying attributes & styles- Attaching & responding to events- Ajax requests to the server
Monday, September 13, 2010
$(‘your css selector’)
$(‘#byId’)$(‘.byClass’)$(‘body’)$(‘ul > li’)// supports CSS 1-3 selectors today
// Selecting elements
Monday, September 13, 2010
$(‘<string of html>’)
$(‘<h1>My title</h1>’).appendTo(‘body’);
// Creating elements
Monday, September 13, 2010
$(‘a’).attr(‘href’, ‘http://appendto.com’);
$(‘a’).css(‘color’, ‘red’);$(‘a’).addClass(‘hello’);$(‘a’).removeClass(‘hello’);
// Modifying attributes
Monday, September 13, 2010
$.get(‘/restful/api/echo’, { say: “howdy!” }, function(data) { alert(‘the server said: ‘ + data.said); }, ‘json’);
// Ajax
Monday, September 13, 2010
// He’s using jQuery$('#elements td').click(function(){ var self = $(this).hasClass('active'); $('.active .info').fadeOut(); $('.active').removeClass('active'); if (!self) { $(this).find('.info').fadeIn(); $(this).addClass('active'); } });$('#elements a').click(function(event){ window.open(event.target.href, 'table'); return false;});
Monday, September 13, 2010
Integration between layers using open standards
(HTML5, CSS3, JavaScript, etc.)
Integration of shared data(REST services)
Monday, September 13, 2010
We have better tools and tested patterns
that are best expressed with HTML5, jQuery and the
Open Web
Monday, September 13, 2010
Demo timehttp://www.thewildernessdowntown.com/
http://www.dextrose.com/en/projects/aves-engine
http://events.jquery.org
Monday, September 13, 2010
Where should you be headed?
HTML5 (already being implemented)jQuery supports HTML5 today
CSS3 is on the radar & implementationsCanvas / SVG good support
Local & offline storage@font-face downloaded / embedded fonts
WebSockets streaming datajQuery Mobile Q4 2010
Monday, September 13, 2010
Quantum leap?
Browser vendors are “unified”Client side performanceImproved toolsMobile explosionTechnology refresh cycle
Monday, September 13, 2010