Bài giảng lập trình web và ứng dụng tổng quan về xây dựng ứng dụng web phan thị kim loan

9/20/23 Lập trình web ứng dụng Đại Học Sài Gòn – Khoa CNTT Tổng quan xây dựng ứng dụng web GV: Phan Thị Kim Loan Nội dung Các bước thiết lập website Thiết kế website • Thiết kế giao diện Xây dựng website góc nhìn ngộ nghĩnh – Tổng quan xây dựng ứng dụng web 2 9/20/23 Các bước thiết lập web § 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 – Tổng quan xây dựng ứng dụng web 3 Xác định yêu cầu § Mục tiêu, yêu cầu website § Đối tượng website phục vụ § Chủ đề website Ø Kết thu thông tin quan trọng giai đoạn xây dựng web (Planning) – Tổng quan xây dựng ứng dụng web 4 9/20/23 Mục tiêu yêu cầu • Đề mục tiêu khái quát, ngắn gọn, rõ ràng website cần thiết kế • Là cơng cụ để đánh giá thành bại website • Mục tiêu phải dài hạn, bao trùm toàn kế hoạch phát triển – Tổng quan xây dựng ứng dụng web 5 Đối tượng phục vụ • Xác định loại đối tượng phục vụ • 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 thích hợp cho nhiều dạng đối tượng có trìh độ nhu cầu khác – Tổng quan xây dựng ứng dụng web 6 9/20/23 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 hố, … −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ụ thu lợi từ quảng cáo, … – Tổng quan xây dựng ứng dụng web 7 Mua tên miền § 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ể tên cơng ty nhãn hiệu • Vd: IBM.comchính cơng ty Lenovo.com – Tổng quan xây dựng ứng dụng web 8 9/20/23 Mua tên miền – Tổng quan xây dựng ứng dụng web 9 Mua tên miền – Tổng quan xây dựng ứng dụng web 10 10 9/20/23 Tìm kiếm tên miền – Tổng quan xây dựng ứng dụng web 11 11 Thuê hosting § Hệ điều hành 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 § … – Tổng quan xây dựng ứng dụng web 12 12 9/20/23 Thuê hosting – Tổng quan xây dựng ứng dụng web 13 13 Thuê hosting – Tổng quan xây dựng ứng dụng web 14 14 9/20/23 Xây dựng website § Xác định u cầu (Planning) § Phân tích 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) – Tổng quan xây dựng ứng dụng web 15 15 Các thành phần thiết kế giao diện § Trang chủ (Homepage) § Hệ thống định hướng (navigation – site map) § Các trang chức thành viên Ø Giao diện website – Tổng quan xây dựng ứng dụng web 16 16 9/20/23 Trang chủ § Tồn website 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ế website Lưu ý sử dụng đồ hoạ – Tổng quan xây dựng ứng dụng web 17 17 Hệ thống menu, logo, định danh § Hệ thống định hướng (navigation – site map) § Hệ thống menu, naviation đầy đủ, rõ ràng § Vị trí qn, logic (logo cơng ty) § Cần quan tâm đến việc sư dụng hiệu ứng – Tổng quan xây dựng ứng dụng web 18 18 9/20/23 Các trang chức thành viên § Hiển thị nội dung § Một nhóm trang thành viên ~ chức § Xây dựng theo cấu trúc § Nhất quán, phù hợp với thuộc tính định dạng trước phải theo phong cách trang chủ 19 – Tổng quan xây dựng ứng dụng web 19 Thiết kế giao diện web Logo Menu Header Content § 2x2 § 3x3 § Table § Mixed style – Tổng quan xây dựng ứng dụng web 20 20 10 9/20/23 Xác định cấu trúc website: Ô lưới – Tổng quan xây dựng ứng dụng web 31 31 Xác định cấu trúc website: Ô lưới – Tổng quan xây dựng ứng dụng web 32 32 16 9/20/23 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, khai thác triệt để ưu điểm hyperlink § Cấu trúc phi thực tế nhất, khó hiểu, khó dự đốn § Thích hợp với site nhỏ, dành cho người sử dụng có nhiều kinh nghiệm – Tổng quan xây dựng ứng dụng web 33 33 Xác định cấu trúc website: mạng nhện – Tổng quan xây dựng ứng dụng web 34 34 17 9/20/23 Xác định cấu trúc website: mạng nhện – Tổng quan xây dựng ứng dụng web 35 35 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 yếu tố phần cứng § Đơn giản, quán tính ổn định § Phản hổi đối thoại § Tính tương thích trình duyệt § TK cho quản trị cập nhật nội dung – Tổng quan xây dựng ứng dụng web 36 36 18 9/20/23 Thiết kế hướng người sử dụng § Yêu cầu mức độ hồn hảo giao diện § Cách tốt nhất: thử nghiệm nhận phản hồi – Tổng quan xây dựng ứng dụng web 37 37 Các giúp đỡ định hướng rõ ràng § Độc giả trả lời câu hỏi • Đang đâu ? • Có thể làm ? • Có thể tiếp đến đâu ? § Biểu tượng quán, dễ hiểu, theo chuẩn qui định – Tổng quan xây dựng ứng dụng web 38 38 19 9/20/23 Các giúp đỡ định hướng rõ ràng – Tổng quan xây dựng ứng dụng web 39 39 Không có trang cuối (dead-end) § Mỗi trang có liên kết Ln có khả quay trang chủ, trang chủ chốt trang § Trang dead-end: trang đến với trang thành viên website § Nên để liên kết trang chủ cho tất trang thành viên – Tổng quan xây dựng ứng dụng web 40 40 20 9/20/23 Băng thơng ảnh hưởng § Sự kiên nhẫn độc giả có giới hạn § Tốc độ yếu tố định đến việc lựa chọn website § Phân biệt thiết kế intranet internet – Tổng quan xây dựng ứng dụng web 41 41 Băng thông ảnh hưởng – Tổng quan xây dựng ứng dụng web 42 42 21 9/20/23 Thiết kế trang web cho mạng Intranet § Một số site thiết kế riêng cho 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 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 tốc độ trọng đến nội dung có giá trị hấp dẫn cho website 43 – Tổng quan xây dựng ứng dụng web 43 Tính đơn giản tính qn § Tuỳ vào loại ứng dụng § Cái người xem cần thời gian thơng tin xác § Đừng để ý tới băng thông tốc độ trọng đến nội dung có giá trị hấp dẫn cho website – Tổng quan xây dựng ứng dụng web 44 44 22 9/20/23 Tính ổn định § Ổn định cấu trúc nộidung § Cấu trúc: thành phần đặt chỗ hoạt động nhịp nhng Đ Ni dung: ã Cỏc mi liờn kt luụn đảm bảo có đích đến • Nội dung ln đảm bảo thích hợp phải cập nhật cho phù hợp với ngữ cảnh thời điểm đọc giả duyệt Web – Tổng quan xây dựng ứng dụng web 45 45 Phản hồi đối thoại § Chuẩn bị trước cho việc trả lời, đáp ứng đòi hỏi, góp ý người sử dụng cách nhanh § Ln có cung cấp địa liên kết với “Webmaster” § Lên kế hoạch nhân phụ trách lâu dài – Tổng quan xây dựng ứng dụng web 46 46 23 9/20/23 Tương thích trình duyệt khác § Khơng phải trình duyệt hiển thị trang web giống § Lưu ý có người sử dụng web browser khơng có khả hỗ trợ đồ hoạ (mobile, PDA,…) § Sử dụng nhãn (tag) ALT HTML để thay – Tổng quan xây dựng ứng dụng web 47 47 Thiết kế cho việc quản trị cập nhật nộidung – Tổng quan xây dựng ứng dụng web 48 48 24 9/20/23 Đưa vào hoạt động – thời gian quản lý § Website cần cập nhật thơng tin § Nếu phần đươ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 trang “What new ?” – Tổng quan xây dựng ứng dụng web 49 49 Liên kết trang web, quảng cáo § Tạo liên kết đến 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í: • Th đặt logo quảng cáo • Thu phí thành viên – Tổng quan xây dựng ứng dụng web 50 50 25 9/20/23 Phụ lục, nguồn thông tin, trang giúp đỡ FAQ § Thơng tin báo cáo thường đọng web có thêm 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 chi phí cho việc hỗ trợ, tư vấn khách hàng – Tổng quan xây dựng ứng dụng web 51 51 Xây dựng website góc nhìn ngộ nghĩnh Nguồn từ: § Trần Thị Bích Hạnh (2007), Q trình xây dựng website góc nhìn ngộ nghĩnh, § Bài giảng mơn: Lập trình thiết kế web, Khoa CNTT, ĐH KHTN § http://pingmag.jp/2005/12/09/thewebsitedevelopment-process/ – Tổng quan xây dựng ứng dụng web 52 52 26 9/20/23 Bài thực hành Đại Học Sài Gòn – Khoa CNTT Tổng quan xây dựng ứng dụng web GV: Phan Thị Kim Loan 53 Khảo sát website § Khảo sát trang Web rút nhận xét cách thiết kế trang Web § Làm quen với cách sử dụng số cơng cụ tiện ích hỗ trợ trình thiết kế Web – VS Code, Notepad++, … - Photoshop, Photopea | Online Photo Editor – Tổng quan xây dựng ứng dụng web 54 54 27 9/20/23 Khảo sát website § Một số trang web cung cấp hình ảnh làm web – www.clipart.com – http://free-clip-art.com/ • Một số trang web cung cấp kiểu font chữ – http://www.1001freefonts.com/fontfiles/main.htm • Một số trang web cung cấp mẫu thiết kế giao diện web – http://www.freewebsitetemplates.com – Tổng quan xây dựng ứng dụng web 55 55 Chuẩn bị chọn chủ đề đồ án • Hướng dẫn hướng làm website • Tham khảo website •à chọn website cho nhóm – Tổng quan xây dựng ứng dụng web 56 56 28 9/20/23 Tổng kết 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 góc nhìn ngộ nghĩnh Bài thực hành – Tổng quan xây dựng ứng dụng web 57 57 Yêu cầu xem tài liệu §http://www.smashingmagazine.com/2008/01/31/10principles-of-effective-web-design/ §http://www.sitepoint.com/article/principlesbeautifulweb-design/ §http://www.december.com/web/develop/processes.ht ml §http://webstyleguide.com/process/index.html §http://www.draydesign.com/website_development_pr ocess.htm – Tổng quan xây dựng ứng dụng web 58 58 29 9/20/23 Yêu cầu đọc sách §GOOGLE, GOOGLE, GOOGLE , GOOGLE , GOOGLE §W3SCHOOLS.COM 59 – Tổng quan xây dựng ứng dụng web 59 Thank you ! kimloanpt@gmail.com GV: Phan Thị Kim Loan 60 30