Đang tải... (xem toàn văn)
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