Ứng dụng công nghệ Web 2.0 (AJAX) vào xây dựng cổng thông tin điện tử

Với công nghệ của cổng thông tin điện tử, người ta có thể thực hiện các giao dịch trên mạng, tích hợp các ứng dụng trên Web vào cùng một khuôn hình, tạo ra khả năng đăng nhập một lần.. T

ĐAI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

-* -

BÙI QUANG PHÚC

ỨNG DỤNG CÔNG NGHỆ WEB 2.0 (AJAX) VÀO XÂY DỰNG CỔNG THÔNG TIN ĐIỆN TỬ

LUẬN VĂN THẠC SỸ

Hà Nội - 2008

ĐAI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

NGƯỜI HƯỚNG DẪN KHOA HỌC:

PGS TSKH Nguyễn Xuân Huy

Hà Nội - 2008

MỤC LỤC

BẢNG CÁC CHỮ VIẾT TẮT 8

MỞ ĐẦU 9

Chương I: Cổng thông tin điện tử và một số khái niệm liên quan 11

1.1 Khái niệm về Portal 11

1.2 Các đặc trưng cơ bản của Portal 13

1.2.1 Tập trung thông tin 13

1.2.2 Chức năng tìm kiếm 13

1.2.3 Các ứng dụng trực tuyến 14

1.2.4 Tuỳ biến cá nhân 14

1.2.5 Cộng đồng ảo 14

1.2.6 Mô hình bảo mật thống nhất 15

1.3 Phân biệt Portal với WebSite truyền thống 15

1.3.1 WebSite truyền thống 15

1.3.2 Portal 16

1.4 Phân loại Portal 17

1.4.1 Phân loại dựa trên cấu trúc nội dung thông tin 17

1.4.1.1 Vertical Portal (Portal theo chiều đứng) 17

1.4.1.2 Horizontal Portal (Portal theo chiều ngang) 18

1.4.2 Phân loại dựa trên mục đích cung cấp thông tin 18

1.4.2.1 Portal công cộng (Public Portal) 18

1.4.2.2 Portal doanh nghiệp 18

1.4.2.3 Portal thương mại 19

1.4.2.4 Portal cá nhân 19

1.5 Các kỹ thuật trong Portal 19

1.5.1 Portlet 19

1.5.1.1 Vòng đời của một Portlet 20

1.5.1.2 Giao diện lập trình của Portlet 21

1.5.2 Phân loại Portlet và các dịch vụ Web 21

1.6 Kết luận 25

Chương 2: Công nghệ Web 2.0 (AJAX) và một số ứng dụng 26

2.1 Tổng quan về Web 2.0 26

2.1.1 Tổng quan 26

2.1.2 Sự khác nhau giữa Web 1.0 và Web 2.0 27

2.1.3 Công nghệ 28

2.2 Công nghệ AJAX 31

2.2.1 Nguyên tắc hoạt động của Ajax 32

2.2.2 Tính bất đồng bộ trong công nghệ Ajax 33

2.2.3 Ưu điểm và nhược điểm của Ajax 35

2.2.3.1 Ưu điểm của Ajax 35

2.2.3.2 Nhược điểm của Ajax 35

2.2.4 Các kỹ thuật trong AJAX 36

2.2.4.1 DOM 36

a Kiến thức chung về DOM 36

b Các công nghệ trong DOM 37

c Làm việc với DOM bằng JavaScript 37

2.2.4.2 Cascading Style Sheet (CSS) 41

a Các ưu điểm của CSS trong thiết kế web 42

b Cú pháp & thuộc tính CSS Style 42

2.2.4.3 Đối tượng XMLHttpRequest 44

a Tạo đối tượng XMLHttpRequest 44

b Các phương thức và thuộc tính 45

c Sự tương tác giữa các đối tượng 47

d Các phương thức GET và POST 49

e Remote Scripting 49

f Sử dụng đối tượng XMLHttpRequest để gửi request 50

2.2.5 JavaScript 51

2.2.5.1 Nhúng JavaScript vào file HTML 52

a Sử dụng thẻ SCRIPT 52

b Sử dụng một file nguồn JavaScript 53

c Thẻ <NOScript> và </NOSCRIPT> 53

2.2.5.2 Kiểu dữ liệu trong JavaScript 54

2.2.5.3 Closure 54

2.2.5.4 Tính hướng đối tượng trong JavaScript 55

2.2.5.5 Kiểm soát lỗi 57

2.3 Kết luận 59

Chương 3: Ứng dụng công nghệ Web 2.0 (AJAX) vào xây dựng cổng thông tin điện tử trong cơ quan Bộ 60

3.1 Nhu cầu về việc quản lý thông tin công việc 60

3.2 Mục tiêu, yêu cầu của hệ thống 60

3.2.1 Mục tiêu: 60

3.2.2 Yêu cầu: 60

3.3 Các nghiệp vụ thực tế xảy ra trong quá trình quản lý thông tin về công việc 61

3.3.1 Các quy trình xử lý công việc trong thực tế 61

3.3.1.1 Quy trình giao việc 61

3.3.1.2 Quy trình nhận việc và xử lý 61

3.3.1.3 Quy trình báo cáo 62

3.3.2 Các thông tin cần quản lý về một công việc 62

3.3.3 Xác định đối tượng tham gia hệ thống 63

3.3.3.1 Xác định đối tượng tham gia: 63

3.3.3.2 Nguyên tắc quản lý 63

3.3.3.3 Trách nhiệm và quyền hạn của các đối tượng tham gia 63

3.4 Mô hình CSDL 63

3.4.1 Hệ thống quản lý thông tin về công việc 64

3.4.1.1 Các bảng danh mục 64

3.4.1.2 Các bảng chính 65

3.2.1.4 Mô hình quan hệ CSDL 68

3.4.2 Hệ thống quản lý lịch công tác 70

3.4.3 Hệ thống nhắc việc cá nhân 70

3.4.4 Hệ thống quản lý danh bạ điện thoại 71

3.5 Giao diện của hệ thống quản lý thông tin công việc 71

3.5.1 Giao diện chính của cổng thông tin về công việc 71

3.5.3 Giao diện chính của một hồ sơ công việc 73

3.5.4 Giao diện về việc cho ý kiến chỉ đạo về công việc 73

3.6 Một số đoạn chương trình mẫu 74

3.6.1 Kiểm tra quyền của người dùng khi truy nhập hệ thống 74

3.6.2 Xem danh sách công việc theo quyền 77

KẾT LUẬN 79

TÀI LIỆU THAM KHẢO 80

BẢNG CÁC CHỮ VIẾT TẮT

AJAX Asynchronous JavaScript and XML XML Extensible Markup Language

HTML HypeText Makeup Language

CSS Cascading Style Sheet

DOM Document Object Model

PDA Personal Digital Assistant

URL Universal Resource Locator

JSR Java Specification Requests

API Application Programming Interface J2EE Java 2 Platform, Enterprise Edition HTTP Hypertext Transfer Protocol

SOAP Simple Object Access Protocol REST Representation State Transfer

XSLT Extensible Stylesheet Language CSDL Cơ sở dữ liệu

W3C World Wide Web Consortium

MỞ ĐẦU

Với sự phát triển về mặt băng thông của Internet, các ứng dụng trên nền tảng Web ngày càng được phát triển và ứng dụng rộng rãi Các công việc dần dần được đưa lên mạng và phục vụ tốt các yêu cầu của thực tế Các mô hình về văn phòng điện tử, chính phủ điện tử được ra đời Đi cùng với nó là công nghệ về cổng thông tin điện tử cũng ra đời Với công nghệ của cổng thông tin điện tử, người ta có thể thực hiện các giao dịch trên mạng, tích hợp các ứng dụng trên Web vào cùng một khuôn hình, tạo ra khả năng đăng nhập một lần Công nghệ Web 2.0 là một công nghệ mới ra đời (2005) Web 2.0 là thế hệ thứ hai của các dịch vụ đang tồn tại trên nền World Wide Web, nó cho phép mọi người có thể cộng tác hay chia sẻ các thông tin trực tuyến với nhau Web 2.0 đưa người sử dụng tới gần hơn các ứng dụng chạy trên Desktop Trong đó AJAX (Asynchronous JavaScript and XML) là công nghệ đóng vai trò nòng cốt AJAX 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ết, thay vì phải tải lại toàn bộ trang web AJAX không phải một công nghệ đơn lẻ 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, XMLHttpRequest trao đổi dữ liệu không đồng

bộ với máy chủ web, XML là định dạng chủ yếu cho dữ liệu truyền

Hiện nay việc ứng dụng công nghệ Web 2.0 (AJAX) vào xây dựng cổng thông tin điện tử vẫn còn là một lĩnh vực khá mới mẻ tại Việt Nam Trên thế giới đã có một số trang Web ứng dụng tốt công nghệ này vào các lĩnh vực

- Http://maps.google.com/: cho phép tra cứu bản đồ của các nơi trên thế giới

Việc áp dụng thành công công nghệ Web 2.0 (AJAX) vào cổng thông tin điện tử sẽ giúp cho việc đưa các công việc lên trên mạng dễ dàng hơn, các giao dịch trên mạng được thực hiện một cách trơn tru và hiệu quả, …

Xuất phát từ nhu cầu thực tế tại đơn vị công tác, tôi hướng nghiên cứu của mình vào việc xây dựng một hệ thống quản lý thông tin công việc Hệ thống giúp tất cả cán bộ, nhân viên trong đơn vị quản lý tốt các công việc của

mình; lãnh đạo dễ dàng theo dõi, quản lý, tránh trường hợp quên việc Với lợi thế của công nghệ Web 2.0 (AJAX) và nhu cầu áp dụng rộng rãi của hệ thống trong công việc, các thao tác của người dùng trên hệ thống hết sức thuận lợi, đáp ứng được các yêu cầu đặt ra

* Nội dung của đề tài được kết cấu trong 03 chương:

Chương 1: Cổng thông tin điện tử và một số khái niệm liên quan

Chương này đề cập đến các nội dung: Khái niệm về Portal, các đặc trưng cơ bản của Portal, phân biệt Portal với WebSite truyền thống, phân loại Portal, các kỹ thuật bên trong Portal

Chương 2: Công nghệ Web 2.0 (AJAX) và một số ứng dụng

Chương này bao gồm 02 phần chính: Tổng quan về Web 2.0 và Công nghệ AJAX Trong mỗi phần có đề cập đến các ưu điểm và nhược điểm, các công nghệ cụ thể và tương lai ứng dụng của từng công nghệ

Chương 3: Ứng dụng công nghệ Web 2.0 (AJAX) vào xây dựng cổng thông tin điện tử trong cơ quan Bộ

Chương này đề cập đến việc xây dựng một cổng thông tin về luồng công việc Trong cổng thông tin này có các nội dung: Quản lý công việc, xem lịch công tác, nhắc việc cá nhân, danh bạ điện thoại Mỗi người dùng tùy theo quyền của mình khi đăng nhập hệ thống sẽ được tiếp cận ở các mức thông tin khác nhau và có thể tùy biến giao diện của mình Hệ thống này đang được áp dụng tại một cơ quan cấp Bộ và được đánh giá cao

Cuối cùng là kết luận và hướng phát triển của đề tài

Chương I: CỔNG THÔNG TIN ĐIỆN TỬ VÀ MỘT SỐ

KHÁI NIỆM LIÊN QUAN

Trong cuộc sống hiện nay, WebSite ngày càng chiếm một vai trò quan trọng Các công ty, tổ chức, thậm chí cả các cá nhân sử dụng WebSite để quảng bá thông tin và thương hiệu của mình Người sử dụng truy cập vào các WebSite để lấy các thông tin cần thiết Với sự phát triển mạnh mẽ của công nghệ, các thế hệ WebSite lần lượt được ra đời và liên tục được cải tiến Các công nghệ mới giúp cho WebSite hoạt động nhanh hơn, hiệu quả hơn Khái niệm WebSite truyền thống dần dần được chuyển thành WebSite thông minh Kết hợp với một số công nghệ khác như tìm kiếm, phân loại thông tin khái niệm Cổng thông tin điện tử - Portal đã được hình thành

Trong bối cảnh hội nhập, công cuộc cải cách hành chính được đẩy mạnh, các mô hình chính phủ điện tử lần lượt được ra đời, thương mại điện

tử trở thành nhân tố dẫn đến sự thành công cho các doanh nghiệp Nhiều quốc gia trên thế giới đã xây dựng thành công mô hình chính phủ điện tử, mà trong đó mọi người dân đều có thể thực hiện các quyền và nghĩa vụ của mình

Ở Việt Nam, nhiều địa phương rất quan tâm tới việc ứng dụng công nghệ và

đã cho ra đời cổng thông tin điện tử của riêng mình như: Hà Nội, Thành phố

Hồ Chí Minh, Quảng Nam,… để phục vụ đắc lực công tác quản lý và điều hành các hoạt động kinh tế, xã hội

1.1 Khái niệm về Portal

Hiện nay có nhiều cách hiểu và định nghĩa khác nhau về Portal Mỗi một tổ chức, một công ty khi đưa ra các sản phẩm của mình về Portal đều cố gắng đưa ra một định nghĩa theo cách nhìn riêng của mình, vì vậy chưa có một định nghĩa nào được coi là chuẩn xác cho Portal

Theo định nghĩa của IBM [2, 9]: “Portal là giao diện dựa trên nền web, được tích hợp và cá nhân hóa nhằm cung cấp cho người dùng một khối lượng lớn các thông tin, tri thức và các dịch vụ thông qua một điểm truy cập duy nhất trong mọi thời điểm và vị trí với sự hỗ trợ của các thiết bị có khả năng kết nối Web”

Khái niệm về Portal do Sun đưa ra [2, 11]: “Portal là một ứng dụng nền tảng Web cung cấp các tính năng: cá nhân hóa, đăng nhập một lần, tích hợp thông tin từ nhiều nguồn khác nhau và đưa vào tầng trình diễn của hệ thống thông tin Tích hợp thông tin có nghĩa là hợp nhất nội dung từ nhiều nguồn thông tin khác nhau vào một trang Web Tính năng cá nhân hóa tinh vi được

xây dựng trong Portal nhằm cung cấp khả năng cá nhân hóa nội dung cho người dùng Các trang Portal có thể có nhiều Portlet khác nhau tạo nội dung cho những người dùng khác nhau”

Portal, tên đầy đủ là Web Portal, là một hệ thống hoạt động trên Web, định danh và xác thực người dùng đăng nhập, từ đó sẽ cung cấp một giao diện web để người dùng dễ dàng truy cập, khai thác thông tin và dịch vụ cũng như thao tác, tuỳ biến các công việc tác nghiệp của mình một cách nhanh chóng và đơn giản Portal có các tính năng giúp người quản trị thu thập, quản lý nhiều nguồn thông tin khác nhau, từ đó phân phối chúng dưới dạng các dịch vụ cho từng người dùng khác nhau tuỳ thuộc vào nhóm quyền, vào nhu cầu cũng như mục đích của người dùng đó Portal thực hiện việc này hết sức linh động, từ những công việc như tìm xem và đặt mua sách trong một kho hàng trực tuyến, xem và thay đổi thông tin về sinh viên và giáo viên trên các ứng dụng quản lý giảng dạy, đến việc đăng và chia sẻ các thông tin, tài nguyên, bài viết trên các diễn dàn hay cung cấp việc truy cập thống nhất và thuận lợi đến các thông tin nội bộ trong một website của công ty Portal như một cổng vào vạn năng cho người dùng tìm kiếm thông tin và tác nghiệp một cách thuận lợi và dễ dàng

Hình 1.1: Hình ảnh minh họa về một Portal

Hình 1.2: Một ví dụ về Portal

1.2 Các đặc trưng cơ bản của Portal

1.2.1 Tập trung thông tin

Thông tin được tập hợp từ nhiều nguồn khác nhau vào trong một khung phù hợp và nhất quán Với đặc trưng này, người sử dụng có thể thu thập và xử

lý thông tin từ nhiều nguồn, hoặc có thể sử dụng các ứng dụng để khai thác kho thông tin chung Các nguồn thông tin được tích hợp vào trong Portal có thể là: Thư điện tử, tin tức, tài liệu, báo cáo, tệp âm thanh, tệp Video,… Tính năng này làm nâng cao hiệu quả làm việc của người sử dụng

1.2.2 Chức năng tìm kiếm

Đây là một trong những chức năng cơ bản cần phải có trong Portal Việc tìm kiếm được thực hiện đối với tất cả các loại tài liệu được quản lý trong Portal Người sử dụng mô tả thông tin mình cần tìm kiếm dưới dạng các

từ khoá hoặc các tiêu chí tìm kiếm Máy tìm kiếm sẽ thực hiện tìm và trả kết quả về phía người dùng Hiệu quả của một máy tìm kiếm được thể hiện ở hai khía cạnh: Độ chính xác và tính đúng đắn Độ chính xác là phần trăm của các tài liệu tìm thấy trên tổng số các tài liệu sẵn có Tính đúng đắn là phần trăm của các tài liệu hợp với nội dung tìm kiếm trên tổng số tài liệu trả về Một trong những nhân tố ảnh hưởng đến việc tìm kiếm là thời gian tìm Thời gian tìm phụ thuộc vào phạm vi tìm kiếm và độ phức tạp của thuật toán tìm kiếm

1.2.3 Các ứng dụng trực tuyến

Các ứng dụng trực tuyến là những chức năng cụ thể trong một Portal

Sự phong phú về các ứng dụng trực tuyến thể hiện sự phong phú về mặt chức năng của một Portal Tùy theo mục đích và ý nghĩa của Portal mà có thể lựa chọn và xây dựng các ứng dụng trực tuyến phù hợp Nhìn chung nó là các ứng dụng trực tuyến cần thiết và phổ biến nhất hiện nay, phục vụ công tác văn phòng, hoặc các ứng dụng trực tuyến phục vụ các công tác cụ thể

Một số loại ứng dụng trực tuyến điển hình trong Portal:

- Thư điện tử

- Lịch làm việc cá nhân

- Hội thoại trực tuyến

- Một số ứng dụng trực tuyến khác

1.2.4 Tuỳ biến cá nhân

Đây làm một đặc trưng rất quan trọng của Portal, nó giúp người dùng có thể tùy biến giao diện cá nhân của mình theo đúng sở thích Đặc trưng này giống với khái niệm người dùng trong hệ điều hành Windows Tùy biến cá nhân giúp người dùng hứng thú với công việc hơn, không bị nhàm chán vì cứ phải tuân theo các quy chuẩn chung đã được thiết lập trước

Trên cơ sở các thông tin của từng người dùng, nhà cung cấp có thể tạo

ra các dịch vụ mang tính chất hướng cá nhân nhiều hơn, phù hợp với yêu cầu

và sở thích của từng người dùng riêng biệt

Tập hợp các thông tin về người dùng là một kho thông tin quý giá để nhà cung cấp có chiến lược chăm sóc khách hàng, định hướng cung cấp các dịch vụ cần thiết, loại bỏ các dịch vụ không thiết thực

1.2.5 Cộng đồng ảo

Cộng đồng ảo là một “một địa điểm ảo” trên Internet mà các cá nhân, các doanh nghiệp có thể “tập hợp” để giúp đỡ, hợp tác với nhau trong các hoạt động thương mại Nói một cách khác “cộng đồng ảo” mang lại cơ hội hợp tác cho các cá nhân, tổ chức doanh nghiệp mà ranh giới địa lý không còn

có ý nghĩa Một số ví dụ về cộng đồng ảo:

- Hội thoại trực tuyến – Online chat: Thông qua dịch vụ này người ta có thể triển khai các hội nghị mà không cần phải tập trung toàn bộ cán bộ công nhân viên ở các địa phương trong phạm vi cả nước về một địa điểm cụ thể nào đó

- Hỗ trợ trực tuyến - Online support : Tại đây khách hàng có thể nhận được trực tiếp các hỗ trợ, tư vấn của các nhà sản xuất về sản phẩm mà khách hàng đã lựa chọn

1.2.6 Mô hình bảo mật thống nhất

Trong Portal, mỗi người dùng có một tài khoản riêng Tài khoản này được thiết lập dựa trên khái niệm quyền Mỗi tài khoản sẽ được gán cho một

số quyền nào đấy để truy cập hệ thống Mô hình bảo mật này không phải là

mô hình đăng nhập một lần (Single Sign On), mà chỉ là mô hình xác thực quyền

1.3 Phân biệt Portal với WebSite truyền thống

1.3.1 WebSite truyền thống

Website đã và đang đóng góp rất lớn vào việc phổ cập thông tin, như giới thiệu tin tức, các cơ sở dữ liệu, và một số chương trình ứng dụng trên mạng Website đã làm thay đổi cả thế giới từ khi xuất hiện vào đầu những năm 90 của thế kỷ trước Ngày nay mọi giao tiếp thông qua website đã trở thành phổ biến Dưới đây là một số đặc trưng của các WebSite truyền thống:

- Người dùng đã và đang phải chấp nhận với “sự quá tải thông tin” có nghĩa là người dùng thường phải duyệt qua rất nhiều các website khác nhau, phải xử lý một khối lượng khổng lồ các thông tin để tìm ra thông tin mà mình cần Website luôn chỉ là điểm xuất phát trong lộ trình mà người dùng đi tìm thông tin, và được dẫn trên mạng qua các liên kết, bằng cách nhấp chuột vào một liên kết (tức là URL link) để đi tiếp đến một nơi cung cấp thông tin khác

- Người dùng phải chấp nhận thực tế là các thông tin thường đứng độc lập trên các website khác nhau, không thể phân loại được một cách mềm dẻo linh động, dẫn đến rất khó chia sẻ thông tin cho nhau Lý do của vấn đề trên là cách trình diễn thông tin (format), các chuẩn mực cách thức truyền số liệu giữa các phần mềm ứng dụng trên các website thường là rất khác nhau Ngay

cả trên cùng một website, các ứng dụng (hay dịch vụ) cũng độc lập, nói theo ngôn ngữ kỹ thuật mỗi chương trình có một danh sách người dùng và các luật

lệ quản lý riêng, có giao diện riêng, có cách kết nối để sử dụng CSDL khác nhau, v.v

- Việc quản lý, bảo trì và phát triển các website thường gặp nhiều khó khăn do sự tăng trưởng đến chóng mặt của thông tin trên các website

- Khả năng tích hợp các thông tin, dịch vụ từ nhiều nơi vào một website

là rất khó khăn, thậm chí không thể làm được về mặt nguyên tắc công nghệ

- Không tạo được quan hệ, người dùng không gắn bó với chủ nhân của website (một trong những nguyên nhân là do không có tính cá nhân hóa)

- Thích hợp cho phổ biến thông tin hơn là cung cấp môi trường cộng tác cho người dùng

- Qui mô dịch vụ nhỏ, không bảo toàn đầu tư Khi yêu cầu thay đổi về nội dung thông tin, loại hình dịch vụ, v.v thường phải xây dựng lại website mới Không có khả năng cung cấp một nền tảng để từ đó có thể luôn luôn phát triển và mở rộng

1.3.2 Portal

Portal là một bước tiến hóa của website truyền thống Nó ra đời để giải quyết những vấn đề mà website truyền thống gặp phải:

- Portal có thể được gọi là "siêu website“, đối với người dùng vẫn chỉ là

sử dụng trang web thông qua trình duyệt (tức là web browser), nhưng đằng sau đó là sự thay đổi thuật ngữ và quan niệm mới về triết lý “phục vụ” thay cho cách hiểu “tuyên truyền” thông qua website như trước đây

- Là điểm đích qui tụ hầu hết các thông tin và dịch vụ cho người sử dụng cần, là điểm đích đến thực sự Thông tin và dịch vụ được phân loại nhằm thuận tiện cho tìm kiếm và hạn chế vùi lấp các thông tin

- Bảo toàn đầu tư lâu dài

+ Có nền tảng công nghệ đảm bảo: do công nghệ Internet đã phát triển rất cao so với thời kỳ xuất hiện World Wide Web vào đầu những năm 90 của thế kỷ trước

+ Những công nghệ tạo nên thời đại Portal đều hỗ trợ tính mở và kế thừa mạnh, sao cho việc mở rộng các qui mô phục vụ bằng các phần mềm ứng dụng mới được “lắp ráp” vào Portal đang có, mà không phải hủy bỏ hoặc sửa chữa lớn như những website trước đây Đặc tính này làm cho portal “cởi mở” hơn với các ứng dụng của nhiều nhà cung cấp dịch vụ phần mềm khác nhau, thậm chí làm tăng tính độc lập của người chủ quản portal với người cung cấp giải pháp portal ban đầu, sau khi đã làm chủ công nghệ quản lý và phát triển ứng dụng trên portal

- Môi trường chủ động dùng cho việc tích hợp ứng dụng

- Nếu như khái niệm mạng Internet và mạng Intranet, tương ứng là mạng toàn cầu và mạng nội bộ, thì portal chính là Extranet do kiến trúc công nghệ qui định, nghĩa là nó bao gồm cả chức năng một “site” trên Internet và một Intranet cho nội bộ Một portal đương nhiên có 2 mặt phục vụ là “phía ngoài” hướng đến Internet, và “phía trong” hướng đến phục vụ người dùng nội bộ Phía ngoài, portal cung cấp một cổng giao dịch thân thiện, đủ các chức năng cho người dùng, trong đó có chức năng cá nhân hóa Phía trong, portal cung cấp một hạ tầng điện tử, nhằm tạo quyền chủ động trong việc cung cấp, tích hợp thông tin và liên kết với các hệ thống, các dịch vụ thông tin khác Người dùng nội bộ hay người dùng qua mạng Internet đều phải được quản lý,

họ có các vai trò sử dụng khác nhau, nhưng có môi trường giống nhau qua trình duyệt web Tuy khái niệm “phía trong” và “phía ngoài” là rất tương đối, chúng cũng cho thấy các mảng ứng dụng tương ứng với các nhu cầu quản lý hành chính và dịch vụ công nói chung Đối với các chức năng “phía trong”, poral làm cho các giao dịch quản lý hành chính mang tính chất nội bộ sẽ không đi vòng ra Internet rồi mới trở lại bàn làm việc của một đồng nghiệp trong cùng một phòng, hoặc giữa các Vụ bên trong trụ sở của một Bộ Trong khi đó, một công chức cũng có thể tra cứu hoặc vận hành một dịch vụ qua Internet tại bất kỳ lúc nào và tại bất cứ đâu Đối với các chức năng “phía ngoài”, người duyệt web có thể tra cứu và sử dụng dịch vụ theo quyền hạn được cấp Do vậy Portal rõ ràng là mô hình phù hợp cho các hệ thống thông tin phục vụ cả quản lý điều hành và dịch vụ công Khi so sánh với website thông thường, dù được xây dựng bằng chương trình ứng dụng web, website chủ yếu làm tốt về các chức năng “phía ngoài”, mà không giải quyết được các chức năng “phía trong”, nhất là khi các giao tiếp bên trong tăng lên qua việc tích hợp các ứng dụng mới

- Cung cấp môi trường cộng tác (collaborative) thông qua việc quản lý

và khai thác thống nhất toàn diện các dịch vụ cơ bản như: Forum, Mail, Calendar, Task Management, Report Systems, Conferences, Discussion Groups, News Groups, v.v Các dịch vụ này là một phần của kho tài nguyên dịch vụ trên portal để người dùng lựa chọn Việc quản lý người dùng được thực hiện một lần và thống nhất trên tất cả các ứng dụng dịch vụ của portal

1.4 Phân loại Portal

1.4.1 Phân loại dựa trên cấu trúc nội dung thông tin [2]

1.4.1.1 Vertical Portal (Portal theo chiều đứng)

Một Vertical Portal (hay còn được gọi là Vortal) là một WebSite mà cung cấp thông tin liên quan đến một lĩnh vực riêng biệt như chăm sóc sức khoẻ, bảo hiểm, ô tô,… (Công nghiệp theo chiều sâu (Vertical Portal) được sử dụng để chỉ đến các sản phẩm và dịch vụ trong một phạm vi hẹp, trong khi đó công nghiệp theo chiều rộng (Horizontal Industry) được sử dụng để phản ánh các sản phẩm và dịch vụ trong một phạm vi rộng lớn

Theo hướng chuyên nghiệp hoá, hầu hết các ngành công nghiệp đều hướng theo sự chuyên sâu) Các Vertical Portal có thể được xem như là cộng đồng các doanh nghiệp, các Vertical portlal có thể lôi cuốn cả những người kinh doanh nhỏ lẻ tại nhà bằng việc cung cấp các ý tưởng và những thông tin

về sản phẩm liên quan đến việc thiết lập và bảo trì sản phẩm tại nhà

Đối với các các Bộ, ban ngành, Vertical Portal hướng đến việc cung cấp các thông tin và dịch vụ theo các chuyên ngành riêng, mà tại đó người dân có thể tìm hiểu, tham gia các giao dịch hành chính, đóng góp các ý kiến và kiểm soát công việc của mình

1.4.1.2 Horizontal Portal (Portal theo chiều ngang)

Portal theo chiều ngang cung cấp các thông tin và dịch vụ đa dạng, rộng khắp, kết nối nhiều nguồn tài nguyên khác nhau, ví dụ như các Portal của một địa phương, cung cấp mọi thông tin và dịch vụ trên địa bàn như tin tức, thông tin giới thiệu, thông tin hướng dẫn, dịch vụ trực tuyến,…

Portal loại này cũng có thể là các MegaPortal, nhằm vào các đối tượng người dùng khác nhau trên Internet, có khả năng đáp ứng nhiều dịch vụ thông thường, tạo khả năng tích hợp các Portal theo chiều đứng

1.4.2 Phân loại dựa trên mục đích cung cấp thông tin [2]

1.4.2.1 Portal công cộng (Public Portal)

Chia thành hai loại chính:

- Các Portal công cộng nói chung hoặc “siêu” Portal, nhắm đến toàn bộ những người có khả năng sử dụng Internet, ví dụ như Yahoo, Google, Altavista, AOL, MSN, Exicte,… Đặc trưng cơ bản của các Portal này là cung cấp mọi dịch vụ thông thường mà người dùng Internet có nhu cầu như: Thư điện tử, chat, lịch cá nhân,…

- Portal công nghiệp (có mô hình Portal theo chiều dọc): là cổng thông tin tập trung vào một lượng người dùng có quan tâm đặc biệt đến một lĩnh vực nhất định nào đó như hàng tiêu dùng, máy tính, bảo hiểm, ngân hàng,… Đặc trưng của cổng ngành dọc là cung cấp các thông tin và dịch vụ cụ thể theo các yêu cầu của một ngành hoặc một lĩnh vực nào đó

1.4.2.2 Portal doanh nghiệp

Portal - EIP (Corporate/Enterprise (Intranet) Portal – EIP) là các Portal được thiết kế dành cho các doanh nghiệp mong muốn xây dựng được mối quan hệ chặt chẽ với cả nhân viên, khách hàng và đối tác của doanh nghiệp Quan hệ ở đây không chỉ gói gọn trong quan hệ hai chiều giữa hai bên mà còn bao gồm cả tiến trình xử lý và các hoạt động quản lý của doanh nghiệp EIP cũng hợp nhất các quá trình, các tiến trình công việc, sự cộng tác, quản lý nội dung, sưu tập và lưu trữ dữ liệu, các ứng dụng của công ty và các giải pháp doanh nghiệp thông minh EIP cho phép nhân viên có thể truy cập vào nhiều Portal khác nhau như Portal thương mại điện tử (Ebusiness Portal), Portal cá nhân (Personal Portal) và Portal công cộng (Public Portal) Sự kết hợp giữa

các Portal độc lập hoặc nhóm thành một giải pháp Portal cố kết (Cohensive Portal Solution) được gọi là Federated Portal EIP cũng cho phép truy cập đến các nội dung được cung cấp từ bên ngoài bởi những người không phải là nhân viên của công ty

1.4.2.3 Portal thương mại

Portal thương mại mở rộng quan hệ của doanh nghiệp tới khách hàng cũng như các đối tác và nhà cung cấp Cổng thương mại điện tử thiết lập các chợ ảo cung cấp các dịch vụ thương mại liên quan đến cộng đồng người mua, người bán và cả người tạo thị trường trên mạng Nó cho phép liên kết trực tuyến người mua với người bán bằng việc cung cấp các tin kinh doanh, đặc biệt Service Port của Portera vừa là Portal ứng dụng cho ngành công nghiệp dịch vụ, Saleforce.com của SAP quản lý các quá trình bán hàng và báo cáo cho một đội bán hàng phân tán MySap.com của SAP và oraclesmallbusiness.com của Oracle là các ví dụ của các hệ thống kinh doanh hoàn chỉnh sử dụng Portal

1.4.2.4 Portal cá nhân

Đây vẫn là một xu hướng mới ở Việt Nam và trên thế giới

- Portal di động (Mobility Portals): các Portal này phục vụ việc truy cập web thông qua các thiết bị điện thoại di động, PDA không dây, máy nhắn tin,… Loại Portal này đang ngày càng trở lên phổ biến và rất quan trọng cho khách hàng cũng như nhân viên để có thể lấy được các thông tin về dịch vụ, sản phẩm, giá cả; tình trạng đặt hàng, thưởng phạt, vận chuyển; những thông tin lập kế hoạch và cài đặt

- Portal cho đồ dùng: Những Portal này được truy cập thông qua thiết bị

TV (WebTV), thiết bị gắn trên ô tô (Onstart),…

1.5 Các kỹ thuật trong Portal

1.5.1 Portlet

Một Portal gồm nhiều Portal Page, với một giao diện thống nhất, kết hợp các nguồn dữ liệu khác nhau và hiển thị trên trình duyệt Các Portal Page được điều hướng thông qua quá trình xác thực người dùng, không bị giới hạn

gì trong suốt một phiên làm việc và được cấu thành từ các module nhỏ hơn có

dữ liệu, vòng đời độc lập, đó chính là các Portlet Để có thể tích hợp dễ dàng các module với nhau cũng như để phân tách giao diện hiển thị với phần xử lý đằng sau, JSR 168 sử dụng mô hình Portlet - Porlet Container [11]

Một Portlet Container chứa các Portlet và quản lý vòng đời của chúng Portlet Container cũng cung cấp cơ chế lưu trữ bền vững cho các tham chiếu

đến Portlet Một Portlet Container và các Portlet chứa trong nó có thể được xây dựng gắn liền với nhau như một thành phần thống nhất hoặc được coi như hai thành phần riêng biệt trong một ứng dụng Web thông thường

Các Portlet bao gồm nhiều mức, cho phép người sử dụng giao tiếp với

nó để thực hiện công việc trong môi trường Portal

Hình 1.3: Hình ảnh minh họa về Portal - page

Yêu cầu của người dùng được gửi đến Portal, truy nhập vào một trang Web, thực chất là một Portal Page, để sử dụng dịch vụ của một Portlet nằm trong trang này Portal sẽ gọi đến các Portlet Container chứa Portlet cần dùng thông qua giao diện Container Invoke API Sau đó Portlet Container sẽ yêu cầu Portlet thực thi thông qua giao diện Portlet API Giao diện Container Provider Service Provider Interface (SPI) cho phép Portlet Container hiển thị các dữ liệu trả về từ một Portlet

1.5.1.1 Vòng đời của một Portlet

JSR 168 quy định vòng đời của một Portlet bao gồm ba giai đoạn [11]:

- Giai đoạn khởi tạo : khởi tạo một Portlet và chuyển sang trạng thái

- Thực thi dịch vụ được yêu cầu:

Nếu người dùng nhấn chuột vào một liên kết trên một Portlet, dịch vụ (hoạt động) tương ứng được kích hoạt và được thực thi Pha này phải kết thúc trước khi việc hiển thị kết quả của Portal Page bắt đầu Trong pha này, Portlet

có thể thay đổi trạng thái của mình

- Hiển thị kết quả trả về:

Thông qua Portal Page, Portlet sẽ hiển thị kết quả, trả về máy người dùng Pha này không làm thay đổi trạng thái của Portlet Nó đơn giản là gọi đến hành động refresh của trang chứa Quá trình hiển thị kết quả của một Portlet là song song, độc lập với quá trình hiển thị kết quả của các Portlet khác

1.5.1.2 Giao diện lập trình của Portlet

Mọi Portlet đều phải cài đặt (implement) giao diện, hoặc thừa kế một lớp đã cài đặt giao diện này Giao diện Portlet bao gồm các phương thức sau :

- init(PortletConfig config):

Phương thức khởi tạo Portlet, Phương thức này được gọi một lần duy nhất sau khi khai báo và lấy về thể hiện của một đối tượng Portlet Trong phương thức này các đoạn mã có thể được cài đặt để tạo ra các nguồn tài nguyên, lấy về các kết nối dữ liệu mà Portlet này sẽ sử dụng

- processAction(ActionRequest request, ActionResponse response):

Phương thức này dùng để cài đặt các đoạn mã thực thi việc xử lý dịch

vụ mỗi khi người dùng yêu cầu thông qua việc họ kích hoạt một thành phần giao diện như việc click vào một nút bấm, click vào một liên kết, lựa chọn một mục trong một combobox Chỉ một hành động tương tác giao diện của người dùng được kích hoạt trong một thời điểm Trong quá trình thực thi đoạn

mã, Portlet có thể thay đổi trạng thái của nó, thay đổi phương thức lưu trữ dữ liệu cũng như thiết lập các tham số để sẵn sàng hiển thị kết quả

- render(RenderRequest request, RenderResponse response):

Phương thức này thực hiện quá trình hiển thị kết quả thông qua việc sinh ra tài liệu HTML đơn thuần với các định dạng hiển thị phù hợp với giao diện chung của trang

- destroy():

Phương thức này chỉ ra rằng nhiệm vụ của Portlet đó đã hoàn thành và kết thúc vòng đời của Portlet đó Các đoạn mã được cài đặt trong phương thức destroy thực thi việc giải phóng các tài nguyên mà Portlet đã sử dụng cũng như cập nhật các dữ liệu cần thiết vào bộ phận lưu trữ để đảm bảo tính bền vững của Portal

1.5.2 Phân loại Portlet và các dịch vụ Web [11]

Giống như dịch vụ web hướng dữ liệu, các Portlet dựa trên kiến trúc hướng dịch vụ, nó cho phép các công ty sử dụng lại các thành phần của phần mềm để nhanh chóng xây dựng các ứng dụng trong các Portal mới

Không giống như các dịch vụ web hướng dữ liệu, các Portlet tóm lược các dịch vụ tác nghiệp ở mức cao bao gồm các tương tác người dùng, các lưu

đồ và các trình diễn tùy biến

- Portlet địa phương

Các Portlet địa phương là các Portlet thực thi ở bên trong một máy chủ Portal Khi một máy chủ Portal sinh ra một trang và những thứ cần thiết trong một đoạn trang, nó gọi Code Portlet và sử dụng giao diện tiền định nghĩa

- Portlet từ xa

Portlet từ xa là các Portlet thực thi bên ngoài một máy chủ Portal, hoặc bên trong một máy chủ của một tổ chức hoặc ở một vị trí từ xa Khi một Portal cần đoạn trang, nó sẽ gọi Portlet từ xa thông qua SOAP

Giao thức WSRP cung cấp định nghĩa một chuẩn giao diện SOAP cho các Portlet từ xa Vấn đề quan trọng của Portlet từ xa là tách các Portlet ra khỏi tổ chức và môi trường Portal Để thực hiện việc này có thể :

· Sử dụng các Portlet thành phần thứ ba để tạo thành các Portal mới

· Phân bổ trách nhiệm tạo và bảo trì các chức năng ứng dụng giữa các đơn vị khác nhau

· Sử dụng các công cụ phát triển, các phương thức và các kiến trúc khác nhau để tạo ra các chức năng Portlet

· Đạt được thông qua môi trường phát triển trong vấn đề tải, thực thi, quản lý và bảo mật

- Portlet Container

Các Framework Portal cung cấp môi trường thực thi thời gian thực cho các Portlet được biết đến như là một Portlet Container Sự tổng hợp nội dung không phải là chức năng liên kết với Portlet Container nhưng nó lại liên kết với Portal hoặc Portal server

Hình 1.4: Các thành phần bên trongPortlet

- Portal service

Portlet dựa vào container cung cấp hạ tầng cơ sở cần thiết để đáp ứng cho một môi trường Portal Cơ sở hạ tầng Portal cung cấp tập hợp các dịch vụ cốt lõi được yêu cầu bởi các Portlet

+ Dịch vụ cá nhân hóa tạo khả năng cho các Portlet sử dụng các công cụ

và các thông tin profile để sửa đổi nội dung nhằm mục đích thỏa mãn người dùng

+ Dịch vụ thông báo sự kiện tạo khả năng cho các Portlet đáp ứng nhiều yêu cầu mà không ảnh hưởng đến môi trường của Portal

+ Dịch vụ liên lạc cung cấp sự giao tiếp từ Portlet này tới Portlet khác + Quản trị nội dung đáp ứng kết nối dễ dàng tới tài nguyên ứng dụng hay nội dung ảo nào đó

+ Các dịch vụ tìm kiếm đáp ứng việc tìm kiếm đa tiêu chí trên nhiều nguồn tài nguyên dữ liệu

+ Dịch vụ hợp tác tạo khả năng cho người dùng liên lạc và tham dự vào các cộng đồng người sử dụng cùng quan tâm đến một lĩnh vực

+ Dịch vụ quản trị người dùng và nhóm người dùng cho phép người sử dụng gia nhập vào một Portal, tự quản lý tài khoản và các thông tin mà mình

ưa thích

+ Dịch vụ biến đổi trang đáp ứng rất nhiều thiết bị client

+ Các dịch vụ khác cung cấp hoặc quản lý

· Profile người dùng và các kiểu dữ liệu liên tục

· Dịch vụ điều khiển truy cập và bảo mật bao gồm chứng thực và cấp quyền người dùng

- Portal Server

Portal server là một máy chủ ứng dụng chuyên biệt cung cấp logic tác nghiệp cho một ứng dụng Portal, đặc biệt được xây dựng trên nền máy chủ ứng dụng J2EE, Portal cung cấp sự phát triển và cơ sở hạ tầng thời gian thực

cho Portal Một Portal Server thường làm việc liên kết với một Web Server để

xử lý yêu cầu của client

Portlet có thể được xem như là một cách mở rộng chức năng của Portal Server

Hình 1.5:Portal Server kết hợp với Application Server để hỗ trợ các ứng

dụng trong Portal

Máy chủ Portal kết hợp với một máy chủ ứng dụng để hỗ trợ ứng dụng Portal

Kịch bản xử lý của một Portal được thể hiện như sau:

+ Thiết bị client (sử dụng Web Browser hoặc PDA) gửi một yêu cầu HTTP cho trang Portal tới máy chủ Web

+ Máy chủ Web nhận ra yêu cầu và gửi tiếp yêu cầu đó tới máy chủ Portal

+ Máy chủ Portal sẽ quyết định nếu yêu cầu này chứa một hành động hướng mục đích tới một Portlet trên trang Portal Portal sẽ yêu cầu Portlet container gọi Portlet xử lý hành động này

+ Portlet container yêu cầu mỗi Portlet liên kết đến trang Portal gửi lại một đoạn trang (fragment) với nội dung được yêu cầu

+ Các Fragment này được quay trở về máy chủ Portal, nơi đó chúng được tổng hợp để tạo nên một trang Portal

+ Trang Portal được gửi trở lại thiết bị client để hiển thị

1.6 Kết luận.

Portal là một sự phát triển mạnh mẽ về mặt công nghệ cho các ứng dụng Web Từ những WebSite thông thường với chức năng hiển thị thông tin, Portal đã cho phép người dùng tương tác nhiều hơn Trước đây việc tổng hợp

và đưa các giao dịch lên Web là rất khó khăn, nhưng với sự phát triển của Portal, các giao dịch được lần lượt đưa lên mạng, người dùng có thể lựa chọn các thông tin mà mình quan tâm một cách dễ dàng mà không phải mất nhiều thời gian tìm kiếm và tập hợp Khái niệm “cộng đồng ảo” ra đời chính là sự thể hiện một sự phát triển nhảy vọt của các ứng dụng Web Người dùng dần dần có thói quen lên mạng, thực hiện các công việc trên mạng

Tận dụng sự phát triển về mặt công nghệ để ứng dụng vào các công tác quản lý hành chính sẽ tạo nên những bước phát triển nhảy vọt về việc cải cách hành chính, cải cách nề nối, tư duy thực hiện công việc Ý thức trách nhiệm của người dân từng bước được nâng cao Kiến thức về pháp luật, sự hiểu biết

về các thủ tục giải quyết công việc của người dân sẽ giúp giảm bớt các tệ nạn quan liêu, tham nhũng

Việc xây dựng thành công một Portal chính là việc áp dụng các công nghệ tiên tiến vào các lĩnh vực của cuộc sống

Chương 2: CÔNG NGHỆ WEB 2.0 (AJAX) VÀ MỘT

Khái niệm Web 2.0 lần đầu tiên được Dale Dougherty, phó chủ tịch của OReilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do OReilly Media và MediaLive International tổ chức vào tháng 10/2004 Ông không định nghĩa về Web 2.0 mà ông đưa ra một sự so sánh giữa các các ứng dụng Web thực tế để phân biệt giữa Web 1.0 với Web 2.0: “DoubleClick là Web 1.0; Google AdSense là Web 2.0 Ofoto là Web 1.0; Flickr là Web 2.0 Britannica online

là Web 1.0; Wikipedia là Web 2.0 v.v…” Sau đó Tim OReilly, chủ tịch kiêm giám đốc điều hành OReilly Media, đã đúc kết lại 7 đặc tính của Web 2.0:

- Web có vai trò nền tảng, có thể chạy mọi ứng dụng

- Tập hợp trí tuệ cộng đồng

- Dữ liệu có vai trò then chốt

- Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng

- Phát triển ứng dụng dễ dàng và nhanh chóng

- Phần mềm có thể chạy trên nhiều thiết bị

- Giao diện ứng dụng phong phú

Về sau O’Reilly có đưa ra một định nghĩa rút gọn về Web 2.0 như sau [12]:

“Web 2.0 là một cuộc cách mạng trong ngành công nghiệp máy tính Nó xảy ra khi người ta chuyển sang dùng Internet như một nền tảng và cố gắng tìm hiểu cách thức thành công trên nền tảng mới nay Qui tắc chính là: Xây

dựng các ứng dụng có thể tận dụng các “hiệu ứng mạng” để tạo ra các giá trị tốt hơn và (vì thế) có nhiều người dùng hơn (Nói cách khác là tận dụng “trí tuệ tập thể”).”

2.1.2 Sự khác nhau giữa Web 1.0 và Web 2.0

Xuất bản nội dung Xuất bản nội dung và cung cấp các

dịch vụ Thông tin tập trung một nơi Thông tin phân tán ở nhiều nơi

Dành cho cá nhân Dành cho xã hội, tập trung được trí

tuệ của nhiều người

Hướng tuyên truyền Hướng dịch vụ

Hình 2.1: Sự khác nhau giữa Web 1.0 với Web 2.0

Sau khi ra đời, Web 2.0 đã có sự phát triển vô cùng mạnh mẽ Theo thống kê thì tại thời điểm năm 1996, có khoảng 250.000 trang web trên mạng Internet và hoạt động chủ yếu là xuất bản thông tin nhắm quảng bá thương hiệu và cập nhật tin tức, số người sử dụng trang web vào khoảng 45 triệu người, chủ yếu là khai thác thông tin, mức độ tương tác của người sử dụng với các trang web là ít Nhưng đến năm 2006, 2 năm sau khi web 2.0 ra đời, thì số lượng trang web trên internet là khoảng 80 triệu, số người sử dụng là

trên 1 tỉ Với các web 2.0 thì mức độ tương tác của người sử dụng với các trang web tăng lên rất nhiều [10]

Nền tảng công nghệ của Web 2.0: Việc xây dựng Web 2.0 được dựa trên nhiều công nghệ mới như (RSS, SOA, AJAX,…), nhằm làm cho các ứng dụng Web trở lên nhanh

hơn, mạnh hơn, linh hoạt

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 Chỉ đến gần đây, với sự xuất hiện của nhiều

kỹ thuật mới như blog (hay weblog), wiki… web mới trở nên có tính cộng đồng (và cộng tác) hơn và trở nên gần hơn với sự kỳ vọng và khả năng thực

sự của nó

Ban đầu, 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ưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng 10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng

Kiến trúc công nghệ của Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao gồm: phần mềm máy chủ, cơ chế cung cấp nội dung, giao thức truyền thông, trình duyệt và ứng dụng

- Cung cấp nội dung

Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin) Có nhiều giao thức được phát triển để cung cấp nội dung như RSS, RDF và Atom, tất cả đều dựa trên XML Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN dùng để mở rộng tính năng của website hay cho phép người dùng tương tác

- Dịch vụ web

Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của kiến trúc Web 2.0 Có hai loại giao thức chính là REST và SOAP REST (Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái Với cả hai loại, dịch vụ web đều được gọi qua API Ngôn ngữ chung của dịch

vụ web là XML, nhưng có thể có ngoại lệ

Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object Properties Broadcasting Protocol do Chris Dockree phát triển Giao thức này cho phép các đối tượng ảo (tồn tại trên web) tự biết chúng “là gì và có thể làm gì”, nhờ vậy có thể tự liên lạc với nhau khi cần

Hình 2.3: Các thành phần bên trong Web 2.0

- Phần mềm máy chủ

Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng hơn đến phần mềm làm việc ở “hậu trường” Cơ chế cung cấp nội dung chỉ khác phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn

Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm 2 loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc xây dựng ứng dụng “gắn thêm” cho máy chủ web, có sử dụng giao tiếp API

- Cộng đồng

Công nghệ chỉ là “bề nổi” của Web 2.0, chính cộng đồng người dùng mới là yếu tố nền tảng tạo nên thế hệ web mới Việc chuyển từ “duyệt và xem” sang “tham gia” là cuộc cách mạng thực sự

Hiện trạng phổ biến của các website thế hệ 1.0 đó là chứa nhiều thứ phiền toái và làm việc chậm chạp, dường như luôn muốn gửi đến người dùng thông điệp: đây là website của chúng tôi chứ không phải của bạn Căn nguyên của vấn đề có thể là do chủ sở hữu các website cảm thấy họ “cho không” cái

gì đó Đôi khi chủ sở hữu website cho rằng càng làm khó người dùng thì họ càng được lợi Điển hình như một số site cho đọc đoạn đầu của bài viết rồi yêu cầu phải đăng ký (có phí hay không) để đọc nốt phần còn lại

Với sự phổ biến của các phần mềm máy chủ, trong đó có cả phần mềm miễn phí như Apache thì người dùng có thể đưa lên web bất kỳ thông tin gì Tuy nhiên có nhiều yếu tố cản trở: kỹ năng tạo website, hạn chế của nhà cung cấp dịch vụ Internet, việc bảo mật và kiểm duyệt…

Về cơ bản, Web 2.0 trao quyền nhiều hơn cho người dùng và tạo nên môi trường liên kết chặt chẽ các cá nhân với nhau Giờ đây có nhiều ví dụ cho thấy cộng đồng người dùng có thể đóng góp thông tin giá trị khi họ có phương tiện thích hợp Wikipedia là ví dụ nổi tiếng nhất Tuy có nhiều học giả không đánh giá cao Wikipedia, nhưng có một điều quan trọng: nó đủ tốt, miễn phí và nhiều người có thể đọc Ngoài ra còn có những ví dụ khác như các site Reddit và Digg để cho người dùng quyết định thông tin gì là quan trọng, hay del.icio.us cho phép mọi người chia sẻ những địa chỉ web hay Web 2.0 cho phép mọi người có thể đưa lên mạng bất cứ thông tin gì Với số lượng người tham gia rất lớn, đến mức độ nào đó, qua quá trình sàng lọc, thông tin sẽ trở nên vô cùng giá trị Ở đây có sự tương đồng với thuyết chọn lọc tự nhiên

- Quá trình phát triển của các thế hệ Web sau Web 2.0

Hình 2.4: Quá trình phát triển của các thế hệ Web

Theo các nhà phân tích dự đoán, Web 3.0 sẽ xuất hiện và phát triển trong khoảng năm 2010- 2020 Chưa ai mô tả được chính xác Web 3.0 như thế nào nhưng nhiều người đã vẽ ra một viễn cảnh về “Web ý thức”

Trong cuốn The Road to Sematic Web (Con đường dẫn đến Web ý thức), tác giả Alex Iskold mô tả ý tưởng trọng tâm của Sematic Web là tạo ra những "metadata": chuỗi các cơ sở dữ liệu nối tiếp nhau, có nhiệm vụ bổ sung cho thông tin trên web để các máy tính có thể hiểu và giải quyết những vấn đề ngữ nghĩa phức tạp

2.2 Công nghệ AJAX

Với sự ra đời của Portal, cách thức tiếp cận và tương tác của người sử dụng Web đã có rất nhiều sự cải tiến Trước đây người sử dụng tham gia vào các hệ thống chủ yếu là để đọc các tin tức, còn đối với những công ty, tổ chức thì họ mong muốn được mang thông tin của mình tới người sử dụng bằng cách xuất bản thành các trang Web Việc để người sử dụng tham gia và đóng góp tri thức của mình vào cộng đồng chung là rất hạn chế Với các ứng dụng Web ngày nay, người sử dụng có nhiều cơ hội để tham gia và đóng góp tri thức của mình vào cộng đồng chung Sự ra đời của Blog, của các mạng xã hội

ảo đã thu hút được rất nhiều người tham gia Bên cạnh đó các ứng dụng quản

lý cũng dần dần được Web hóa, người sử dụng mong muốn ngồi bất kỳ đâu

mà chỉ cần có kết nối mạng Internet là cũng có thể làm việc được Tuy nhiên, bản chất của công nghệ Web truyền thống là gửi các yêu cầu và chờ để cho

Server xử lý, rồi trả về kết quả Vì vậy khi các thao tác nghiệp vụ được làm việc trên Web thì khoảng thời gian ngồi chờ để Server trả về kết quả là trở ngại rất lớn trong một quy trình xử lý công việc

Từ năm 2001 đến năm 2005, World Wide Web đã có một sự phát triển vượt bậc về mặt công nghệ và cách thức tiếp cận cuộc sống Các ứng dụng Web khác rất nhiều so với các trang web truyền thống, nó cung cấp các dịch

vụ tới tận phía người dùng Dù là quản lý các quy trình nghiệp vụ hay là hướng tới các lợi ích cá nhân, những nhà phát triển đều được định hướng để xây dựng các mô hình tương tác mới, mà trong đó người sử dụng sẽ được sử dụng các tính năng vượt trội

Vào tháng 2/2005, Jesse James Garrets của Adaptive Path, LLC đã công

bố một bài báo trực tuyến có tựa đề “Ajax: A new approach to Web

Applications” – (Ajax: Một hướng tiếp cận mới cho các ứng dụng Web)

Trong bài viết này, Garrets đã giải thích nên đặt niềm tin vào các ứng dụng web, nó sẽ xoá bỏ khoảng cách giữa các ứng dụng web và các ứng dụng desktop truyền thống

AJAX là sự viết tắt của Ansynchronous JAvascript and XML Ajax

không phải là một công nghệ mới mà nó là sự kết hợp của một số công nghệ lại với nhau và tạo ra một cách làm việc mới so với cách làm việc của các ứng dụng Web truyền thống Các công nghệ được sử dụng trong Ajax bao gồm [3, 8]:

- HTML/XHTML: Là các ngôn ngữ chính được sử dụng để hiển thị nội dung

- CSS: Cung cấp các định dạng để hiển thị nội dung

- DOM (Document Object Model): Mô hình đối tượng tài liệu

- XML: Định dạng để trao đổi dữ liệu

- XSLT: Chuyển dịch từ XML sang XHTML (định dạng bằng CSS)

- XMLHttp: Nhận thông tin không đồng bộ với đối tượng

- JavaScript: Ngôn ngữ Script được sử dụng để kết hợp các công nghệ

trên lại với nhau

2.2.1 Nguyên tắc hoạt động của Ajax

Trong các ứng dụng web truyền thống, khi người dùng có bất kỳ một yêu cầu gì, thì trình duyệt sẽ gửi yêu cầu đó lên Server Server thực hiện việc phân tích và xử lý các yêu cầu Kết quả xử lý phía Server được trả về phía người dùng dưới dạng các các trang HTML và hiển thị trên trình duyệt Với ứng dụng web truyền thống, máy trạm chỉ đóng vai trò hiển thị dữ liệu, còn việc xử lý dữ liệu được đổ dồn về hết phía máy chủ Web và máy chủ CSDL

Khoảng thời gian chờ đọc kết quả xử lý của Server làm cho trình duyệt không

có nội dung gì để hiển thị Thời gian chờ phụ thuộc vào nhiều yếu tố như: tốc

độ tính toán của máy chủ, độ rộng của đường truyền, độ lớn của các yêu cầu gửi đi và độ lớn của dữ liệu trả về Vì vậy một trong những hạn chế lớn của các ứng dụng Web truyền thống là thời gian chờ lớn Điều này ảnh hưởng rất lớn đến những nghiệp vụ xảy ra một cách thường xuyên, liên tục và không chấp nhận khoảng thời gian chờ lâu

Hình 2.5: Mô tả sự khác nhau giữa mô hình ứng dụng web truyền thống với mô hình ứng dụng web sử dụng công nghệ Ajax

Ajax đã một phần khắc phục được nhược điểm này Đối với các ứng dụng Web sử dụng công nghệ Ajax thì khi người dùng có một yêu cầu, yêu cầu đó sẽ được gửi đến máy Ajax nằm ngay trên trình duyệt để phân tích, phần nào máy Ajax có thể xử lý được thì sẽ xử lý và hiển thị ngay kết quả trên trình duyệt, còn phần nào không xử lý được thì sẽ gửi lên Server để yêu cầu xử lý Như vậy người dùng không mất nhiều thời gian để chờ, sự tương tác của người dùng đối với ứng dụng web cũng sẽ mịn hơn

2.2.2 Tính bất đồng bộ trong công nghệ Ajax

Ajax là một thuật ngữ chỉ việc sử dụng các yêu cầu HTTP bất đồng bộ (asynchoronous HTTP requests) được khởi tạo bằng JavaScript để lấy được

dữ liệu từ server mà không cần tải lại toàn bộ trang web Các yêu cầu này có thể được tạo ra và thực thi bằng rất nhiều cách và sử dụng rất nhiều định dạng truyền tải dữ liệu khác nhau để truyền tới trình duyệt cho JavaScript xử lý Việc kết hợp lấy dữ liệu từ xa và tương tác với DOM (Document Object Model - mô hình đối tượng tài liệu) đã tạo ra một thế hệ các ứng dụng web

mới dường như không còn tuân theo các quy tắc truyền thống về những gì có thể diễn ra trên web Các công ty lớn như Google, Yahoo! và Microsoft… đã tạo ra và chia sẻ nhiều nguồn tài nguyên đặc biệt hướng tới mục tiêu tạo các ứng dụng web chạy và trông giống như các ứng dụng trên desktop

Hình 2.6: Tính không đồng bộ của AJAX

2.2.3 Ưu điểm và nhược điểm của Ajax

2.2.3.1 Ưu điểm của Ajax

+ Giảm thiểu băng thông: Các ứng dụng sử dụng công nghệ AJAX chỉ gửi các yêu cầu cần thiết lên phía Server và nhận về những kết quả của các yêu cầu đó Đối với các ứng dụng Web sử dụng công nghệ Ajax, thay vì phải tải lại toàn bộ trang web, thì nó chỉ phải tải lại những phần thay đổi

+ Tương tác người dùng linh hoạt: Đối với các ứng dụng web truyền thống thì người dùng chỉ có thể bấm và chờ, nhưng trong các ứng dụng sử dụng công nghệ Ajax, người dùng có thể kéo - thả, nháy đúp chuột,…

+ Hướng người sử dụng: Sự ra đời của Ajax chủ yếu phục vụ các yêu cầu của người dùng Vì vậy ngày nay khi thiết kế ứng dụng thì việc tìm hiểu khả năng đáp ứng yêu cầu của người dùng được đặt lên đầu tiên

+ Thiết lập các quy ước: Không cần phải mất thời gian trong việc tìm ra

mô hình tương tác mới mà không thân thiện với người dùng, Ajax giúp thu hẹp khoảng cách giữa các ứng dụng Web truyền thống với các ứng dụng trên destop

+ Không có sự ngắt quãng và lãng phí

+ Không phải tải lại toàn bộ trang: Sau khi trang được khởi tạo, tất cả các kết nối tới server đều do các máy Ajax quản lý Việc cập nhật dữ liệu mới trên một vùng của trang Web được thực hiện một cách riêng rẽ mà không phải tải lại toàn bộ trang

2.2.3.2 Nhược điểm của Ajax

+ Không thể lưu lại địa chỉ trang web (bookmark) chứa nội dung nào đó

được tải bằng công nghệ Ajax Bản chất sử dụng một lớp trung gian để giao dịch khiến cho các ứng dụng web không có một địa chỉ nhất định cho từng nội dung (đây cũng là vấn đề gặp phải khi sử dụng Frame trong thiết kế web) Một ví dụ rõ ràng nhất là không thể nhấn nút "BACK" của trình duyệt để quay lại nội dung trước đó trong Gmail

+ Tương thích: Ajax chỉ hoạt động nếu trình duyệt hỗ trợ đối tượng XMLHttpRequest Đây là vấn đề mà Gmail gặp phải đối với trình duyệt Opera trước khi Opera 8 ra đời Tuy nhiên, đến thời điểm hiện tại thì các trình duyệt phổ biến nhất đều hỗ trợ XMLHttpRequest (Firefox, Internet Explorer, Opera 8, Sarafi) Cho dù vậy, thì cũng cần phải tính toán trường hợp mà trình duyệt không hỗ trợ XMLHttpRequest (ví dụ nếu người dùng sử dụng máy Palm,…)

+ Tương tác người dùng: Ajax giải quyết được một vấn đề tương tác người dùng của các ứng dụng web khá tốt, tuy nhiên việc thực hiện tác vụ quá

nhanh nên đôi khi người dùng không tin là nó đã được thực hiện Để tránh được nhược điểm này, cần xây dựng cơ chế xác nhận các hành động đã diễn

ra Tuy nhiên việc lợi dụng việc xác nhận hành động diễn ra sẽ làm cho các ứng dụng web trở nên rườm rà, không hiệu quả thậm chí còn tạo ra sự khó chịu

+ Vấn đề máy tìm kiếm: Cơ chế của các máy tìm kiếm hiện nay là lưu các thông tin của các trang web vào các Server Mỗi một địa chỉ sẽ tương ứng với một trang web Khi thực hiện tìm kiếm, máy tìm kiếm sẽ chỉ ra các trang

có nội dung phù hợp Với việc áp dụng công nghệ Ajax thì cùng một địa chỉ thì mỗi thời điểm trang web sẽ có những nội dung khác nhau Vì vậy kết quả trả về của máy tìm kiếm sẽ không còn chính xác và cần phải có sự thay đổi để phù hợp với công nghệ mới

+ Vấn đề khai phá thông tin trên Web: Tương tự vấn đề máy tìm kiếm, việc khai phá thông tin trên web được thực hiện dựa trên việc tổ chức nghiên cứu các trang web để đưa ra các kết luận Tuy nhiên việc ứng dụng công nghệ Ajax làm cho các kết luận này không có những căn cứ xác đáng

2.2.4 Các kỹ thuật trong AJAX

2.2.4.1 DOM

a Kiến thức chung về DOM

Document Object Model (DOM) là một hệ giao tiếp lập trình ứng dụng cho tài liệu HTML và XML Nó xác định cấu trúc logic của tài liệu và phương pháp truy cập và sử dụng tài liệu đó Trong DOM đã chỉ rõ, thuật ngữ tài liệu được sử dụng theo nghĩa ngày càng rộng lớn và phần lớn hiện nay Document được hiểu theo nghĩa dữ liệu hơn là theo nghĩa tài liệu XML được

sử dụng như là một phương pháp biểu diễn cho nhiều loại thông tin khác nhau Hiện nay với XML thì dữ liệu tương đương với tài liệu và DOM có thể

sử dụng để quản lý dữ liệu Với DOM người lập trình có thể xây dựng tài liệu của họ với cấu trúc xác định, thêm vào, sửa đổi hay là xoá các thành phần và nội dung Mọi thứ tìm thấy trong HTML hoặc XML đều có thể truy cập, biến đổi, xoá hoặc thêm vào bằng cách dùng DOM DOM được thiết kế để sử dụng với nhiều ngôn ngữ lập trình cốt để cung cấp một ngôn ngữ xác định độc lập, đưa ra giao diện của DOM W3C định nghĩa rất nhiều cấp độ cho mô hình DOM [1, 13]:

- Level 0 : là đặc tả DOM không chính thức, khởi đầu của mô hình DOM áp dụng cho các trình duyệt thông dụng trước đây là Netscape navigator 3.0 và IE 3.0

- Level 1 : Đặc tả và định nghĩa mô hình DOM ở cấp độ này được cài đặt và sử dụng nhiều nhất DOM ở cấp độ này tập trung vào sự kết hợp giữa tài liệu HTML và XML

- Level 2 : Cấp độ nâng cao này chỉ đang là ứng viên được W3C xem xét Mô hình DOM ở cấp độ 2 mở rộng cho phép bạn sử dụng không gian tên

và kết hợp với mô hình định kiểu như CSS hay XSL

- Level 3 : Cấp độ này chỉ đang ở mức hoạch định Nó cho phép nạp, xử

lí, lưu lại mô hình nội dung tài liệu ( như các định nghĩa DTD và lược đồ XML )

b Các công nghệ trong DOM

DOM giúp phân tích một tài liệu phục vụ cho cơ chế của JavaScript Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút Đây là một khả năng đặc biệt hữu ích để viết một ứng dụng Ajax Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server

Trong ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây Gốc của cây là thẻ <HTML>, để biểu diễn tài liệu là dạng web Thẻ

<BODY> biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu Trong thân của tài liệu, có các bảng, các đoạn, các danh sách, và các loại thẻ định dạng khác

Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách đệ qui như thế JavaScript làm việc với nút gốc của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM Phần tử DOM đã được đặc tả bởi W3C Mỗi phần tử DOM có một phần tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối

Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các thành phần HTML Mối quan hệ này là hai chiều Sửa đổi mô hình DOM sẽ thay đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web

c Làm việc với DOM bằng JavaScript

Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu

Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví dụ về một trang HTML đơn giản

<html>

<head>

<link rel='stylesheet' type='text/css' href='hello.css' />

<script type='text/javascript' src='hello.js'></script>

for (var i=0;i<children.length;i++){

- Tìm kiếm một DOM Node

Yêu cầu đầu tiên để làm việc trên DOM với JavaScript là đi tìm kiếm một phần tử để thay đổi Trước hết cần bắt đầu tham chiếu qua nút gốc - root node, nút này thể hiện qua biến toàn cục document

Mỗi nút trong DOM là một nút con (hoặc nút con cấp hai, ba…) của document, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn

Vì thế có các cách sau để tìm kiếm một nút nhanh chóng hơn Mỗi phần

tử HTML có một thuộc tính ID, ví dụ như,

var children=empty.childNodes;

for (var i=0;i<children.length;i++){

- Tạo DOM Node

Trong nhiều trường hợp cần tạo các nút mới và thêm nó vào tài liệu JavaScript cung cấp một số phương thức để làm điều đó Các phương thức chuẩn để tạo nút mới là document.createElement() và document.createTextNode(), phương thức createElement() có thể được dùng

để tạo ra bất kỳ phần tử HTML nào, tham số là kiểu của loại thẻ HTML; var childEl=document.createElement("div");

createTextNode() tạo một nút thể hiện qua một đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list item

var txtNode=document.createTextNode("some text");

Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML Chúng không có các stye để áp đặt cho trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn

Một nút khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên trình duyệt, phương thức appendChild() được dùng để thực hiện điều này el.appendChild(childEl);

Ba phương thức createElement(), createTextNode(), và appendChild() cho phép thực hiện hầu hết các thao tác để thêm một nút vào tài liệu

- Thêm style vào tài liệu

DOM cũng cung cấp các phương thức để chỉnh sửa style của các phần

tử và tạo định dạng lại cho cấu trúc đã được định nghĩa trong stylesheet Mỗi phần tử trong trang web có thể có nhiều giao diện trực quan có thể được

áp đặt qua DOM, như vị trí, chiều dài và rộng, mằu sắc, canh lề và đường viền Các trình duyệt ngày nay đều cung cấp các ràng buộc JavaScript cho phép thay đổi giao diện mức thấp và áp đặt các định dạng một cách nhất quán

Ví dụ, đoạn mã sau bổ sung các thuộc tính style cho nút empty:

function addListItemUsingInnerHTML(el,text){

el.innerHTML+="<div class='programmed'>"+text+"</div>"; }

2.2.4.2 Cascading Style Sheet (CSS)

Cascading Style Sheet – bảng định kiểu - là một phần không thể thiếu trong thiết kế Web, nó được dùng rất nhiều trong các ứng dụng Web truyền thống cũng như trong Ajax Một stylesheet đưa ra cách kiểm soát các loại định dạng trực quan, nó có thể được áp dụng cho các thành phần riêng lẻ trên các trang

Hơn nữa, với các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ, stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, tạo ra các hiệu ứng khá mạnh mẽ

Trong ứng dụng Web truyền thống, stylesheet cung cấp một cách hiệu quả để xác định cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa Với AJAX, stylesheet cung cấp một “kho chứa” các giao diện xác định trước có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất

CSS định dạng một trang web theo ba cách [1]:

+ Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)

+ Định nghĩa trong một trang web (Internal Style Sheet)

+ Định nghĩa thành một file CSS riêng (External Style Sheet) Trang web của chúng ta sẽ tham chiếu đến file CSS này

Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn - selector và phần khai báo - style declaration Selector đặc tả các phần tử được định dạng và bố trí, và style declaration khai báo các thuộc tính định dạng sẽ được áp dụng Giả sử muốn tạo ra các dòng text trong level-1 heading trong tài liệu (đó là đoạn nằm trong thẻ <H1>) có màu đỏ

Có thể khai báo thuộc tính CSS như sau:

h1 {color: red}