Logo

CÔNG NGHỆ WEB 2.0

slide.tailieu.vn

Logo

Nội Dung

Một Số Web 2.0 Tra Cứu Dịch Vụ

Giới Thiệu Công Nghệ Web

6

1

Các vấn đề của Web 2.0

Web 2.0 là gì?

3

7 2

Đặc tính và kỹ thuật của Web 2.0

Một số ứng dụng của Web 2.0

8

Công Nghệ Web 2.0

Các vấn đề của Web 2.0

9 4

Ứng Dụng Của Web.2.0

Rui Ro & Vấn Đề

10 5

slide.tailieu.vn

Logo

Giới Thiệu Công Nghệ Web

ệ ể ự

ặ ậ ủ

3

ứ ộ ố ứ ụ ị ủ 1. S  phát tri n c a công ngh  Web 2. Web 2.0 là gì? ỹ 3. Đ c tính và k  thu t c a Web 2.0  ệ 4. Công ngh  Web 2.0 ụ 5. Các  ng d ng c a Web 2.0 6. M t s  Web 2.0 tra c u d ch v

slide.tailieu.vn

Logo

1. Sự phát triển của công nghệ Web

4

slide.tailieu.vn

Logo

Giới Thiệu Công Nghệ Web 2.0

5

slide.tailieu.vn

Logo

Giới Thiệu Công Nghệ Web 2.0

6

slide.tailieu.vn

Logo

2. Web 2.0 là gì?

ấ ầ ậ ệ ữ

ầ ủ ị

v Thu t ng  Web 2.0 l n đ u xu t hi n vào tháng 10/2004  ủ khi Tim OReily – Ch  t ch và Dale Dougherty – Phó Ch   ề ạ ị i m t cu c h i th o v   t ch c a OReily Media  đ a ra t ế ự s  phát tri n ti p theo c a Web.

ủ ả ộ ộ ộ

ế ả

ề ở ộ ố ữ ng tác gi a các ng ườ   cho  phép  ng

ư ủ ể ể ề v Có  r t  nhi u  quan  đi m  khác  nhau  v   Web  2.0,  tuy  ư ố ẫ  m t s  tính năng nh    Web 2.0  nhiên đa s  v n mô t ươ ườ kh  năng giao ti p, tính t i dùng  ế ố ữ ớ i  dùng  có  v i  nhau  hay  là  nh ng  y u  t ể ạ th  t o ra thông tin.

v Các lo i d ch v  Web 2.0 nh  m ng xã h i, blog, các t

ể ạ ị ở ư

ư ạ ộ ự ổ ự ừ ế ế ớ

7

ộ ừ   ể đi n m  wiki, … đang có m t s  phát tri n nh  vũ bão  ự và  th c  s   đang  làm  bi n  đ i  th   gi i  Internet  t ng  ừ ngày, t ng gi ờ .

slide.tailieu.vn

Logo

2. Web 2.0 là gì? (tt)

ủ ự

ể S  phát tri n c a Web v Web  1.0  (1993­2003)  đa  s   là  các  trang  HTML,  ng

ườ ố i  dùng  xem  thông  tin  qua  trình  duy t. ệ Web 1.0 chủ yếu gồm các website "đóng" của các hãng thông tấn hay các công ty nhằm mục đích tiếp cận độc giả hay khách hàng hiệu quả hơn. Nó là phương tiện phát tin hơn là phương tiện chia sẻ thông tin.

v Web  2.0  (2003­  beyond):  Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trò nền tảng ứng dụng, nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng thông qua các trang Web, các thông tin chia  ụ ẻ s  qua Web và nhi u  ng d ng t

8

ề ứ ươ ng tác.

slide.tailieu.vn

Logo

2. Web 2.0 là gì? (tt)

9

ủ ự ể S  phát tri n c a Web

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật của Web 2.0

ọ ứ

ề ả

ệ ộ

d ng d ch v  web và

ậ ữ ệ ầ ượ

ủ Quan đi m c a Tim OReily v Web có vai trò n n t ng, có th  ch y m i  ng d ng v T p h p trí tu  c ng đ ng ố v D  li u có vai trò then ch t ấ ở ạ ượ v Ph n m m đ ừ ậ

đ

ế ị t b

ậ ể ứ ề ệ ứ

c cung c p  c c p nh t không ng ng ễ ụ v Phát tri n  ng d ng d  dàng và nhanh chóng ạ ể v Ph n m m có th  ch y trên nhi u thi ụ v Giao di n  ng d ng phong phú (O'Reilly, 2005).

10

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật của Web 2.0

ế ệ ứ

c hi u là th  h  th  2 c a vi c thi

ộ Quan đi m c a c ng đ ng Wikipedia: ể v Web 2.0 đ

ượ

ẽ ẻ

ơ

ủ ế ế ượ t k   ề ể ứ và phát tri n  ng d ng Web, nó s  làm cho truy n  ễ c  d   dàng  h n,  chia  s   thông  tin,  tham  thông  đ gia và thao tác Web an toàn h n. ơ ẫ ớ ự ứ

ụ ư

ệ ồ

ể v Khái ni m Web 2.0 đã d n t i s  phát tri n c a các  ề ữ c ng  đ ng,  d ch  v   l u  tr   và  ng  d ng  trên  n n  ừ ể ộ ư Web,  nh   các  m ng  xã  h i,  chia  s   video,  t   đi n  m  wiki, blog, …

11

slide.tailieu.vn

Logo

ể ư

3. Đặc tính và kỹ thuật của Web 2.0 ủ Theo  nguyên  c u  c a  Graham  Cormode  và  Balachander  Krishnamurthy  (AT&T),  các  Website  2.0  ư ặ có nh ng đ c tính nh : ự v Ng

ệ i  dùng  là  th c  th   u  tiên  s   m t  trong  h

ể ế ố ớ

ệ ố

i dùng trong h  th ng có th  k t n i v i nhau

m t cách d  dàng. ể

ướ

ữ ườ th ng.ố ườ v Ng ộ ườ v Ng ị

i  dùng  có  th   cung  c p  thông  tin  d ả ạ

ờ ả

ượ

i  khác.  Đ ng  th i  đ m  b o  đ

i  nhi u  ể đ nh  d ng  khác  nhau:  nh,  video,  text  …,  có  th   đánh  th   (tagging),  góp  ý,  đánh  giá  n i  dung  c a  ề ng c  quy n  riêng  ư t

ườ ồ  và quy n chia s  thông tin.

ứ 12

slide.tailieu.vn

ườ

v Cung  c p  các  giao  di n  API  m ,  đ   “bên  th   3”  ậ i dùng ho c các nhà l p trình) có th  mashup

(ng

ữ ệ

(tr n)  các  ng  d ng  hay  d   li u  c a  Website  v i

ữ ệ

các  thành  ph n  khác  ( ng  d ng  hay  d   li u)  làm

ị ủ

tăng giá tr  c a thông tin.

Logo

3. Đặc tính và kỹ thuật của Web 2.0

ườ ử ụ

Vai trò ng

i s  d ng Web 2.0

13

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật … (tt)

ớ ể ử ụ ậ

v Web 2.0  là m t cách ti p c n m i đ  s  d ng Web  i dùng cùng  nhau

ộ ề ả ế ơ ườ ư

ộ nh  là m t n n t ng n i mà ng  tham  gia  vào  vi c ệ

§ t o ra,   § ch nh s a, và   ử ỉ § xu t  b n thông  tin  ả ấ

v Thông qua nh ng công c  h p tác sáng t o n i dung

ụ ợ ạ ộ

14

ữ ề trên n n web.

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật … (tt)

ườ i  ng i  dùng  không  ph i  ch ỗ   ch

ườ ườ ạ ớ v Web  2.0  liên  quan  t ộ i dùng t o ra n i dung mà ng ỉ ở ả i dùng còn giúp

ắ i,

15

ộ ng § thu th p, ậ § t ứ ổ  ch c,  § mô t , ả § c p nh t,  ậ ậ § chia s , ẻ § truy n bá,  ề § s p x p l ế ạ § bình lu n, ậ § hi u đính, và  § đóng gói n i dung.

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật … (tt)

ạ ộ ộ ườ ộ v Web 2.0 là m t cu c h i tho i trong  đó ng i dùng có

ơ ộ ể c  h i đ

§ đánh d u, ấ § nh n xét, và  ậ § chia s  quan đi m  ẻ

v V   m t  s   ch   đ ,  ngu n  thông  tin  và  d ch  v    thông

ủ ề ụ ề ồ ị

ộ ố ấ ị  tin nh t đ nh.

16

ệ ậ ườ ạ ờ  Đi u đó có nghĩa là Web 2.0 hoàn toàn là n i dung do  ng ề ể i dùng t o ra nh  khai thác trí tu  t p th .

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật … (tt)

v Cách th c Web 2.0 đ a thông tin đ n ng

ấ ả

ế ườ i dùng:

§ Xu t b n qua web đ n vi c xu t b n qua RSS, email hay

ư ế

ử ụ

ụ ể ư

ấ ượ

§ R t nhi u  ng d ng s  d ng các hàm API công c ng ch   ỉ t  ra  đ   đ a  thông  tin  lên  Facebook  (qua  email,

c  vi

ề ứ ế đ SMS …).

§ Có th  mashup t ể

ứ ấ ả SMS…,

nhi u ngu n tin khác nhau … ả

ề Đi u này hoàn toàn không kh  thi v i Web 1.0.

17

ớ ề

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật … (tt)

v Web  2.0  có  th   đ

ụ ể

ể ượ ữ ặ ạ c  phân  lo i  theo  nh ng  đ c

đi m:ể § Chung chung và c  th .  § Tĩnh và đ ng.ộ § Đóng và m .ở § Cá nhân và s  đông.

ố ượ

v Ho c chúng đ

ư

§ Chia s  thông tin nh  hình  nh, phim, tin t c và âm nh c. ả § Tham gia. § H i h p. ộ ọ § H  tr  giám sát d ch v . ụ ỗ ợ § Giao d chị

18

ặ ạ ự ứ c phân lo i d a vào ch c năng:

slide.tailieu.vn

Logo

3. Đặc tính và kỹ thuật … (tt)

v Web  2.0  có  th   đ

ể ượ ữ ặ ạ c  phân  lo i  theo  nh ng  đ c

v Chung chung và cụ thể: các ứng dụng của Web 2.0 có thể có tính chất chung chung như là Google Earch hoặc cụ thể như là các website tương tác của quận trong một thành phố.

v Tĩnh và động: các ứng dụng Web 2.0 có đặc tính tĩnh như là Youtube (www.youtube.com) và đặc tính động như những live chats, các hình ảnh hoặc các tài liệu có thể trao đổi như MSN, Yahoo.

v Đóng và mở: các ứng dụng Web 2.0 có thể hoạt động trong môi trường đóng như tạo các trang web cá nhân và mở như Google Maps, cho phép người sử dùng tìm kiếm thông tin trong vị trí địa lý xác định.

19

đi m:ể

slide.tailieu.vn

v Cá nhân và số đông: một số ứng dụng chỉ dành có các cá nhân để chia sẻ kinh nghiệm với những người quan tâm khác như là

weblogs, hoặc cũng có thể phục vụ sự quan tâm của một đám

đông. Ví dụ như diễn đàn để bàn luận về các vấn đề xã hội.

Logo

3. Đặc tính và kỹ thuật … (tt)

v Web  2.0  có  th   đ

ể ượ ữ ặ ạ c  phân  lo i  theo  nh ng  đ c

v Chia sẻ thông tin như hình ảnh, phim, tin tức và âm nhạc.

v Tham gia: việc tham gia đánh giá những bộ phim được đặt trên Youtube hay là đánh giá những bài viết trên các tạp chí điện tử.

v Hội họp: Web 2.0 có thể được dùng để chia sẻ mối quan tâm trong cùng một cộng đồng, giảm những hạn chế về liên lạc như là MySpace, Twitter, Facebook.

v Hỗ trợ giám sát dịch vụ: các ứng dụng Web 2.0 cung cấp vị trí

của những bệnh viện, thư viện, trường mẫu giáo, trường học.

20

v Giao dịch như là eBay, nghĩa là cung cấp các dịch vụ thương mại theo những cách đổi mới, các Web 2.0 như là những cửa hàng trực tuyến mà người ghé thăm có thể mua những thứ cần thiết qua mạng.

đi m:ể

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

v Web 2.0 v n đang ti p t c phát tri n c

ế

§ máy ch , ủ § ki n trúc ph n m m,  § giao th c, ứ § chu n , ẩ §

§

trình duy t, ệ ụ ứ ng d ng, ...

ế ụ ả ở ề ả ể ẫ n n t ng

v Hình thành ho c tăng c

ườ ả

21

ươ ng kh  năng các mô hình  ệ ặ ề ặ t ng tác v  m t công ngh  trong Web 2.0.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

ở XML v XML  đ

ề ượ ượ c  vi ữ t  b i  eXtensible  Markup  Lauguage,  ị ở ấ c  đ   ngh   b i  W3C

ữ ế ắ t  t ở ộ “Ngôn  ng   Đánh  d u  M   r ng”  đ đ  t o ra các ngôn ng  khác.

ả ơ

ặ ẻ ệ v M c  đích  chính  c a  XML  là  đ n  gi n  hóa  vi c  chia  s   ệ ệ t là các h

ể ạ ụ ữ ệ d  li u gi a các h  th ng khác nhau, đ c bi ố th ng đ

v XML cung c p m t ph

ế ố ớ ộ ấ

ộ ấ ả ể ả ủ ệ ố ữ ượ c k t n i v i Internet. ể ệ ươ ng ti n dùng văn b n (text) đ   ụ   thông  tin  và  áp  d ng  m t  c u  trúc  ki u  cây  cho

22

mô  t thông tin đó.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

ị ơ ở ủ

ị ầ ộ

ỗ ợ ệ ể ạ ổ ợ ượ h p chu i h p l

c k t h p theo t ệ

v XML cung c p m t c  s  cú pháp cho vi c t o l p các

XML ự ủ ơ v Đ n v  c  s  c a XML là các ký t  theo đ nh nghĩa c a  ự ự    toàn c u). Các ký t Universal  Character Set (B  ký t ộ ế ợ  đ  t o thành m t  đ tài li u XML. ấ

ữ ệ ạ ậ ầ ộ ơ ở ự ấ ngôn ng  đánh d u d a trên XML theo yêu c u.

v Ví d :ụ

23

slide.tailieu.vn

F10 Shimano 47.76

Logo

4. Công ngh  Web 2.0

ộ t t

ọ ở ợ

t b i Really Simple Syndication là m t  ượ ổ c t ng h p và đ c b i các  ẩ

v RSS đ ớ

RSS ượ v RSS đ ạ ị ụ ặ ượ ế ắ ở c vi ộ đ nh d ng n i dung Web đ ự công c  đ c thù d a trên chu n XML.  ể c dùng đ  thông báo cho ng

ườ i dùng các thông  ẻ ệ tin  m i  trên  các  Website  thông  qua  vi c  chia  s   thông  tin.

ượ ộ ậ ướ ạ ấ

v Thông  tin  này  đ ượ XML  đ hay RSS channel.

24

c  cung  c p  d ộ ọ i  d ng  m t  t p  tin  c  g i  là  m t  RSS  feed,  webfeed,  RSS  stream

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

ế ắ ừ AJAX v AJAX,  vi t  t t  t

ố ỉ ể ộ ằ ế ắ ả ữ ầ t, thay vì t i đi t

ộ Asynchronous  JavaScript  and  XML  ụ ồ (JavaScript và XML không đ ng b ), là b  công c  cho  ỏ ữ ộ ứ phép tăng t c đ   ng d ng web b ng cách c t nh  d   ả ạ ị ệ li u và ch  hi n th  nh ng gì c n thi i l i  toàn b  trang web.

v AJAX  không  ph i  m t  công  ngh   đ n  l

ộ ả ệ ơ ẻ ự ế

ộ ợ

ệ ớ ị ữ ệ

ể ố ượ ộ ớ ồ

25

ủ ế ữ ệ ề mà  là  s   k t  h p m t nhóm công ngh  v i nhau. Trong đó, HTML và  CSS  đóng  vai  hi n  th   d   li u,  mô  hình  DOM  trình  bày  ổ ữ thông  tin  đ ng,  đ i  t ng  XMLHttpRequest  trao  đ i  d   ị ủ ệ li u không đ ng b  v i máy ch  web, còn XML là đ nh  ạ d ng ch  y u cho d  li u truy n.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

ạ ộ ư ế

ế ắ ừ t  t t  t

ồ ộ ụ

ố ỉ ể

ầ ữ ằ ế ắ ả t,  thay  vì  t ỏ ữ ệ ả ạ i  l i  đi  t

ệ ơ ẻ ự ế ả ộ AJAX ho t đ ng nh  th  nào? Vi   Asynchronous  JavaScript  and  XML  (JavaScript  ộ và XML không đ ng b ), là b  công c  cho phép tăng t c  ụ ộ ứ đ   ng  d ng  web  b ng  cách  c t  nh   d   li u  và  ch   hi n  ộ ị th   nh ng  gì  c n  thi i  toàn  b   trang  web.  v AJAX  không  ph i  m t  công  ngh   đ n  l

ợ ộ

ệ ớ ị ữ ệ

ể ố ượ ộ ớ ồ

26

ủ ế ữ ệ ề mà  là  s   k t  h p m t nhóm công ngh  v i nhau. Trong đó, HTML và  CSS  đóng  vai  hi n  th   d   li u,  mô  hình  DOM  trình  bày  ổ ữ thông  tin  đ ng,  đ i  t ng  XMLHttpRequest  trao  đ i  d   ị ủ ệ li u không đ ng b  v i máy ch  web, còn XML là đ nh  ạ d ng ch  y u cho d  li u truy n.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

ệ Cơ chế làm việc của ajax

v Lúc đó Client sẽ rơi vào trạng thái chờ (waiting…), trong lúc này phía Client không thể thực hiện một công việc nào khác.

v Khi Server xử lý hoàn thành các yêu cầu và sẽ gửi trả lại cho phía Client một trang web khác thay thế trang cũ

27

9/20/16

Cơ chế truyền thông đồng bộ v Khi người dùng cần cập nhật thông tin (click vào một một Button nào đó), thì yêu cầu thay đổi thông tin sẽ được gửi từ phía Client về Server dưới dạng HTTP request, toàn bộ trang web sẽ được gửi chứ không riêng gì một vài thông tin cần thay đổi (dạng này gọi là postback).

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

v Cách thức hoạt động của 1 trang web cổ điển là : Click  waiting ..  refresh …….Do đó cho dù yêu cầu cập nhật một lượng thông tin nhỏ thì trang web cũng phải load lại, do đó các trang web chạy chậm .

28

9/20/16

Cơ chế truyền thông đồng bộ

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

v Khi đó công việc gửi request và nhận response đều do Ajax Engine thực hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, Web server có thể gửi trả dữ liệu dạng XML và Ajax Engine sẽ tiếp nhận, phân tích và chuyển đổi thành XHTML + CSS cho trình duyệt hiển thị. Việc phân tích và chuyển đổi này được thực hiện trên Client nên giảm tải rất nhiều cho Server, đồng thời User cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại toàn bộ trang.

29

9/20/16

Cơ chế truyền thông bất đồng bộ v Ajax cho phép tạo ra một Ajax Engine nằm giữa UI (user interface (Server)– giao diện người dùng(Client)) và Server, Ajax Engine này vẫn nằm ở phía Client .

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

30

9/20/16

Cơ chế truyền thông bất đồng bộ

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

v Việc gửi request và nhận response do Ajax Engine thực hiện. Do đó phía Browser UI không rơi vào trạng thái chờ (waiting…), tức là có thể thực hiện nhiều việc cùng lúc (Asynchronous). .

31

9/20/16

Cơ chế truyền thông bất đồng bộ v Mặt khác, sự kết hợp của các công nghệ web như CSS và XHTML làm cho việc trình bày giao diện trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. v Ajax Engine chỉ gửi đi những thông tin cần thay đổi chứ không phải toàn bộ trang web, do đó giảm được tải qua mạng.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

ệ Cơ chế làm việc của ajax

32

9/20/16

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

v Google Suggest hiển thị các thuật ngữ gợi ý gần như ngay

lập tức khi người sử dụng chưa gõ xong từ khóa.

v Google Maps, mọi người có thể theo dõi những thay đổi, xê

dịch, kéo thả bản đồ như trên môi trường desktop.

v Gmail đến phiên bản thử nghiệm Google Groups, đều là

những ứng dụng AJAX.

v Trang chia sẻ ảnh Flickr (hiện thuộc Yahoo) hay công cụ tìm

kiếm A9.com của Amazon.

v Yahoo Mail Beta 1 là hòm thư mới sẽ được trang bị thêm nhiều tính năng thuộc Web 2.0 như RSS, chế độ xem thư trước (preview)...

v Microsoft cũng đang triển khai chương trình Windows Live

Mail và Windows Live Messenger hỗ trợ AJAX.

Các ứng dụng AJAX phổ biến

slide.tailieu.vn33

Logo

4. Công ngh  Web 2.0 Các ứng dụng AJAX phổ biến

slide.tailieu.vn34

Logo

4. Công ngh  Web 2.0

v Là một công nghệ "nguy hiểm" khi gây ra không ít rắc rối về giao diện người dùng. Ví dụ, phím "Back" (trở lại trang trước) được đánh giá cao trong giao diện website chuẩn. Đáng tiếc, chức năng này không hoạt động ăn khớp với Javascript và mọi người không thể tìm lại nội dung trước đó khi bấm phím Back. Bởi vậy, chỉ một sơ xuất nhỏ là dữ liệu trên trang đã bị thay đổi và khó có thể khôi phục lại được.

v Không thể lưu lại địa chỉ web vào thư mục Favorite (Bookmark) để xem lại về sau. Do áp dụng lớp trung gian để giao dịch, các ứng dụng AJAX không có một địa chỉ cố định cho từng nội dung.

Những nhược điểm của AJAX

slide.tailieu.vn35

Logo

4. Công ngh  Web 2.0

v Microsoft Internet Explorer 5.0 trở lên; Mozilla, Firefox, SeaMonkey, Epiphany, Galeon và Netscape 7.1; trình duyệt chứa KHTML API 3.2 trở lên như Konqueror, Apple Safari... v CSS (Cascading Style Sheets) dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML, XHTML, XML, SVG, XUL... Các thông số kỹ thuật của CSS do tổ chức World Wide Web Consortium (W3C) quản lý.

v DOM - mô hình đối tượng tài liệu (Document Object Model) - là một giao diện lập trình ứng dụng (API). Thông thường DOM có dạng một cây cấu trúc dữ liệu và được dùng để truy xuất các tài liệu HTML và XML. Mô hình DOM hoạt động độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu.

Những trình duyệt hỗ trợ AJAX

slide.tailieu.vn36

Logo

4. Công ngh  Web 2.0 Những trình duyệt hỗ trợ AJAX

v DHTML, hay HTML động, tạo một trang web bằng cách kết hợp các thành phần: ngôn ngữ đánh dấu HTML tĩnh, ngôn ngữ lệnh máy khách (như Javascript) và ngôn ngữ định dạng CSS và DOM. Do có khả năng phong phú, DHTML còn được dùng như một công cụ xây dựng các trò chơi đơn giản trên trình duyệt.

slide.tailieu.vn37

Logo

4. Công ngh  Web 2.0

v Phía Client :

1. Viết hàm tạo đối tượng XMLHttpRequest (đối tượng này dùng để gởi request đến Server). 2. Viết hàm gởi yêu cầu (request) đến Server. 3. Viết hàm xử lý thông tin sau khi gởi request đến Server. Có thể là thông tin lỗi trả về (nếu việc gởi request thất bại) hay là thông tin do Server trả lời lại. v Phía Server :

1. Viết hàm xử lý các yêu cầu (request) từ Client

Các bước xây dựng một ứng dụng ajax

gửi đến.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

Mô hình hoạt động của AJAX

Các bước xây dựng một ứng dụng ajax

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

v RIA là ứng dụng nền Web nhưng có những đặc điểm

RIA (Rich Internet Application)

v RIA được thực hiện bởi các chuẩn hay các phần mềm mở rộng (plug-ins) của trình duyệt hoặc được thực hiện trên các máy ảo.

v Các nền tảng RIA thường được nhắc đến như Curl,

tiêu biểu của các ứng dụng desktop.

v Các phần mềm RIA có thể có rất nhiều ứng dụng khác nhau như: Ứng dụng văn phòng hay bản đồ.

Adobe Flash/Adobe Flex/AIR, Java/JavaFX…

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

v Mashup cho phép người dùng thể hiện khả năng sáng tạo bất tận bằng cách “nối” hai hay nhiều ứng dụng Web lại với nhau.

v Một số công cụ tạo mashup (mashup editor) v Microsoft Popfly dành cho người không chuyên. Dựa trên nền tảng Silverlight, mọi người có thể lập các dịch vụ online tương đối phức tạp nhưng lại không cần am hiểu về HTML, XTML, CSS, AJAX... Tất cả những gì họ phải làm là kéo - thả nội dung từ nguồn này sang nguồn kia.

v Popfly miễn phí và tương thích Internet Explorer và

Mush up

Firefox.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

Mush up

v Video - ảnh: Ví dụ như dùng giao diện lập trình ứng dụng API của Flickr để tạo mashup chia sẻ ảnh trên những site khác.

v Tìm kiếm - mua sắm: Là việc tích hợp search engine

Bốn nội dung mashup chính v Bản đồ: Chẳng hạn người dùng lập bản đồ về bất động sản, cửa hàng quà tặng, trường học... tại một địa phương qua Google Maps.

v Tin tức: Tiêu biểu nhất là Digg.com - dịch vụ hỗ trợ người sử dụng tập hợp tin tức về công nghệ, văn hóa... từ hàng loạt website khác nhau

để tra cứu thông tin về du lịch, nhà hàng...

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

Mush up

v Data mashup: Trộn dữ liệu cùng loại từ nhiều nguồn, chẳng hạn gộp dữ liệu từ các RSS feed vào một feed đơn nhất.

Bốn loại mashup tiêu biểu v Consumer mashup: Trích xuất dữ liệu khác nhau từ nhiều nguồn và được tập hợp lại dưới một giao diện đồ họa đơn giản.

slide.tailieu.vn

Logo

4. Công ngh  Web 2.0

Mush up

v Telecom mashup là ứng dụng viễn thông tổng hợp, chẳng hạn kết hợp dịch vụ tin nhắn từ công ty A, nhạc chuông của công ty B, thư thoại (voicemail) của công ty C...

Bốn loại mashup tiêu biểu v Business mashup: Sử dụng cả hai loại mashup trên, thường là tích hợp data ở cả trong và ngoài công ty. Ví dụ, công ty bất động sản A có thể phân tích thị phần khi so sánh số căn nhà họ bán được tuần qua với danh sách tổng các ngôi nhà được bán trên thị trường.

slide.tailieu.vn

Logo

ệ 4. Công ngh  Web 2.0 (tt)

ữ ệ ố ớ ệ ố ữ ứ ớ ứ ụ

ụ ụ ề ế Gi a h  th ng v i h  th ng, gi a  ng d ng v i  ng d ng: v SOA và Web Services là ví d  v  ki n trúc và mô hình

ề ể phát tri n ph n m m.

v Tính chia s  đ

ể ệ ở ạ ị c th  hi n

ữ ệ ề ể ầ

khía c nh d  li u và d ch  ụ ị v , đ nh hình đ n mô hình phát tri n ph n m m có tính  ệ ố ươ t ữ ng tác cao v i nh ng h  th ng khác.

ươ ụ ầ ẻ ượ ế ớ ườ ả ng kh  năng t ữ ứ ng tác gi a  ng d ng

v Web 2.0 tăng c ớ ứ v i  ng d ng.  ờ

ư ẩ ầ

ế ố ự

v Ngoài  ra,  nh   các  chu n  nh   RSS,  RDF  Atom,...  (h u  ể h t  đ u  d a  trên  XML)  mà  các  h   th ng  cũng  có  th   chia s  d  li u v i nhau linh ho t h n.

ệ ạ ơ ớ

ề ẻ ữ ệ ứ

v Các giao th c FOAF, XFN, SOAP, REST OPBP ...cũng  ứ ng tác cho các  ng d ng Web

ươ ườ ụ ả ng kh  năng t

45

tăng c 2.0.

slide.tailieu.vn

Logo

ệ 4. Công ngh  Web 2.0 (tt)

ườ ớ ệ ố i dùng v i h  th ng:

ờ ợ ấ ộ

ế ệ ả ả ữ Gi a ng ộ ớ v V i  Web  1.0  vào  m t  liên  k t  và  ch   đ i,  m t  m t  ừ ộ ộ i toàn b  n i dung t

ể ị ề ờ kho ng th i gian đ  trình duy t t ể Server v  và hi n th .

ệ ỉ ầ ả ề ả ấ ạ ộ ữ i toàn b  d   ổ ữ i v  nh ng thay đ i

v V i Web 2.0 dùng AJAX, thay vì ph i l y l  server, trình duy t ch  c n t ế

ị ể ớ ệ ừ li u t ầ c n thi

ứ ừ ớ ng tác d  li u nhanh h n, t

ổ ữ ệ ề ơ ệ ầ

ữ ớ

46

ạ ơ ớ ơ ụ ể t và hi n th  chúng.  ư v Cũng là HTTP nh ng AJAX b  sung m t cách th c giao  ệ ươ ế ti p m i giúp vi c t  đó có  ồ ọ ữ ể ạ th   t o  nên  nh ng  ph n  m m  có  giao  di n  đ   h a  ụ ệ ẹ phong phú, linh ho t h n, đ p h n v i nh ng nghi p v   ộ ứ có th  sánh ngang v i m t  ng d ng desktop.

slide.tailieu.vn

Logo

ệ 4. Công ngh  Web 2.0 (tt)

ườ ườ i dùng i dùng v i ng :

ỉ ượ ả

ớ ế ệ ấ ề ứ ụ ự ủ

v Các d ch v  v  chia s   nh, blog, chia s  nh c, ... ph n

ữ Gi a ng ữ ệ c  cung  v D  li u cho th  h  Web  2.0  không  ph i  ch   đ ở ấ c p b i server, r t nhi u  ng d ng mà s  tham gia c a  ườ ử ụ i s  d ng đóng vai trò quan tr ng.  ng ị ầ

ồ ượ ụ ề ữ ệ ẻ ườ ở ớ l n ngu n d  li u đ

v Nh  v y ngoài quan h  gi a ng

ườ ư ậ

ẻ ả ấ c cung c p b i ng ệ ữ ơ ệ ạ i dùng.  ớ ườ i dùng  i dùng v i ng ớ ệ ườ i dùng v i h

47

ố ữ ừ ế ệ ố ố ọ đóng vai trò quan tr ng h n quan h  ng  th  h  Web 1.0. th ng v n dĩ c  h u t

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0

ị ạ ệ

ộ ấ

ậ ự

ữ ệ ẻ ả

v Nh n tin nhanh (Instant Messaging­IM) v Đ nh d ng t p tin (RSS)  v Phát thanh (Podcasting ho c broadcasting,) v Đánh d u xã h i (social bookmarking) ế v Nh t ký tr c tuy n (Blog)  v Công trình m  (Wiki) v L c d  li u (Mash­up) v Chia s  hình  nh và video ộ v M ng xã h i (social networks) ụ ổ v Các d ch v  t ng h p

48

ợ ị

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ộ ứ ắ

ề ứ Internet ữ ứ tìm ụ ể th trên

Nh n tin nhanh (Instant Messaging­IM) ổ ế v M t  trong  nh ng  ng  ph   bi n  là  nh n  tin  nhanh  hay  ụ ị d ch v  tra c u qua chat. Có nhi u  ng d ng mi n phí  ư nh   Yahoo ( có  Talk http://webmessenger.yahoo.com),  Google  , AIM,  (http://www.google.com/talk), MSN Messenger,  ICQ, Gadu­Gadu, ngay c  ả IRC và SMS.

v Nh n tin nhanh cũng có th  d  dàng s  d ng đ

ử ụ ể ễ ượ c trên

49

ế ị ộ ắ các thi t b  di đ ng

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ị ạ

ể ậ

ữ ư ụ ụ ặ ạ ứ ữ ồ

50

ườ ử ụ ệ Đ nh d ng t p tin (RSS)  v RSS (Really Simple Syndication) ữ v RSS có th  l p danh m c nh ng website h u ích dùng  ủ ề làm  ngu n  tra  c u  ho c  t o  ra  nh ng  th   m c  ch   đ   cho ng i s  d ng

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ể ử ụ ươ ứ ệ Phát thanh (Podcasting ho c broadcasting) v Tra c u có th  s  d ng ph ng ti n phát thanh trên

Internet.

v M t  s    ng  d ng  mi n  phí  n i  ti ng  trên Internet

ụ ố ứ ễ ổ

ộ ể

51

ế  đ    làm   podcasting   là   Audacity    (www.audacity.sourceforge.net ) và   Odeo Studio  ( www.studio.odeo.com)

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ộ ấ

ậ ườ ữ

Đánh d u xã h i (social bookmarking) ộ v Đánh  d u   xã   h i  giúp  t p  h p  nh ng  đ ẫ ườ ẫ ữ ng  d n  h u  ng d n này vào   các

ư ấ ợ ữ ạ ả  và phân lo i nh ng đ ích, mô t ủ ề ụ ể ụ  th    m c   theo   ch  đ  c  th .

v Furl (www.furl.net)  và  del.icio.us (www.delicious.com)  là  ụ ổ ậ hai  trong  s   nh ng  ví  d   n i  b t  cung  c p  nh ng  tính  năng này.

52

ữ ữ ấ ố

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ậ ế

ự ể ạ ữ ủ ẻ ậ Nh t ký tr c tuy n (Blog)  v Có th  t o ra nh ng nh t ký c a riêng mình, chia s  tin

ứ t c và thông báo cá nhân.

ệ ề ự ệ m  c a, các s  ki n

53

ồ ể ượ ế ờ ở ử ớ v Thông tin v  ngu n tài li u m i, gi ẻ ằ c chia s  b ng blog. ố và  bi n c  có th  đ

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ộ ậ ế ặ

ữ ả t ho c th o lu n.  ở ướ i dùng có th  kh i x ồ ự ủ ề ng m t ch  đ  và  ứ ưở ng  ng

54

Công trình m  (Wiki) ấ ớ v Khác v i blog, wiki cung c p nh ng n i dung mang tính  ệ ướ ạ i d ng bài vi trí tu  d ườ ớ ộ v V i wiki, ng ộ ở ộ m  r ng n i dung này d a trên h i âm và h ọ ạ ủ c a b n đ c.

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ọ ữ ệ

ụ ừ ồ ự ẵ ở ề ặ L c d  li u (Mash­up) ộ ứ v Mash­up là m t  ng d ng khác mà  ượ ạ c t o ra t đó m t ngu n l c  ụ ị  hai ho c nhi u d ch v  web s n

thông tin đ có.

v Ng

ụ ể

ị ứ ợ chu n b  cho các đ t qu ng ho c d ng video.

v Ng

ườ ẩ ườ ể i  dùng  tra  c u  có  th   khai  thác  công  c   này  đ   ự ặ ế ạ i dùng cũng có th  s p x p l i (mash­up) n i dung

55

ụ ớ ể ạ ạ ị ả ể ắ ộ ữ ề ư ệ v  th  vi n đ  t o ra nh ng d ch v  m i sáng t o.

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ữ ả Chia s  hình  nh và video ụ ổ v Flickr ( www.flickr.com)  là  m t  trong  nh ng  ví  d   n i

ề ẻ ộ ả ụ ế ti ng v  công c  chia s  hình  nh

ụ ổ ế ộ ề v YouTube ( www.youtube.com ) là m t ví d  n i ti ng v

56

ẻ chia s  video.

slide.tailieu.vn

Logo

5. Các ứng dụng của Web 2.0 (tt)

ạ ộ

ạ ộ

http://www.linkedin.com)   ng

ứ ứ ệ

M ng xã h i (social networks) ư v Thông   qua   các   m ng   xã   h i   nh    Facebook      friendster (www.friendster.com)  (www.facebook.com),  ườ ho c  (ặ i  dùng  tra  c u  có  ể ự ể th   dùng  n n  công  ngh   này,  có  th   đăng  tin  t c,  s   ệ ki n, hình  nh.

ị ợ ề ả ụ ổ

ề ứ ụ ử ụ Các d ch v  t ng h p ể ế v Có  th   k t  h p  và  s   d ng  nhi u  ng  d ng Web  2.0

57

ợ ệ ộ ề trên cùng m t n n công ngh .

slide.tailieu.vn

Logo

5. Một số Web 2.0 tra cứu dịch vụ

58

slide.tailieu.vn

Logo

6. Các vấn đề của Web 2.0

v Quá kỳ vọng: Các ứng dụng Web 2.0 yêu cầu kết nối Internet ổn định và nhanh để làm việc. Trừ khi kết nối băng rộng được phủ khắp, còn không thì Web 2.0 chỉ là một bổ sung cho cách thức chúng ta làm việc (bên cạnh ứng dụng desktop).

v Quá đơn giản: Web 2.0=Ajax! Cũng như Web 2.0, Ajax được kỳ vọng quá nhiều. Thực chất, Ajax chỉ là một trong số nhiều công nghệ nền tảng của Web 2.0 và Ajax còn có những hạn chế.

v Quá chú trọng công nghệ: RSS, SOA, Ajax... hàng loạt công nghệ được gắn liền với Web 2.0. Người ta áp dụng các công nghệ mới mà không quan tâm đến các tính chất quan trọng hơn: truyền thông, cộng tác, trí tuệ cộng đồng.

59

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

v Ngoài ra bạn cũng có thể dễ dàng chia sẻ bộ sưu tập của bạn. Nếu có ai đó hỏi bạn có liên kết nào hay, bạn chỉ cần chỉ người đó lên xem kho bookmark của bạn trên Delicious.

60

Giới thiệu trang web Del.icio.us: v Delicious sẽ giúp bạn bạn đánh dấu (bookmark) lại những trang web mà bạn muốn giữ lại để tham khảo lại sau này. Bạn có thể lập một bộ sưu tập các website hay về nhiều lĩnh vực, dùng để share hoặc cho cá nhân,… v Bạn có thể tổ chức sắp xếp tùy theo ý thích, không phải chép trong USB và có thể tham khảo ở bất cứ nơi nào miễn có Internet.

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

61

Giới thiệu trang web Del.icio.us: v Đăng ký: vào trang chủ http://del.icio.us, nhập thông tin username, mật khẩu và email. Sau đó vào hộp mail và click vào link xác nhận để đảm bảo với del.icio.us là đó thực sự là hộp mail của bạn.

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

62

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

v Tag là gì? Tag theo đúng nghĩa đen của nó, là một loại nhãn dán lên sản phẩm hay đồ vật nhằm ghi chú hoặc đánh dấu phân loại. Ở đây cũng vậy, Delicious cho phép bạn tổ chức sắp xếp kho link theo cách riêng của bạn, bạn có thể gán cho mỗi link 1 hoặc nhiều nhãn, sau đó bạn sẽ tìm lại những link đó qua các nhãn này.

v Tag bundle: là tập hợp các tag có liên quan với nhau ở một mức ý nghĩa nào đó. Nói đơn giản là bạn có thể gom nhóm các tag lại với nhau thành tag bundle.

v Network: Delicious

là một website mang

tính cộng đồng (community). Nó cũng giống như blog hoặc Yahoo 360, ở đó mọi người có thể share nhau những gì họ có. Bạn có thể thêm một người vào Network của bạn cũng như xem họ có cập nhật gì mới.

63

Giới thiệu trang web Del.icio.us: v Sử dụng:Để vào kho link của bạn, bạn gõ vào address bar http://del.icio.us/ hoặc nhấn vào toolbar “my del.icio.us”

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

64

Giới thiệu trang web Del.icio.us:

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

v Nhấp vào liên kết “Save a new Bookmark” (ở trên cùng) trên trang

chính của account Delicious.

v Hoặc nhấp vào nút “post to del.icio.us” trên thanh toolbar trong khi đang xem trang web bạn muốn lưu (xem hướng dẫn cài thêm công cụ hỗ trợ).

v Trên ô tags bạn có thể nhập vào những tag bạn muốn gán cho liên

kết này. Cũng có nhiều cách cho bạn lựa chọn § Gõ trực tiếp, các tag cách nhau bằng khoảng trắng. Delicious có hỗ trợ auto-complete, tức hiện ra tên tag mà nó cho là bạn sắp gõ vào. Bạn chỉ cần gõ vài chữ đầu, ví dụ chữ “we”, nó sẽ hiện ra “web”, “webdesign”,… cho bạn chọn. Bạn có thể chọn hoặc gõ tiếp cho đến khi tag bạn muốn xuất hiện ngay đầu danh sách. Để chọn bạn nhấn mũi tên trái phải và phím Tab.

§ Hoặc bạn có thể click trực tiếp vào danh sách tag gợi ý bên

dưới.

65

Giới thiệu trang web Del.icio.us: v Bạn có thể thêm một liên kết vào kho link của bạn bằng nhiều cách:

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

§ Để chia sẻ kho liên kết này cho bạn bè của bạn, bạn chỉ cần cho họ biết tên account của bạn. Bạn cũng có thể truy xuất đến account của người khác bằng liên kết: “http://del.icio.us/”.

v Tìm kiếm

§ Để tìm trên Delicious, bạn có thể gõ vào ô tìm kiếm, hoặc nhấp vào tên Tag để liệt kê tất cả liên kết có tag đó. Bạn cũng có thể liệt kê link có chứa tag trên toàn thể trang Delicious (chọn view all khi đang liệt kê tag hay vào từ trang chủ). Cái hay của Delicious ở đây là bởi vì mọi người share nhau kho liên kết của họ, nên khi ta muốn tìm một cái gì đó, ta có thể tìm được chính xác một cách nhanh chóng hơn là tìm trên Google (tất nhiên không phải tất cả mọi thứ đều có thể)..

66

Giới thiệu trang web Del.icio.us: v Share cho bạn bè:

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

Ngay sau khi đăng ký, Delicious sẽ giới thiệu với bạn một số công cụ mà bạn sẽ sử dụng để việc sử dụng Delicious trở nên dễ dàng hơn.

Trước tiên, bạn hãy kéo-thả 2 liên kết mà Delicious cung cấp lên thanh công cụ Bookmarks (Firefox) hoặc Links (IE). Bạn cũng có thể kéo vào Favorites.

67

Giới thiệu trang web Del.icio.us: v Cài các công cụ hỗ trợ cho Delicious

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

68

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

v Ghi chú: nếu bạn sử dụng Internet Explorer mà không thấy Links Toolbar, bạn hãy nhấp chuột phải vào thanh công cụ bất kỳ và check vào dòng Links. Nếu dòng đó đã check thì có nghĩa là thanh công cụ đã nằm đâu đó trên màn hình và thường là bị thanh Address chèn ép dồn sang góc phải. Hãy vào đó lôi nó ra, cho nó thêm chút không gian hay tốt hơn là dành hẵn 1 dòng cho nó.

Nếu bạn bỏ lỡ qua trang giới thiệu này, bạn có thể quay lại bất kỳ lúc nào bằng cách vào Help >> Buttons trên website Delicious.

Nếu bạn là người dùng Firefox, bạn có thêm một lựa chọn, đó là cài thêm Delicious extension hỗ trợ 2 chức năng như trên đồng thời cũng cho bạn tìm kiếm trực tiếp từ Firefox mà không cần mở website Delicious lên.

v Để cài đặt bạn có thể vào Help >> Firefox and Internet Explorer

extension.

.

69

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

2. Soạn thảo văn bản – chia sẻ thông tin – hợp tác làm việc trực tuyến

tuyến

trực

v Hiện tại, Google đã cung cấp cho bạn dùng miễn phí công cụ văn phòng Google Docs tại địa chỉ http://docs.google.com . Bạn có thể soạn thảo văn bản trực tuyến tại Google mà có thể sẽ không cần Word, khi soạn thảo nhanh trên máy không cài Office.

v Để sử dụng, bạn vào địa chỉ http://docs.google.com và điền tài khoản và mật khẩu đã đăng ký với Google (tài khoản Gmail). Nếu không có tài khoản, bạn có thể chọn Create a new google Account để đăng ký sử dụng.

v Sau khi màn hình đăng nhập hoàn tất, bạn có thể sử dụng hầu hết các tính năng cần thiết của một chương trình soạn thảo văn bản trực tuyến. Khi đó, bạn sẽ thấy được những tính năng vượt trội của Google Docs ngay khi sử dụng thông qua ba chức năng chính: Hiệu quả, tiện lợi và chia sẻ cấp cao.

.

70

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

2. Soạn thảo văn bản – chia sẻ thông tin – hợp tác làm việc trực tuyến

71

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

2. Soạn thảo văn bản – chia sẻ thông tin – hợp tác làm việc trực tuyến

Khai thác tính hiệu quả của Google Docs

v Khung soạn thảo tương thích tốt với Unicode, cho bạn soạn thảo tiếng Việt dễ dàng. Hỗ trợ đầy đủ các tính năng của một chương trình soạn thảo văn bản.

v Chế độ kiểm tra chính tả cho văn bản tiếng Anh.

v Bạn có thể lưu văn bản soạn thảo dưới dạng html, RTF (tương

thích với WordPad), PDF (tương thích với chuẩn Acrobat Reader), Word (tương thích Office của Windows), OpenOffice (Tương thích OpenOffice).

v Bạn có thể in trực tiếp ngay trên khung soạn thảo.

v Hỗ trợ tác vụ Find & Replace trong trường hợp cần chỉnh sửa

nhiều từ giống nhau.

v Bạn có thể chèn hình ảnh, liên kết, table.

72

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

2. Soạn thảo văn bản – chia sẻ thông tin – hợp tác làm việc trực tuyến

Khai thác tính tiện lợi của Google Docs

v Google Docs cho bạn đem tài liệu để chỉnh sửa mọi lúc mọi

nơi khi cần.

v Để thực hiện, bạn chọn Upload để hiển thị khung Upload a File. Bạn được quyền đưa các tài liệu cá nhân lên lưu trữ với kích thước không quá 500KB cho mỗi tài liệu. Google Docs chấp nhận tài liệu văn bản HTML và text (.txt), Microsoft Word (.doc), Rich Text (.rtf), OpenDocument Text (.odt)

and StarOffice (.sxw).

Sau khi Upload thành công, bạn dễ dàng thao

tác chỉnh sửa trên văn bản khi cần.

73

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

2. Soạn thảo văn bản – chia sẻ thông tin – hợp tác làm việc trực tuyến

Khai thác tính năng chia sẻ cấp cao trong Google Docs

v Bạn có thể chọn Share để chia sẻ cho mọi người thông qua email với tác vụ Collaborater hoặc Viewer, nếu share với chế độ Colaborator, những người được mời sẽ cùng tham gia cộng tác và chỉnh sửa trên cùng một file văn bản gốc, và mọi người khác đều có thể thấy được sự thay đổi đó là ứng dụng vào việc cộng tác làm việc nhóm giữa các thành viên trong cùng một nhóm.

trang

nhân

blog

v Để mở rộng hơn trong việc chia sẻ tập tin, bạn có thể thao tác trên menu mở rộng Publish. Tác vụ này cho bạn đem tập tin của mình trên như www.blogger.com , các wordpress.com…

v Ngoài ra, để mọi người có thể xem tập tin của mình, bạn có thể nhờ Google gán một đường link về tập tin qua thao tác Publish Document. Khi đó, tài liệu của bạn sẽ có một địa chỉ web cụ thể cho mọi người truy cập và đọc tài liệu khi cần.

74

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

3. Tìm địa điểm, tìm đường đi, danh bạ, số điện thoại …mọi lúc mọi nơi

v Vào trang web sau: http://diadiem.com/ : thông tin địa điểm của

các thành phố lớn

a) Tìm kiếm một địa điểm (Ví dụ nhà mình): Chọn Tìm kiếm, Chọn thành phố và gõ vào địa chỉ cần tìm, sau đó click nút Tìm.

v VD: 1641 Phạm thế hiển P.6 Q.10

75

slide.tailieu.vn

Logo

7. Một số ứng dụng của Web 2.0

3. Tìm địa điểm, tìm đường đi, danh bạ, số điện thoại …mọi lúc mọi nơi

b) Tìm đường đi từ nơi này đến nơi khác: Chọn Đường đi và gõ địa chỉ hai điểm A, B, sau đó click nút Tìm

76

slide.tailieu.vn

Logo

8. Thách thức khi sử dụng

Thách thức khi sử dụng Web 2.0

v Có ba vấn đề cần quan tâm khi sử dụng Web 2.0 là sự riêng tư, tính

bảo mật, và tính bản quyền.

v Sự riêng tư được thể hiện trong sự hợp tác công khai. Chẳng hạn

như một thảo luận được thực hiện ở vài thời điểm với một số lượng thông tin được công khai trên Facebook. Khi đó, người sử dụng sẽ quyết định thông tin nào có thể được xem bởi ai. Khia cạnh riêng tư có thể cần tinh vi hơn và khó đối phó hơn.

v Việc sử dụng công nghệ AJAX cho phép chúng ta phát triển nhiều ứng dụng hơn. Sử dụng những mã và các chương trình chạy trên websites (hoặc cho phép giao tiếp giữa các website) không may cũng tăng cường khả năng lạm dụng. Tấn công để phá hủy các website hoặc chiếm đoạt tài khoản của người sử dụng là vấn đề lớn hơn cho các ứng dụng Web 2.0 có tương tác đối với những website của Web 1.0. Vì vậy, cố gắng tăng cường hướng đến sự an toàn phải được le kế hoạch khi xây dựng các ứng dụng Web 2.0.

77

slide.tailieu.vn

Logo

8. Thách thức khi sử dụng

Thách thức khi sử dụng Web 2.0

v Đối với các ứng dụng Web 2.0, dữ liệu là thành phần trung tâm,

quan trọng hơn cả phần mềm. Vì thế, người sử dụng có thể thêm dữ liệu đối với một ứng dụng hoặc điều chỉnh dữ liệu đang tồn tại. Điều này ảnh hưởng đến các vấn đề luật pháp liên quan và bản quyền ngay lập tức. Rõ ràng các ví dụ về vấn đề này là các trang nơi mà người sử dụng có thể công khai những bức ảnh của họ (Flickr) hoặc video (YouTube). Cả Flickr và YouTube có các hệ thống đặt để kiểm tra sự xâm phạm và những vi phạm luật pháp khác liên quan đến sự riêng tư, bảo vệ trẻ vị thành niên, v.v. lâu dài.

78

slide.tailieu.vn

Logo

9. Sử dụng Web 2.0 với Chính Phủ

v Việc sử dụng Web 2.0 trong chính phủ được chia thành ba loại:

§ Tập trung vào truyền thông;

§ Tập trung vào tương tác;

§ Tập trung vào dịch vụ.

79

slide.tailieu.vn

Logo

9. Chuyển đổi từ Web 1.0 sang Web 2.0

v Tập trung vào truyền thông: thông tin của chính phủ được truyền bá đến người dân càng xa và rộng thì càng tốt. Người dân có thể dễ dàng truy cập đến thông tin ở bất cứ đâu và chính phủ có thể khuyến khích chiến dịch quốc tế với chi phí hiệu quả.

v Mục đích chính của việc sử dụng là tăng nội dung mà chính phủ đưa vào các công cụ mạng xã hội, như blogs, podcasts và vlogs, RSS, wikis, và các mạng xã hội trong doanh nghiệp. Để sử dụng chất lượng đảm bảo đi kèm với khu vực công và những gì cần để chính phủ xây dựng mối quan hệ với người dân. Chính phủ phải thiết lập một quy tắc rõ ràng cho việc tham gia vào blogging và wikies để không vi phạm luật chứng thực.

v Web 2.0 cho phép bên thứ ba tải và kết xuất nội dung từ tài nguyên chính phủ và đưa thông tin đến người dân. Chính phủ cho phép thông tin được truyền bá rộng rãi hơn đến người dân qua các phương tiện khác nhau, nhưng họ phải đảm bảo xác thực thông tin chính phủ được cung cấp ở website của bên thứ ba.

80

slide.tailieu.vn

Logo

9. Chuyển đổi từ Web 1.0 sang Web 2.0

v Tập trung vào tương tác: tương tác với người dân để có phản hồi của họ về chính trị, các vấn đề, dịch vụ và kế hoạch của chính phủ, để có lợi trong việc tạo nội dung mới và làm cho người sử dụng phương tiện trung gian để tạo mashups nội dung có lợi cho những người khác. v Sử dụng tập trung vào tương tác là khó hơn được thực hiện để so sánh với sử dụng tập trung vào giao tiếp, vì khó để xác thực nội dung được tạo bởi người sử dụng trước khi trộn với nội dung mới.

81

slide.tailieu.vn

Logo

9. Chuyển đổi từ Web 1.0 sang Web 2.0

v Tập trung vào dịch vụ: sử dụng mạng xã hội quan trong bao

nhiêu, khó thực hiện để thành công bấy nhiêu. Mạng xã hội yêu cầu chính phủ giám sát để cung cấp giá trị đến người sử dụng. Phương tiện trung gian có thể tích hợp vào nội dung không của chính phủ với nội dụng của chính phủ và tạo những sản phẩm thông tin mới để gia tăng giá trị thông tin chính phủ. Chính phủ phải tin cậy và xác thực các phương tiện trung gian để tạo các dịch vụ và cung cấp giá trị phù hợp với người dân. Trong khi sử dụng các phương tiện trung gian có thể thay đổi dịch vụ ở chi phí thấp nhất, chính phủ phải đảm bảo tính đồng nhất và công bằng về chất lượng dịch vụ cho tất cả mọi người.

v Trong trường hợp sử dụng cuối cùng, thách thức của chính phủ là để đảm bảo tính riêng tư, bảo mật, hợp pháp của dữ liệu. Thách thức này gợi ý rằng có các vấn đề quan trọng đưa vào xem xét trước khi phổ biến trên mạng xã hội một cách rộng rãi. Chính phủ phải đưa vào các vấn đề, ảnh hưởng, và những mối đe dọa.

82

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

1. Cơ chế nhớ sẵn của trình duyệt

v. Cache-Control (điều khiển nhớ sẵn) là quy tắc quan trọng nhất.

Trường này dùng để xác định rõ các chỉ thị mà toàn bộ các cơ chế nhớ sẵn (caching mechanisms) dọc theo chuỗi yêu cầu/đáp ứng phải tuân theo. Các chỉ thị quy định các hành vi nhằm ngăn chặn bộ nhớ đệm gây nhiễu loạn bất lợi đến yêu cầu hay đáp ứng. Các chỉ thị này thường đè lên các thuật toán nhớ sẵn mặc định. Các chỉ thị về nhớ sẵn là đơn hướng, theo nghĩa là sự hiện diện của một chỉ thị trong một yêu cầu không hàm ý rằng cùng một chỉ thị đó được áp dụng cho đáp ứng.

v. Định nghĩa cache-control là: Cache-Control = "Cache-Control" ":"

cache-directive (chỉ thị nhớ sẵn).

83

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Bảng 1. Các giá trị chỉ thị nhớ sẵn thông dụng

Cache-directive (chỉ thị nhớ sẵn)

Mô tả

public (công cộng)

Toàn bộ nội dung sẽ được đưa vào bộ nhớ sẵn..

private (riêng tư)

Nội dung chỉ được nhớ sẵn trong bộ nhớ sẵn riêng tư.

no-cache (không nhớ sẵn)

Toàn bộ nội dung sẽ không được đưa vào bộ nhớ sẵn.

no-store (không lưu trữ)

Toàn bộ nội dung sẽ không được nhớ sẵn trong bộ nhớ sẵn hoặc trong một tệp tin tạm Internet.

Nếu nội dung đã nhớ sẵn đã cũ, phải gửi yêu cầu đến máy chủ/proxy để xác nhận lại nó.

must-revalidation/proxy-revalidation (phải tái xác nhận / proxy tái xác nhận)

max-age=xxx (xxx là số)

Sau xxx giây, nội dung đã nhớ sẵn trở nên cũ

84

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Bảng 2 cho thấy trình duyệt sẽ gửi lại yêu cầu đến máy chủ hay sẽ sử dụng nội dung đã nhớ sẵn trong các tình huống khác nhau

Nhấn Enter trong cửa sổ gốc Làm mới

Nhấn nút Back

Chỉ thị nhớ sẵn

Mở một cửa sổ trình duyệt mới

public

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

private

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Khi xuất hiện lần đầu, trình duyệt gửi yêu cầu đến máy chủ. Sau đó nó biểu hiện trang đó từ bộ nhớ sẵn.

no-cache/no- store

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt biểu hiện trang từ bộ nhớ đệm.

must- revalidation/p roxy- revalidation

Khi xuất hiện lần đầu, trình duyệt gửi yêu cầu đến máy chủ. Sau đó nó biểu hiện trang đó từ bộ nhớ sẵn.

max-age=xxx (xxx là số)

Sau xxx giây, trình duyệt gửi lại yêu cầu đến máy chủ.

Trình duyệt gửi lại yêu cầu đến máy chủ.

Sau xxx giây, trình duyệt gửi lại yêu cầu đến máy chủ.

Sau xxx giây, trình duyệt gửi lại yêu cầu đến máy chủ.

85

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Expires

v Trường tiêu đề của thực thể Expires đưa ra ngày và giờ mà sau đó thì đáp ứng được coi là cũ. Một mục nhớ sẵn đã cũ không thể được bộ nhớ sẵn (hoặc một bộ nhớ sẵn của proxy hoặc một bộ nhớ sẵn của tác nhân người sử dụng) trả lại một cách bình thường, nếu nó trước tiên không được xác nhận bởi máy chủ gốc (hoặc bởi một bộ nhớ sẵn trung gian mà có một bản sao tươi mới của thực thể). (Ghi chú: chỉ thị điều khiển nhớ sẵn max-age và s-maxage sẽ đè lên tiêu đề Expires.)

v Expires nhận các giá trị theo khuôn dạng sau: "Expires: Sun, 08 Nov 2009 03:37:26 GMT". Nếu ngày mà nội dung được xem đến là trước ngày đã cho, nội dung đó không được coi là hết hiệu lực và sẽ được lấy ra từ bộ nhớ sẵn. Nếu ngày đó đã qua, nội dung bị coi là đã hết hiệu lực, và bộ nhớ sẵn sẽ có một hành động nào đó. Bảng 3-6 cho thấy các hành vi khác nhau của trình duyệt đối với các hoạt động khác nhau của người sử dụng.

86

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Bảng 3. Các hành động ứng với hiệu lực của nhớ sẵn khi người sử dụng mở một cửa sổ trình duyệt mới

Firefox 3.5

IE 8

Chrome 3

Safari 4

Nội dung không cũ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Nội dung là cũ.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

87

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Bảng 4. Các hành động ứng với hiệu lực của nhớ sẵn khi người sử dụng nhấn Enter trong cửa sổ trình duyệt gốc

Firefox 3.5

IE 8

Chrome 3

Safari 4

Nội dung không cũ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Nội dung là cũ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

88

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Bảng 5. Các hành động ứng với hiệu lực của nhớ sẵn khi người sử dụng nhấn F5 để làm mới trang

Firefox 3.5

IE 8

Chrome 3

Safari 4

Nội dung không cũ.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Nội dung là cũ.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

89

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Bảng 6. Các hành động ứng với hiệu lực của nhớ sẵn khi người sử dụng nhấn phím Back hoặc Forward

Firefox 3.5

IE 8

Chrome 3

Safari 4

Nội dung không cũ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Nội dung là cũ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

90

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Bảng 6. Các hành động ứng với hiệu lực của nhớ sẵn khi người sử dụng nhấn phím Back hoặc Forward

Firefox 3.5

IE 8

Chrome 3

Safari 4

Nội dung không cũ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Nội dung là cũ.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

91

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Last-Modified/E-Tag

v Giá trị trường tiêu đề của thực thể Last-Modified (đã sửa đổi

gần nhất) thường được sử dụng như một bộ xác nhận hiệu lực nhớ sẵn (cache validator). Nói đơn giản, một mục trong bộ nhớ sẵn được coi là có hiệu lực nếu thực thể không bị sửa đổi kể từ thời điểm ứng với giá trị Last-Modified. Giá trị trường tiêu đề đáp ứng ETag, một thẻ thực thể, cung cấp một bộ xác nhận hiệu lực nhớ sẵn “mờ đục”. Điều này cho phép sự xác nhận hiệu lực tin cậy hơn trong các tình huống khi việc lưu trữ ngày tháng sửa đổi là rất bất tiện, khi mà độ phân giải một giây của các giá trị ngày tháng HTTP là không đủ, hoặc khi mà máy chủ gốc muốn tránh các nghịch lý nhất định có thể phát sinh từ việc sử dụng ngày tháng sửa đổi.

v Các trình duyệt khác nhau có các hành vi khác nhau đối với

cấu hình. Bảng 7-10 cho biết các hành vi trình duyệt khác nhau đối với các hoạt động khác nhau của người sử dụng.

92

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Last-Modified/E-Tag

Bảng 7. Hành động ứng với Last-Modified E-Tag khi người sử dụng mở một cửa sổ trình duyệt mới

Firefox 3.5

IE 8

Chrome 3

Safari 4

Nội dung không bị thay đổi từ lần truy cập cuối cùng.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Nội dung đã bị thay đổi từ lần truy cập cuối cùng.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

93

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Last-Modified/E-Tag

Bảng 8. Hành động ứng với Last-Modified E-Tag khi người sử dụng nhấn Enter trong cửa sổ trình duyệt gốc

Firefox 3.5

IE 8

Chrome 3

Safari 4

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Nội dung không bị thay đổi từ lần truy cập cuối cùng.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Nội dung đã bị thay đổi từ lần truy cập cuối cùng.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

94

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Last-Modified/E-Tag

Bảng 9. Hành động ứng với Last-Modified E-Tag khi người sử dụng nhấn F5 để làm mới trang

Firefox 3.5

IE 8

Chrome 3

Safari 4

Nội dung không bị thay đổi từ lần truy cập cuối cùng.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 304.

Nội dung đã bị thay đổi từ lần truy cập cuối cùng.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

95

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Last-Modified/E-Tag

Bảng 10. Áp dụng thiết lập không có bộ nhớ sẵn và người sử dụng nhấn phím Back hoặc Forward

Firefox 3.5

IE 8

Chrome 3

Safari 4

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Nội dung không bị thay đổi từ lần truy cập cuối cùng.

Nội dung đã bị thay đổi từ lần truy cập cuối cùng.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

96

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Không có thiết lập nào liên quan đến bộ nhớ sẵn

v Nếu bạn không xác định bất kỳ thiết lập nào liên quan đến bộ nhớ sẵn, các trình duyệt khác nhau có các hành vi khác nhau, và đôi khi các hành vi của cùng một trình duyệt lại khác nhau khi được chạy một vài lần trong cùng một tình huống. Điều đó có thể trở nên phức tạp. Ngoài ra, một nội dung nào đó không nên đưa vào bộ nhớ sẵn sẽ được nhớ sẵn, nó có thể gây ra các vấn đề về an ninh.

v Các trình duyệt khác nhau có các hành vi khác nhau.

97

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Không có thiết lập nào liên quan đến bộ nhớ sẵn

Bảng 11. Áp dụng thiết lập không có bộ nhớ sẵn và người sử dụng mở một cửa sổ trình duyệt mới

Firefox 3.5

IE 8

Chrome 3

Safari 4

Mở một trang mới. Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Nhấn Enter trong cửa sổ gốc.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Nhấn F5 để làm mới.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Nhấn phím Back hoặc Forward.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt biểu hiện trang từ bộ nhớ sẵn.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

Trình duyệt gửi lại yêu cầu đến máy chủ. Mã trả về là 200.

98

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Ví dụ áp dụng

v Phần này cung cấp các ví dụ về phân tích một điểm Web để xác định hành vi nhớ sẵn đúng đắn bằng cách sử dụng cả công cụ thương mại của IBM và công cụ mã nguồn mở.

v Roller Weblogger của Apache

v Roller Weblogger của Apache là một ứng dụng Web 2.0 mã nguồn mở. Nó là máy chủ blog Java™ mã nguồn mở điều khiển các blog như blogs.sun.com, blog.usa.gov, IBM Lotus Connections, IBM Developer Works, và nhiều địa chỉ khác.

v Trong bài này, chúng tôi chọn các blog của My developerWorks IBM làm ví dụ để giải thích chi tiết các thiết lập bộ nhớ sẵn. Hình 1 cho thấy một ảnh chụp màn hình của trang blog My developerWorks.

99

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Ví dụ áp dụng

Hình 1. Trang blog My developerWorks

100

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Ví dụ áp dụng

• Trang này có 62 yêu cầu, hầu hết là png, gif, js, hoặc một số kiểu tệp tin tĩnh khác. Khi người sử dụng truy cập trang này lần đầu tiên, phải mất khoảng 16 giây để hoàn thành việc hiển thị toàn trang trong trình duyệt. Nếu bạn xác định được đúng đắn các thiết lập của bộ nhớ sẵn thì phần lớn các tài nguyên sẽ được đưa vào bộ nhớ sẵn ở phía trình duyệt. Do đó, khi người sử dụng truy cập trang này một lần nữa thì số lượng các yêu cầu cho trang này giảm còn 22, và sẽ chỉ mất khoảng 6 giây để tải. Trải nghiệm của người sử dụng cải thiện một cách đáng kể.

• Bây giờ chúng ta sẽ phân tích một số thiết lập quan trọng đối với bộ nhớ sẵn dành cho yêu cầu. Kết quả liên quan đến Weblogger nhìn thấy trong hình 2.

101

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Hình 2. Tiêu đề của đáp ứng từ trang nhà các blog My developerWorks 1

Trước hết, Cache-Control đè lên các thiết lập Last-Modified, vì vậy trang này có thể được đưa vào bộ nhớ sẵn trên máy cục bộ trong 5 giây, nhưng phải xác nhận hiệu lực lại nếu nội dung là cũ. Khi một người sử dụng truy cập trang này, trình duyệt trước tiên sẽ kiểm tra bộ nhớ sẵn cục bộ để xác định xem các tệp cục bộ đã hết hiệu lực chưa. Nếu nội dung là cũ, trình duyệt sẽ gửi một yêu cầu đến máy chủ để so sánh dấu thời gian Last-Modified. Nếu tệp tin đáp ứng có cùng một nhãn thời gian Last- Modified, máy chủ trả về mã 304 cho trình duyệt để báo rằng tệp tin đáp ứng cũng như nhau

102

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Hình 3. Tiêu đề của đáp ứng từ trang nhà các blog My developerWorks 2

Thiết lập Cache-Control này chỉ ra rằng đáp ứng này không thể đưa vào bộ nhớ sẵn được. Từ quan điểm nghiệp vụ, yêu cầu này được dùng để kiểm tra xác thực và uỷ quyền của người sử dụng, nó không nên được đưa vào bộ nhớ sẵn.

103

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Hình 4. Tiêu đề của đáp ứng từ trang nhà các blog My developerWorks 3

Tệp tin đáp ứng này là một tệp thư viện JavaScript rất hiếm khi bị sửa đổi nên nó có độ tuổi tối đa (max-age) bằng một ngày.

104

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Ví dụ áp dụng

Trung tâm Mashup (Mashup Center)

v Trung tâm Mashup được thiết kế để cung cấp một giải pháp

mashup nghiệp vụ dễ sử dụng, hỗ trợ một quá trình lắp ráp các phần mềm ứng dụng theo tình huống động, sống còn đối với hoạt động của doanh nghiệp (line-of-business) — với các khả năng an ninh và điều quản mà CNTT yêu cầu. Nó gồm có Lotus Mashups và InfoSphere MashupHub. Hình 5 cho thấy một ảnh chụp nhanh của Lotus Mashups đang hoạt động.

105

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Hình 5. Trang chủ Mashup

106

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Hình 6. Tiêu đề đáp ứng của trang nhà Mashup 1

107

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

Hình 7. Tiêu đề đáp ứng của trang nhà Mashup 2

v Đây là trang chính cá nhân, nó không nên được đưa vào bộ nhớ sẵn. Chú ý giá trị ngày tháng Expires (hết hiệu lực) được đặt ở một ngày rất xa trong quá khứ sao cho nó sẽ luôn được làm mới.

108

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

v Tóm tắt v Do tính phức tạp của nhiều trình duyệt, các thiết lập bộ nhớ sẵn đúng đắn là rất quan trọng. Trong bài này, chúng tôi đã mô tả các cách làm tốt nhất sau đây:

v Nhớ sẵn càng nhiều tệp tin càng tốt để có thể giảm bớt thời gian tải về và cải

thiện hiệu năng.

v Hãy sử dụng các chỉ thị điều khiển nhớ sẵn (cache-control) để xác định hành vi bộ nhớ sẵn càng nhiều càng tốt, nhất là đối với IE. Điều này làm giảm bớt sự không nhất quán giữa các trình duyệt khác nhau và là cách tốt nhất để cải thiện hiệu năng.

v Đừng sử dụng "no settings related with cache." (không có thiết lập nào về bộ

nhớ sẵn).

v Với các thiết lập mặc định, khi được mở mới, trình duyệt IE hầu như luôn luôn

gửi một yêu cầu đến phía máy chủ để lấy ra dữ liệu.

v Nếu một trang không nên đưa vào bộ nhớ sẵn, hãy sử dụng " no-cache, no- store" để chắc chắn rằng trang đó sẽ không được đưa vào bộ nhớ sẵn, nhất là khi dữ liệu đó liên quan đến an ninh hoặc thông tin nhạy cảm.

v Nếu không cần thiết, không sử dụng yêu cầu kiểu POST, vì nó không thể đưa

vào bộ nhớ sẵn được.

109

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

v Ứng dụng 2.0 nào không thể thiếu với bạn?

1.

del.icio.us là site bookmark hàng đầu, tôi đang dùng một plugin của Firefox để giúp bookmark các bài viết ưa thích nhanh hơn. Điều phiền toái duy nhất là cách tag theo từ, chứ không phải cụm từ làm cho danh mục bị phân mảnh và khó tìm được bài lưu trữ. Ngoài ra, nhiều trang web đã biến mất sau một thời gian.

2. Digg chủ yếu để theo dõi các tin nóng. Nhưng đa số là tin “made in

USA” nên nhiều khi khá vô bổ.

3.

Firefox: Khỏi cần nói, tôi dùng Firefox làm trình duyệt mặc định với hàng chục plugin. Đây chính ứng dụng mà tôi “couldn’t live without”. Tuy nhiên có lẽ do overuse trình duyệt này nên nó chiếm RAM kinh khủng. Disclosure: gần hơn 70% người truy cập vào blog này dùng Firefox.

4.

Flickr: Tôi không dùng ứng dụng này nhiều do ít có hứng thú chụp hình, chủ yếu để lưu trữ hình của gia đình.

5. Gmail: Sure, đây là ứng dụng mail cách mạng.

110

slide.tailieu.vn

Logo

10. Cải thiện hiệu năng của các ứng dụng Web

v Ứng dụng 2.0 nào không thể thiếu với bạn?

6. Google Reader: Tôi không khoái trình đọc RSS này lắm vì nó hơi

thô sơ. Tôi dùng FeedReady!

7. Netvibes: Tôi là fan của Netvibes, với hàng ngàn plugin đây là

trang chủ trên cả tuyệt vời.

8.

TechMeme: Trang web nên đọc hàng ngày cho dân sính công nghệ.

9.

Technorati: Tôi dùng nó chủ yếu để xem xếp hạng blog.

10. WordPress: Tất nhiên đây là ứng dụng không thể thiếu vì blog này làm trên WordPress. Nhiều plugin của WordPress rất có giá trị nhưng đôi khi phải mất khá nhiều thời gian mới dùng được.

11. YouTube: Quá chậm nếu xem từ Việt Nam. Tôi thích Clip.vn hơn.

12. Zoho: Tôi ít dùng Zoho vì nó hơi chậm so với Google Docs.

111

slide.tailieu.vn

Logo

CÂU HỎI ÔN TẬP

1.

Lập bảng so sánh tính năng giữa Web 1.0 và Web 2.0

2. Phân tích điểm khác nhau giữa web tĩnh (static) và web động

(dynamic)

3. Phân tích kiến trúc của web 1.0 và web 2.0 (client server &

webservices)

4. Bạn biết gì về dịch vụ Đánh dấu xã hội (social bookmarking)

cho ví dụ cụ thể

5. Phân tích công nghệ AJAX trong web 2.0 6. Phân tích tính năng kỹ thuật “Giữa hệ thống với hệ thống,

giữa ứng dụng với ứng dụng” của Web 2.0

7. Bạn biết gì về FaceBook cho ví dụ cụ thể

8.

Liệt kê các ứng dụng của Web 2.0. Cho ví dụ

112

slide.tailieu.vn

Logo

CÂU HỎI ÔN TẬP

1. Liệt kê các yếu tố Thiết kế tương tác. Phân tích và cho một ví dụ của một nguyên tắc mà bạn cho là quan trọng.

2. Phân tích nguyên tắc thiết kế hướng người dùng. 3. Phân tích 10 nguyên tắc thiết kế, mỗi nguyên tắc

cho 1 ví dụ

4. Prototype là gì? Có cần thiết phải làm Prototype

không? Vì sao? Cho ví dụ minh họa

5. Thiết kế tương tác là gì? Trình bày các nguyên tắc

113

thiết kế tương tác cho game, cho ví dụ cụ thể

slide.tailieu.vn

Logo

Hỏi & Đáp

Q & A

slide.tailieu.vn

Logo

Thank You !

slide.tailieu.vn