Your SlideShare is downloading. ×
HDC 2010 Keynote: HTML5, jQuery and the Open Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HDC 2010 Keynote: HTML5, jQuery and the Open Web

1,309
views

Published on

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 …

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.


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,309
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 46. $(‘.sessions:odd’).addClass(‘awesome’) 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
  • 61. http://joshduck.com/periodic-table.html 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