Search Engine Optimization Page Views

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 – Wait result – Get result – Display result

http http http http

25

Web 2.0 and AJAX

•asynchronous – Send request – Get result – handle response • Display • Computing 26

http (base page)

http

http http

http

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 – XML

28

<xml> AJAX 1995 <price>50

– JSON { book: { name: ‘AJAX’, year: ‘1995’, price: ’50’, } }

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/

39

MAP by Google Map API

Web 2.0 Site Web Users AJAX

AJAX

Participate

API Users 40

Web Services Web API

userdata

Share,Rate, Personalize

Provide

Web 2.0 Sites

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

46

•2006 q3 travel map •2006 q4 xlog •2007 q1 bookmarklets •2007 q4 hacks •2008 q2 yahoo

Hacks

47

•2006 q3 travel map •2006 q4 xlog •2007 q1 bookmarklets •2007 q4 hacks •2008 q2 yahoo

Hacks

48

•2006 q3 travel map •2006 q4 xlog •2007 q1 bookmarklets •2007 q4 hacks •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">

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