Web 2 .

0 an d
AJA X
to have mor e fun on w eb
05/18/09 Zordius
 Sections
• Self introduction
• Web 2.0 and AJAX
• Hacks
• Taiwan Map API
• AJAX Tech
• Homework
• Q&A
2
 Self introduction

• Zordius ( 小 Z)

– HSNU

– NTU Civil Engineering

– NTNU Computer Science

– YAHOO!
3
 Self introduction

• Zordius @HSNU 1989

– 打排 球

– 看漫 畫

– 寫程 式 (?!)

– 上網 (?!)
4
 Self introduction

• OS & Programming @1989

– DOS 5.0

– Quick Basic

– Turbo C

5
 Self introduction

• Network @1989

– Dial up BBS

– USE NET posts

– 1200BPS (bits per seconds)

6
 Self introduction

• Zordius @NTU 1995

– 玩程 式 (?!)

– 看漫 畫

– 上網 (?!)

7
 Self introduction

• OS & Programming @1995

– Windows 95

– Visual Basic

8
 Self introduction
• Network @1995

– Internet BBS

– Text mode MUD (online game)

– Unix server FTP

– Newsgroup WWW

– 56K bps modem

9
 Self introduction

• Zordius @NTNU 1999

– 玩程 式 (?!)

– 拍 cosplay

– 上網 (?!)

10
 Self introduction

• OS & Programming @1999

– Windows 2000

– Borland C++ Builder

– Delphi (OO Pascal)

11
 Self introduction

• Network @1999

– Windows online game

– FTP, network neighborhood

– 1st web bobble (banner AD)

– ADSL (512K bps)

12
 Self introduction

• Zordius @YAHOO 2003

– 工作

– 加班

– 上網

– 員工 旅遊
13
 Self introduction

• OS & Programming @2003

– Windows XP

– Linux

– JAVA

– C++, C#, .net

14
 Self introduction

• Network @2003

– Windows online game

– FTP, network neighborhood

– 1st web bobble (banner AD)

– Cable, light fiber, wifi

15
 Self introduction
• OS & Programming @2008

– VISTA

– Linux

– JAVA, Javascript, PHP, Mysql, AJAX

– Flash

16
 Self introduction

• Network @2008

– free online game

– Bit Torrent

– Keyword AD

– 3G, wimax, mobile

17
 Self introduction
• Zordius @Yahoo

– 電子報 – 卡漫

– 新聞 – 生活

– 首頁 – 電影

– 算命 – 音樂

– 笑話 – 地圖
18
 Self introduction
• Zordius @Yahoo

– 電子報 – 卡漫

– 新聞 – 生活

– 首頁 – 電影

– 算命 – 音樂

– 笑話 – 地圖
19
 Self introduction
• Zordius @Yahoo

– 電子報 – 卡漫

– 新聞 – 生活

– 首頁 – 電影

– 算命 – 音樂

– 笑話 – 地圖
20
 Self introduction
• Zordius @Yahoo

– 電子報 – 卡漫

– 新聞 – 生活

– 首頁 – 電影

– 算命 – 音樂

– 笑話 – 地圖
21
 Self introduction
• Zordius @Yahoo

– 電子報 – 卡漫

– 新聞 – 生活

– 首頁 – 電影

– 算命 – 音樂

– 笑話 – 地圖
22
 Web 2.0 and AJAX
•What is Web 2.0?
– New generation Internet
– HARD to define
– Tim O'Reilly, 2004

23
 Web 2.0 and AJAX
•What is AJAX?
– asynchronous JavaScript and XML
– Jesse James Garrett,2005

24
 Web 2.0 and AJAX
•synchronous
– Send request http
– Wait result
http
– Get result
– Display result http
http

25
 Web 2.0 and AJAX
•asynchronous
– Send request http (base page)
– Get result http
http http
– handle response
• Display http
• Computing

26
 Web 2.0 and AJAX
•What is AJAX?
– asynchronous JavaScript and XML
– Get data with:
• XML
• JSON (JavaScript Object Notation)

27
 Web 2.0 and AJAX
•Data
format – JSON
{
– XML
book: {
<xml>
name: ‘AJAX’,
<book>
year: ‘1995’,
<name>AJAX</name>
price: ’50’,
<year>1995</year>
}
<price>50</price>
}
</book>
28 </xml>
 Web 2.0

29
 Web 2.0

30
 Web 1.0 to Web 2.0

Web 1.0: static pages

Web 1.5: contents generated by CMS

Web 2.0: Dynamic, Socical network

31
 Web 1.0 to Web 2.0
Web 1.0 Web 2.0

DoubleClick → Google AdSense

Ofoto → Flickr

Akamai → BitTorrent

mp3.com → Napster

32 Britannica Online → Wikipedia

 Web 1.0 to Web 2.0
Web 1.0 Web 2.0

domain name speculation → search engine optimization

page views → cost per click
screen scraping → web services
publishing → participation
content management systems → wikis
directories (taxonomy) → tagging ("folksonomy")

33
 Web 1.0 to Web 2.0
Web 1.0 Web 2.0
(1993-2003) (2003- beyond)
Mode Read Write,Contribute
Unit Page Post,record
State static dynamic
Viewed Web Browsers,RSS
through browser Readers, anything
Architectur Client Server Web Services
e
Content Web Coders Everyone
Created by
34
 Web 2.0 Tech
• CSS and semantically valid
XHTML markup
• AJAX Techniques
• Syndication of data in
RSS/ATOM
35 • Aggregation of RSS/ATOM data
 Web 2.0 Tech
• Support posting to a weblog
• RESTian (preferred) or XML
Webservice APIs
• Some social networking aspects
(share your data with friends,
36 etc)
 Web 2.0 Sites
• Google Maps, Yahoo Maps
• Flickr
• del.icio.us
• digg
• last.fm
• Technorati
37
 Web 2.0 Site: Google
Maps

38
 Web 2.0 Site: Google
Maps

http://www.chicagocrime.org/ MAP by
Google Map API

39
 Web 2.0 Site
Web Users

AJAX AJAX

Web Services
Participate Provide
Web API

API Users userdata Share,Rate, Web 2.0

Personalize Sites
40
 Web 2.0 Site: flickr

Tag clouds

41
 Web 2.0 Site: flickr

42
 Web 2.0 Site: flickr
Map API

Schedule API

Flickr API

43
 Web 2.0 Site: del.icio.us
share bookmark

user participate

44
 Web 2.0 Site: digg user rating

user participate

45
 Hacks

•2006 q3 travel map

•2006 q4 xlog
•2007 q1
bookmarklets
•2007 q4 hacks
46
•2008 q2 yahoo
 Hacks

•2006 q3 travel map

•2006 q4 xlog
•2007 q1
bookmarklets
•2007 q4 hacks
47
•2008 q2 yahoo
 Hacks

•2006 q3 travel map

•2006 q4 xlog
•2007 q1
bookmarklets
•2007 q4 hacks
48
•2008 q2 yahoo
 bookmarklet
•URL 中可以跑 javascript
javascript:alert('hello~~~ world')

•Bookmark 可以擺
javascript

49
 Taiwan Map API

• 第一步 : 申請 APPID
http://developer.yahoo.com/wsregap
p/

50
 Taiwan Map API

• 第二步 : 加入 script
<script language=“JavaScript”
src=“http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&
appid= 剛申請好的 appid"></script>

51
 Taiwan Map API

• 第三步 : 開始 coding!
var map = new
YMap(document.getElementById('map'));
map.drawZoomAndCenter(' 台北 ');

52
 Taiwan Map API
• 更多 methods
var map = new
YMap(document.getElementById('map'));
map.addZoomLong();
map.drawZoomAndCenter(' 台北車站 ', 1);
http://developer.yahoo.com/maps/ajax/V3.8/i
ndex.html
53
 AJAX TECH

asynchronous JavaScript and XML

• Get DATA: how to?
– Img cookie

– Iframe

– Script

– XMLHttpRequest

54
 AJAX TECH

AJAX get data: img cookie

• Should be in the same domain
• Limited data format and size

55
 AJAX TECH

AJAX get data: iframe

• Should be in the same host
• Can get any data in DOM object

56
 AJAX TECH

AJAX get data: script

• Can accessed in different host
• Can get data in JSON format
• With call back function in most
time

57
 Homework
• Please write an AJAX page to
load data from other page or
data source. If possible, show a
map on this page.

58
 Q&A

59