Thiết kế Web- TỔNG QUAN

ệ ửCác dịch vụ trên Internet  Thư điện tử - email Electronic mail  Là dịch vụ trao đổi các thông điểm qua mạng viễn thông  Sử dụng giao thức SMTP/POP3 để gởi nhận email  Sử dụng giao

TRƯỜNG ĐẠI HỌC SÀI GÒN

Khái niệm cơ bản

 Mạng máy tính: Computer Network: Hệ thống các

máy tính được kết nối với nhau nhằm trao đổi dữ liệ

Khái niệm cơ bản

 Xác định một máy tính trong mạng dựa

 ác đị ộ áy o g ạ g dựatrên giao thức TCP/IP Hai máy tính trong mạng có 2 địa chỉ IP khác nhau

web của Đại học Sài Gòn

 Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ

Khái niệm cơ bản

 Tê iề D i N

 Tên miền: Domain Name

 Là tên được “gắn” với 1 địa chỉ IP.

 Máy chủ DNS thực hiện việc “gắn”

 sgu: Tên cơ quan (Cấp 3)

 fit: đơn vị nhỏ trong cơ quan (Cấp 4)

T fit: đơn vị nhỏ trong cơ quan (Cấp 4)

 Đặc biệt: Tên localhost được gắn

Khái niệm cơ bản

 Máy chủ-máy phục vụ: Server

 Là máy tính chuyên cung cấp tài

nguyên, dịch vụ cho máy tính khác.

chuyên dụng để có khả năng cung cấp

 Một máy chủ có thể dùng cho một hay

nhiều mục đích Tên máy chủ thường gắn với mục đích sử dụng Ví dụ:

Khái niệm cơ bản

Khái niệm cơ bản

thông tin multimedia dựa trên hypertext

 Phân tán: Thông tin được đặt trên nhiều

 Multimedia: thông tin bao gồm text,

graphics, sound, video

Khái niệm cơ bản

 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

 URL-Uniform Resource Locator

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

P  Client-script: VB script, Java script

 Server-script: ASP, PHP, JSP, ASP.NET,

10

W b h t độ thế à ?

Khái niệm cơ bản

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

Khái niệm chính Browser

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

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

 TIFT, 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 để

URL định vị các tài nguyên trên Internet

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

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

ệ ử

Các dịch vụ trên Internet

 Thư điện tử - email (Electronic mail)

 Là dịch vụ trao đổi các thông điểm qua mạng viễn

thông

 Sử dụng giao thức SMTP/POP3 để gởi nhận email

 Sử dụng giao thức SMTP/POP3 để gởi nhận email

 Địa chỉ email có dạng: name@domain_name

 Được quản lý bởi Mail Server ( <> MailClient)

 Truyền tải tập tin – FTP – File Transfer Protocol

 Download website offline

 Cho phép download website về và truy cập offline p p y p

 Teleport Pro – http://www.tenmax.com

 Offline Explorer Enterprise: http://www.metaproducts.com

P  Copernic – www.copernic.com: hỗ trợ tìm kiếm thông minh

trên nhiều Search Engine cùng lúc, và loại bot kết quả trùng.

Một số thuật ngữ thông dụng

 Internet: Mạng máy tính toàn cầu kết nối các

mạng máy tính khắp nơi trên thế giới Tập các

giao thức được dùng gọi chung là TCP/IP

 Intranet: Mạng cục bộ có kiến trúc tương tự

 Website: 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.

 Webpage: Là trang web Có thể hiển thị các

Một số thuật ngữ thông dụng

 Web browser: Trình duyệt web, dùng để hiển thị các

trang web Các web browser thông dụng hiện nay là IE và

Firefox

 Homepage: Trang chủ Thường là trang đầu tiên (mặc

định) khi truy cập một website.

 Hyperlink: siêu liên kết Dùng để liên kết các trang web

và dịch vụ của các website trên Internet.

 ISA (Internet Access Provider): Nhà cung cấp

đường truyền Internet

Một số thuật ngữ thông dụng

 ISP (Internet Service Provider): Nhà cung cấp

dịch vụ Internet Một số ISP hiện nay ở Việt Nam: VDC, ị ụ ộ ệ y ệ ,

FPT, SaigonNet, VNPT, Viettel…

 Search engines: Máy tìm kiếm Các công cụ tìm kiếm

hiện nay, Google, Wiki,….

 HTTP, FTP, SMTP, POP3: Đây là các giao thức được

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

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

 Mua tên miền

Bài thực hành 1

 Đăng ký nhóm (file Excel)

 Tì kiế thô ti ề F h ti

 Tìm kiếm thông tin về Free hosting

 Đảm bảo mỗi người có Email

 Đảm bảo mỗi người có Email

 Khảo sát giao diện, tính năng của các

Đại Học Sài Gòn – Khoa CNTT

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

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

 Mua tên miền

tin quan trọng trong giai đoạn xây

30dựng web (Planning).

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

Đề ra mục tiêu khái quát, ngắn gọn,

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

Xác định loại đối tượng phục vụ chính

Tìm hiểu đối tượng phục vụ

 Thiết kế tốt sẽ thích hợp cho nhiều dạng

đối tượng có trình độ nhu cầu khác nhau

Chủ đề website

Giúp định hướng cho công việc thiết kế

Giới thiệu công ty tổ chức hàng hoá

Giới thiệu công ty, tổ chức, hàng hoá, …

Tuỳ thuộc ngành nghề: giáo dục, giải trí …

Diễn đàn trao đổi thảo luận

Diễn đàn trao đổi, mua bán, kinh doanh trực

Mua tên miền

 Xác định tên

 Tên tiếng Việt

 Tên tiếng Việt

 Tên giao dịch tiếng Anh

 Đăng ký tên miền càng sớm càng tốt

 Thủ tục đơn giản, nhanh chóng

Thuê hosting

 Xác định môi trường vận hành của website

 Support ASP, PHP…, SQL Server, MySQL…

 Đắt hơn máy chủ Linux

 Xác định băng thông, các dịch vụ đảm bảo an

toàn, an ninh, backup dữ liệu…

38

 Web tĩnh: Tính theo các kiểu trang

 Trang đơn giản: 70 – 150.000đ/trang

 Trang hiệu ứng hình ảnh tốt: 150 – 350 000đ/trang

 Trang hiệu ứng hình ảnh tốt: 150 – 350.000đ/trang

 Web động: Tính theo các mục, các khối chức năng

P  Các chức năng phía user: đưa tin, phân loại, tìm kiếm…

 Các chức năng phía Admin: Đăng nhập, xem/thêm/sửa/xóa tin bài, báo cáo, thống kê…

 Tóm lại: Từ 5 triệu trở lên (Thông dụng: 10-30 triệu)

T  Tóm lại: Từ 5 triệu trở lên (Thông dụng: 10-30 triệu)

 Vị trí nhất quán, logic (logo công ty)

 Cần quan tâm đến việc sử dụng

Các trang chức năng thành viên

 Hiển thị nội dung

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

Thiết kế giao diện: Mixed style

Xác định kiểu chữ, màu sắc

Font chữ phụ thuộc vào

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

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…

Cắt đoạn và tóm lược thông tin trong văn bản.

54

Xác định kích thước khung nhìn

 Người đọc phải cảm nhận được kích thước

của trang thông tin, biết họ đang ở đâu,

How C.R.A.P is Your Site Design?

 C.R.A.P stands for Contrast Repetition Alignment

Proximity

 Contrast: Elements that aren’t the same should be very

 Contrast: Elements that aren t the same should be very

different so they stand out, making them “slightly different”

confuses the user into seeing a relation that doesn’t exist.

 Repetition: Repeat styles down the page for a cohesive

 Repetition: Repeat styles down the page for a cohesive

feel, if you style related elements the same way in one area, continue that trend for other areas for consistency.

 Alignment: Everything on the page needs to be visually

 Alignment: Everything on the page needs to be visually

connected to something else, nothing should be out of place or distinct from all other design elements.

 Proximity: Proximity creates related meaning: elements

P  Proximity: Proximity creates related meaning: elements

that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.

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

 Tổ chức các khối thông tin phức tạp

Xác định cấu trúc website: Nối tiếp

 Biểu diễn thông tin tuần tự, nối tiếp

theo thời gian

 Các thông tin tra khảo dạng từ điển

Xác định cấu trúc website: Ô lưới

 Danh sách khoa học, các biến cố sự

giữ các loại thông tin

 Thích hợp cho người sử dụng có kinh

Xác định cấu trúc website: Ô lưới

Xác định cấu trúc website: Mạng nhện

 Ít hạn chế cho việc sử dụng thông tin

 Cấu trúc liên kết phức tạp nhưng khai

thác triệt để ưu điểm hyperlink

Chú trọng vào nguyên tắc thiết kế

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

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

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

 Băng thông và các yếu tố phần cứng

 Đơn giản, nhất quán và tính ổn định

 Đơn giản, nhất quán và tính ổn định

 Phản hồi đối thoại

 Tính tương thích trên các trình duyệt

 TK cho quản trị và cập nhật nội dung

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

 Yêu cầu mức độ hoàn hảo của giao diện

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

 Mỗi trang có ít nhất một liên kết Luôn

có khả năng quay về trang chủ các

trang chủ chốt trên trang

 Trang dead-end: sẽ là trang không thể

đi đế ới á t thà h iê t

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

 Sự kiên nhẫn của độc giả có giới

h

hạn

 Tốc độ đôi khi là yếu tố quyết định

 Tốc độ đôi khi là yếu tố quyết định

đến việc lựa chọn website.

Thiết kế trang web cho mạng Intranet

Một số site thiết kế riêng cho các tổ chức,

sử dụng mạng LAN

Mục tiêu: nâng cao thời gian truy cập,

ẫ

dẫn dắt vào sâu trong cấu trúc website

 đòi hỏi thông tin phải hấp dẫn, có giá

Đừng để ý tới băng thông và tốc độ

 chú trọng đến nội dung có giá trị và sự

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

Tuỳ vào loại ứng dụng

Cái người xem cần là thời gian và

 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.

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 người sử

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

 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ó người sử dụng web browser

Đưa vào hoạt động – thời gian quản lý

 Website cần được cập nhật thông tin

 Nếu phần nào đó được cập nhật

 Nếu phần nào đó được cập nhật

 thêm ký hiệu “New”

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

Tạo liên kết đến các thông tin (đối

Quảng bá website

 Đăng ký Website vào các máy tìm kiếm trong nước và thế giới (search engine)

 Vietnam Searchengine: Panvietnam, vinaseek…

 Global Searchengine: google, altavista, hotboot…

Google rank (the important of website: 1 10)

 Alexa rank: Traffic ranking of website.

 Nâng tầm phát triển Website

 Tự động hoá dần các chức năng của Website.

 Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24 trên Internet

T hiệu quả 24/24 trên Internet.

Phụ lục, nguồn thông tin, các trang giúp đỡ FAQ

 Thông tin báo cáo thường cô đọng

 trên web có thêm các phụ lục

 FAQ (Frequently Answer Questions):

Đại Học Sài Gòn – Khoa CNTT

Khảo sát các website

Khảo sát các trang Web và rút ra các

nhận xét về cách thiết kế trang Web