Bài giảng Phát triển ứng dụng Web 1 - Chương 3: Tổng quan về xây dựng ứng dụng Web

Tổng quan về xây dựngứng dụng web 
Phát triển ứng dụng web 1 
Đại Học Sài Gòn – Khoa CNTT 
Nội dung 
3 – Tổng quan về xây dựng ứng dụng web 
 2 
Các bước thiết lập website 
Thiết kế website 
Thiết kế giao diện 
Xây dựng website dưới góc nhìn ngộ nghĩnh 
Các bước thiết lập web 
 3 
Xác định yêu cầu Website 
Mua tên miền 
Thuê chỗ hosting 
Xây dựng Website 
Đưa vào hoạt động 
Duy trì thông tin, bảo dưỡng website 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định yêu cầu 
 4 
Mục tiêu, yêu cầu cơ bản của website 
Đối tượng website phục vụ 
Chủ đề website 
Kết quả thu được sẽ là những thông tin quan trọng trong giai đoạn xây dựng web (Planning). 
3 – Tổng quan về xây dựng ứng dụng web 
Mục tiêu yêu cầ u cơ bản 
 5 
Đề 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 w ebsite 
Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển 
3 – Tổng quan về xây dựng ứng dụng web 
Đối tượng phục vụ 
 6 
Xác định loại đối tượng phục vụ chính 
Tìm hiểu đối tượng phục vụ 
Sự hiểu biết 
Trình độ 
Sở thích 
Kinh nghiệm duyệt web .. 
Thiết kế tốt sẽ thích hợp cho nhiều dạng đối tượng có trìh độ nhu cầu khác nhau 
3 – Tổng quan về xây dựng ứng dụng web 
Chủ đề website 
 7 
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á,  
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 tuyến 
Hay cung cấp dịch vụ và thu lợi từ quảng cáo,  
3 – Tổng quan về xây dựng ứng dụng web 
Mua tên miền 
 8 
Tên miền = Tên website 
Tên ngắn 
Gợi nhớ 
Dễ đọc, không gây nhầm lẫn 
Thể hiện được tên công ty hoặc nhãn hiệu chính của công ty 
Vd: 	IBM.com 
	Lenovo.com 
3 – Tổng quan về xây dựng ứng dụng web 
Mua tên miền 
 9 
3 – Tổng quan về xây dựng ứng dụng web 
Mua tên miền 
 10 
3 – Tổng quan về xây dựng ứng dụng web 
Tìm kiếm tên miền 
3 – Tổng quan về xây dựng ứng dụng web 
11 
Thuê hosting 
12 
Hệ điều hành của máy chủ 
Dung lượng 
Băng thông 
Ngôn ngữ hỗ trợ 
Hệ quản trị CSDL hỗ trợ 
Email POP3 
SSL 
3 – Tổng quan về xây dựng ứng dụng web 
Thuê hosting 
13 
3 – Tổng quan về xây dựng ứng dụng web 
Thuê hosting 
14 
3 – Tổng quan về xây dựng ứng dụng web 
Xây dựng website 
15 
Xác định yêu cầu (Planning) 
Phân tích và thiết kế hệ thống (Analysys & Design) 
Thiết kế giao diện (Interface – GUI) 
Lập trình (Code – Develop) 
Kiểm tra (Test) 
Triển khai (Deploy) 
Nâng cấp (Upgrade) 
3 – Tổng quan về xây dựng ứng dụng web 
Các thành phần cơ bản trong thiết kế giao diện 
16 
T rang chủ (Homepage) 
Hệ thống định hướng (navigation – site map) 
Các trang chức năng thành viên 
Giao diện website 
3 – Tổng quan về xây dựng ứng dụng web 
Trang chủ 
17 
Toàn bộ website đều được thiết lập quanh trang chủ . 
Trang chủ xác định rõ chủ đề website 
Trang chủ xác định phong cách thiết kế của website 
Lưu ý khi sử dụng đồ hoạ 
3 – Tổng quan về xây dựng ứng dụng web 
Hệ thống menu, logo, định danh 
18 
Hệ thống định hướng (navigation – site map) 
Hệ thống menu, naviation đầy đủ, rõ ràng. 
Vị trí nhất quán, logic (logo công ty) 
Cần quan tâm đến việc sư dụng hiệu ứng. 
3 – Tổng quan về xây dựng ứng dụng web 
Các trang chức năng thành viên 
19 
Hiển thị nội dung 
Một nhóm trang thành viên ~ 1 chức năn g 
Xây dựng theo cấu trúc cơ bản 
Nhất quán, phù hợp với các thuộc tính đã định dạng trước và phải theo phong cách của trang chủ 
. 
3 – Tổng quan về xây dựng ứng dụng web 
Thiết kế giao diện web 
20 
 Header 
Menu 
Content 
Logo 
2 x 2 
3 x 3 
Table 
Mixed style. 
3 – Tổng quan về xây dựng ứng dụng web 
Thiết kế giao diện: 2x2 layout 
21 
3 – Tổng quan về xây dựng ứng dụng web 
Thiết kế giao diện: dạng 3 columns 
22 
3 – Tổng quan về xây dựng ứng dụng web 
Thiết kế giao diện: Mixed style 
23 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định kiểu chữ, màu sắc 
24 
Font 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 
Cắt đoạn và tóm lược thông tin trong văn bản. 
3 – Tổng quan về xây dựng ứng dụng web 
Độ phân giải 
25 
 Fixed vs. Fluid 
 Fix web:  
3 – Tổng quan về xây dựng ứng dụng web 
Fluide website:  
Xác định kích thước khung nhìn 
26 
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, có thể làm gì 
Hầu hết các trang web đều không vừa khớp với màn hình 14-15’’ 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website 
27 
Hệ thống phân cấp 
Hệ thống các trang tiếp nối 
Ô lưới 
Mạng nhện. 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: Phân Cấp 
28 
Tổ chức các khối thông tin phức tạp 
Hệ thống được dùng thông dụng nhất 
Gần với môi trường tổ chức thế giới thực 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: Nối tiếp 
29 
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 
Thích hợp cho hệ thống nhỏ 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: Ô lưới 
30 
Danh sách khoa học, các biến cố sự kiện 
Mỗi thành viên phải có cùng cấu trúc 
Khó hiểu, khó xác định mối liên quan giữ các loại thông tin 
Thích hợp cho người sử dụng có kinh nghiệm 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: Ô lưới 
31 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: Ô lưới 
32 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: Mạng nhên 
33 
Í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 hiperlink 
Cấu trúc phi thực tế nhất, khó hiểu, khó dự đoán 
Thích hợp với những site nhỏ, dành cho người sử dụng có nhiều kinh nghiệm. 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: mạng nhện 
34 
3 – Tổng quan về xây dựng ứng dụng web 
Xác định cấu trúc website: mạng nhện 
35 
3 – Tổng quan về xây dựng ứng dụng web 
Chú trọng vào nguyên tắc thiết kế 
36 
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 
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 . 
3 – Tổng quan về xây dựng ứng dụng web 
Thiết kế hướng người sử dụng 
37 
Yêu cầu mức độ hoàn hảo của giao diện 
Cách tốt nhất: thử nghiệm và nhận phản hồi. 
3 – Tổng quan về xây dựng ứng dụng web 
Các giúp đỡ định hướng rõ ràng 
38 
Độc giả có thể trả lời các câu hỏi 
Đang ở đâu ? 
Có thể làm gì ? 
Có thể đi tiếp đến đâu ? 
Biểu tượng nhất quán, dễ hiểu, theo chuẩn qui định. 
3 – Tổng quan về xây dựng ứng dụng web 
Các giúp đỡ định hướng rõ ràng 
39 
3 – Tổng quan về xây dựng ứng dụng web 
Không có trang cuối (dead-end) 
40 
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 đến với các trang thành viên trong website. 
Nên để liên kết về trang chủ cho tất cả trang thành viên. 
3 – Tổng quan về xây dựng ứng dụng web 
Băng thông và ảnh hưởng 
41 
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 các thiết kế intranet và internet 
3 – Tổng quan về xây dựng ứng dụng web 
Băng thông và ảnh hưởng 
42 
3 – Tổng quan về xây dựng ứng dụng web 
Thiết kế trang web cho mạng Intranet 
43 
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á trị 
Đừng để ý tới băng thông và tốc độ chú trọng đến nội dung có giá trị và sự hấp dẫn cho website. 
3 – Tổng quan về xây dựng ứng dụng web 
Tính đơn giản và tính nhất quán 
44 
Tuỳ vào loại ứng dụng 
Cái người xem cần là thời gian và thông tin chính xác. 
Đừng để ý tới băng thông và tốc độ chú trọng đến nội dung có giá trị và sự hấp dẫn cho website. 
3 – Tổng quan về xây dựng ứng dụng web 
Tính ổn định 
45 
Ổn định về cấu trúc và nộidung 
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 l uô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. 
3 – Tổng quan về xây dựng ứng dụng web 
Phản hồi và đối thoại 
46 
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ử dụng 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. 
3 – Tổng quan về xây dựng ứng dụng web 
Tương thích trên các trình duyệt khác nhau 
47 
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 không có khả năng hỗ trợ đồ hoạ (mobile, PDA,) 
Sử dụng nhãn (tag) ALT trong HTML để thay thế. 
3 – Tổng quan về xây dựng ứng dụng web 
Thiết kế cho việc quản trị và cập nhật nộidung 
48 
3 – Tổng quan về xây dựng ứng dụng web 
Đưa vào hoạt động – thời gian quản lý 
49 
Website cần được cập nhật thông tin. 
Nếu phần nào đó đươcj 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 ?” 
3 – Tổng quan về xây dựng ứng dụng web 
Liên kết trang web, quảng cáo 
50 
Tạo liên kết đến các 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 
3 – Tổng quan về xây dựng ứng dụng web 
Phụ lục, nguồn thông tin, các trang giúp đỡ FAQ 
51 
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) : 
Lý tưởng cho việc thiết kế website hỗ trợ. 
Giảm thiểu nhân sự và chi phí cho việc hỗ trợ, tư vấn khách hàng. 
3 – Tổng quan về xây dựng ứng dụng web 
Xây dựng website dưới góc nhìn ngộ nghĩnh 
52 
Nguồn từ: 
Trần Thị Bích Hạnh (2007), Quá trình xây dựng 1 website dưới góc nhìn ngộ nghĩnh, 
Bài giảng môn : Lập trình và thiết kế web, Khoa CNTT, ĐH KHTN 
3 – Tổng quan về xây dựng ứng dụng web 
Tổng quan về xây dựngứng dụng web 
Bài thực hành 1 
Đại Học Sài Gòn – Khoa CNTT 
Khảo sát các website 
54 
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 
Làm quen với cách sử dụng một số công cụ tiện ích hỗ trợ trong quá trình thiết kế Web 
– Frontpage, Dreamweaver,  
- Photoshop, Flash,  
3 – Tổng quan về xây dựng ứng dụng web 
Khảo sát các website 
55 
Một số trang web cung cấp hình ảnh làm web 
 – www.clipart.com 
 –  
Một số trang web cung cấp các kiểu font chữ 
–  
Một số trang web cung cấp mẫu thiết kế giao diện web 
–  
3 – Tổng quan về xây dựng ứng dụng web 
Chuẩn bị chọ n chủ đề đồ án 
56 
 Hướng dẫn các hướng làm website 
 Tham khảo các website 
 chọn website cho nhóm 
3 – Tổng quan về xây dựng ứng dụng web 
Tổng kết 
 57 
 Các bước thiết lập website 
Thiết kế lập trình website 
Thiết kế giao diện 
Xây dựng website dưới góc nhìn ngộ nghĩnh 
Bài thực hành 1 
3 – Tổng quan về xây dựng ứng dụng web 
Yêu cầu đọc sách 
58 
3 – Tổng quan về xây dựng ứng dụng web 
Yêu cầu đọc sách 
59 
Lisa Lopuck(2006), Web Design For Dummies (2 nd Edition), Wiley Publishing - Chapter 17, 18 
GOOGLE, GOOGLE, GOOGLE , GOOGLE , GOOGLE 
3 – Tổng quan về xây dựng ứng dụng web 
Thank you !