Xây dựng trang web nhanh và đáp ứng

NộI Dung

• Xây dựng trang bằng ngữ nghĩa HTML5
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• RDFa
• Vi dữ liệu
• Sử dụng các tính năng CSS3 để tăng cường dần dần
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• Hiểu về độ dốc CSS3
• CSS3, làm ơn!
• Áp dụng thiết kế đáp ứng
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• Tối ưu hóa tải tập lệnh polyfills
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• yepnope
• Áp dụng phát hiện tác nhân người dùng
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• Phương pháp phát hiện trình duyệt trên thiết bị di động
• Thêm bong bóng dấu trang di động vào trang chủ
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Xây dựng trang Liên hệ với textarea và biểu mẫu tự động duyệt
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• Tạo các nút với phản hồi tức thì
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• Ẩn WebKit chrome
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Xây dựng sơ đồ trang web dành cho thiết bị di động
• Sẵn sàng
• Làm thế nào để làm nó...
• Làm thế nào nó hoạt động...
• Còn nữa...
• Google và xây dựng trang web thân thiện với thiết bị di động
• Google và lập chỉ mục trang web trên điện thoại di động

Đoạn trích này là Chương 4 của Sách nấu ăn phát triển di động HTML5 của Shi Chuan, xuất bản tại Packt Publishing.

Trên thiết bị di động, không phải lúc nào băng thông cũng tốt như trên máy tính để bàn. Nếu bạn đang sử dụng mạng 3G chậm, mọi thứ có thể tải chậm hơn nhiều so với điểm phát sóng Wi-Fi. Ngay cả đối với kết nối Wi-Fi, nhiều trình duyệt di động xử lý chậm hơn máy tính để bàn. Vì vậy, khi chúng tôi tạo các trang web dành cho thiết bị di động, chúng phải nhanh và nhạy.

Từ chương này trở đi, chúng tôi cũng sẽ bắt đầu giới thiệu các tính năng của HTML5. HTML5 là một tập hợp các công nghệ bao gồm ngữ nghĩa, các quy tắc và thuộc tính CSS mới cũng như các API JavaScript mới có thể được sử dụng để tạo các trang web có cấu trúc tốt hơn và các ứng dụng web mạnh mẽ. Sau đây là tám tính năng chính của HTML5:

• Ngữ nghĩa
• Ngoại tuyến và lưu trữ
• Quyền truy cập thiết bị
• Kết nối
• Đa phương tiện
• 3D, đồ họa và hiệu ứng
• Hiệu suất và tích hợp
• CSS3

Không phải tất cả các tính năng này đều dành riêng cho thiết bị di động; một số liên quan nhiều hơn đến web di động, trong khi một số thì chung chung hơn cho cả web di động và máy tính để bàn. Chúng ta sẽ nói về từng tính năng này và xem chúng có thể giúp ích gì cho việc phát triển thiết bị di động của chúng ta một cách tốt nhất.

Dựa trên các ví dụ được tạo bằng cách sử dụng các thẻ ngữ nghĩa mới và CSS3, chúng ta sẽ thảo luận về nhiều cách để tận dụng hoàn toàn những gì trình duyệt di động đang cung cấp và cách xây dựng một trang web bằng cách sử dụng các tính năng độc đáo này.

Xây dựng trang bằng ngữ nghĩa HTML5

Thiết bị mục tiêu: trình duyệt chéo

HTML5 đã giới thiệu một bộ thẻ phong phú hơn; các thẻ này cung cấp ý nghĩa cho cấu trúc. Ngữ nghĩa là một khía cạnh cơ bản của HTML5.

Chúng tôi sẽ không trình bày qua tất cả các thẻ ở đây, nhưng sẽ đề cập đến một số thẻ thường được sử dụng nhất.

Sẵn sàng

Trước tiên, hãy tạo một tệp HTML mới và đặt tên cho nó ch04r01.html. Hãy tạo một trang web hư cấu về âm nhạc.

Làm thế nào để làm nó...

Trong tài liệu HTML của chúng tôi, hãy nhập mã sau:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> / style> / head> body> header> h1> first.fm/h1> / header> div id = "main"> h2> Pages / h2> nav> ul> li> a href = "music.html"> Music / a> / li> li> a href = "radio.html"> Radio / a> / li> li> a href = "events.html"> Sự kiện / a> / li> li> a href = "chart.html "> Biểu đồ / a> / li> li> a href =" community.html "> Cộng đồng / a> / li> li> a href =" help.html "> Trợ giúp / a> / li> li> a href = "about.html"> Giới thiệu / a> / li> / ul> / nav> / div> footer> small> © 2011 first.fm/small> / footer> / body> / html>

Làm thế nào nó hoạt động...

Các tiêu đề phần tử thường được sử dụng cho h1 đến h6 các yếu tố; nó có thể xuất hiện dưới dạng phần đầu của toàn bộ trang hoặc phần đầu của bất kỳ phần tử cấp khối nào. Nó thường chứa tiêu đề, phụ đề hoặc dòng giới thiệu.

tiêu đề> thành phần:

tiêu đề> / tiêu đề>

Các nav phần tử đại diện cho điều hướng cho một tài liệu. Các nav phần tử là một phần chứa các liên kết đến các tài liệu khác hoặc đến các phần trong tài liệu hiện tại.

Không phải tất cả các nhóm liên kết trên một trang đều cần nằm trong phần tử điều hướng. Đó chỉ là các nhóm liên kết điều hướng chính hoặc phụ.Đặc biệt, phần footer thường có danh sách các liên kết đến các phần quan trọng khác nhau của một trang web, nhưng phần tử footer thích hợp hơn trong những trường hợp như vậy.

nav> thành phần:

nav> ul> li> a href = "music.html"> Music / a> / li> / ul> / nav>

Các chân trang phần tử đại diện cho 'chân trang' của tài liệu hoặc phần của tài liệu. Phần tử footer thường chứa siêu dữ liệu về phần bao quanh nó, chẳng hạn như ai đã viết nó, liên kết đến các tài liệu liên quan, dữ liệu bản quyền, v.v. Thông tin liên hệ cho phần được đưa ra trong chân trang phải được đánh dấu bằng cách sử dụng phần tử địa chỉ.

footer> thành phần:

footer> small> © 2011 first.fm/small> / footer>

Các nhỏ phần tử có thể được sử dụng cho bản in nhỏ. Nó không nhằm mục đích trình bày trọng tâm chính của trang. Phần tử nhỏ không nên được sử dụng cho các đoạn văn hoặc phần văn bản dài. Nó chỉ dành cho văn bản ngắn như thông tin bản quyền.

nhỏ> thành phần:

nhỏ> © 2011 first.fm/small>

Còn nữa...

Ngữ nghĩa không chỉ là một bộ thẻ phong phú hơn. Những gì chúng ta cần không chỉ là những thẻ có ý nghĩa hơn. Để mở rộng hơn các thẻ, chúng tôi cũng có thể thêm các ngữ nghĩa bổ sung mà máy có thể đọc được; dữ liệu mà trình duyệt, tập lệnh hoặc rô bốt có thể hiểu được, tạo ra một trang web theo hướng dữ liệu hữu ích hơn cho cả chương trình và người dùng của bạn. Những ngữ nghĩa này là: RDFa (Khung mô tả tài nguyên - trong - thuộc tính), Vi dữ liệu, và Định dạng vi mô.

RDFa

RDFa cung cấp một tập hợp các thuộc tính HTML mà máy có thể đọc được. Bằng cách sử dụng RDFa, các tác giả có thể biến thông tin hiện có mà con người đọc được thành dữ liệu có thể đọc được bằng máy mà không cần lặp lại nội dung. Thông số kỹ thuật mới nhất có thể được tìm thấy tại: w3.org/TR/rdfa-in-html.

Vi dữ liệu

Vi dữ liệu sử dụng các thuộc tính để xác định các nhóm cặp dữ liệu tên-giá trị. Bạn có thể tìm hiểu thêm về nó tại: html5doctor.com/microdata.

Bạn có thể tìm hiểu sâu hơn về vi dữ liệu bằng cách đọc Bản thảo làm việc của W3C tại: w3.org/TR/microdata.

Bạn cũng có thể đọc Bản nháp của Biên tập viên W3C tại: dev.w3.org/html5/md. Định dạng vi mô
Vi định dạng được thiết kế cho thứ nhất của con người và thứ hai của máy. Hiện tại có 34 thông số kỹ thuật vi định dạng, một số đã được xuất bản và một số là bản nháp. Bạn có thể tìm hiểu thêm về chúng tại: html5doctor.com/microformats.

Sử dụng các tính năng CSS3 để tăng cường dần dần

Thiết bị mục tiêu: trình duyệt chéo

CSS3 nâng cao các ứng dụng web và trang web bằng cách sử dụng nhiều kiểu và hiệu ứng. Với CSS3, người ta có thể tạo một tập hợp giao diện người dùng phong phú không thể tưởng tượng được. Trên thiết bị di động, ít hình ảnh hơn có nghĩa là tải nhanh hơn, đây là một cách để tăng hiệu suất. Với sự hỗ trợ rộng rãi của CSS3 trên hầu hết các trình duyệt điện thoại thông minh hiện đại và các polyfills để dự phòng (polyfills được sử dụng làm dự phòng để làm cho các tính năng HTML5 hoạt động trên các trình duyệt không hỗ trợ HTML5 nguyên bản), việc bắt đầu sử dụng CSS3 không chỉ an toàn mà còn cần thiết!

Sẵn sàng

Hãy tạo kiểu cho trang được tạo trong ví dụ trước. Bản sao đầu tiên ch04r01.html và đổi tên nó thành ch04r02.html.

Làm thế nào để làm nó...

Thêm vào các quy tắc kiểu sau:

style> body {margin: 0; đệm: 0; font-family: Arial; nền: #ccc; } tiêu đề {text-shadow: 0 1px # 000; nền: # ff3019; / * Các trình duyệt cũ * / background: -moz-linear-gradient (top, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * FF3.6 + * / background: -webkit-gradient (tuyến tính, phía trên bên trái, bên trái, điểm dừng màu (0%, # ff3019), điểm dừng màu (20%, # cf0404), màu dừng ( 100%, # ff3019)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (top, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * Opera11.10 + * / background: -ms-linear-gradient (top, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * IE10 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# ff3019’, endColorstr = ’# ff3019’, GradientType = 0); / * IE6-9 * / background: linear-gradient (top, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * W3C * /} h1 {padding: 0,5em 0,2em; lề: 0; font-size: 18px; màu trắng; } h2 {text-shadow: 0 1px #FFFFFF; nền: #eeeeee; / * Các trình duyệt cũ * / background: -moz-linear-gradient (trên cùng, #eeeeee 0%, #cccccc 100%); / * FF3.6 + * / background: -webkit-gradient (tuyến tính, bên trái trên cùng, dưới cùng bên trái, dừng màu (0%, # eeeeee), dừng màu (100%, # cccccc)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * Opera11.10 + * / background: -ms-linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * IE10 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# eeeeee’, endColorstr = ’# cccccc’, GradientType = 0); / * IE6-9 * / background: linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * W3C * / padding: 0,5em 0,2em; lề: 0; font-size: 16px; màu: # 000; } nav ul {border-top: 1px solid #fff; list-style-type: none; đệm: 0; lề: 0; } nav li {padding: 0,5em 0,2em; lề: 0; nền: #AFAFAF; border-bottom: 1px solid #fff; } nav li a {height: 20px; hiển thị: khối; văn bản-trang trí: không có; màu trắng; } / style>

Bằng cách chạy mã này trong trình duyệt, đây là những gì chúng ta có thể thấy:

Làm thế nào nó hoạt động...

Trong ví dụ này, chúng tôi đã sử dụng CSS3 gradient để tạo kiểu cho phần tử tiêu đề. Theo truyền thống, để tạo một gradient như ví dụ trước, người ta sẽ phải sử dụng Photoshop hoặc Illustrator, nhưng bây giờ bạn có thể tạo nó bằng cách sử dụng CSS hoàn toàn!

nền: #eeeeee; / * Các trình duyệt cũ * / background: -moz-linear-gradient (trên cùng, #eeeeee 0%, #cccccc 100%); / * FF3.6 + * / background: -webkit-gradient (tuyến tính, bên trái trên cùng, dưới cùng bên trái, dừng màu (0%, # eeeeee), dừng màu (100%, # cccccc)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * Opera11.10 + * / background: -ms-linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * IE10 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# eeeeee’, endColorstr = ’# cccccc’, GradientType = 0); / * IE6-9 * / background: linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * W3C * /

Bằng cách xem xét từng quy tắc nói trên, chúng ta có thể thấy rằng các trình duyệt khác nhau sử dụng các quy tắc CSS khác nhau cho gradient. Có sáu biến thể khác nhau chỉ để đảm bảo rằng nó tương thích với nhiều trình duyệt. Chắc hẳn bạn đang nghĩ: "Ôi trời, việc chăm sóc từng trình duyệt khá tốn thời gian". Đừng lo lắng, quy tắc này không được nhập theo cách thủ công. Các Trình tạo Gradient CSS cuối cùng đến để giải cứu! Một trình chỉnh sửa gradient CSS giống như Photoshop mạnh mẽ từ ColorZilla có thể giúp bạn tạo các gradient CSS3 một cách dễ dàng:

colorzilla.com/gradient-editor

Còn nữa...

Nếu bạn xem xét IE9 trở xuống, CSS3 PIE có thể được sử dụng để hỗ trợ.

Sau khi tải xuống PIE.htc, đưa nó vào CSS của bạn bằng cách sử dụng:

-pie-background: linear-gradient (top, #eeeeee 0%, # cccccc 100%); / * PIE * / hành vi: url (PIE.htc);

Các tính năng được hỗ trợ bao gồm:

• bán kính biên giới
• bóng hộp
• hình ảnh biên giới
• Nền CSS3 (-pie-background)
• Độ dốc
• Giá trị màu RGBA
• Thuộc tính tùy chỉnh PIE

Hiểu về độ dốc CSS3

Jeffrey Way, biên tập viên tại nettuts, có một bài viết xuất sắc về CSS3 gradient. Bạn có thể xem nó tại: net.tutsplus.com/tutorials/html-css-techniques/quick-tip-und hieu-css3-gradients.

CSS3, làm ơn!

CSS3 Please !, của Paul Irish, có cú pháp mới nhất về độ dốc và nhiều tính năng CSS3 khác tại: css3please.com.

Áp dụng thiết kế đáp ứng

Thiết bị mục tiêu: trình duyệt chéo

Thiết kế đáp ứng là một trong những khái niệm quan trọng nhất trong quá trình phát triển điện thoại di động gần đây. Nó nhấn mạnh khái niệm rằng trình duyệt phải phản hồi màn hình / thay đổi kích thước trình duyệt để hiển thị khác nhau. Thiết kế đáp ứng đầu tiên trên thiết bị di động có thể làm cho các trang giảm chất lượng một cách duyên dáng trên các trình duyệt trên máy tính để bàn.

Vậy tại sao chúng ta cần thiết kế web đáp ứng?

Khi chúng ta áp dụng bố cục cố định trên một trang web dành cho máy tính để bàn, thường có các khoảng trắng ở bên trái hoặc bên phải của màn hình tùy thuộc vào kích thước màn hình của trình duyệt. Các trình duyệt dành cho thiết bị di động cũng có các kích thước khác nhau và với không gian khung nhìn hạn chế, mọi pixel đều rất quan trọng, vì vậy điều quan trọng là phải tận dụng mọi pixel có sẵn trên màn hình. Để loại bỏ khoảng trắng không cần thiết ở bên trái hoặc bên phải của trang, thiết kế đáp ứng được sử dụng.

Truy vấn phương tiện có thể trợ giúp như thế nào với thiết kế đáp ứng?

Truy vấn phương tiện được sử dụng để tạo kiểu nội dung dựa trên cập nhật kích thước màn hình, vì vậy đối với cùng một phần tử HTML, có thể có hai quy tắc riêng biệt được áp dụng. Cái nào được hiển thị phụ thuộc vào kích thước của khung nhìn trình duyệt.

Sẵn sàng

Trong ví dụ này, chúng tôi sẽ sử dụng một polyfill HTML5 có tên response.js. Nó được tạo ra bởi Scott Jehl (từ nhóm jQuery Mobile). Nó nằm ở ch04_code / js trong mã nguồn.

Làm thế nào để làm nó...

Đầu tiên, hãy tạo một tài liệu HTML có tên ch04r03.html. Nhập mã sau vào HTML:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> link rel = "stylesheet" href = "css / style.css? v = 1"> script> Modernizr.mq ('(min-width: 0)') || document.write ("scriptsrc = 'js / response.min.js'> x3C / script>") / script> / head> body> header> h1> first.fm/h1> / header> div id = "main "> h2> Pages / h2> nav> ul> li> a href =" music.html "> Music / a> / li> li> a href =" radio.html "> Radio / a> / li> li> a href = "events.html"> Sự kiện / a> / li> li> a href = "chart.html"> Charts / a> / li> li> a href = "community.html"> Community / a> / li> li> a href = "help.html"> Help / a> / li> li> a href = "about.html"> About / a> / li> / ul> / nav> / div> footer> small > © 2011 first.fm/small> / footer> / body> / html>

Nếu bạn hiển thị trang trên thiết bị di động, trang này sẽ trông giống hệt như công thức trước đó. Nhưng nếu bạn kết xuất nó trong trình duyệt trên máy tính để bàn, nó sẽ trông giống như sau:

Làm thế nào nó hoạt động...

Ở đầu tệp, chúng tôi đã sử dụng Modernizr để phát hiện trước tiên liệu Truy vấn phương tiện có được trình duyệt hiện tại hỗ trợ hay không. Nếu không, chúng tôi sẽ tải response.min.js:

script> Modernizr.mq (’(min-width: 0)’) || document.write ("script src =’ js / response.min.js ’> x3C / script>") / script>

Tại thời điểm viết bài, bạn cần có / * / mediaquery * / bình luận ở cuối quy tắc để nó hoạt động. Điều này có thể được cải thiện trong các phiên bản tương lai của response.js:

@media only screen and (min-width: 800px) {} / * / mediaquery * /

Còn nữa...

Trên trang Mobile Boilerplate, tôi đã giải thích thêm về Media Queries và bạn có thể tìm thấy các slide tại: html5boilerplate.com/mobile.

Andy Clarke đã tạo ra 320 trở lên, cũng dựa trên ý tưởng về thiết kế đáp ứng. Bạn có thể tải xuống tại :uffandnonsense.co.uk/projects/320andup.

Tối ưu hóa tải tập lệnh polyfills

Thiết bị mục tiêu: trình duyệt chéo

Tải tập lệnh là quan trọng đối với bất kỳ trình duyệt nào, nhưng đối với thiết bị di động thì nhiều hơn do băng thông thấp. Modernizr đi kèm với một giải pháp tải động.

Sẵn sàng

Trước tiên, hãy tạo một tài liệu HTML và đặt tên cho nó ch03r04.html.

Làm thế nào để làm nó...

Nhập mã sau vào trình soạn thảo mã của bạn và chạy nó.

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> script src = "js / modernizr.custom.54685.js"> / script> style> / style> / head> body> header> h1> Vị trí của bạn / h1> / header> div id = "main"> Vị trí Địa lý của bạn là: span id = "geo"> / span> / div> script src = "// ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"> / script> script> yepnope ({test: Modernizr .geolocation, nope: ['js / geolocation.js'], complete: function () {Navigator.geolocation.getCurrentPosition (function (position) {document.getElementById ('geo'). innerHTML = position.coords.latitude + ", "+ position.coords.longitude;});}}); / script> / body> / html>

Làm thế nào nó hoạt động...

Tại thời điểm viết bài, Modernizr 2.0 Preview đang ở phiên bản Beta 1. Trong bản phát hành beta này, có hai tính năng mới tuyệt vời. Một là bạn có thể chọn tùy chỉnh các tính năng mà bạn muốn phát hiện. Tính năng tuyệt vời khác là bạn có thể có yepnope.js (cũng được biết đến như là Modernizr.load của Alex Sexton và Ralph Holzmann). Yepnope.js cung cấp một trình tải JavaScript động và bạn có thể tìm hiểu thêm về nó trong Còn nữa phần của chương này.

Với Modernizr, trước tiên chúng tôi có thể phát hiện xem một tính năng đã tồn tại hay chưa trong tác nhân người dùng hiện tại:

kiểm tra: Modernizr.geolocation

Nếu nó không tồn tại, chúng tôi sẽ tải shim geolocation.js sử dụng yepnope. Và hơn thế nữa
hoàn thành, chúng tôi có thể thêm vĩ độ và kinh độ:

yepnope ({test: Modernizr.geolocation, nope: [’js / geolocation.js’], complete: function () {...});

Còn nữa...

Có một số tài nguyên tùy chọn sẽ hữu ích cho các nhà phát triển. Bộ thử nghiệm Modernizr là một trong số đó. Nó hữu ích trong việc giúp các nhà phát triển biết ngay những tính năng nào được hỗ trợ trên một thiết bị nhất định. Bạn có thể tìm hiểu thêm tại:

modernizr.github.com/Modernizr/test/index.html

yepnope

yepnope là trình tải tài nguyên có điều kiện không đồng bộ siêu nhanh và cho phép bạn chỉ tải các tập lệnh mà người dùng của bạn cần. Để tìm hiểu thêm về nó, hãy truy cập:

yepnopejs.com.

Áp dụng phát hiện tác nhân người dùng

Thiết bị mục tiêu: trình duyệt chéo

Khi phát triển một trang web dành cho thiết bị di động, bạn nên phát hiện tác nhân người dùng. Điều này có thể giúp bạn với tập lệnh chuyển hướng hoặc giúp bạn xác định xem bạn có muốn tải / không tải thứ gì đó dựa trên tác nhân người dùng hay không.

Sẵn sàng

Trước tiên, hãy xem cách bạn có thể biết liệu người dùng có thể chuyển hướng từ trang web này sang trang web khác hay không dựa trên phát hiện tác nhân người dùng. Có một số cách để thực hiện việc này: Bạn có thể thực hiện việc này trong cấu hình máy chủ, bằng ngôn ngữ lập trình phía máy chủ của bạn hoặc sử dụng nó từ JavaScript giao diện người dùng.

Làm thế nào để làm nó...

Bạn có thể tải xuống tập lệnh chuyển hướng từ: exploremobilebrowser.com. Nó đi kèm với nhiều phiên bản khác nhau. Trong ví dụ này, hãy sử dụng cấu hình Apache .htaccess.

Làm thế nào nó hoạt động...

Sau khi tải xuống tệp và mở tệp, bạn sẽ thấy tập lệnh như sau:

RewriteEngine trên RewriteBase / RewriteCond% {HTTP_USER_AGENT} android | avantgo | blackberry | blazer | comp al | .... | up . (Browser | link) | vodafone | wap | windows (ce | phone) | xda | xiino [ NC, HOẶC] RewriteCond% {HTTP_USER_AGENT} ^ (1207 | 6310 | 6590 | .... | your | zeto | zte -) ​​[NC] RewriteRule ^ $ http://example.com/mobile [R, L]

Để chuyển hướng một trang web trên máy tính để bàn đến một trang trên điện thoại di động, người ta có thể thay đổi http://example.com/mobile đến địa chỉ trang web của bạn.

Còn nữa...

Tính năng phát hiện tác nhân người dùng không chỉ hữu ích cho việc chuyển hướng trang web mà còn hữu ích khi bạn đang cố gắng xác định xem liệu có nên tải thứ gì đó ngay từ đầu hay không, dựa trên tác nhân người dùng.

Khi xây dựng trang web Mobile Boilerplate, tôi đã sử dụng phiên bản JavaScript của tập lệnh phát hiện để xác định xem trang web có nên hiển thị nội dung được nhúng dựa trên tác nhân người dùng (thiết bị di động hoặc máy tính để bàn) hay không:

if (! jQuery.browser.mobile) {...}

Với tập lệnh này dành cho trình duyệt trên máy tính để bàn, các trang trình bày được tải và hiển thị như sau:

Trên phiên bản di động, nó không được hiển thị:

Phương pháp phát hiện trình duyệt trên thiết bị di động

Một bài viết trên mobile tuts giải thích các phương pháp phát hiện trình duyệt di động khác nhau:
mobile.tutsplus.com/tutorials/mobile-web-apps/mobile-browser-detection.

Thêm bong bóng dấu trang di động vào trang chủ

Mục tiêu thiết bị: iOS

Trong các chương trước, chúng ta đã nói về khả năng đánh dấu trang web của bạn trên một số thiết bị di động nhất định. Mặc dù đây là một tính năng khá thú vị để đưa các ứng dụng web tiến gần hơn đến các ứng dụng gốc, nhưng có một vấn đề với nó: không có API bạn có thể sử dụng để gọi hành động đánh dấu, vì vậy nhiều người dùng chỉ đơn giản là không biết tính năng trên điện thoại của họ. Để giải quyết vấn đề này, một số khung công tác cung cấp bong bóng dấu trang sử dụng CSS và JavaScript. Tập lệnh thêm bong bóng quảng cáo vào cuối trang ứng dụng web của bạn, yêu cầu người dùng đánh dấu trang ứng dụng web trên màn hình chính của thiết bị của họ.

Sẵn sàng

Như đã đề cập, nhiều khuôn khổ cung cấp tính năng này, nhưng vì lợi ích đơn giản, hãy sử dụng một khuôn khổ độc lập. Google đã phát hành một thư viện mã nguồn mở có tên Bong bóng Dấu trang Di động cho nhiệm vụ này. Trước tiên, hãy tải xuống tại: code.google.com/p/mobile-bookmark-bubble.

Làm thế nào để làm nó...

Thư viện đi kèm với một sample.js. Chỉ cần bao gồm cả hai bookmark_bubble.js và sample.js trong bất kỳ trang web nào được tạo; sau đó bạn sẽ thấy một cái gì đó như sau:

Làm thế nào nó hoạt động...

Thư viện sử dụng bộ nhớ cục bộ HTML5 để theo dõi xem quảng cáo đã được hiển thị hay chưa, tránh liên tục làm phiền người dùng.Việc triển khai hiện tại của thư viện này nhắm mục tiêu cụ thể đến Mobile Safari, trình duyệt web được sử dụng trên các thiết bị iPhone và iPad.

Xây dựng trang Liên hệ với textarea và biểu mẫu tự động duyệt

Thiết bị mục tiêu: trình duyệt chéo

Trên các ứng dụng gốc như SMS, vùng văn bản sẽ tự động phát triển. Trên web di động, nếu bạn tạo textarea, bạn sẽ nhận ra nó là một kích thước cố định. Khi các dòng văn bản bạn nhập vượt quá textarea chiều cao, nó trở nên rất khó để nhìn thấy văn bản. Trong ví dụ này, chúng ta sẽ thấy cách chúng ta có thể tạo textarea tự động duyệt khi bạn nhập nhiều dòng hơn.

Sẵn sàng

Trước tiên, hãy tạo một tài liệu HTML và đặt tên cho nó ch04r05.html. Trong ví dụ này, chúng tôi sẽ sử dụng helper.js trong Mobile Boilerplate: https://github.com/h5bp/mobile-boilerplate

Làm thế nào để làm nó...

Nhập mã này vào tệp:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> # liên hệ {width: 220px; height: 40px;} / style> / head> body> header> h1> Contact Form / h1> / header> div id = "main"> p> Nhập thư để xem autogrow / p> textarea id = "contact" > / textarea> / div> script src = "// ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"> / script> script src = "// github.com/shichuan/mobile -html5-boilerplate / raw / master / js / mylibs / helper.js "> / script> script> var contact = document.getElementById (" contact "); MBP.autogrow (liên hệ); / script> / body> / html>

Sau đây là ảnh chụp màn hình về cách nó hiển thị trong Palm webOS:

Làm thế nào nó hoạt động...

Trong kịch bản, chúng tôi có trình nghe sự kiện key-up. Điều này sẽ phát hiện nếu textarea chiều cao đã thay đổi. Chúng tôi đo chiều cao của nội dung và nếu nó thay đổi, chúng tôi sẽ thay đổi kiểu CSS của textarea để tăng chiều cao.

Còn nữa...

Ý tưởng ban đầu là từ blog Mã của Google. Bạn có thể đọc thêm về nó tại:
googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series.html.

Tạo các nút với phản hồi tức thì

Mục tiêu thiết bị: iOS, Android

Trên trình duyệt thiết bị di động, phản hồi của nút có thể chậm hơn một chút so với ứng dụng gốc. Trên các trình duyệt di động, có một touchstart biến cố. Bằng cách phát hiện sự kiện này thay vì sự kiện nhấp chuột, nó sẽ làm cho việc nhấp chuột nhanh hơn.

Sẵn sàng

Trong ví dụ này, chúng ta sẽ sử dụng một hàm trong Mobile Boilerplate. Tạo một tệp có tên ch04r06.html.

Làm thế nào để làm nó...

Đoạn mã sau sẽ tạo một biểu mẫu có nút gửi:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> # liên hệ {width: 220px; chiều cao: 40px; } / style> / head> body> header> h1> Contact Form / h1> / header> div id = "main"> textarea id = "contact"> / textarea> br /> button id = "btn"> Nút INSTANT !!! / button> br /> span id = "result"> / span> / div> footer> small> © 2011 first.fm/small> / footer> script src = "// ajax.googleapis.com/ajax /libs/jquery/1.5.1/jquery. js "> / script> script src =" // github.com/shichuan/mobile-html5-boilerplate/raw/ master / js / mylibs / helper.js "> / script > script> var btn = document.getElementById ("btn"); MBP.fastButton (btn, showForm); function showForm () {$ ("# result"). html ("Cảm ơn bạn đã gửi, chúng tôi sẽ liên hệ lại với bạn trong thời gian ngắn!"); } / script> / body> / html>

Làm thế nào nó hoạt động...

Sau đây là phần trích dẫn của chức năng nút nhanh, và sau đây chúng ta sẽ xem chức năng hoạt động như thế nào.

Ở trên cùng, chúng ta có chức năng chính được xác định. Điều này chỉ được sử dụng nếu addEventListener được hỗ trợ, nơi nó lắng nghe touchstart và nhấp chuột sự kiện:

MBP.fastButton = function (element, handler) {this.element = element; this.handler = trình xử lý; if (element.addEventListener) {element.addEventListener ('touchstart', this, false); element.addEventListener ('click', this, false); }}; MBP.fastButton.prototype.handleEvent = function (event) {switch (event.type) {case ’touchstart’: this.onTouchStart (event); phá vỡ; case 'touchmove': this.onTouchMove (sự kiện); phá vỡ; case 'touchhend': this.onClick (sự kiện); phá vỡ; case 'click': this.onClick (sự kiện); phá vỡ; }};

Các onTouchStart phương pháp được sử dụng để lắng nghe touchmove và chạm vào sự kiện. stopPropagation được sử dụng để ngăn sự lan truyền của sự kiện trong người nghe, để sự kiện ngừng sôi sục:

MBP.fastButton.prototype.onTouchStart = function (event) {event.stopPropagation (); this.element.addEventListener ('touchhend', this, false); document.body.addEventListener ('touchmove', this, false); this.startX = event.touches [0] .clientX; this.startY = event.touches [0] .clientY; this.element.style.backgroundColor = "rgba (0,0,0, .7)";};

touchmove được sử dụng để kiểm tra xem người dùng có đang kéo hay không. Nếu người dùng kéo quá 10 px, chúng tôi sẽ đặt lại nó:

MBP.fastButton.prototype.onTouchMove = function (event) {if (Math.abs (event.touches [0] .clientX - this.startX)> 10 || Math.abs (event.touches [0] .clientY - this .startY)> 10) {this.reset (); }};

Đoạn mã sau ngăn các nhấp chuột ma và gọi trình xử lý nhấp chuột thực tế:

MBP.fastButton.prototype.onClick = function (event) {event.stopPropagation (); this.reset (); this.handler (sự kiện); if (event.type == ’Touhend’) {MBP.preventGhostClick (this.startX, this.startY); } this.element.style.backgroundColor = "";}; MBP.fastButton.prototype.reset = function () {this.element.removeEventListener (’Touhend’, this, false); document.body.removeEventListener ('touchmove', this, false); this.element.style.backgroundColor = "";};

Còn nữa...

Bạn có thể đọc thêm về nút nhanh tại blog của Google. Nó giải thích chi tiết nền tảng và lý thuyết đằng sau ý tưởng tại: code.google.com/mobile/articles/fast_buttons.html.

Ẩn WebKit chrome

Mục tiêu thiết bị: iOS, Android

Thanh URL ở đầu Safari di động trên iOS và Android sử dụng một không gian lớn. Nhiều nhà phát triển sẽ ẩn nó khi tải trang vì bất động sản di động bị hạn chế. Mọi pixel đều quan trọng và bằng cách ẩn thanh URL, nó giúp bạn tận dụng mọi pixel trên màn hình để tối đa hóa diện tích hiển thị.

Sẵn sàng

Trước tiên, hãy tạo một tài liệu HTML và đặt tên cho nó ch04r07.html.

Làm thế nào để làm nó...

Nhập mã này:

! doctype html> html> head> title> Mobile Cookbook / title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> html, body, header, footer {padding: 0; lề: 0; } tiêu đề {height: 40px; nền: # BFB840; hiển thị: khối; } #main {height: 350px; nền: # F2CB67; } footer {height: 40px; nền: # DB5E31; hiển thị: khối; } / style> / head> body> header> header / header> div id = "main"> main / div> footer> footer / footer> script src = "// ajax.googleapis.com/ajax/libs/jquery/ 1.5.1 / jquery. Js "> / script> script src =" // github.com/shichuan/mobile-html5-boilerplate/raw/ master / js / mylibs / helper.js "> / script> script> // MBP.hideUrlBar (); / script> / body> / html>

Bây giờ nếu bạn kết xuất nó trong trình duyệt, nó sẽ giống như sau:

Bây giờ bỏ ghi chú dòng sau:

MBP.hideUrlBar ();

Hiển thị lại nội dung và bạn có thể thấy chrome hiện đã bị ẩn, cho phép hiển thị phần chân trang:

Làm thế nào nó hoạt động...

Sau đây là script bên trong Boilerplate:

MBP.hideUrlBar = function () {var win = window, doc = win.document; // Nếu có hàm băm hoặc addEventListener chưa được xác định, hãy dừng lại tại đây nếu (! Location.hash ||! Win.addEventListener) {// cuộn đến 1 window.scrollTo (0, 1); var scrollTop = 1, // đặt lại về 0 trên bodyready, nếu cần bodycheck = setInterval (function () {if (doc.body) {clearInterval (bodycheck); scrollTop = "scrollTop" trong doc.body? doc.body.scrollTop : 1; win.scrollTo (0, scrollTop === 1? 0: 1);}}, 15); win.addEventListener ("load", function () {setTimeout (function () {// đặt lại để ẩn thanh addr khi onload win.scrollTo (0, scrollTop === 1? 0: 1);}, 0);} , sai ); }};

Nó phát hiện nếu có bất kỳ băm nào trong URL. Nếu có, chúng tôi sẽ ngừng chạy script vì nó có nghĩa là có một anchor nội tuyến. Nếu không có bất kỳ hàm băm nào, chúng tôi sẽ đợi một giây và nếu không có cuộn, Android sử dụng 1 px y pos để ẩn, trong khi đó là 0 ở iOS. Kịch bản bình thường hóa cả hai. Nó được thực hiện bởi Scott Jehl tại: gist.github.com/1183357.

Xây dựng sơ đồ trang web dành cho thiết bị di động

Thiết bị mục tiêu: trình duyệt chéo

Nhiều nhà phát triển đã quen thuộc với Sơ đồ trang web của Google. Là công cụ tìm kiếm lớn nhất, đảm bảo rằng nó nhận được nội dung của chúng tôi là rất quan trọng. Đối với mục đích SEO trên thiết bị di động, Google đã đưa ra Sơ đồ trang web dành cho Điện thoại di động. Google khuyên mọi người nên cập nhật sơ đồ trang web dành cho thiết bị di động của họ theo định dạng được mô tả tiếp theo.

Sẵn sàng

Trước tiên, hãy tạo một tài liệu XML và đặt tên cho nó sitemap.xml.

Làm thế nào để làm nó...

Chúng ta có thể thêm đoạn mã sau vào tài liệu XML. Đối với trang web cụ thể mà bạn có, URL phải là URL của các trang của bạn:

? xml version = "1.0" encoding = "UTF-8"?> var13 -> urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9" xmlns: mobile = "http: // www .google.com / schemas / sitemap-mobile / 1.0 "> url> loc> http://mobile.example.com/article100.html/loc> mobile: mobile /> / url> / urlset>

Tất cả các URL được bao gồm bên trong loc> / loc>.

Hãy chắc chắn rằng bạn đã bao gồm di động: di động />. Nếu không, các trang web sẽ không được thu thập thông tin chính xác.

Làm thế nào nó hoạt động...

Sơ đồ trang web tuân theo một lược đồ cụ thể; lược đồ XML nói trên được sử dụng để cho công cụ tìm kiếm của Google biết vị trí của trang web di động. Thông thường, nếu một trang web được xây dựng bằng hệ thống CMS, phải có một cách để tự động tạo các URL và tất cả chúng phải được liệt kê trong loc> / loc>.

Còn nữa...

Sơ đồ trang web dành cho thiết bị di động không được chứa các URL chỉ dành cho máy tính để bàn. Tuy nhiên, nó có thể chứa nội dung cho cả máy tính để bàn và thiết bị di động.

Đối với các trang web có nội dung dành riêng cho thiết bị di động và URL dành riêng, bạn có thể hướng người dùng từ example.com đến m.example.com. Trong trường hợp này, hãy sử dụng chuyển hướng 301 cho cả người dùng và Googlebot-Mobile.

Nếu bạn phục vụ tất cả các loại nội dung từ example.com, điều này không được Google coi là che giấu.

Google và xây dựng trang web thân thiện với thiết bị di động

Trên trang web Quản trị trang web của Google, có một bài đăng trên blog về cách làm cho trang web thân thiện với thiết bị di động: googlewebmastercentral.blogspot.com/2011/02/making-websites-mobile-friendly.html.

Google và lập chỉ mục trang web trên điện thoại di động

Có một blog khác trên trang web Quản trị trang web của Google, nói về cách giúp Google lập chỉ mục trang web di động của bạn: googlewebmastercentral.blogspot.com/2009/11/help-google-index-your-mobile-site.html.