Các khái niệm cơ bản về thiết kế một trang Web

;lkjkkj;nlbkj;lbkjvn;blkvj;nklgbvjhh;vkcj;nlbjkvjch p,ljhn blp;.kmjn kop;kmjnp.;i,kmjkp;li,kmjkp;lkmjnkp;lkmjpnk;lkmjkop;l,kmjpl;lkmjn pl.kmjn pơ;kmjn pk;kmjn pơk;kjmnp;kmjn pơk;kmjnp;kmjnkp;kmjnp;kmjp;kmjop;kmjp;kjmnp;p.;kmjnp;,lkmjpl;k,m p;kmjp.;k

Giới thiệu về môn học

 Tên môn học: NGÔN NGỮ THIẾT KẾ WEB

 Mã môn học: NTKW- Số tín chỉ: 4 tín chỉ

 Loại môn học: bắt buộc

 Phân bổ thời gian:

 Lên lớp: 60 tiết

 Số giờ lý thuyết: 40 tiết

 Số giờ thực hành: 30 tiết

 Số giờ kiểm tra/đánh giá: 5 tiết

 Thời gian chuẩn bị (tự học): 120 giờ

 Điều kiện tiên quyết: Cơ sở lập trình 1

Phân bổ nội dung chương trình

Các khái niệm cơ bản

Phần I:

5

Mục tiêu bài học

 Một số khái niệm về Internet

 Các lĩnh vực ứng dụng của Internet

 World Wide Web và các khái niệm liên quan

 Các khái niệm về website

6

Internet

 INTERNET là một mạng của các mạng máy tính Cũng giống như hệ thống đường cao tốc liên bang nối từ thành phố này đến thành phố khác, tương tự Internet liên kết hàng ngàn mạng máy tính với nhau, qua đó có thể chia sẻ thông tin từ bất cứ máy tính nào

 Tiền thân của mạng Internet là APRANET

 Đầu thập kỷ 80, APRANET phát triển thành mạng Internet Ngày nay mạng Internet đã phát triển rộng rãi trên phạm vi toàn thế giới với rất nhiều ứng dụng

7

 Tuyển dụng qua mạng

 Ngân hàng trên mạng

 Giáo dục qua mạng

 Tìm bạn và tham gia thảo luận qua mạng

 Gửi và nhận thiệp điện tử từ bạn bè và người thân

 Tham quan sở thú điện tử hay viện bảo tàng

 Tải xuống phần mềm thú vị nào đĩ và dùng thử

 Chia sẻ thơng tin cá nhân qua mạng

Các lĩnh vực ứng dụng của Internet

 Mạng diện rộng toàn cầu là một mạng dựa trên nền Internet của các máy chủ Web (web servers)

9

WWW hoạt động như thế nào?

 Khi kết nối với một máy chủ web, ta lấy được thông tin

(user- Các liên kết trên những trang này dẫn bạn đến những trang khác mà những trang này có thể nằm trên cùng hay khác máy chủ

10

nối kết” Văn bản đặc biệt này chứa đựng địa chỉ của một máy tính khác như là một phần của WWW

 Khi chúng ta nhấp chuột trên văn bản này, trình

duyệt (cổng nối với Internet – a gateway to

Internet) coi đó là một chỉ thị để lấy trang từ máy tính có địa chỉ tương ứng trong liên kết và hiển thị

nó

Hypertext (Siêu văn bản)

11

từ một trang web này với một trang web khác sử dụng siêu văn bản (hypertext) Các trang web không nối kết với nhau kiểu vật lý

mà chỉ chứa địa chỉ của trang cần hiển thị

Link (Liên kết)

Internet Địa chỉ này được chứa trong bản thân siêu

liên kết (hyperlink) của một tài liệu Trình duyệt sử

dụng địa chỉ để kết nối với máy chủ qua mạng

 Địa chỉ IP là một số 32 bit (4byte) được chia thành 4 nhóm (dạng phân nhóm - dotted format), mỗi nhóm gồm 8 bits (gọi là một octet), các nhóm này phân cách nhau bởi dấu chấm

 Ví dụ: 45.10.0.1, 168.10.45.65 …

13

Domain name

IP là rất khó, do đó người ta tạo ra tên miền (domain), khi cần làm việc với các địa chỉ IP ta chỉ cần gõ vào tên miền tương ứng Nhiệm vụ của tên miền là chuyển tên miền thành địa chỉ IP

 Ví dụ: www.hou.edu.vn

 Khi ta gõ tên miền, sẽ có một server là DNS

(Domain Name Server) tìm kiếm trong bảng

tham chiếu xem số IP tương ứng là gì Nếu không tìm được, nó sẽ tìm ở một DNS khác Cùng một IP

có thể có nhiều tên Tuy nhiên tên miền là duy nhất và được cấp phát cho chủ thể nào đăng ký trước

14

trang giúp bạn có thể đi tới và lui giữa các trang

 Một hyperlink thường có thể được hiển thị dưới dạng text hay graphic

 Khi ta click vào hyperlink, ta có thể di chuyển đến vị trí được kết nối

 Các trang được kết nối có thể ở trong cùng một hay nhiều document hoặc trong các files trên mạng hay bất

kỳ đâu trên Internet

Hyperlinks (siêu liên kết)

15

Bookmark

mấu neo (anchor), là một vị trí hoặc một văn bản trên một trang được đánh dấu như là một đích đến cho một liên kết

 Nếu trang web của bạn quá dài và được phân chia thành nhiều phần, một bookmark cho phép bạn liên kết đến một phần của trang mà phần này nằm cách xa phần đầu trang bằng một liên kết thông thường

 Trong một URL, bookmark được đánh dấu phía trước bằng dấu thăng (#)

16

Location): Địa chỉ dùng định vị tài nguyên thống nhất

trên máy chủ ( Về cơ bản, URL là con trỏ chỉ tới vị trí của một đối tượng tài nguyên như hình ảnh, tài liệu…)

 URL là địa chỉ duy nhất có cấu trúc chia làm 3 phần:

 <giao thức>: <địa chỉ máy> <phần định vị>

17

biết cách thực hiện một thủ tục quy định như đăng nhập vào hệ thống thư điện tử chẳng hạn Các khả năng của script được cài sẵn trong một số chương trình

 Các script giống như các macro Tuy nhiên thuật ngữ macro dùng để chỉ các script mà ta có thể khởi đầu bằng cách ấn một tổ hợp phím tự quy định

Script

18

Trình duyệt (Browser)

 Trình duyệt là một phần mềm ứng dụng để tích hợp các file HTML được đưa lên Web

 Trình duyệt điển hình được dùng cho các công việc sau:

 Nối kết với máy tính nguồn mà địa chỉ của nó được xác định trong phần hyperlink

 Yêu cầu trang mới từ nguồn

 Nhận trang

 Đóng kết nối

 Hiển thị trang được định dạng cho người dùng

 Một số trình duyệt thông dụng là Internet Explorer, FireFox, Opera, Chrome, Safari…

19

WebServer

Web Server (máy phục vụ web):

 Là máy tính mà trên đó cài đặt phần mềm phục vụ Web Đôi khi người ta cũng gọi các phần mềm đó là Web

Server

 Tất cả các Web Server đều hiểu và chạy được các file

*.htm và *.html, tuy nhiên mỗi Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như IIS (Internet Information Services) của Microsoft dành cho *.asp,

*.aspx ; Apache dành cho *.php ; Sun Java System

Web Server của SUN dành cho *.jsp

20

nào đó (như yêu cầu một trang web) từ một máy

tính khác được gọi là máy khách

phục vụ là một máy tính thực sự thực hiện các yêu cầu của các máy tính khác Tên khác của nó đôi khi cũng được dùng là máy chủ (host) Máy chủ thường là máy tính mạnh với bộ nhớ lớn và ổ cứng chứa hàng ngàn các tài liệu

Client/Server

21

HyperText Transfer Protocol-HTTP

Hypertext Transfer Protocol): Đó là một bộ các

quy tắc và quy định được sử dụng để gửi một

trang hay nhiều trang chứa siêu văn bản từ máy

tính này đến máy tính khác

 Trình duyệt cho phép phía client gửi một yêu cầu

dạng văn bản lên Web Server Web Server nhận

được lệnh sẽ trả lại tài liệu tương ứng

22

File Transfer Protocol

thức của việc chuyển tải các tập tin (một tập tin là một tài liệu chứa đựng thông tin) từ máy tính này sang máy tính khác

chủ và các máy khách phải tuân theo để thực hiện việc giao tiếp giữa chúng

 FPT được dùng trong việc chuyển các loại tập tin như tập tin EXE (tập tin thực thi) hay DOC (tập tin tài liệu) hoặc BMP (tập tin ảnh dạng bitmap)

Simple Mail Transfer Protocol

Transfer Protocol – SMTP) – Dùng trong việc

chuyển tải các thư tín

23

24

TCP/IP

 Giao thức TCP/IP là giao thức điều khiển đường truyền/Giao thức Internet (Transmission Control Protocol/Internet Protocol)

 TCP/IP được tạo ra từ:

 Giao thức chuyển tải siêu văn bản (HTTP

 Giao thức chuyển tải tập tin (FTP) (tập tin ảnh dạng bitmap)

 Giao thức chuyển tải thư đơn giản (Simple Mail Transfer

Protocol – SMTP)

 Telnet: cổng 23 (telnet: trong các máy dựa vào

hệ điều hành UNIX và được nối vào mạng Internet, đây là một chương trình cho phép người sử dụng tiến hành thâm nhập vào các máy tính ở xa thông qua các ghép nối TCP/IP)

 POP3: cổng 110

Port (số hiệu cổng)

Các khái niệm cơ bản về website

liên quan với nhau Bao gồm trang chủ và các trang con

 Trang chủ: Trang chủ là trang được hiển thị khi ta truy

cập vào một địa chỉ web

 Ví dụ: index.html

dung đưa ra trong trang chủ

26

27

Trang web được thiết kế như thế nào?

 Để xây dựng một website, ta cần thực hiện các bước sau:

 Xác định yêu cầu và phân tích yêu cầu

Trang web được thiết kế như thế nào?

 Các trang web có thể chứa văn bản, hình ảnh, âm thanh, video clip, ảnh động…

 Kiến trúc 3 tầng của trang web (three layers):

 Nội dung trang web  HTML

 Cách trình bày trang web  CSS

 Tương tác với nội dung trên trang web  Javascript

 Thiết kế đồ họa: Photoshop, Flash…

28

29

Cấu trúc thư mục cho Website

 Thư mục MyWeb là thư mục gốc và các thư mục con

như sau:

 Thư mục Images chứa tất cả các hình ảnh liên

quan đến nội dung trong website

 Thư mục scripts chứa tất cả các file script có liên

quan đến nội dung website

 Thư mục styles chứa tất cả các file định kiểu dùng

để bố cục nội dung của website

 File index.html phải nằm trong thư mục gốc và

nằm ngoài tất cả các thư mục trên

30

 Là quá trình thu thập và phân tích chi tiết tất cả các

yêu cầu liên quan đến website cần xây dựng

 Mục tiêu của việc xác định và phân tích yêu cầu nhằm

trả lời cho các vấn đề sau:

 Mục đích của Website là gì?:

 Đối tượng độc giả của website là ai?

Thiết kế trang web

 Nội dung là thuật ngữ chung được dùng để chỉ các thành phần có trong trang web Các trang web có thể chứa văn bản, hình ảnh, âm thanh, video clip, ảnh động, các file (ví dụ: file PDF)… mà bạn muốn cung cấp cho

người duyệt web

 Trong giai đoạn thiết kế, công việc cần làm đầu tiên

chính là tổ chức và phác thảo website

31

Tổ chức website

 Tổ chức về mặt cấu trúc: là công việc định nghĩa ra các

trang web trong website và mối liên hệ giữa chúng

 Ví dụ:

32

Tổ chức website

 Tổ chức về mặt liên kết : xác định liên kết (link) giữa các trang web

trong website, cho phép người duyệt web có thể di chuyển lui tới giữa các trang web

 Liên kết theo đường thẳng (tuyến tính): Là loại liên kết phù hợp cho các website hướng người dùng đi theo một thứ tự các bước

nào đó

 Ví dụ: Website xử lý đơn mua hàng, website hướng dẫn

đăng ký thông tin

33

Tổ chức website

 Liên kết dựa trên cơ sở dữ liệu: Là loại liên kết tạo ra ngay tại các trang web chính, một số lượng lớn các liên kết phụ thuộc vào các

phần tử trong cơ sở dữ liệu

 Ví dụ: Trang web liệt kê các loại sản phẩm, và cần tạo liên kết tới chi tiết của từng loại sản phẩm trong cơ sở dữ liệu

34

Tổ chức website

 Liên kết phân cấp : Là loại liên kết thông dụng nhất Dựa trên liên kết này, người dùng sẽ đi theo

từng cấp để tới được thông tin mình cần

 Ví dụ: Website tin tức, website âm nhạc

35

Chiến lược thiết kế

 Cách chuyển tải thông tin phụ thuộc vào cấu trúc trình bày và thời gian truy nhập của độc giả

 Liên kết là mặt mạnh của website, tránh làm độc giả sao lãng vì những liên kết lạc đề

 Cần có bản in riêng cho trang web với những thông tin ngắn trong các trang được ghép lại thành một bản in dài

 Nên thiết kế cấu trúc website uyển chuyển, dễ dàng truy cập nhanh đến một phạm vi rộng các chủ đề có liên quan

36

Ví dụ- chiến lược thiết kế

 Các liên kết thể hiện bằng danh sách dạng text rất thích hợp cho mục lục hay bản chỉ số vì tốc độ nạp xuống nhanh, đầy đủ thông tin

 Cần có hình ảnh đồ hoạ thiết kế đẹp minh hoạ đi kèm thông tin

 Đối với những website giáo dục cần thiết phải có bản

in cho phép độc giả có thể in những kiến thức cần thiết

37

Ví dụ -chiến lược thiết kế (tt)

 Đối với các website có mục đích đáp ứng nhu cầu tham khảo, tra cứu, cần thiết kế sao cho độc giả dễ dàng đi thẳng vào vấn đề tìm được cái họ cần, dễ dàng in ấn, lưu trữ lại thông tin…

 Cấu trúc menu cần tổ chức sao cho dễ dàng tìm kiếm,

Thiết kế giao diện

 Độc giả không chỉ xem thông tin mà còn tương tác với website

 Thiết kế đồ hoạ và các hình ảnh minh hoạ đi kèm với thông tin văn bản

 Nhất quán một số quy ước trong tất cả các trang của website

 Ai?  Ai tạo ra website

 Cái gì? Tiêu đề của website là gì? Cần đặt ra tiêu đề xác thực với nội dung của trang web

 Khi nào?  ghi rõ ngày tháng cập nhật thông tin cho các thông tin bên trong website

 Ở đâu? cung cấp cho độc giả thông tin về tác giả, địa chỉ website…, nhằm giúp cho độc giả dễ dàng tìm lại được địa chỉ

Thiết kế giao diện

 Thiết kế giao diện hướng tới người sử dụng: Giao

diện đồ hoạ cần bố trí thuận tiện, dễ thao tác, tìm

kiếm

 Các giúp đỡ định hướng rõ ràng: Các nút điều

hướng cần có sự nhất quán, dễ dàng di chuyển giữa

các trang web

 Không có trang cuối cùng

 Cho phép truy nhập trực tiếp: Cung cấp cho độc

giả thông tin họ cần với ít bước và thời gian ngắn

nhất

 Thời gian chờ đợi không vượt quá ngưỡng 10s

40

Thiết kế giao diện

 Đơn giản và nhất quán: Các biểu tượng nên quen thuộc, đơn giản và dễ hiểu với độc giả, các webpage nên sử dụng chung một kiểu đồ hoạ, phong cách biên tập và mô hình tổ chức (tiêu đề, chân trang, các liên kết)

 Tính ổn định thiết kế: Kiểm tra thường xuyên sự tồn tại của các mối liên kết và thông tin bên trong nó

41

Thiết kế giao diện

 Phản hồi và đối thoại: Cần cung cấp mối liên hệ trực tiếp tới ban biên tập hoặc tác giả để nhận được sử phản hồi từ độc giả

 Thiết kế cho các trình duyệt khác

42

Thiết kế thông tin

 Cắt đoạn thông tin: Cần cắt thông tin thành những mẩu tin từ 1 đến 3 trang in để cung cấp cho độc giả ứng với mỗi liên kết

 Hệ thống phân cấp: phân cấp thông tin căn cứ vào tầm quan trọng của thông tin, cho phép đi từ khái quát đến chi tiết

 Các mối quan hệ: Nhóm, phân loại thông tin, sắp xếp bằng hình ảnh… cho phép độc giả dễ dàng tìm được cái

họ cần

 Chức năng: Cần xây dựng hệ thống menu phù hợp, tránh tạo ra hệ thống menu quá rộng hoặc quá sâu

43

44

Xu hướng thiết kế web hiện nay

 Đơn giản nhưng chuyên nghiệp:

 Sử dụng ít màu sắc, không quá 4 màu, trong đó có 3 màu cùng gam màu, chỉ khác nhau về sắc độ

 Yếu tố động ít hơn yếu tố tĩnh, không sử dụng nhiều hình ảnh hay popup xen lẫn làm rối mắt

 Hạn chế Banner quảng cáo chớp tắt

 Chú trọng nội dung của website, làm sao để thời gian người lướt web tìm được thông tin là nhỏ nhất

 Sử dụng công nghệ web 2.0, javascript không chỉ để tạo ra ảnh động hay menu động mà còn để chuyển tải dữ liệu

 Ngôn ngữ web là ngôn ngữ XML

 Yêu cầu người thiết kế phải có sự sáng tạo nhiều hơn để có ý tưởng mới, bố cục chi tiết, đơn giản mà không đơn điệu