Phát triển di động HTML5 bằng HTML5BoilerPlate

Question

Tôi đang bắt đầu một ứng dụng HTML5 dành cho thiết bị di động với HTML5BoilerPlate làm mẫu và tôi không thể tìm thấy nhiều tài nguyên về các phương pháp hay nhất để phát triển di động HTML5. Tôi đang tìm kiếm các nội dung như:
- điều hướng bằng điều khiển thanh tab
- điều hướng giữa chế độ xem
- cách xử lý nội dung tốt nhất? (tốt hơn là sử dụng một số div trong div nội dung và chỉ hiển thị một div tại một thời điểm?)

Thực tế, tôi muốn hiểu một số điều được thực hiện trong Google Latitude.

Có hướng dẫn cho người mới bắt đầu hay cho những mục đó không?

Answer 1

• Bạn phải triển khai nhiều hơn về logic xung quanh các thành phần 'bộ điều khiển' này. Một số lớp có thể có mặt trong quá trình phát triển iOS không có trong HTML5. Bạn cần phải cuộn của riêng bạn hoặc sử dụng một khuôn khổ hiện có.
• Điều hướng giữa các chế độ xem được xử lý theo chương trình. Bạn sẽ cần tự làm điều đó, bằng cách triển khai các thành phần có thể tạo hiệu ứng đến/từ màn hình hoặc sử dụng một trong các khung sẵn có như Sencha Touch hoặc jQuery Mobile.
• Tùy thuộc vào cách bạn muốn luồng hình ảnh hoạt động. Tôi biết rằng Sencha Touch cho biết thêm trong divs lazily vì vậy không mất nhiều bộ nhớ. Tôi đoán các trick ở đây là để thử nghiệm để tìm việc thực hiện tốt nhất phù hợp với nhu cầu của bạn (và sau đó viết một bài viết blog).

SixRevisions có bài viết khá hay về bắt đầu lập trình HTML5 chung. Một số bài viết khác, here, một số mẹo hay here và docs của Apple.

Hướng dẫn cho người mới bắt đầu tốt nhất mà tôi tìm thấy cho Sencha Touch là các ví dụ của họ đi kèm với mã nguồn. Họ có một ví dụ về mọi điều khiển giao diện người dùng mà họ gửi và nhiều ứng dụng sẽ giới thiệu bạn một cách nhẹ nhàng với khung công tác. Các tài nguyên khác bao gồm Vimeo Channel, forum và tài liệu của chúng.

Ngoài ra, bạn có thể kéo lên trang web dành cho thiết bị di động và xem cách họ triển khai mã của họ bằng thanh công cụ dành cho nhà phát triển Chrome/Safari. Bạn có thể phải mô phỏng chuỗi tác nhân người dùng của trình duyệt trên thiết bị di động.

Answer 2

Trong khi không có hướng dẫn, tôi sẽ khuyên bạn nên xem xét một trong các khung di động HTML5 Sencha Touch hoặc JQuery Mobile HTML5. Họ, kết hợp với HTML5 Boilerplate, sẽ làm nhiều hơn để khởi động dự án của bạn sau đó chỉ cần HTML5 Boilerplate một mình.

Answer 3

Chúng tôi đã phát hành Mobile Boilerplate và các tài liệu trong associated wiki chắc chắn là điều bạn nên xem xét để biết thông tin về điều này.