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 webPhát triển ứng dụng web 1Đại Học Sài Gòn – Khoa CNTTNội dung3 – Tổng quan về xây dựng ứng dụng web 2Các bước thiết lập website Thiết kế websiteThiết kế giao diệnXây dựng website dưới góc nhìn ngộ nghĩnhCác bước thiết lập web 3Xác định yêu cầu WebsiteMua tên miềnThuê chỗ hostingXây dựng WebsiteĐưa vào hoạt độngDuy trì thông tin, bảo dưỡng website3 – Tổng quan về xây dựng ứng dụng webXác định yêu cầu 4Mục tiêu, yêu cầu cơ bản của websiteĐối tượng website phục vụChủ đề websiteKế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 webMụ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 websiteMục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển3 – Tổng quan về xây dựng ứng dụng webĐối tượng phục vụ 6Xác định loại đối tượng phục vụ chínhTìm hiểu đối tượng phục vụSự hiểu biếtTrình độ Sở thíchKinh 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 nhau3 – Tổng quan về xây dựng ứng dụng webChủ đề website 7Giú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ậnDiễn đàn trao đổi, mua bán, kinh doanh trực tuyếnHay 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 webMua tên miền 8Tên miền = Tên websiteTên ngắnGợi nhớDễ đọc, không gây nhầm lẫnThể hiện được tên công ty hoặc nhãn hiệu chính của công tyVd: IBM.com Lenovo.com3 – Tổng quan về xây dựng ứng dụng webMua tên miền 93 – Tổng quan về xây dựng ứng dụng webMua tên miền 103 – Tổng quan về xây dựng ứng dụng webTìm kiếm tên miền3 – Tổng quan về xây dựng ứng dụng web11Thuê hosting12Hệ điều hành của máy chủDung lượngBăng thôngNgôn ngữ hỗ trợHệ quản trị CSDL hỗ trợEmail POP3SSL3 – Tổng quan về xây dựng ứng dụng webThuê hosting133 – Tổng quan về xây dựng ứng dụng webThuê hosting143 – Tổng quan về xây dựng ứng dụng webXây dựng website15Xá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 webCác thành phần cơ bản trong thiết kế giao diện16Trang chủ (Homepage)Hệ thống định hướng (navigation – site map)Các trang chức năng thành viênGiao diện website3 – Tổng quan về xây dựng ứng dụng webTrang chủ17Toàn bộ website đều được thiết lập quanh trang chủ.Trang chủ xác định rõ chủ đề websiteTrang chủ xác định phong cách thiết kế của websiteLưu ý khi sử dụng đồ hoạ3 – Tổng quan về xây dựng ứng dụng webHệ thống menu, logo, định danh18Hệ 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 webCác trang chức năng thành viên19Hiển thị nội dungMột nhóm trang thành viên ~ 1 chức năngXâ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 webThiết kế giao diện web20 HeaderMenuContent Logo2 x 23 x 3TableMixed style.3 – Tổng quan về xây dựng ứng dụng webThiết kế giao diện: 2x2 layout213 – Tổng quan về xây dựng ứng dụng webThiết kế giao diện: dạng 3 columns223 – Tổng quan về xây dựng ứng dụng webThiết kế giao diện: Mixed style233 – Tổng quan về xây dựng ứng dụng webXác định kiểu chữ, màu sắc24Font 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ânGam màu: thống nhất trong toàn bộ WebsiteFont tiếng Việt: VNI, TCVN3, UnicodeCắ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ải25 Fixed vs. Fluid Fix web: – Tổng quan về xây dựng ứng dụng webFluide website: ác định kích thước khung nhìn26Ngườ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 webXác định cấu trúc website27Hệ thống phân cấpHệ thống các trang tiếp nốiÔ lướiMạng nhện.3 – Tổng quan về xây dựng ứng dụng webXác định cấu trúc website: Phân Cấp28Tổ chức các khối thông tin phức tạpHệ thống được dùng thông dụng nhấtGần với môi trường tổ chức thế giới thực3 – Tổng quan về xây dựng ứng dụng webXác định cấu trúc website: Nối tiếp29Biểu diễn thông tin tuần tự, nối tiếp theo thời gianCác thông tin tra khảo dạng từ điểnThích hợp cho hệ thống nhỏ3 – Tổng quan về xây dựng ứng dụng webXác định cấu trúc website: Ô lưới30Danh sách khoa học, các biến cố sự kiệnMỗi thành viên phải có cùng cấu trúcKhó hiểu, khó xác định mối liên quan giữ các loại thông tinThích hợp cho người sử dụng có kinh nghiệm3 – Tổng quan về xây dựng ứng dụng webXác định cấu trúc website: Ô lưới313 – Tổng quan về xây dựng ứng dụng webXác định cấu trúc website: Ô lưới323 – Tổng quan về xây dựng ứng dụng webXác định cấu trúc website: Mạng nhên33Ít hạn chế cho việc sử dụng thông tinCấu trúc liên kết phức tạp, nhưng khai thác triệt để ưu điểm hiperlinkCấu trúc phi thực tế nhất, khó hiểu, khó dự đoánThí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 webXác định cấu trúc website: mạng nhện343 – Tổng quan về xây dựng ứng dụng webXác định cấu trúc website: mạng nhện353 – Tổng quan về xây dựng ứng dụng webChú trọng vào nguyên tắc thiết kế36Thiết kế hướng người sử dụngCác giúp đỡ định hướng rõ ràngKhô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 địnhPhản hổi đối thoạiTính tương thích trên các trình duyệtTK cho quản trị và cập nhật nội dung.3 – Tổng quan về xây dựng ứng dụng webThiết kế hướng người sử dụng37Yêu cầu mức độ hoàn hảo của giao diệnCá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 webCác giúp đỡ định hướng rõ ràng38Độ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 webCác giúp đỡ định hướng rõ ràng393 – Tổng quan về xây dựng ứng dụng webKhông có trang cuối (dead-end)40Mỗ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 trangTrang 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 webBăng thông và ảnh hưởng41Sự kiên nhẫn của độc giả có giới hạnTố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à internet3 – Tổng quan về xây dựng ứng dụng webBăng thông và ảnh hưởng423 – Tổng quan về xây dựng ứng dụng webThiết kế trang web cho mạng Intranet43Một số site thiết kế riêng cho các tổ chức, sử dụng mạng LANMụ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 webTính đơn giản và tính nhất quán44Tuỳ vào loại ứng dụngCá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 webTính ổn định45Ổn định về cấu trúc và nộidungCấ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.3 – Tổng quan về xây dựng ứng dụng webPhản hồi và đối thoại46Chuẩ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 webTương thích trên các trình duyệt khác nhau47Không phải mọi trình duyệt đều hiển thị trang web của chúng ta giống nhauLư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 webThiết kế cho việc quản trị và cập nhật nộidung483 – Tổng quan về xây dựng ứng dụng webĐưa vào hoạt động – thời gian quản lý49Website 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 webLiên kết trang web, quảng cáo50Tạo liên kết đến các thông tin (đối tác, khách hàng,)  tăng uy tínKhi đã ổn định  chuyển đổi hình thức kinh doanh, thu phí:Thuê đặt logo quảng cáoThu phí thành viên3 – Tổng quan về xây dựng ứng dụng webPhụ lục, nguồn thông tin, các trang giúp đỡ FAQ51Thông tin báo cáo thường cô đọng  trên web có thêm các phụ lụcFAQ (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 webXây dựng website dưới góc nhìn ngộ nghĩnh52Nguồ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 – Tổng quan về xây dựng ứng dụng webTổng quan về xây dựngứng dụng webBài thực hành 1Đại Học Sài Gòn – Khoa CNTTKhảo sát các website54Khảo sát các trang Web và rút ra các nhận xét về cách thiết kế trang WebLà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 webKhảo sát các website55Một số trang web cung cấp hình ảnh làm web – www.clipart.com – ột số trang web cung cấp các kiểu font chữ– ột số trang web cung cấp mẫu thiết kế giao diện web– – Tổng quan về xây dựng ứng dụng webChuẩn bị chọn chủ đề đồ án56 Hướng dẫn các hướng làm website Tham khảo các website chọn website cho nhóm3 – Tổng quan về xây dựng ứng dụng webTổng kết 57 Các bước thiết lập website Thiết kế lập trình websiteThiết kế giao diệnXây dựng website dưới góc nhìn ngộ nghĩnhBài thực hành 13 – Tổng quan về xây dựng ứng dụng webYêu cầu đọc sách58 – Tổng quan về xây dựng ứng dụng webYêu cầu đọc sách59Lisa Lopuck(2006), Web Design For Dummies (2nd Edition), Wiley Publishing - Chapter 17, 18GOOGLE, GOOGLE, GOOGLE , GOOGLE , GOOGLE3 – Tổng quan về xây dựng ứng dụng webThank you !