HDC 2010 Keynote: HTML5, jQuery and the Open Web
0 likes629 views
This document is the presentation slides for a talk titled "HTML5, jQuery & The Open Web" given by @jdsharp at the Heartland Developers Conference in Omaha, Nebraska in 2010. The slides discuss how HTML5, jQuery, and open web standards address challenges web developers face related to browser integration and skills/experience adoption. Features of HTML5 like a single doctype and semantic elements make content easier to express, while jQuery simplifies cross-browser development and lowers barriers to JavaScript skills acquisition.
![var sessions = document.getElementsByClassName(‘sessions’);
for ( var i = 1; i < sessions.length; ) {
sessions[i].className += ‘ awesome’;
i += 2;
}
Monday, September 13, 2010](https://image.slidesharecdn.com/hdc-2010-html5-jquery-keynote-100913164648-phpapp02/85/HDC-2010-Keynote-HTML5-jQuery-and-the-Open-Web-45-320.jpg)
HDC 2010 Keynote: HTML5, jQuery and the Open Web
- 1. HTML5, jQuery & The Open Web Heartland Developers Conference 2010 Omaha, Nebraska @jdsharp Monday, September 13, 2010
- 2. Who am I? Monday, September 13, 2010
- 3. Started developing for the web in 1996 AOL was a popular browser of choice 2400bps modem Monday, September 13, 2010
- 4. Co-author of the jQuery Cookbook Monday, September 13, 2010
- 5. jQuery Team Member Monday, September 13, 2010
- 6. Monday, September 13, 2010
- 7. THE jOUERY COMPANY Co-founded appendTo in October 2009 9 employees, 3 contractors, 8 states 5 jQuery Team Members Monday, September 13, 2010
- 8. Cowboy after 5PM M-F & weekends Monday, September 13, 2010
- 9. Ready for a challenge? Monday, September 13, 2010
- 10. we grab hold & hang on... Flickr @evilerin Monday, September 13, 2010
- 11. Flickr @ prasoonpics ...with even more enthusiasm Monday, September 13, 2010
- 12. ...we run from it Flickr @ prasoonpics Monday, September 13, 2010
- 13. Web developers face a constantly changing challenge... Monday, September 13, 2010
- 14. “It’s just HTML” “It’s just CSS” “It’s just JavaScript” Monday, September 13, 2010
- 15. Monday, September 13, 2010
- 16. Internet Explorer 4 Monday, September 13, 2010
- 17. Internet Explorer 4 Internet Explorer 5 Monday, September 13, 2010
- 18. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 Monday, September 13, 2010
- 19. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 no more Internet Explorer! Monday, September 13, 2010
- 20. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 no more Internet Explorer! (j/k LOL!) Monday, September 13, 2010
- 21. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Monday, September 13, 2010
- 22. or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Monday, September 13, 2010
- 23. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Monday, September 13, 2010
- 24. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Firefox 1, 2, 3, (4) Monday, September 13, 2010
- 25. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 Opera 2 (Internet Explorer 9) , 3, 4, 5, 6 , 7, 8, 9, 1 Firefox 1, 2, 3, (4) 0 Monday, September 13, 2010
- 26. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Mob il e? Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 Opera 2 (Internet Explorer 9) , 3, 4, 5, 6 , 7, 8, 9, 1 Firefox 1, 2, 3, (4) 0 Monday, September 13, 2010
- 27. Can’t forget the one browser to rule them all... Monday, September 13, 2010
- 28. 5 Doctypes 3 CSS Versions Flash, Silverlight, ActiveX, JavaApplets ASP (Classic), ASP.net, Java, PHP, Ruby, Python, Filemaker SQL Server, Oracle, MySQL, Postgres, CouchDB, MongoDB, Access HTTP, FTP, SMTP, SSL, gopher:// Ajax, Comet, SOAP, and the REST .flv, .wmv, .mp3, .ogg, .mov Monday, September 13, 2010
- 29. 5 Doctypes 3 CSS Versions Flash, Silverlight, ActiveX, JavaApplets ASP (Classic), ASP.net, Java, PHP, Ruby, Python, Filemaker SQL Server, Oracle, MySQL, Postgres, CouchDB, MongoDB, Access HTTP, FTP, SMTP, SSL, gopher:// Ajax, Comet, SOAP, and the REST .flv, .wmv, .mp3, .ogg, .mov and this too => ColdFusion Monday, September 13, 2010
- 30. So what is a web developer really? Monday, September 13, 2010
- 31. an integrator & creator Monday, September 13, 2010
- 32. Face two challenges Monday, September 13, 2010
- 33. Face two challenges integration (technical/does it work) Monday, September 13, 2010
- 34. Face two challenges integration adoption (technical/does it work) (skills/experience) Monday, September 13, 2010
- 35. So how does HTML5, jQuery & the Open Web address these? Monday, September 13, 2010
- 36. JavaScript? Integration or adoption? Monday, September 13, 2010
- 37. Adoption Monday, September 13, 2010
- 38. No one took it seriously Monday, September 13, 2010
- 39. jQuery changed that, opened the door for skills acquisition and lowered the barrier to entry... Monday, September 13, 2010
- 40. It showed what was possible and brought new life to an established technology Monday, September 13, 2010
- 41. What happened? Monday, September 13, 2010
- 42. Innovation! & Adoption Monday, September 13, 2010
- 43. jQuery !== JavaScript Monday, September 13, 2010
- 44. jQuery is written in JavaScript Monday, September 13, 2010
- 45. var sessions = document.getElementsByClassName(‘sessions’); for ( var i = 1; i < sessions.length; ) { sessions[i].className += ‘ awesome’; i += 2; } Monday, September 13, 2010
- 47. 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
- 48. // Selecting elements $(‘your css selector’) Monday, September 13, 2010
- 49. // Selecting elements $(‘your css selector’) $(‘#byId’) $(‘.byClass’) $(‘body’) $(‘ul > li’) // supports CSS 1-3 selectors today Monday, September 13, 2010
- 50. // Creating elements $(‘<string of html>’) Monday, September 13, 2010
- 51. // Creating elements $(‘<string of html>’) $(‘<h1>My title</h1>’).appendTo(‘body’); Monday, September 13, 2010
- 52. // Modifying attributes $(‘a’).attr(‘href’, ‘http://appendto.com’); Monday, September 13, 2010
- 53. // Modifying attributes $(‘a’).attr(‘href’, ‘http://appendto.com’); $(‘a’).css(‘color’, ‘red’); $(‘a’).addClass(‘hello’); $(‘a’).removeClass(‘hello’); Monday, September 13, 2010
- 54. // Attaching events $(‘a’).click(function() { return false; }); Monday, September 13, 2010
- 55. // Ajax $.get(‘/restful/api/echo’, { say: “howdy!” }, function(data) { alert(‘the server said: ‘ + data.said); }, ‘json’); Monday, September 13, 2010
- 56. jQuery made it easy to do cross browser Monday, September 13, 2010
- 57. HTML5? Integration or adoption? Monday, September 13, 2010
- 58. Adoption Monday, September 13, 2010
- 59. One doctype to rule them all! (consolidation) <!DOCTYPE html> Monday, September 13, 2010
- 60. It’s semantic Monday, September 13, 2010
- 62. // 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
- 63. Easier to express the rich web using HTML5 Monday, September 13, 2010
- 64. The Open Web? Monday, September 13, 2010
- 65. Both Integration & Adoption Monday, September 13, 2010
- 66. Integration between layers using open standards (HTML5, CSS3, JavaScript, etc.) Integration of shared data (REST services) Monday, September 13, 2010
- 67. Adoption by developers (HTML5, CSS3, JavaScript, etc.) Monday, September 13, 2010
- 68. So what does this all mean? Monday, September 13, 2010
- 69. We have better tools and tested patterns that are best expressed with HTML5, jQuery and the Open Web Monday, September 13, 2010
- 70. But my company doesn’t... Monday, September 13, 2010
- 71. Hold it! Flickr @ eschipul Monday, September 13, 2010
- 72. Let’s think about 2 years from now... Monday, September 13, 2010
- 73. How much experience? Monday, September 13, 2010
- 74. There is a severe shortage of “front-end developers” Monday, September 13, 2010
- 75. There is a severe shortage of multi-discipline “front-end developers” Monday, September 13, 2010
- 76. Demo time http://www.thewildernessdowntown.com/ http://www.dextrose.com/en/projects/aves-engine http://events.jquery.org Monday, September 13, 2010
- 77. Monday, September 13, 2010
- 78. Monday, September 13, 2010
- 79. Where should you be headed? HTML5 (already being implemented) jQuery supports HTML5 today CSS3 is on the radar & implementations Canvas / SVG good support Local & offline storage @font-face downloaded / embedded fonts WebSockets streaming data jQuery Mobile Q4 2010 Monday, September 13, 2010
- 80. Quantum leap? Browser vendors are “unified” Client side performance Improved tools Mobile explosion Technology refresh cycle Monday, September 13, 2010
- 81. ...embrace & enjoy the ride! Flickr @ martinvirtualtours Monday, September 13, 2010
- 82. What are some of the front-end challenges you’re facing today? Monday, September 13, 2010
- 83. HTML5, jQuery & The Open Web Heartland Developers Conference 2010 Omaha, Nebraska @jdsharp Monday, September 13, 2010