Date post: | 17-May-2015 |
Category: |
Documents |
Upload: | jonathan-sharp |
View: | 1,343 times |
Download: | 7 times |
@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