PHÁT TRIỂN ỨNG DỤNG WEB
1. Trình bày cấu trúc cơ bản của một trang web?
Hình 1. Cấu trúc, thành phần của website
1 . Phần Header: header là phần đầu của trang web. Nó bao gồm các
phần 1,2,3,4 ở trên hình vẽ
Ô số 1 là logo. Logo là ảnh đại diện của trang web
Ô số 2 là slogan: Là nơi thể hiện định hướng của trang web
Ô số 3 là quảng cáo: là nơi bạn đặt quảng cáo
Ô số 4 là menu: là nơi chứa các chuyên mục cho trang web của bạn
2. Phần Content: Là nơi chứa nội dung của trang web, chứa tất cả
những gì bạn muốn thể hiện. Nó ở vị trí 5 và 6 trên hình vẽ.
Trong các ô số 5 và số 6 có thể chia nhỏ hơn nữa thành các ô khác để phù
hợp với các web khác nhau nhưng điều đó không quan trọng. Khi bạn đã
quen với cấu trúc này rồi thì việc chia nhỏ hơn nữa rất đơn giản.
Ô số 5 là Content: chứa nội dung chính thế hiện. Thông thường chỉ là
ảnh đại diện, tiêu đề, và vài dòng mô tả của bài viết.
Ô số 6 là Sidebar second: Chứa các nội dung liên quan đến nội dung
chính đang trình bày
3. Phần footer: Phần để các thông tin cần để người xem có thể liên hệ
với người chủ trang web. Là ô số 7 trên hình vẽ.
Lưu ý:
Các trang cơ bản cần xây dựng khi làm web. 1 trang web thì có 3 trang
chính sau: Trang chủ, trang chuyên mục và trang chi tiết.
Trang chủ: là bộ mặt của trang web, là phần đầu tiên khi người dùng
vào web được tiếp cận; trang chủ là trang khi bạn gõ tên miền lên trình
duyệt sẽ vào luôn.
Trang chuyên mục: Các bài viết trong trang web có cùng nội sẽ được
nhóm vào với nhau thành chuyên mục. Trang chuyên mục là trang để
thể hiện các nội dung được nhóm đó
Trang chi tiết: Là trang thể hiện chi tiết nội dung bài viết.
Cấu trúc cơ bản của trang web
Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có
trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để
layout.
Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các
button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...
Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang
quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub
navigation).
Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần
nội dung phụ (sidebar).
Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người
dùng xem.
Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local
navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết
quảng cáo,...
Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa
chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn
trang, các banner liên kết,...
2. Nguyên tắc cơ bản thiết kế giao diện web?
"Chuyển động của mắt và sự ảnh hưởng đến giao diện" : Logo + Nút
bấm + Sự sắp xếp + Không gian
Logo đặt ở phía bên trái, nơi nhận được nhiều sự chú ý nhất của
website. Tránh đặt chung với banner
Nội dung quan trọng nên tận dụng đặt ở bên trái website không nên đặt
bên phải là nơi kém được chú ý nhất.
Các nút điều hướng nên đặt ở trên cùng hoặc nếu ở bên trái thì nên
thiết kế gọn, thậm chí là dạng menu ẩn.
Nội dung quan trọng nhất nên để ở hai đoạn đầu của website, nếu có
thể hãy sử dụng hình ảnh để truyền thông điệp thay vì sử dụng văn
bản.
Không nên viết quá nhiều, hãy để những khoảng trống và hình ảnh đẹp
nhiều hơn vì việc có quá nhiều nội dung thông tin trong một bài mà
không có hình ảnh sẽ gây khó chịu cho người đọc.
=> Tóm lại, cách nhìn và đọc của độc giả chính là điều quan trọng nhất
trong thiết kế giao diện cũng như thiết kế website tổng thể mà cụ thể là
sự chuyển động của mắt. Khi thiết kế bạn nên dựa vào những nguyên
tắc này để có một website hoàn hảo, điều hướng đúng người dùng
a. Đảm bảo tính thống nhất
b. Cho phép người dùng sử dụng các phím tắt
c. Cung cấp phản hồi
d. Chia nhỏ hành động để thấy được kết quả ngắn hạn
e. Dễ dàng khắc phục lỗi
f. Cho phép đảo ngược hành động
g. Con người làm chủ
h. Giảm tải bộ nhớ ngắn hạn
3. Phác họa giao diện khung mẫu cho những website đồ án?
4. Phác họa giao diện khung mẫu cho website thương mại?
5. Phác họa giao diện khung mẫu cho website giải trí?
6. Phác họa giao diện khung mẫu cho blog?