BÀI 1 TỔNG QUAN VỀ PHÁT TRIỂN WEB MOBILE MỤC TIÊU BÀI HỌC Những kiến thức cơ bản về thiết kế web cho thiết bị di động: Giới thiệu về thiết kế web dành cho thiết bị di động Sự khác biệt giữa web dành cho thiết bị di động và web chạy trên máy tính thông thường Ngôn ngữ đánh dấu dành cho thiết bị di động Style sheet cho web di động Ngôn ngữ script cho web mobile Thiết lập môi trường phát triển web cho thiết bị di động: IDE để phát triển Cấu hình máy chủ web theo kiểu MIME Các công cụ phát triển khác Những kiến thức cơ bản về thiết kế web cho thiết bị di động: Giới thiệu về thiết kế web dành cho thiết bị di động Sự khác biệt giữa web dành cho thiết bị di động và web chạy trên máy tính thông thường Ngôn ngữ đánh dấu dành cho thiết bị di động Style sheet cho web di động Ngôn ngữ script cho web mobile Thiết lập môi trường phát triển web cho thiết bị di động: IDE để phát triển Cấu hình máy chủ web theo kiểu MIME Các công cụ phát triển khác Slide 1 - Tổng quan về phát triển web mobile 2 THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG Yếu tố dẫn đến sự phát triển của mobile web: Phát triển web cho di động theo cách tiếp cận "lấy tiêu chuẩn làm nền tảng phát triển" sẽ đảm bảo: Sự tương thích trên thiết bị Khả dụng trên nhiều nền tảng và trình duyệt di động Thuộc tính đặc trưng Hệ sinh thái di động Người dùng Sự phát triển của mobile web Yếu tố dẫn đến sự phát triển của mobile web: Phát triển web cho di động theo cách tiếp cận "lấy tiêu chuẩn làm nền tảng phát triển" sẽ đảm bảo: Sự tương thích trên thiết bị Khả dụng trên nhiều nền tảng và trình duyệt di động Slide 1 - Tổng quan về phát triển web mobile 4 THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG Cơ chế hoạt động của web: Giao thức HTTP (Hypertext Transfer Protocol): giao thức để chia sẻ tài liệu, file URI (Uniform Resource Identifiers): phương thức truy cập cho các file văn bản, tài liệu đánh dấu và các tài nguyên nhị phân khác Cơ chế hoạt động của web: Giao thức HTTP (Hypertext Transfer Protocol): giao thức để chia sẻ tài liệu, file URI (Uniform Resource Identifiers): phương thức truy cập cho các file văn bản, tài liệu đánh dấu và các tài nguyên nhị phân khác Slide 1 - Tổng quan về phát triển web mobile 5 THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG Yêu cầu HTTP (HTTP request): • Máy khách gửi URI của tài nguyên mong muốn và một tập hợp các header tới máy chủ web • Header là một phần của gói tin chuyển qua lại giữa máy khách và máy chủ, chứa thông tin điều khiển • Header có thể chứa danh sách kiểu MIME cho biết kiểu định dạng nội dung hỗ trợ trên máy khách Hồi đáp HTTP (HTTP response): • Máy chủ web sẽ gửi cho máy khách các tài liệu (đánh dấu, văn bản, mã nhị phân) • Tập hợp header khác, một trong số đó có chứa MIME mô tả kiểu file tài liệu truyền cho máy khách Yêu cầu HTTP (HTTP request): • Máy khách gửi URI của tài nguyên mong muốn và một tập hợp các header tới máy chủ web • Header là một phần của gói tin chuyển qua lại giữa máy khách và máy chủ, chứa thông tin điều khiển • Header có thể chứa danh sách kiểu MIME cho biết kiểu định dạng nội dung hỗ trợ trên máy khách Hồi đáp HTTP (HTTP response): • Máy chủ web sẽ gửi cho máy khách các tài liệu (đánh dấu, văn bản, mã nhị phân) • Tập hợp header khác, một trong số đó có chứa MIME mô tả kiểu file tài liệu truyền cho máy khách Slide 1 - Tổng quan về phát triển web mobile 6 THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG Web dành cho thiết bị di động là gì? Về cơ bản là những trang web thông thường Sử dụng những nền tảng của web thông thường và bổ sung thêm các kiểu MIME Kiểu MIME phân biệt ngôn ngữ đánh dấu di động với HTML trên máy tính Ngôn ngữ đánh dấu và định dạng được tối ưu hóa riêng cho thiết bị di động Web dành cho thiết bị di động là gì? Về cơ bản là những trang web thông thường Sử dụng những nền tảng của web thông thường và bổ sung thêm các kiểu MIME Kiểu MIME phân biệt ngôn ngữ đánh dấu di động với HTML trên máy tính Ngôn ngữ đánh dấu và định dạng được tối ưu hóa riêng cho thiết bị di động Slide 1 - Tổng quan về phát triển web mobile 7 THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG Sử dụng nền tảng của web thông thường Nội dung của một trang web bao gồm mã đánh dấu, định dạng, kịch bản và các nội dung đa phương tiện hiển thị nhờ các trình duyệt web Slide 1 - Tổng quan về phát triển web mobile 8 Nội dung của một trang web bao gồm mã đánh dấu, định dạng, kịch bản và các nội dung đa phương tiện hiển thị nhờ các trình duyệt web Chứa kiểu MIME phân biệt ngôn ngữ đánh dấu di động Hiển thị trên Firefox, Opera hoặc Internet Explorer sử dụng máy tính để bàn, máy tính xách tay và Netbook Kích cỡ màn hình hiển thị nhỏ Kích cỡ màn hình: 800x600 trở lên Số trình duyệt: 12+ Số trình duyệt: đa dạng Lỗi trình duyệt: xuất hiện nhiều Lỗi trình duyệt: ít, được vá lỗi THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG Tiêu chuẩn W3C: ít tiêu chuẩn được công bố Tiêu chuẩn W3C: áp dụng rộng rãi Ngôn ngữ đánh dấu: - WML - CHTML - XHTML Basic - XHTML-MP - XHTML -HTML Ngôn ngữ đánh dấu: - XHTML, HTML Slide 1 - Tổng quan về phát triển web mobile 9 Ngôn ngữ đánh dấu: - WML - CHTML - XHTML Basic - XHTML-MP - XHTML -HTML Ngôn ngữ đánh dấu: - XHTML, HTML JavaScript và AJAX: Không có trên 90% thiết bị di động JavaScript và AJAX: Sẵn có Địa chỉ của máy khách: 3 tỷ người dùng di động Địa chỉ máy khách: 1 tỷ máy tính THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG Ngôn ngữ đánh dấu cho thiết bị di động: XHTML và HTML XHTML-MP (XHTML Mobile Profile - hồ sơ di động XHTML) CHTML (iMode) WML (Wireless Markup Language - ngôn ngữ đánh dấu không dây) Ngôn ngữ đánh dấu cho thiết bị di động: XHTML và HTML XHTML-MP (XHTML Mobile Profile - hồ sơ di động XHTML) CHTML (iMode) WML (Wireless Markup Language - ngôn ngữ đánh dấu không dây) Slide 1 - Tổng quan về phát triển web mobile 10 [...]... CSS không dây (Wireless CSS) và/hoặc CSS Mobile Profile Slide 1 - Tổng quan về phát triển web mobile 14 MÔI TRƯỜNG PHÁT TRIỂN WEB CHO DI ĐỘNG MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Để phát triển web di động, cần thiết phải có: Môi trường phát triển tích hợp – IDE Máy chủ web & trình duyệt web Để xem thử và kiểm tra web di động, có thể sử dụng: Firefox – cài đặt thêm mobile add-on Các trình duyệt mô phỏng... Nokia Series 60, Windows Mobile và BlackBerry đều hỗ trợ XHTML, HTML, JavaScript và AJAX Slide 1 - Tổng quan về phát triển web mobile 11 THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG XHTML-MP (XHTML Mobile Profile): • Là chuẩn đánh dấu không chính thức cho web di động • Là tập con của XHTML, bao gồm: – XHTML-MP 1. 0 thiết lập các thẻ cơ bản cho mã đánh dấu thiết bị di động – XHTML-MP 1. 1 thêm thẻ và hỗ... Slide 1 - Tổng quan về phát triển web mobile 19 MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Một vài kiểu MIME cho di động: Kiểu MIME Phần mở rộng file Nội dung Nơi dùng application/vnd.w ap.xhtml+xml application/xhtml +xml xhtml XHTML-MP Các trang web di động text/html html (hay htm trên HTML Windows servers) Các trang web di động text/css css CSS1, CSS2, và Wireless CSS CSS dành cho các nội dung trên web di... HTML và XHTML-MP 1. 1 và 1. 2 application/javascr js ipt text/javascript Slide 1 - Tổng quan về phát triển web mobile 20 MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Cấu hình máy chủ web: Máy chủ Apache: • Sử dụng chỉ thị AddType trong cấu hình mod_mine để thêm kiểu MIME mới vào file cấu hình mime.types, httpd.conf hay htaccess • File mime.types và http.conf của Apache là file cấu hình máy chủ web toàn cục (global)... Các trình duyệt mô phỏng trình duyệt di động Trình duyệt di động trên thiết bị di động thật Slide 1 - Tổng quan về phát triển web mobile 16 MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Môi trường phát triển tích hợp – IDE: Là bộ công cụ dành cho lập trình viên cho phép thiết kế, lập trình, thực thi và gỡ lỗi ứng dụng web (hay bất kỳ dạng phần mềm nào khác) Không yêu cầu IDE cụ thể, có thể sử dụng: • • • • • • •... vụ liên quan trong hệ sinh thái di động Slide 1 - Tổng quan về phát triển web mobile 25 MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Một số trình mô phỏng Trình mô phỏng Kiểu mô phỏng Mô tả iPhone SDK Thiết bị Chứa bộ giả lập Iphone, chỉ chạy trên OS X Android SDK Thiết bị Giả lập thiết bị chạy Android Windows Mobile 6 SDK Thiết bị Giả lập thiết bị, và vỏ ngoài cho thiết bị sử dụng Windows Mobile Nokia Mobile. .. application/vnd.wap.xhtml+xml text/vnd.wap.wml wml; } Slide 1 - Tổng quan về phát triển web mobile xhtml; 23 MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Trình duyệt web di động trên máy tính: Cần thiết phải có công cụ giả lập môi trường di động Công cụ thuận tiện để sử dụng web di động: firefox kết hợp với add-on: • • • • • • • Add-on Add-on Add-on Add-on Add-on Add-on Add-on XHTML Mobile Profile wmlbrowser User Agent Switcher... • • • • • • Adobe Dreamweaver CS5/ CS6 Eclipse Microsoft Visual Studio Komodo NetBeans Zend Studio … Slide 1 - Tổng quan về phát triển web mobile 17 MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Kiểu MIME cho di động: Kiểu MIME di động (hay kiểu nội dung) xác định định dạng cho nội dung web di động Máy chủ web và trình duyệt trên máy khách sử dụng các kiểu MIME để phân biệt tài liệu văn bản… Trong giao dịch HTTP... XHTML, XHTMLMP và WML giống các thiết bị của Nokia Slide 1 - Tổng quan về phát triển web mobile 26 MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Thiết bị di động thật: Là giải pháp tốt nhất và chính xác hơn cả Có thể sử dụng giải pháp thay thế: DeviceAnywhere Các công cụ phát triển khác: Công cụ đối sánh file: Tiện ích đối sánh file cho phép kiểm tra một cách trực quan từng dòng và hợp nhất lại các điểm khác biệt giữa... biệt giữa các file văn bản Công cụ quản lý mã nguồn Slide 1 - Tổng quan về phát triển web mobile 27 TỔNG KẾT Để đảm bảo sự tương thích trên thiết bị và khả dụng trên nhiều nền tảng, trình duyệt di động, hãy tiếp cận việc phát triển web di động theo hướng "lấy tiêu chuẩn làm nền tảng" Khi trả về cho yêu cầu HTTP (HTTP request), máy chủ sẽ đưa về danh sách MIME để biết định dạng nội dung hỗ trợ trên thiết . (Wireless CSS) và/hoặc CSS Mobile Profile Slide 1 - Tổng quan về phát triển web mobile 14 MÔI TRƯỜNG PHÁT TRIỂN WEB CHO DI ĐỘNG MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG Để phát triển web di động, cần thiết. môi trường phát triển web cho thiết bị di động: IDE để phát triển Cấu hình máy chủ web theo kiểu MIME Các công cụ phát triển khác Slide 1 - Tổng quan về phát triển web mobile 2 THIẾT KẾ WEB CHO. BÀI 1 TỔNG QUAN VỀ PHÁT TRIỂN WEB MOBILE MỤC TIÊU BÀI HỌC Những kiến thức cơ bản về thiết kế web cho thiết bị di động: Giới thiệu về thiết kế web dành cho thiết bị di động Sự khác biệt giữa web