phát triển ứng dụng web chạy cả trên mobile và trên desktop ?

[chieftain2t]

- Em đang chuẩn bị code 1 website chạy cả trên mobile và trên desktop. Em sử dụng codeigniter framework để phát triển site này. Vấn đề hiện tại là chưa hề có 1 chút kinh nghiệm nào về web trên mobile đồng thời phát triển web mobile trên CI.

- ý tưởng của em thế này, em trình bày sơ qua để các bác có thể hiểu được.

+) Về phần giao diện. Em đã tham khảo trang vnexpress trên desktop và trên mobile. Cho nên em cũng tạo 2 giao diện tương ứng cho project của em chạy trên mobile và trên desktop.

+) Về source để phát triển, em sử dụng framework codeigniter.

- Còn đây là phần ý tưởng phát triển của em. Em trình bày sơ qua như sau để các bác hiểu:

+)trong thư mục application em tạo 2 app. 1 app cho mobile 1 app cho desktop. Mỗi controller trong app này đều kế thừa từ 1 controller Base, base này sẽ load thư viện user_agent dùng để detect ra device. Nếu device là desktop thì nó sẽ redirect sang app desktop, tương ứng như vậy dành cho mobile, và từ các app tương ứng được gọi nó sẽ gọi các model và view tương ứng. phần backend( quản trị ) em để dùng chung.


- Nhưng có mấy vấn đề mà em chưa hiểu, đó là :
+) giao diện, hình ảnh chạy trên mobile nó có vỡ ra ko ? (vì mình dùng chung phần backend mà)
+) Mỗi website vừa chạy trên mobile họ đều có subdomain kiểu như : m.vnexpress.net, m.dantri.com.vn, m.cnn.com. Vậy làm thế nào để nó tự động redirect sang tên miền m.vidu.com khi mà người dùng đang chạy trên mobile.
+)Giao diện web có tương thích với từng hệ điều hành mobile như : android,iphone OS... hay ko ?


- Nhờ các bác đi trước đã có kinh nghiệm tư vấn, hướng dẫn em .
-Cám ơn các bác đã đọc bài của em.

[mucor]

Mỗi website vừa chạy trên mobile họ đều có subdomain kiểu như : m.vnexpress.net, m.dantri.com.vn, m.cnn.com. Vậy làm thế nào để nó tự động redirect sang tên miền m.vidu.com khi mà người dùng đang chạy trên mobile.

Tôi thường dùng như sau:
+ Với mỗi trang, sinh url tương ứng cho mobile
+ Chèn đoạn javascript sau vào đầu mỗi trang:

<script>
var MOBILE = '<url for mobile>';
(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera, MOBILE);
</script>

[nhoemzx]

Bạn chỉ cần views tương ứng cho từng app (desktop và mobile) vì Model-Controller không thực sự liên quan đến giao diện người dùng. Bạn cũng có thể tham khảo "twitter chấm github chấm com/bootstrap/" và giao diện người dùng. Cái này bạn chỉ cần làm 1 app nhưng tùy thộc vào độ phân giải thì nó sẽ tự điều chỉnh application của mình. (1 Số smartphone, vào desktop page còn dễ hơn và tiện hơn là vào mobile site). Ở trong code igniter, ở trong constructor, cậu cho code kiểm tra thiết và redirect đến trang tương ứng.

[nhoemzx]

Mình cũng đang làm 1 vài projects với code igniter, nếu có hứng thú thì cho yahoo, khi nào rảnh hay có vấn đề gì thì trao đổi.

[zmt264]

Vấn đề này có 1 cách giải quyết khác, hiện đại, khác truyền thống xưa nay là dùng Responsive Web Design, để minh họa bạn có thể vào http://smashingmagazine.com bằng cả máy tính và mobile rồi xem sự thay đổi về giao diện (trong khi URL và thậm chí có thể cả response là giống nhau).

[nholoiemnoi]

cái này cũng không khó lắm. có thể sử dụng link hoạt css, hoặc một vài thủ thuật khác, bạn search là ra nhiều tài liệu cho bạn lắm

[nhoemzx]

Vấn đề này có 1 cách giải quyết khác, hiện đại, khác truyền thống xưa nay là dùng Responsive Web Design, để minh họa bạn có thể vào http://smashingmagazine.com bằng cả máy tính và mobile rồi xem sự thay đổi về giao diện (trong khi URL và thậm chí có thể cả response là giống nhau).

Thì Bootstrap có responsive design nữa mà, các bạn có thể rezie (thu hẹp chiều rộng) thì sẽ thấy nó tự điều chỉnh.

[zmt264]

Bạn chỉ cần views tương ứng cho từng app (desktop và mobile) vì Model-Controller không thực sự liên quan đến giao diện người dùng. Bạn cũng có thể tham khảo "twitter chấm github chấm com/bootstrap/" và giao diện người dùng. Cái này bạn chỉ cần làm 1 app nhưng tùy thộc vào độ phân giải thì nó sẽ tự điều chỉnh application của mình. (1 Số smartphone, vào desktop page còn dễ hơn và tiện hơn là vào mobile site). Ở trong code igniter, ở trong constructor, cậu cho code kiểm tra thiết và redirect đến trang tương ứng.

ok, http://twitter.github.com/bootstrap/ là một trong các CSS Framework hỗ trợ Responsive Web Design.

[dammio]

Bây h thì dùng Bootstrap khỏe rồi, http://www.dammio.com/bootstrap-co-ban/