Bài giảng Thiết kế và lập trình Web - Bài 1: Tổng quan về thiết kế và lập trình Web

Bài giảng Thiết kế và lập trình Web - Bài 1: Tổng quan về thiết kế và lập trình Web cung cấp cho người học các kiến thức: Khái niệm về siêu văn bản, các thành phần của Web, phân loại trang Web, một số điều cần chú ý trong phát triển Web. Mời các bạn cùng tham khảo.

Thiết kế lập trình Web Bài Tổng quan Thiết kế và lập trình Web Viện CNTT & TT Thiết kế & Lập trình Web Mục đích  Cung cấp cho Sinh viên kiến thức chế hoạt động trang web – Khái niệm siêu văn (hypertext) – Máy phục vụ, trình duyệt web, giao thức hoạt động Thiết kế & Lập trình Web Nội dung  Khái niệm siêu văn  Các thành phần Web – 2.1 Máy phục vụ, máy khách – 2.2 WebServer, WebBrowser – 2.3 Website, WebPage – 2.4 URL – 2.5 HTTP  Phân loại trang Web  Một số điều cần ý phát triển Web Thiết kế & Lập trình Web Lịch sử phát triển WWW  Năm 1978, Ward Christensen Randy Suess xây dựng hệ thống liên lạc đơn giản máy tính thơng qua đường dây điện thoại… CBBS (tên viết tắt Computerized Bulletin Board System - Hệ thống bảng tin máy tính) Đây bước để bắt đầu kỷ nguyên thông tin – kỷ nguyên World Wide Web  Các hệ thống CBBS trở nên thông dụng vào thập niên 80 đầu năm 90 kỷ trước Có thể khẳng định CBBS tiền thân mạng World Wide Web Thiết kế & Lập trình Web Cơ chế hoạt động WWW  Cơ chế hoạt động – WWW hoạt động dựa chế: • Giao thức HTTP (Hyper Text Transfer Protocol): Dùng để truy cập tài nguyên web • Địa URL (Uniform Resource Locator): Nhận dạng trang tài ngun web • Ngơn ngữ đánh dấu siêu văn HTML: Tạo tài liệu truy cập web Thiết kế & Lập trình Web Khái niệm siêu văn  Hypertext? Hyperlink? Hypermedia?  Hypertext: văn (text) máy tính có liên kết đến văn khác truy cập trực tiếp thơng qua click chuột, nhấn phím  Hyperlink: liên kết từ file hypertext đến file khác  Hypermedia: mở rộng hypertext, đối tượng văn bản, đồ họa, âm thanh, video… H1 Hypertext Thiết kế & Lập trình Web Khái niệm siêu văn  Một số ngôn ngữ siêu văn tiêu biểu – HTML (Hypertext Markup Language) - Ngôn ngữ đánh dấu siêu văn – XML (Extensible Markup Language) - Ngôn ngữ đánh dấu mở rộng H1 Hypertext Thiết kế & Lập trình Web Khái niệm siêu văn  Ứng dụng  Các trình ứng dụng dùng siêu văn hữu ích trường hợp phải phải làm việc với số lượng văn lớn….như từ điển bách khoa sách nhiều tập Thiết kế & Lập trình Web Các thành phần Web  Web (World Wide Web)? Web hệ thống tài liệu hypertext liên kết với thông qua mạng Internet  Các thành phần Web – Web Page – Web Site – Uniform Resource Locator – Web Server – Web Browser Thiết kế & Lập trình Web 2.1 Máy phục vụ, máy khách Máy khách (Client)  Máy khai thác dịch vụ máy phục vụ  Với dịch vụ, thường có phần mềm chuyên biệt để khai thác  Một máy tính vừa client vừa server 10 Thiết kế & Lập trình Web Một số điều cần ý phát triển 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 nội dung? – Thứ tự nội dung? 43 Thiết kế & Lập trình Web Một số điều cần ý phát triển Website  Thiết kế – Sơ đồ cấu trúc website – Giao diện – Tĩnh hay động – CSDL – Nội dung trang – Liên kết trang  Xây dựng – Cấu trúc thư mục – Các modul dùng chung –… 44 Thiết kế & Lập trình Web Một số điều cần ý phát triển Website  Kiểm thử – Kiểm tra nhiều trình duyệt – Kiểm tra nhiều loại mạng – Kiểm tra tốc độ – Kiểm tra liên kết – Thử lỗi bảo mật –… 45 Thiết kế & Lập trình Web Các tiêu chí thiết kế trang Web  Hãy đơn giản thiết kế  Nên tạo đường link rõ ràng  Định hướng minh bạch  Đưa hướng dẫn cho người sử dụng (NSD)  Cung cấp cho NSD thứ họ cần  Hạn chế tối đa thời gian download  Tránh đăng ký không cần thiết  Sử dụng màu sắc hài hòa  Font chữ sử dụng 46 Thiết kế & Lập trình Web Hãy đơn giản thiết kế Bạn sử dụng dễ dàng website tơi? 47 Thiết kế & Lập trình Web Tạo đường link rõ ràng Đây gì? 48 Thiết kế & Lập trình Web Định hướng minh bạch Tôi đâu? 49 Thiết kế & Lập trình Web Đưa hướng dẫn cho NSD Tôi không hiểu phải làm nào? 50 Thiết kế & Lập trình Web Cung cấp cho NSD thứ họ cần Người sử dụng muốn điều gì? 51 Thiết kế & Lập trình Web Hạn chế tối đa thời gian download Bạn chờ tơi bao lâu? 52 Thiết kế & Lập trình Web Tránh mẫu đăng ký không cần thiết Bạn có thích đăng kí khơng? 53 Thiết kế & Lập trình Web Sử dụng màu sắc hài hịa Bạn có phải họa sĩ? 54 Thiết kế & Lập trình Web Font chữ sử dụng Đó có phải font chữ đặc biệt? 55 Thiết kế & Lập trình Web 10 Others Thêm khoảng trống Thêm người dùng 56 Thiết kế & Lập trình Web 11 Principles of Beautiful web design  Bố trí kết hợp (Layout & Composition)  Màu (Color)  Kết cấu (Texture)  Tạo chữ (Typography)  Hình ảnh (Imagery) 57 ... thống 17 Thiết kế & Lập trình Web 2.3 WebPage, Website  Phân cấp trang Web 18 Thiết kế & Lập trình Web 2.3 WebPage, Website  Phân cấp “nông” 19 Thiết kế & Lập trình Web 2.3 WebPage, Website  Phân... server – Web server 11 Thiết kế & Lập trình Web 2.2 Web Server, Web Browser  Kiến trúc ứng dụng Web 12 Thiết kế & Lập trình Web 2.2 Web Server, Web Browser  Kiến trúc ứng dụng Web Webserver... driver Thiết kế & Lập trình Web 2.2 Web Server, Web Browser  Web Browser 14 Thiết kế & Lập trình Web 2.2 Web Server, Web Browser  Web Server – Là thành phần hệ thống dịch vụ – Nhận yêu cầu từ Web