Tài liệu Lập trình và thiết kế Web 2 ppt

Trang 1

Bài 1

Trang 2

Trang 3

Web - Mạng thông tin

Trang 4

Web là gì?

Là các dịch vụ phân tán cung cấp thông tin multimedia dựa trên hypertext

– Phân tán: thông tin được đặt trên nhiều máy chủ khắp thế giới

– multimedia: thông tin bao gồm text, graphics, sound, video

– hypertext: là kỹ thuật được sử dụng để truy cập thông tin

Có khoảng hơn 30 tỉ trang web thuộc hơn 108 triệu website (2-2007 - Netcraft's survey)

Trang 5

– Tập hợp các trang web Website của các tổ chức hay cá nhân

trên mạng bao gồm tập hợp các trang web liên quan đến tổ chức này.

Uniform Resource Locator (URL)

– Địa chỉ của web trên internet

Trang 6

Trang 7

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

Trang 8

Web = Protocol + Language + Naming infrastructure

HTTP - HyperText Transport Protocol

– Là giao thức giao tiếp giữa WWW client and server

HTML - HyperText Markup Language

– Ngôn ngữ biểu diễn các tài liệu WWW

URL - Uniform Resource Locator

– Địa chỉ web (xác định duy nhất)

Trang 9

Web - Các khái niệm chính

– Là 1 con số 32 bit, chia thành 4 số 8 bit, vd: 203.162.33.44 (gồm 2 phần: network address, host address)

– Xác định đối tượng nhận và gởi thông tin trên Internet

– Để biết IP: ping www.intel.com

Trang 10

Tên miền – Domain name

– Là tên giao dịch của công ty hay tổ chức trên Internet.

– Ví dụ: www.intel.com :

• Là địa chỉ của 1 máy chủ thuộc tổ chức (công ty) INTEL

• Có địa chỉ IP là 128.241.220.72 , có tên máy chủ là WWW

• Là tên miền cấp 1 (.com, org, edu, biz, net,)

Ánh xạ giữa tên miền và địa chỉ IP

– Do DNS server – Domain name system (service) đảm trách

Trang 11

http:// www.microsoft.com: 8080 / en/us/default.aspx

http://www.microsoft.com:8080/en/us/default.aspx

URL là định danh duy nhất cho các tài nguyên Internet

Trang 12

Lấy hiển thị (nếu có thể) các tài nguyên

khác nhau

Khả năng hiển thị :

– text-only (Lynx, )

– graphic (MSIE, Netscape, )

Hiển thị được nhiều loại ảnh

– TEXT, GIF, JPEG, sound, video, postscript,

Hỗ trợ nhiều giao thức

– HTTP, FTP, SMTP, POP,

Có thể “plug-in” các công cụ vào browser

để tăng tính năng (3D animation, SWF, )

Trang 13

Các giao tác chuẩn trên Web

Browser

DNS server URL

Web Server IIS

Trang 14

Xác định yêu cầu Website

Mua tên miền

Thuê chỗ hosting

Thiết kế Website

Đưa vào hoạt động

Duy trì thông tin, bảo dưỡng website

Trang 15

Các bước thiết lập Website

Mua tên miền

Thuê chỗ hosting

Trang 16

Mục tiêu, yêu cầu cơ bản của WebSite

Đối tượng phục vụ

Chủ đề của WebSite

Trang 17

Mục tiêu, yêu cầu cơ bản

Đề ra mục tiêu khái quát, ngắn gọn, rõ ràng của

Website cần thiết kế

Là công cụ để đánh giá sự thành bại của một Website

Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch

phát triển

Trang 20

Thiết kế tốt = thích hợp cho một dải rộng các loại đọc

giả có trình độ và nhu cầu khách nhau

Trang 22

Trang 23

Chủ đề của Website – Đào tạo trực tuyến

Trang 24

Trang 25

Chủ đề của Website – Mua bán trực tuyến

Trang 26

Mua tên miền

Thuê chỗ hosting

Trang 27

Mua tên miền

Tên miền = Tên website

Trang 28

Trang 29

Mua tên miền

Thuê chỗ hosting

Trang 32

Trang 33

Mua tên miền

Thuê chỗ hosting

Trang 35

Thiết kế giao diện : 2x2 Layout

Trang 36

36

Thiết kế giao diện : Table within a table

Trang 37

Trang 38

38

Trang 39

The inner table

Trang 40

Trang 41

Thiết kế giao diện : Cấu trúc phức tạp

Trang 42

Phông chữ Æ phụ thuộc vào

– Đặc điểm thông tin

– Độc giả

– Trình duyệt, độ phân giải

– Ngôn ngữ sử dụng

– Font có chân, không chân…

Gam màu Æ thống nhất trong toàn bộ Website

Font tiếng Việt: VNI, TCVN3, Unicode…

Trang 45

Xác định cấu trúc WebSite : Phân cấp

Trang 46

Dùng để tổ chức các khối thông tin phức hợp.

Trang 47

Một số vấn đề liên quan đến việc thiết kế giao diện cơ bản

Thiết kế hướng tới người sử dụng

Các giúp đỡ định hướng rõ ràng

Không có trang cuối cùng (dead-end)

Băng thông và ảnh hưởng

Đơn giản và tính nhất quán

Tính ổn định của các trang Web

Phản hồi và đối thoại

Tính tương thích trên các trình duyệt khác nhau (thay

Trang 48

Người sử dụng là đối tượng chính quyết định sự

thành bại của Website

Xây dựng các kịch bản mẫu cho các loại đối tượng sử dụng khác nhau

Trang 49

Thiết kế hướng tới người sử dụng

Yêu cầu mức độ hoàn hảo của thiết kế giao diện đồ họa

Trang 50

– Có thể đi tiếp tới đâu ?

Biểu tượng nhất quán, dễ hiểu, theo chuẩn qui định

Trang 52

Trang 53

Không có trang cuối cùng (dead-end)

Mỗi trang có ít nhất một liên kết Luôn có khả năng

quay lại trang chủ, các trang chủ chốt trên Website

Trang “dead-end” Æ thất vọng, mất khả năng đến với các trang khác.

Nên để liên kết về trang chủ trong mọi trang.

Trang 54

Trang 55

Băng thông và ảnh hưởng

Sự kiên nhẫn của đọc giả có giới hạn.

Tốc độ đôi khi là yếu tố quyết định đến việc lựa chọn Website.

Phân biệt giữa thiết kế cho Internet và Intranet

Trang 56

Trang 57

Đơn giản và tính nhất quán

Tùy vào loại ứng dụng

Đọc giả sẽ không ấn tượng và sự phức tạp không lý

do Đặc biệt là đọc giả phục thuộc vào thời gian và thông tin chính xác.

Các biểu tượng đơn giản, quen thuộc, nhất quán

trong tất cả các trang

Trang 58

Ổn định về cấu trúc và nội dung

Cấu trúc: các thành phần được đặt đúng chỗ và hoạt động nhịp nhàng.

Nội dung:

– các mối liên kết luôn đảm bảo có đích đến – nội dung luôn đảm bảo thích hợp và phải cập nhật cho phù hợp với ngữ cảnh tại thời điểm đọc giả duyệt Web.

Trang 59

Phản hồi và đối thoại

Chuẩn bị trước cho việc trả lời, đáp ứng các đòi hỏi, góp ý của đọc giả một cách nhanh nhất có thể.

Luôn có cung cấp địa chỉ để liên kết với “Webmaster”

Lên kế hoạch nhân sự phụ trách lâu dài

Trang 60

Không phải mọi trình duyệt đều hiển thị trang web của chúng ta giống nhau.

Lưu ý khi có đọc giả sử dụng web browser không có khả năng hỗ trợ đồ họa (mobile, PDA, …).

Sử dụng nhãn (tag) ALT trong HTML để thay thế

Trang 61

Mua tên miền

Thuê chỗ hosting

Trang 62

Website cần được cập nhật thông tin để đọc giả luôn cảm nhận được cái mới

Nếu phần nào đó được cập nhật Æ thêm ký hiệu

“New”

Ghi thời gian cập nhật, số người truy cập…

Nếu website phức tạp Æ thêm một trang “What new

?”

Trang 63

Liên kết trang web, quảng cáo

Tạo liên kết đến các trang thông tin (đối tác, khách hàng…) Æ tăng uy tín

Khi đã ổn định Æ chuyển đổi hình thức kinh doanh, thu phí:

– Thuê đặt logo, quảng cáo

– Thu phí thành viên

– ….

Trang 64

Trang 66

Thông tin báo cáo thường cô đọng Æ trên web có

Trang 67

Khảo sát các website

Trang 68

Thiết lập nhóm, tạo Mail cho nhóm

– Đảm bảo mỗi người có Email, Account trên Moodle

Tìm kiếm thông tin về WEB Hosting

– Cách dùng Free Hosting

Công cụ lập trình và thiết kế web

– FrontPage / Dreamweaver (MX, CS3) – Photoshop (v.7, CS3)

Tiêu đề	Tổng quan về Web và Thiết kế Web
Trường học	Đại học Khoa học Tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh
Chuyên ngành	Lập trình và thiết kế Web
Thể loại	Bài giảng
Năm xuất bản	2007
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	69
Dung lượng	3,72 MB