BÀI 1 Tổng quan về phát triển web mobile - Giáo trình FPT

BÀI 1TỔ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 độngSự khác biệt giữa web dành cho thiết bị di động và webchạy trên máy tính thông thườngNgôn ngữ đánh dấu dành cho thiết bị di độngStyle sheet cho web di độngNgô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ểnCấu hình máy chủ web theo kiểu MIMECá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 độngSự khác biệt giữa web dành cho thiết bị di động và webchạy trên máy tính thông thườngNgôn ngữ đánh dấu dành cho thiết bị di độngStyle sheet cho web di độngNgô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ểnCấu hình máy chủ web theo kiểu MIMECá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


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ấytiê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ệ sinhthái diđộng

Ngườidùng

Sự pháttriển củamobile

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ấytiê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



Cơ chế hoạt động của web:

Giao thức HTTP (Hypertext Transfer Protocol): giaothức để chia sẻ tài liệu, fileURI (Uniform Resource Identifiers): phương thức truycập cho các file văn bản, tài liệu đánh dấu và các tàinguyên nhị phân khác

Cơ chế hoạt động của web:

Giao thức HTTP (Hypertext Transfer Protocol): giaothức để chia sẻ tài liệu, fileURI (Uniform Resource Identifiers): phương thức truycập cho các file văn bản, tài liệu đánh dấu và các tàinguyên nhị phân khác



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áchHồi đáp HTTP (HTTP response):

• Máy chủ web sẽ gửi cho máy khách các tài liệu (đánhdấu, văn bản, mã nhị phân)

• Tập hợp header khác, một trong số đó có chứa MIMEmô 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áchHồi đáp HTTP (HTTP response):

• Máy chủ web sẽ gửi cho máy khách các tài liệu (đánhdấu, văn bản, mã nhị phân)

• Tập hợp header khác, một trong số đó có chứa MIMEmô tả kiểu file tài liệu truyền cho máy khách



Web dành cho thiết bị di động là gì?Về cơ bản là những trang web thông thườngSử dụng những nền tảng của web thông thường vàbổ sung thêm các kiểu MIMEKiểu MIME phân biệt ngôn ngữ đánh dấu di động vớiHTML trên máy tínhNgôn ngữ đánh dấu và định dạng được tối ưu hóariê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ườngSử dụng những nền tảng của web thông thường vàbổ sung thêm các kiểu MIMEKiểu MIME phân biệt ngôn ngữ đánh dấu di động vớiHTML trên máy tínhNgôn ngữ đánh dấu và định dạng được tối ưu hóariêng 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 baogồm mã đánh dấu, định dạng, kịchbản và các nội dung đa phươngtiện hiển thị nhờ các trình duyệtweb


Nội dung của một trang web baogồm mã đánh dấu, định dạng, kịchbản và các nội dung đa phươngtiện hiển thị nhờ các trình duyệtweb

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ặcInternet Explorer sử dụng máytí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


Tiêu chuẩn W3C: ít tiêu chuẩn được côngbố

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


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ùngdi động

Địa chỉ máy khách: 1 tỷ máy tính


Ngôn ngữ đánh dấu cho thiết bị di động:XHTML và HTMLXHTML-MP (XHTML Mobile Profile - hồ sơ di độngXHTML)CHTML (iMode)WML (Wireless Markup Language - ngôn ngữ đánhdấu không dây)

Ngôn ngữ đánh dấu cho thiết bị di động:XHTML và HTMLXHTML-MP (XHTML Mobile Profile - hồ sơ di độngXHTML)CHTML (iMode)WML (Wireless Markup Language - ngôn ngữ đánhdấu không dây)



HTML:• Là ngôn ngữ đánh dấu web chuẩn• Nhiều trình duyệt di động hỗ trợ đầy đủ các tập thẻ của

HTML• Độ phân giải màn hình, dung lượng lưu trữ và giới hạn

băng thông của thiết bị di động đòi hỏi phải tối ưu hóatrong việc hiển thị

XHTML:• Là sự kết hợp giữa tập hợp thẻ của HTML với việc tuân

thủ cú pháp nghiêm ngặt của XML• Trình duyệt của các thiết bị di động thông minh như

điện thoại Android, iPhone, Nokia Series 60, WindowsMobile và BlackBerry đều hỗ trợ XHTML, HTML,JavaScript và AJAX

HTML:• Là ngôn ngữ đánh dấu web chuẩn• Nhiều trình duyệt di động hỗ trợ đầy đủ các tập thẻ của

HTML• Độ phân giải màn hình, dung lượng lưu trữ và giới hạn

băng thông của thiết bị di động đòi hỏi phải tối ưu hóatrong việc hiển thị

XHTML:• Là sự kết hợp giữa tập hợp thẻ của HTML với việc tuân

thủ cú pháp nghiêm ngặt của XML• Trình duyệt của các thiết bị di động thông minh như

điện thoại Android, iPhone, Nokia Series 60, WindowsMobile và BlackBerry đều hỗ trợ XHTML, HTML,JavaScript và AJAX



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ấuthiết bị di động.

– XHTML-MP 1.1 thêm thẻ <script> và hỗ trợ JavaScriptcho thiết bị di động

– XHTML-MP 1.2 thêm nhiều thẻ định dạng và kiểu nhậpdữ liệu

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ấuthiết bị di động.

– XHTML-MP 1.1 thêm thẻ <script> và hỗ trợ JavaScriptcho thiết bị di động

– XHTML-MP 1.2 thêm nhiều thẻ định dạng và kiểu nhậpdữ liệu



WML (Wireless Markup Language – WML):• Ngôn ngữ đánh dấu không dây - Là ngôn ngữ đánh

dấu cũ và đơn giản hơn dành cho những thiết bị diđộng hiệu năng thấp

• Là ứng dụng của XML sử dụng hai khái niệm ‘deck’ và‘card’

HDML:• Handheld Device Markup Language - ngôn ngữ đánh

dấu cho thiết bị cầm tay - là tiền thân của WMLCHTML :

• Compact HTML – là tập con của HTML, chỉ phát triển ở thịtrường Nhật Bản

• Không hỗ trợ các tính năng: JPEG, table, bản đồ dạng ảnh,màu nền, ….

WML (Wireless Markup Language – WML):• Ngôn ngữ đánh dấu không dây - Là ngôn ngữ đánh

dấu cũ và đơn giản hơn dành cho những thiết bị diđộng hiệu năng thấp

• Là ứng dụng của XML sử dụng hai khái niệm ‘deck’ và‘card’

HDML:• Handheld Device Markup Language - ngôn ngữ đánh

dấu cho thiết bị cầm tay - là tiền thân của WMLCHTML :

• Compact HTML – là tập con của HTML, chỉ phát triển ở thịtrường Nhật Bản

• Không hỗ trợ các tính năng: JPEG, table, bản đồ dạng ảnh,màu nền, ….



Style sheet cho web di động:Trình duyệt di động tốt nhất hỗ trợ CSS2, định dạngchuẩn sử dụng với XHTML và HTML trên trình duyệtcủa máy tínhTrình duyệt di động hỗ trợ XHTML-MP sử dụng CSSkhông dây (Wireless CSS) và/hoặc CSS Mobile Profile

Style sheet cho web di động:Trình duyệt di động tốt nhất hỗ trợ CSS2, định dạngchuẩn sử dụng với XHTML và HTML trên trình duyệtcủa máy tínhTrình duyệt di động hỗ trợ XHTML-MP sử dụng CSSkhông dây (Wireless CSS) và/hoặc CSS Mobile Profile


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 – IDEMá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-onCác trình duyệt mô phỏng trình duyệt di độngTrình duyệt di động trên thiết bị di động thật

Để 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 – IDEMá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-onCác trình duyệt mô phỏng trình duyệt di độngTrình duyệt di động trên thiết bị di động thật



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ếtkế, lập trình, thực thi và gỡ lỗi ứng dụng web (haybấ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:

• Adobe Dreamweaver CS5/ CS6• Eclipse• Microsoft Visual Studio• Komodo• NetBeans• Zend Studio• ….

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ếtkế, lập trình, thực thi và gỡ lỗi ứng dụng web (haybấ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:

• Adobe Dreamweaver CS5/ CS6• Eclipse• Microsoft Visual Studio• Komodo• NetBeans• Zend Studio• ….



Kiểu MIME cho di động:Kiểu MIME di động (hay kiểu nội dung) xác định địnhdạng cho nội dung web di độngMáy chủ web và trình duyệt trên máy khách sử dụngcác kiểu MIME để phân biệt tài liệu văn bản…Trong giao dịch HTTP giữa trình duyệt và máy chủ,kiểu MIME được sử dụng theo nhiều cách khác nhauthông qua bộ chuyển mã hoặc proxy trung gian

Kiểu MIME cho di động:Kiểu MIME di động (hay kiểu nội dung) xác định địnhdạng cho nội dung web di độngMáy chủ web và trình duyệt trên máy khách sử dụngcác kiểu MIME để phân biệt tài liệu văn bản…Trong giao dịch HTTP giữa trình duyệt và máy chủ,kiểu MIME được sử dụng theo nhiều cách khác nhauthông qua bộ chuyển mã hoặc proxy trung gian



• Bộ chuyển mã và gateway:– Thường gặp vấn đề chuyển đổi máy chủ proxy HTTP

giữa thiết bị và máy chủ web– Máy chủ proxy kiểm tra trường Accept và Content-Type

trong header để xác định cách xử lý nội dung gốc saocho phù hợp với từng loại thiết bị

• Ngôn ngữ thực thi phía máy chủ:– Có thể thay đổi kiểu MIME liên kết với một tài liệu sử

dụng ngôn ngữ thực thi phía máy chủ• Ví dụ:

• Bộ chuyển mã và gateway:– Thường gặp vấn đề chuyển đổi máy chủ proxy HTTP

giữa thiết bị và máy chủ web– Máy chủ proxy kiểm tra trường Accept và Content-Type

trong header để xác định cách xử lý nội dung gốc saocho phù hợp với từng loại thiết bị

• Ngôn ngữ thực thi phía máy chủ:– Có thể thay đổi kiểu MIME liên kết với một tài liệu sử

dụng ngôn ngữ thực thi phía máy chủ• Ví dụ:


<?phpheader('Content-Type: application/vnd.wap.xhtml+xml');?>


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.wap.xhtml+xmlapplication/xhtml+xml

xhtml XHTML-MP Các trang web diđộng

text/html html (hay htm trênWindows servers)

HTML Các trang web diđộng


text/html html (hay htm trênWindows servers)

HTML Các trang web diđộng

text/css css CSS1, CSS2, vàWireless CSS

CSS dành cho cácnội dung trên webdi động

application/javascript text/javascript

js Java Script Ngôn ngữ kịchbản sử dụng cùngvới HTML vàXHTML-MP 1.1 và1.2


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ìnhmáy chủ web toàn cục (global)

• Chỉ thị cấu hình AddType xác định kiểu MIME và danhsách các phần mở rộng tên file phù hợp với kiểu MIMEtheo cú pháp:

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ìnhmáy chủ web toàn cục (global)

• Chỉ thị cấu hình AddType xác định kiểu MIME và danhsách các phần mở rộng tên file phù hợp với kiểu MIMEtheo cú pháp:


AddType <kiểu MIME> <phần mở rộng tên file> [<phần mở rộng tên file >]...


Máy chủ Microsoft IIS:• Microsoft Internet Information Services cung cấp giao

diện người dùng, dòng lệnh và phương pháp lập trìnhđể quản lý liên kết kiểu với từng loại file có phần mởrộng khác nhau

• Bên cạnh việc sử dụng ứng dụng quản lý IIS để cấuhình kiểu MIME, IIS 7 giới thiệu cú pháp dòng lệnh đểquản lý kiểu MIME

• Ví dụ:

Máy chủ Microsoft IIS:• Microsoft Internet Information Services cung cấp giao

diện người dùng, dòng lệnh và phương pháp lập trìnhđể quản lý liên kết kiểu với từng loại file có phần mởrộng khác nhau

• Bên cạnh việc sử dụng ứng dụng quản lý IIS để cấuhình kiểu MIME, IIS 7 giới thiệu cú pháp dòng lệnh đểquản lý kiểu MIME

• Ví dụ:


appcmd set config /section:staticContent ^/+"[fileExtension='.xhtml',mimeType='application/vnd.wap.xhtml+xml']"


Máy chủ Nginx:• Là máy chủ web dạng đơn giản phù hợp cho file tĩnh• Đối với các trang web có lượng truy cập lớn, thông

thường sử dụng một máy chủ Apache (hoặc máy chủIIS) cung cấp các trang động và một máy chủ nginxđảm nhiệm vai trò làm việc với hình ảnh, style sheetsvà các file tĩnh khác giúp tiết kiệm tài nguyên

• Ví dụ:

Máy chủ Nginx:• Là máy chủ web dạng đơn giản phù hợp cho file tĩnh• Đối với các trang web có lượng truy cập lớn, thông

thường sử dụng một máy chủ Apache (hoặc máy chủIIS) cung cấp các trang động và một máy chủ nginxđảm nhiệm vai trò làm việc với hình ảnh, style sheetsvà các file tĩnh khác giúp tiết kiệm tài nguyên

• Ví dụ:


types {application/vnd.wap.xhtml+xml xhtml;text/vnd.wap.wml wml;}


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 độngCông cụ thuận tiện để sử dụng web di động: firefoxkết hợp với add-on:

• Add-on XHTML Mobile Profile• Add-on wmlbrowser• Add-on User Agent Switcher• Add-on Modify Headers• Add-on Live HTTP Headers• Add-on Small Screen Renderer• Add-on Firebug

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 độngCông cụ thuận tiện để sử dụng web di động: firefoxkết hợp với add-on:

• Add-on XHTML Mobile Profile• Add-on wmlbrowser• Add-on User Agent Switcher• Add-on Modify Headers• Add-on Live HTTP Headers• Add-on Small Screen Renderer• Add-on Firebug



Công cụ mô phỏng trình duyệt di động (MobileBrowser Emulators):

Là công cụ giúp gỡ lỗi cho lập trình viên web di độngBa loại trình mô phỏng di động:

• Trình mô phỏng thiết bị di động: mô phỏng hệ điềuhành của điện thoại di động và các ứng dụng di động

• Trình mô phỏng trình duyệt di động: chỉ mô phỏng ứngdụng trình duyệt trên di động

• Trình mô phỏng hạ tầng di động: mô phỏng thiết bị diđộng và dịch vụ liên quan trong hệ sinh thái di động

Công cụ mô phỏng trình duyệt di động (MobileBrowser Emulators):

Là công cụ giúp gỡ lỗi cho lập trình viên web di độngBa loại trình mô phỏng di động:

• Trình mô phỏng thiết bị di động: mô phỏng hệ điềuhành của điện thoại di động và các ứng dụng di động

• Trình mô phỏng trình duyệt di động: chỉ mô phỏng ứngdụng trình duyệt trên di động

• Trình mô phỏng hạ tầng di động: mô phỏng thiết bị diđộng và dịch vụ liên quan trong hệ sinh thái di động



Một số trình mô phỏngTrì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ạyAndroid

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


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 MobileBrowser Simulator4.0

Thiết bị Giả lập XHTML, XHTML-MP và WML giống cácthiết bị của Nokia


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épkiểm tra một cách trực quan từng dòng và hợp nhấtlại các điểm khác biệt giữa các file văn bảnCông cụ quản lý mã nguồn

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épkiểm tra một cách trực quan từng dòng và hợp nhấtlại các điểm khác biệt giữa các file văn bảnCông cụ quản lý mã nguồn


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ãytiếp cận việc phát triển web di động theo hướng "lấytiêu chuẩn làm nền tảng"Khi trả về cho yêu cầu HTTP (HTTP request), máychủ sẽ đưa về danh sách MIME để biết định dạngnội dung hỗ trợ trên thiết bị người truy cập (máytính, laptop, thiết bị di động,…)Có nhiều môi trường phát triển web di động, khuyếnkhích sử dụng: Adobe Dreamweaver CS5/CS6Sử dụng các công cụ mô phỏng trình duyệt di độngđể kiểm tra lỗi cho web di động

Để đả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ãytiếp cận việc phát triển web di động theo hướng "lấytiêu chuẩn làm nền tảng"Khi trả về cho yêu cầu HTTP (HTTP request), máychủ sẽ đưa về danh sách MIME để biết định dạngnội dung hỗ trợ trên thiết bị người truy cập (máytính, laptop, thiết bị di động,…)Có nhiều môi trường phát triển web di động, khuyếnkhích sử dụng: Adobe Dreamweaver CS5/CS6Sử dụng các công cụ mô phỏng trình duyệt di độngđể kiểm tra lỗi cho web di động


Documents

BÀI 1 Tổng quan về phát triển web mobile - Giáo trình FPT