Upload
sampetruda
View
606
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 1
Real World AjaxLearning the magic behind Google, Yahoo!,and other Ajax-driven websites
Scott DavisDavisworld Consulting
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 2
Introduction
My name is Scott DavisJBoss At Work(O’Reilly)
Google Maps API(Pragmatic Bookshelf)
Pragmatic GIS(Pragmatic Bookshelf)
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 3
The release of Google Maps (Feb 7, 2005) was a“Wizard of Oz / Technicolor” moment
Not just for web mapping, but for web development ingeneral
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 aproprietary plug-in
It used standard technologies(JavaScript, CSS) in new and interesting ways
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 4
Welcome to Web 2.0
Ajax
Web Services
In this talk, we’ll look at “next generation”website features and show you how toincorporate them into your own website
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 5
Examples
Google Maps
“Slippy Maps”
Yahoo! Mail
Tabbed interfaces
Apple
Live subtotals
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 6
Ajaxian Techniques
It all boils down to:
CSS
Divs
Events
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 7
CSS
Cascading Style Sheets
More than just pretty colors and fonts
CSS Positioning is key to many ajaxian features
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 8
No Style
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 9
Style #1
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 10
Style #2
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 11
cssZenGarden.com
For more examples of the power of CSS,see:
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 12
Divs
Divs are semantically-named divisions ofHTML
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 13
CSS can be used to style regular old HTMLtags…
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 14
… or it can be used to style Divs
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 15
Events
The key to aninteractiveweb siteis tapping intothe JavaScriptevent model
Courtesy: http://www.w3schools.com/jsref/jsref_events.asp
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 16
Ajax Frameworks
Working with CSS, Divs, and Events isconsiderably easier when “helper”frameworks come along for the ride:
Prototype
• http://prototype.conio.net/
Script.aculo.us
• http://script.aculo.us/
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 17
Google Maps
“Slippy Maps” -- how’d they do that?
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 18
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 afully functional “slippy map”, including zooming andmultiple map types
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 19
RYOGM-1
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 20
RYOGM-1: Basic HTML
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 21
RYOGM-2
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 22
RYOGM-2: Basic CSS
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 23
RYOGM-5
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 24
RYOGM-5: Events
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 25
RYOGM-5
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 26
CSS
Whole map / viewable map
<div id=‘viewableMap’>
#viewableMap { width: ‘500px’; … }
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 27
Divs
Getting a <div> using $()
Without Prototype:
• document.getElementById(‘foo’)
With Prototype:
• $(‘foo’)
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 28
Events
Click, drag events
Without Prototype:
• <div id=‘wholeMap’ onMouseDown=‘startDrag()’>
With Prototype:
• Event.observe(‘wholeMap’, ‘mousedown’, startDrag)
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 29
Yahoo! Mail
Tabbed interface – how’d they do that?
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 30
Solution:
DynamicDrive’s Ajax Tabs
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
• Single zip file containing all required code, including asimple example
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 31
Tabs, Unstyled
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 32
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 33
Tabs, Styled
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 34
This removesthe bullet
This makes the listhorizontal insteadof vertical
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 35
CSS Links “Rollover”
No JavaScriptrequired to createthe “Rollover”effect
(These CSS stylingrules are called‘pseudoclasses’)
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 36
JavaScript
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 37
Programmatically adding an ‘onClick()’ toeach <a> -- calls ajaxpage()
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 38
JavaScript – Ajax
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 39
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 40
CSS
UL, styled
Links, hover style (no JavaScript needed)
ID (singleton) vs. Class
Selectors
.shadetabs li a{ … }
Pseudoclasses
.shadetabs li a:hover{ … }
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 41
Divs
Placed Ajax content in the div
<div id=‘ajaxContentArea’>
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 42
Events
OnClick –> ajaxPage()
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 43
The Apple Store
“Live Subtotals” – how’d they do that?
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 44
Solution: Let’s view/source
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 45
Dojo
They’re using the Dojo Ajax library
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 46
They are building Divs on the fly
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 47
Tabs
Hyperlinksfor tabs
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 48
Subtotal
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 49
The Order Form
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 50
Summary
Google Maps
“Slippy Maps”
Yahoo! Mail
Tabbed interfaces
Apple
Live subtotals
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 51
Ajaxian Techniques
It all boils down to:
CSS
Divs
Events
Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org
Scott Davis — Real World AJAX Page 52
Conclusion
Questions?
Thanks for your time!
Email:[email protected]
Code examples:http://www.davisworld.org/presentations