Lập trình web - Chương II: Thiết kế wesite

Chương II Trình bày: Nguyễn Phú Trường NỘI DUNG Các khái niệm Các bước xây dựng một Website Phát hành Website trên Internet Một số nguyên tắc trong thiết kế web Cấu trúc và bố cục website 1/5/2011 2 Bộ môn Mạng máy tính & Truyền thông CÁC KHÁI NIỆM ™ Trang web: Web page: ƒ Là một trang nội dung ƒ Có thể được viết bằng nhiều ngôn ngữ khác nhau nhưng kết quả trả về client là HTML ™Web site: ƒ Tập hợp các trang web có nội dung thống nhất phục vụ cho một mục đích nào đó ™World Wide Web (WWW): Tập hợp các web site trên mạng internet. 1/5/2011 3 Bộ môn Mạng máy tính & Truyền thông PHÂN LOẠI TRANG WEB ™ Dựa vào công nghệ phát triển, có 2 loại: ƒ Web tĩnh: • Dễ phát triển • Tương tác yếu • Sử dụng HTML • Người làm web tĩnh thường dùng các công cụ trực quan để tạo ra trang web ƒ Web động: • Khó phát triển hơn • Tương tác mạnh • Sử dụng nhiều ngôn ngữ khác nhau • Thường phải viết nhiều mã lệnh 1/5/2011 4 Bộ môn Mạng máy tính & Truyền thông Một số bước chính trong phát triển website CÁC BƯỚC XÂY DỰNG WEBSITE ™ Tương tự với phân tích và thiết kế hệ thống. ƒ Đặc tả ƒ Phân tích ƒ Thiết kế ƒ Lập trình ƒ Kiểm thử ƒ Triển khai ƒ Bảo trì 1/5/2011 6 Bộ môn Mạng máy tính & Truyền thông CÁC BƯỚC XÂY DỰNG WEBSITE ™ Đặc tả: ƒ Web để làm gì? ƒ Ai dùng? ƒ Trình độ người dùng? ƒ Nội dung, hình ảnh? ™ Phân tích ƒ Mối liên quan giữa các nội dung? ƒ Thứ tự các nội dung? Bộ môn Mạng máy tính & Truyền thông CÁC BƯỚC XÂY DỰNG WEBSITE ™ Thiết kế ƒ Sơ đồ cấu trúc website ƒ Giao diện ƒ Tĩnh hay động ƒ CSDL ƒ Nội dung từng trang ƒ Liên kết giữa các trang ™ Xây dựng ƒ Cấu trúc thư mục ƒ Các modul dùng chung ƒ … Bộ môn Mạng máy tính & Truyền thông CÁC BƯỚC XÂY DỰNG WEBSITE ™ Kiểm thử ƒ Kiểm tra trên nhiều trình duyệt ƒ Kiểm tra trên nhiều loại mạng ƒ Kiểm tra tốc độ ƒ Kiểm tra các liên kết ƒ Thử các lỗi bảo mật ƒ … 1/5/2011 9 Bộ môn Mạng máy tính & Truyền thông Công bố website trên Internet CÁC ĐIỀU KIỆN CẦN THIẾT ™ Xây dựng website ™ Quyền sử dụng hợp pháp ™ Tên miền ƒ Sử dụng tên miền con miễn phí ƒ Đăng ký tên miền riêng ™ Hosting ƒ Sử dụng miễn phí ƒ Thuê không gian riêng ƒ Tự host website của mình ™ Duy trì và phát triển và quảng bá website 1/5/2011 11 Bộ môn Mạng máy tính & Truyền thông XÂY DỰNG WEBSITE ™ Thông tin “tĩnh” hay “động” ƒ Web tĩnh, Web động hay Portal ™ Giá thành ƒ Web tĩnh: Tính theo các kiểu trang • Trang đơn giản • Trang hiệu ứng hình ảnh tốt ƒ Web động: Tính theo các mục, các khối chức năng • Thiết kế CSDL • 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ê… 1/5/2011 12 Bộ môn Mạng máy tính & Truyền thông PHÂN TÍCH ™ Có nên đăng ký tên miền, thiết kế và duy trì website hay không? ™ Nếu có, đăng ký tên miền với tên thế nào, thể loại gì, theo hệ thống của Việt Nam hay theo các hệ thống tên miền bên ngoài ™ Có tự Host website của mình không? ™ Để duy trì website, có các phương án dành cho? ƒ Nhân sự ƒ Kinh phí ƒ Cơ chế tổ chức, hoạt động ƒ Quy trình làm việc 1/5/2011 13 Bộ môn Mạng máy tính & Truyền thông ĐĂNG KÝ TÊN MIỀN ™ Xác định tên ƒ Tên tiếng Việt ƒ Tên giao dịch tiếng Anh ƒ Tên viết tắt ™ Xác định nơi đăng ký ™ Đăng ký tên miền càng sớm càng tốt ƒ Thủ tục đơn giản, nhanh chóng ƒ Kinh phí rẻ • Việt Nam: 450.000+480.000/năm • Nước ngoài: 8 – 12USD 1/5/2011 14 Bộ môn Mạng máy tính & Truyền thông HOSTING ™ Xác định môi trường vận hành của website ƒ Máy chủWindows • Support ASP, PHP…, SQL Server, MySQL… • Đắt hơn máy chủ Linux ƒ Máy chủ Linux • Support PHP, JSP…, MySQL… • Rẻ hơn máy chủWindows ™ Xác định dung lượng thực tế của website, khả năng sẽ mở rộng ™ Xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu… 1/5/2011 15 Bộ môn Mạng máy tính & Truyền thông DUY TRÌ WEBSITE ™ Cập nhật thông tin ƒ Web tĩnh: • Upload Webpage thông qua Web Browser • Upload Webpage thông qua FTP program (Cute FTP, FTP Voyager,… ) ƒ Web động • Form cập nhật CSDL nếu Site có kết nối CSDL 1/5/2011 16 Bộ môn Mạng máy tính & Truyền thông PHÁT TRIỂN WEBSITE ™ Các chiến lược marketing ƒ Sử dụng thư điện tử ƒ Đầu tư quảng cáo 1 đợt trên các phương tiện truyền thông (Báo, đài, Tivi…) ™ Liên kết với các site cùng loại ƒ Trao đổi banner ƒ Giới thiệu lẫn nhau. 1/5/2011 17 Bộ môn Mạng máy tính & Truyền thông QUẢNG BÁ WEBSITE ™ Quảng bá Website ƒ Đăng ký Website vào các search engine trong nước và thế giới • Vietnam Searchengine: Panvietnam, vinaseek… • Global Searchengine: google, altavista, hotboot… ƒ Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới. • 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. 1/5/2011 18 Bộ môn Mạng máy tính & Truyền thông Một số nguyên tắc quan trọng trong thiết kế web NGUYÊN TẮC TRONG THIẾT KẾ ™ Tổ chức website chặt chẽ và dễ sử dụng. ™ Sử dụng từ ngữ dễ hiểu. ™ Dễ dàng khám phá các đường link. ™ Thời gian tải về nhanh. ™ Nội dung không có hình ảnh. ™ Dễ theo dõi "quá trình". ™ Tương thích với đa số trình duyệt web. Bộ môn Mạng máy tính & Truyền thông201/5/2011 Cấu trúc và bố cục website CÁC VẤN ĐỀ QUAN TRỌNG ™Bố cục và nội dung ƒ Đồng nhất và đa dạng ƒ Hiệu ứng ƒ Mẫu bố trí ƒ Mầu sắc ƒ Nền ƒ Văn bản và kỹ thuật tạo chữ ™Điều hướng ƒ Bố cục tuyến tính ƒ Bố cục phân cấp ƒ Ánh xạ ảnh ƒ Siêu liên kết ƒ Trang con ƒ Bảng mục lục ƒ Nút “Back” và “Forward” 221/5/2011 Bộ môn Mạng máy tính & Truyền thông BỐ CỤC TUYẾN TÍNH ™Tuân theo cấu trúc tuyến tính ™Liên kết tuần tự giữa các trang Bộ môn Mạng máy tính & Truyền thông231/5/2011 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - BỐ CỤC DẠNG PHÂN CẤP ™Trang chủ có các liên kết tới các trang khác ™Mỗi trang có một liên kết đến trang chủ Bộ môn Mạng máy tính & Truyền thông241/5/2011 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ÁNH XẠ ẢNH Bộ môn Mạng máy tính & Truyền thông251/5/2011 TRANG CON Bộ môn Mạng máy tính & Truyền thông261/5/2011 BẢNG MỤC LỤC Bộ môn Mạng máy tính & Truyền thông271/5/2011 CÁC LƯU Ý TRONG THIẾT KẾ ™ Siêu liên kết nên rõ ràng. ™ Sử dụng các liên kết Back và Forward trong các trang để người dùng dễ dàng điều hướng tới trang cần đến. ™ Các trang con (ở mức dưới) nên có thanh menu hay thanh điều hướng, nếu không người dùng không thấy các trang chính ™ Bảng mục lục cuối trang để người dùng dễ dàng chuyển sang một chủ đề nào đó Bộ môn Mạng máy tính & Truyền thông281/5/2011 Add your company slogan