Bài giảng Thiết kế và triển khai Website - ĐH Thương Mại

Bộ môn CNTT - Khoa HTTT Kinh tế và<br /> TMĐT<br /> <br /> 8/9/2017<br /> <br /> THIẾT KẾ VÀ TRIỂN KHAI WEBSITE<br /> <br /> Trường Đại học Thương mại<br /> Khoa HTTT Kinh tế và THMĐT<br /> <br /> • Phân phối tiết học<br /> − Lý thuyết:  27 tiết<br /> − Thảo luận: 6 tiết<br /> − Thực hành: 12 tiết<br /> Thực hành: 12 tiết<br /> • Đánh giá kết quả<br /> <br /> Bộ môn Công nghệ thông tin<br /> Bài giảng học phần:<br /> Thiết kế và triển khai Website<br /> <br /> D<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> • ‐ Điểm chuyên cần: 10%<br /> • ‐ K/Tra + T/Hành+T/luận: 30%<br /> • ‐ Thi cuối kỳ: 60% <br /> 1<br /> <br /> 8/9/2017<br /> <br /> H<br /> TM<br /> <br /> MỤC TIÊU CỦA MÔN HỌC<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 3<br /> <br /> 2<br /> <br /> MỤC TIÊU CỤ THỂ<br /> • Cung cấp những kiến thức cơ bản về Internet, World<br /> wide web, giao thức HTTP, giao thức FTP, ngôn ngữ<br /> đánh dấu HTML,...<br /> • Một số ngôn ngữ và công cụ trợ giúp thiết kế và xây<br /> dựng website.<br /> • Qui trình triển khai, nâng cấp, bảo trì, Phương thức<br /> quảng bá trang web trên mạng.<br /> <br /> _T<br /> <br /> • Môn học cung cấp những kiến thức cơ bản về<br /> world wide web, các giao thức, ngôn ngữ<br /> đánh dấu và một số ngôn ngữ khác dùng để<br /> tạo web Thông qua việc giới thiệu một số<br /> web.<br /> công cụ thiết kế và trợ giúp việc xây dựng<br /> website, giúp học viên nắm được những yêu<br /> cầu, qui trình thiết kế và triển khai một<br /> website thực tế.<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> • Quy trình thiết kế và triển khai một website TMĐT<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 4<br /> <br /> U<br /> <br /> M<br /> TÀI LIỆU THAM KHẢO<br /> <br /> NỘI DUNG CHƯƠNG TRÌNH<br /> <br /> • TLTK bắt buộc:<br /> • [1] Harvey & Paul, Internet & World Wide Web: How to Program<br /> (4th Edition), Deitel & Associates (Paperback), 2010<br /> • [2] Gerry McGovern, The Website Manager’s Handbook, ISBN: <br /> 978‐1‐4116‐8529‐1, <br /> • Shane Diffily, 2014<br /> • [3] N ễ T ờ Si h Thiết kế W b bằ hì h minh hoạ, NXB <br /> [3] Nguyễn Trường Sinh, Thiết Web bằng hình i h h NXB<br /> Minh Khai, 2007<br /> • [4] Phạm Hữu Khang, Xây dựng và triển khai ứng dụng TMĐT, <br /> NXB Thống kê, 2006<br /> • [5] Lê Tuấn Hùng, Huỳnh Quyết Thắng, Kỹ thuật đồ họa, NXB <br /> KH&KT, 2005<br /> • [6] Giáo trình tự học Photoshop CS6,  Internet<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> Bài giảng Thiết kế và triển khai Website<br /> <br /> 5<br /> <br /> Chương 1. Tổng quan về thiết kế và triển khai<br /> website <br /> Chương 2. Thiết kế và xử lý đồ họa trên website<br /> Chương 3. Một số ngôn ngữ xây dưng Website<br /> Chương 4. Triển khai Website<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 6<br /> <br /> 1<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và<br /> TMĐT<br /> <br /> 8/9/2017<br /> <br /> Nội dung<br /> Chương 1<br /> <br /> Tổng quan về thiết kế và<br /> triển khai website<br /> <br /> D<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và<br /> TMĐT<br /> <br /> 7<br /> <br /> 1.1. Một số khái niệm cơ bản<br /> 1.2. Nguyên tắc và quy trình thiết kế Website<br /> 1.3 Nguyên tắc và quy trình triển khai Website<br /> <br /> 8/9/2017<br /> <br /> H<br /> <br /> TM<br /> <br /> 1.1. Một số khái niệm cơ bản<br /> 1.1.1. Cơ bản về Internet<br /> 1.1.2. World wide web ‐ Website<br /> 1.1.3. Giao thức truyền nhận Client/Server <br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> 9<br /> <br /> 8<br /> <br /> 1.1.1. Cơ bản về Internet<br /> • Mạng máy tính – phân loại theo<br /> phạm vi địa lý<br /> • Hệ điều hành mạng<br /> • Mô hì h TCP/IP<br /> ô hình<br /> /<br /> • Dịch vụ tên miền<br /> <br /> _T<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> 10<br /> <br /> U<br /> <br /> M<br /> 4 lớp của mô hình TCP/IP <br /> •<br /> •<br /> •<br /> •<br /> <br /> 8/9/2017<br /> <br /> Chồng giao thức TCP/IP<br /> <br /> Layer 4: Application (ứng dụng)<br /> Layer 3: Transport (vận chuyển)<br /> Layer 2: Internet <br /> Layer 1: Network access (truy <br /> cập mạng)<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> Bài giảng Thiết kế và triển khai Website<br /> <br /> 11<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 12<br /> <br /> 2<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và<br /> TMĐT<br /> <br /> 8/9/2017<br /> <br /> DNS: nhớ tên thay vì địa chỉ IP<br /> <br /> Hệ thống quản lý tên miền<br /> • DNS server là một máy trên mạng có nhiệm vụ<br /> quản lý tên miền và đáp ứng các yêu cầu của<br /> client<br /> • Có nhiều DNS server liên kết với nhau, chia sẻ<br /> và quản lý truy vấn đến CSDL tên miền<br /> • CSDL tên miền có cấu trúc phân cấp<br /> <br /> D<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 13<br /> <br /> 8/9/2017<br /> <br /> H<br /> TM<br /> <br /> Cấu trúc CSDL tên miền<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> DNS: không gian tên miền<br /> <br /> • Kiến trúc tên miền không bắt buộc các tên miền phải<br /> tuân theo quy cách đặt tên, tuy nhiên, chúng được<br /> quản lý một cách tập trung<br /> • Cú pháp của tên không cho biết đối tượng được đặt<br /> tên là gì: ví dụ www ptithcm edu vn là một máy tính<br /> gì: ví<br /> www.ptithcm.edu.vn<br /> tính, <br /> trong khi ptithcm.edu.vn lại là tên miền<br /> <br /> .<br /> <br /> com<br /> <br /> edu<br /> <br /> gov<br /> <br /> _T<br /> <br /> vnn<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 15<br /> <br /> 14<br /> <br /> 8/9/2017<br /> <br /> vn<br /> <br /> com<br /> <br /> fr<br /> <br /> edu<br /> <br /> uk<br /> <br /> gov<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 16<br /> <br /> U<br /> <br /> M<br /> DSN<br /> • ví dụ:<br /> yêu cầu truy cập đến www.cs.purdue.edu.vn từ it‐<br /> lab.ptithcm.edu.vn sẽ theo tiến trình như sau:<br /> vn  edu  purdue  cs <br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> Bài giảng Thiết kế và triển khai Website<br /> <br /> 1.1.2. World wide web Website<br /> <br /> 17<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 18<br /> <br /> 3<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và<br /> TMĐT<br /> <br /> 8/9/2017<br /> <br /> WWW<br /> • World Wide Web là một bước tiến lớn trong quá trình tìm<br /> kiếm thông tin nhanh, đa dạng và mạnh mẽ. Các server<br /> WWW khác nhau sẽ thực hiện các trình duyệt (browser)<br /> khác nhau.<br /> <br /> 1.1.3. Giao thức truyền nhận<br /> trong Client/Server<br /> <br /> • Các trình duyệt khác nhau sẽ có những giả định khác<br /> yệ<br /> gg<br /> ị<br /> nhau về kết xuất và máy tính của bạn, tuy nhiên tùy<br /> thuộc vào thói quen và sở thích bạn có thể dùng chương<br /> trình duyệt Web cho thích hợp. Hiện nay các chương<br /> trình duyệt Web rất nhiều và đa dạng chẳng hạn như :<br /> • Internet Explorer, Fire Fox, …<br /> <br /> D<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 19<br /> <br /> 8/9/2017<br /> <br /> H<br /> TM<br /> <br /> Mô hình Client/Server<br /> <br /> • Trong mô hình này, chương trình ứng<br /> dụng được chia thành 2 thành phần:<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> 21<br /> <br /> 20<br /> <br /> Mô hình Client/Server<br /> • Việc giao tiếp giữa client và server được thực hiện<br /> dưới hình thức trao đổi các thông điệp (Message).<br /> • Để được phục vụ, client sẽ gửi một thông điệp yêu cầu<br /> (Request Message) mô tả về công việc muốn server<br /> thực hiện.<br /> • Khi nhận được thông điệp yêu cầu, server tiến hành<br /> phân tích để xác định công việc cần phải thực thi.<br /> thi<br /> • Nếu việc thực hiện yêu cầu này có sinh ra kết quả trả<br /> về, server sẽ gởi nó cho client trong một thông điệp trả<br /> lời (Reply Message).<br /> • Dạng thức (format) và ý nghĩa của các thông điệp trao<br /> đổi giữa client và server được qui định rõ bởi giao thức<br /> (protocol) của ứng dụng.<br /> <br /> _T<br /> <br /> – Quá trình chuyên cung cấp một số phục vụ<br /> nào đó, chẳng hạn: phục vụ tập tin, phục vụ<br /> máy in, phục vụ thư điện tử, phục vụ Web...<br /> Các quá trình này được gọi là các trình phục<br /> vụ hay Server.<br /> – Một số quá trình khác có yêu cầu sử dụng<br /> các dịch vụ do các server cung cấp được gọi<br /> là các quá trình khách hàng hay Client.<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> 22<br /> <br /> U<br /> <br /> M<br /> Chế độ nghẽn<br /> <br /> • Trong chế độ này, khi<br /> quá trình client hay<br /> server phát ra lệnh<br /> gởi dữ liệu, (thông<br /> thường bằng lệnh<br /> g<br /> g ệ<br /> send) , sự thực thi<br /> của nó sẽ bị tạm dừng<br /> cho đến khi quá trình<br /> nhận phát ra lệnh<br /> nhận số dữ liệu đó<br /> (thường là lệnh<br /> receive).<br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và<br /> TMĐT<br /> <br /> Bài giảng Thiết kế và triển khai Website<br /> <br /> 23<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> 24<br /> <br /> 4<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và<br /> TMĐT<br /> <br /> 8/9/2017<br /> <br /> Chế độ không nghẽn<br /> 1.2. Nguyên tắc và quy trình thiết kế Website<br /> <br /> • Trong chế độ này,<br /> khi quá trình client<br /> hay server phát ra<br /> lệnh gởi dữ liệu, sự<br /> thực thi của nó vẫn<br /> ự<br /> được tiếp tục mà<br /> ế<br /> không quan tâm đến<br /> việc có quá trình<br /> nào phát ra lệnh<br /> nhận số dữ liệu đó<br /> hay không.<br /> <br /> 1.2.1. Các nguyên tắc trong thiết kế website<br /> 1.2.2. Quy trình chung thiết kế Website<br /> <br /> D<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT<br /> <br /> 25<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 26<br /> <br /> H<br /> <br /> 1.2.1. Các nguyên tắc trong thiết kế website<br /> <br /> •<br /> •<br /> •<br /> •<br /> •<br /> <br /> 1. Khái quát<br /> 2. Các bước tổ chức thông tin<br /> 3. Các kiểu cấu trúc thiết kế<br /> <br /> TM<br /> <br /> 1.2.1. Các nguyên tắc trong thiết kế website<br /> Tổ chức website chặt chẽ và dễ sử dụng<br /> Sử dụng từ ngữ dễ hiểu. <br /> Dễ dàng khám phá các đường link. <br /> Thời gian tải về nhanh. <br /> Tương thích với đa số trình duyệt web.   <br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> _T<br /> <br /> 8/9/2017<br /> <br /> 27<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 28<br /> <br /> U<br /> <br /> M<br /> <br /> 1. Khái quát<br /> <br /> 2. Các bước tổ chức thông tin <br /> <br /> • Cần phải chia nhỏ các khối thông tin lớn.<br /> • Các nhà tâm lý học nhận thức<br /> • Giúp ghi nhớ dễ hơn bằng việc sử dụng kết hợp giữa thiết kế<br /> đồ hoạ, qui ước lớp và biên tập thông tin thành các đơn vị<br /> riêng rẽ<br /> • Thực tế với độc giả các tin ngắn gọn, riêng biệt sẽ chức năng<br /> hoá hơn và dễ định vị hơn khối thông tin dài<br /> <br /> • Phân chia thông tin thành các đơn vị logic<br /> • Thiết lập hệ thống phân cấp thông tin<br /> • Tạo mối quan hệ giữa các hệ thống phân cấp<br /> thông tin<br /> g<br /> • Phân tích sự thành công về chức năng và thẩm<br /> mỹ của các hệ thống thông tin<br /> <br /> • Tổ chức các đoạn tin nhỏ thành các khối thông tin riêng để tạo<br /> nên hệ thống đồng nhất, hình thành nên cơ sở các liên kết<br /> hypertext.<br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> Bài giảng Thiết kế và triển khai Website<br /> <br /> 29<br /> <br /> 8/9/2017<br /> <br /> Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT<br /> <br /> 30<br /> <br /> 5<br /> <br />