Your SlideShare is downloading. ×
0
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
DavisRealWorldAjax
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

DavisRealWorldAjax

398

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
398
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
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. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Real World Ajax Learning the magic behind Google, Yahoo!, and other Ajax-driven websites Scott Davis Davisworld Consulting Scott Davis — Real World AJAX Page 1
  • 2. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Introduction My name is Scott Davis JBoss At Work (O’Reilly) Google Maps API (Pragmatic Bookshelf) Pragmatic GIS (Pragmatic Bookshelf) Scott Davis — Real World AJAX Page 2
  • 3. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org The release of Google Maps (Feb 7, 2005) was a “Wizard of Oz / Technicolor” moment Not just for web mapping, but for web development in general It put Ajax on the map (no pun intended) • Jesse James Garrett’s seminal article coining the phrase (and mentioning GM) was published on Feb 18, 2005 What made it special was that it didn’t require a proprietary plug-in It used standard technologies (JavaScript, CSS) in new and interesting ways Scott Davis — Real World AJAX Page 3
  • 4. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Welcome to Web 2.0 Ajax Web Services In this talk, we’ll look at “next generation” website features and show you how to incorporate them into your own website Scott Davis — Real World AJAX Page 4
  • 5. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Examples Google Maps “Slippy Maps” Yahoo! Mail Tabbed interfaces Apple Live subtotals Scott Davis — Real World AJAX Page 5
  • 6. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Ajaxian Techniques It all boils down to: CSS Divs Events Scott Davis — Real World AJAX Page 6
  • 7. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org CSS Cascading Style Sheets More than just pretty colors and fonts CSS Positioning is key to many ajaxian features Scott Davis — Real World AJAX Page 7
  • 8. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org No Style Scott Davis — Real World AJAX Page 8
  • 9. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Style #1 Scott Davis — Real World AJAX Page 9
  • 10. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Style #2 Scott Davis — Real World AJAX Page 10
  • 11. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org cssZenGarden.com For more examples of the power of CSS, see: Scott Davis — Real World AJAX Page 11
  • 12. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Divs Divs are semantically-named divisions of HTML Scott Davis — Real World AJAX Page 12
  • 13. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org CSS can be used to style regular old HTML tags… Scott Davis — Real World AJAX Page 13
  • 14. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org … or it can be used to style Divs Scott Davis — Real World AJAX Page 14
  • 15. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Events The key to an interactive web site is tapping into the JavaScript event model Scott Davis — Real World AJAX Courtesy: http://www.w3schools.com/jsref/jsref_events.asp 15 Page
  • 16. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Ajax Frameworks Working with CSS, Divs, and Events is considerably easier when “helper” frameworks come along for the ride: Prototype • http://prototype.conio.net/ Script.aculo.us • http://script.aculo.us/ Scott Davis — Real World AJAX Page 16
  • 17. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Google Maps “Slippy Maps” -- how’d they do that? Scott Davis — Real World AJAX Page 17
  • 18. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Solution: Rolling Your Own Google Maps http://www.mapmap.org/ryogm • ~200 lines of JavaScript • 12 step-by-step pages take you from static HTML to a fully functional “slippy map”, including zooming and multiple map types Scott Davis — Real World AJAX Page 18
  • 19. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org RYOGM-1 Scott Davis — Real World AJAX Page 19
  • 20. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org RYOGM-1: Basic HTML Scott Davis — Real World AJAX Page 20
  • 21. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org RYOGM-2 Scott Davis — Real World AJAX Page 21
  • 22. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org RYOGM-2: Basic CSS Scott Davis — Real World AJAX Page 22
  • 23. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org RYOGM-5 Scott Davis — Real World AJAX Page 23
  • 24. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org RYOGM-5: Events Scott Davis — Real World AJAX Page 24
  • 25. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org RYOGM-5 Scott Davis — Real World AJAX Page 25
  • 26. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org CSS Whole map / viewable map <div id=‘viewableMap’> #viewableMap { width: ‘500px’; … } Scott Davis — Real World AJAX Page 26
  • 27. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Divs Getting a <div> using $() Without Prototype: • document.getElementById(‘foo’) With Prototype: • $(‘foo’) Scott Davis — Real World AJAX Page 27
  • 28. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Events Click, drag events Without Prototype: • <div id=‘wholeMap’ onMouseDown=‘startDrag()’> With Prototype: • Event.observe(‘wholeMap’, ‘mousedown’, startDrag) Scott Davis — Real World AJAX Page 28
  • 29. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Yahoo! Mail Tabbed interface – how’d they do that? Scott Davis — Real World AJAX Page 29
  • 30. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Solution: DynamicDrive’s Ajax Tabs http://www.dynamicdrive.com/ dynamicindex17/ajaxtabscontent/ • Single zip file containing all required code, including a simple example Scott Davis — Real World AJAX Page 30
  • 31. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Tabs, Unstyled Scott Davis — Real World AJAX Page 31
  • 32. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Scott Davis — Real World AJAX Page 32
  • 33. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Tabs, Styled Scott Davis — Real World AJAX Page 33
  • 34. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org This removes the bullet This makes the list horizontal instead of vertical Scott Davis — Real World AJAX Page 34
  • 35. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org CSS Links “Rollover” No JavaScript required to create the “Rollover” effect (These CSS styling rules are called ‘pseudoclasses’) Scott Davis — Real World AJAX Page 35
  • 36. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org JavaScript Scott Davis — Real World AJAX Page 36
  • 37. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Programmatically adding an ‘onClick()’ to each <a> -- calls ajaxpage() Scott Davis — Real World AJAX Page 37
  • 38. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org JavaScript – Ajax Scott Davis — Real World AJAX Page 38
  • 39. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Scott Davis — Real World AJAX Page 39
  • 40. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org CSS UL, styled Links, hover style (no JavaScript needed) ID (singleton) vs. Class Selectors .shadetabs li a{ … } Pseudoclasses .shadetabs li a:hover{ … } Scott Davis — Real World AJAX Page 40
  • 41. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Divs Placed Ajax content in the div <div id=‘ajaxContentArea’> Scott Davis — Real World AJAX Page 41
  • 42. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Events OnClick –> ajaxPage() Scott Davis — Real World AJAX Page 42
  • 43. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org The Apple Store “Live Subtotals” – how’d they do that? Scott Davis — Real World AJAX Page 43
  • 44. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Solution: Let’s view/source Scott Davis — Real World AJAX Page 44
  • 45. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Dojo They’re using the Dojo Ajax library Scott Davis — Real World AJAX Page 45
  • 46. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org They are building Divs on the fly Scott Davis — Real World AJAX Page 46
  • 47. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Tabs Hyperlinks for tabs Scott Davis — Real World AJAX Page 47
  • 48. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Subtotal Scott Davis — Real World AJAX Page 48
  • 49. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org The Order Form Scott Davis — Real World AJAX Page 49
  • 50. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Summary Google Maps “Slippy Maps” Yahoo! Mail Tabbed interfaces Apple Live subtotals Scott Davis — Real World AJAX Page 50
  • 51. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Ajaxian Techniques It all boils down to: CSS Divs Events Scott Davis — Real World AJAX Page 51
  • 52. Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org Conclusion Questions? Thanks for your time! Email: scottdavis99@yahoo.com Code examples: http://www.davisworld.org/presentations Scott Davis — Real World AJAX Page 52

×