最近在一直在搞M站,也就是移動web站點。由于是第一次,也遇到了很多問題,所以把最近了解到的東西總結總結。聊一聊什么是移動M站,它有啥作用和優勢。
也有人會問,M站和APP有什么不同?
1. APP 直接在用戶的移動設備上,曝光率相對較高。 而M站需打開瀏覽器,輸入地址才能訪問,所以曝光率相對較低。
2. M站的推廣的渠道相比移動APP,渠道較多,方便追蹤用戶來源,流量入口等,方便以后的活動推廣和數據分析。
3. M站用戶無需安裝,輸入URL即可訪問,而APP需要下載安裝。
4. M站能夠快速的通過數據分析,能快速得到用戶的反饋,從而更容易根據統計數據分析和用戶的需求來調整產品。
5. APP對用戶更具粘性,用戶體驗也更好。
6. M站對于營銷推廣活動非常方便,轉發分享方便快捷。
7. M站更新迭代產品速度,響應產品調整非常快,隨時發布,而App需要審核時間。
8. M站跨平臺,無需開發安卓和iOS版,只需有瀏覽器即可。
所以, 我覺得,M站和客戶端的是相輔相成的,M站的及時性和快捷性,是app無法比擬的。而app 的用戶體驗,則是M站無法做到的。目前來說兩者是不可能被對方完全替代的,在互聯網營銷大行其道的今天,M站也越來越重要。營銷活動大多以H5頁面的形式展示和傳播的。通過M站的營銷和推廣,從而又促進APP的使用和推廣。
目前,移動M站有輕APP 化的是趨勢。M站會越來越像個APP,使得M站也越來越重要。而且,很多APP的展示效果。原生代碼無法實現的時候,嵌套移動H5頁面也是一個很好的選擇。
下面介紹幾個移動M站建設的幾個點:
1. 51Degree
51degrees 號稱是目前最快、最準確的設備檢測的解決方案。它是一個免費開源的.NET移動應用開發組件,可以用來檢測移動設備和瀏覽器,甚至可以獲取屏幕尺寸,輸入法,加上制造商和型號信息等。從而可以選擇性地被重定向到為移動設備而設計的內容。由于擁有精確的移動設備的數據,所以幾乎支持所有的智能手機,平板電腦等移動設備。
其實說白了,51Degree的作用,就是識別客戶端的設備。PC瀏覽器訪問,就跳轉到PC站,手機瀏覽器訪問就跳轉到M站。從而達到更好的用戶體驗。
如何將51Degree加入到現有網站?
http://51degrees.codeplex.com/wikipage?title=Enhance%20existing%20web%20site
2. 架構
其實移動web和傳統的web并沒有本質的區別。說白了還是一個web 站點,使用的技術都是html+css+js。不同的是,只不過目前在 Html5的大趨勢下,將Html5加入到了移動M站,使得M站更像個輕APP。
3. Bootstrap
Bootstrap。就不多說了,網上很多Bootstrap的資料。它最大的優勢應該就是非常流行,非常容易上手,如果缺少專業的設計或美工,那么Bootstrap 是一個比較好的選擇。它的用法及其簡單,幾乎沒什么學習成本,絕對是快速開發的利器。
官網:http://getbootstrap.com/ Github:https://github.com/twbs/bootstrap/
4. 幾點建議:
1.移動m站的URL盡量和pc相同,這是為了避免同一URL在pc站可以顯示,但是在手機上打開卻是404;
2. M站寫單獨的TDK。
電商系列(四)基于共享存儲的圖片服務器架構!
電商系列(三)如何構建數據庫的主從架構!
電商系列(二)聊一聊服務器日志與監控系統的解決方案
電商系列(一)中小型電商系統的基礎架構!
SpringBoot入門系列(十一)實現統一異常處理,就這么簡單!
Spring Boot整合定時任務Task,一秒搞定定時任務
Spring Boot入門系列(十)如何使用攔截器,一學就會!
Spring Boot入門系列(六)Spring整合Mybatis詳解「附詳細步驟」
者:日照工校/徐鵬
手機瀏覽器能用來干什么?看資訊、看圖片、看小說、看視頻等等。作為上網必備工具,手機瀏覽器對于網絡體驗的影響不可忽視。隨著網絡的快速發展,大家對于瀏覽器的要求也越來越高,比如支持HTML5頁面版。由于手機瀏覽器的內核和性能存在差異,造成不同的HTML5頁面瀏覽有不同的體驗。
近日無意中看到一個款800手機瀏覽器,在體驗過程中,發現不論是在游戲體驗還是軟件特效上,都完全體現HTML5效果,為了讓大家有更直觀的感受,就先試用了一番。
小知識:
HTML5名詞解釋:原生支持多媒體功能,不再依賴瀏覽器插件(例如 Adobe Flash player, Windows Media Player),便可實現跨平臺在線影音播放。同時 HTML5 還可以讓網頁調用手機的應用數據從而實現很酷的功能。另外,HTML5 新增了離線存儲,一次聯網加載資源,長久離線訪問。廣義的 HTML5 技術還包括 CSS3,JavaScript 以及支持 SVG 等。
在試用過程中,首先引起筆者注意的,還是800手機瀏覽器的界面化,所謂細節決定產品的成敗,先來看看它的到底是什么樣子。
800手機瀏覽器啟動后,從整體上看到的,就是集成了常用的搜索引擎和常用網站,而且還可以添加新的常用頁面。
跑分測試
800手機瀏覽器主要是面向智能手機的安卓瀏覽器,全面支持 HTML5。但是如果要成為一款真正的支持HTML5的手機瀏覽器,僅有支持還是不夠的,更多的需要完全與HTML5的融合,還是先看看它的跑分結果吧:
注:測試網站Html5test.com,它是一個非常具有權威性的測試HTML5性能的網站,無論是PC端還是手機端的瀏覽器,都能夠快速檢測出當前瀏覽器對HTML5頁面各項元素對于HMTL5的支持情況。
在HTML5 測試中,800手機瀏覽器得分高達驚人466分,800手機瀏覽器的得分完全可以媲美PC端瀏覽器的表現,這也大大提升了它對HTML5特效效果以及游戲的支持。
跑分測試結果已經可以說明一個很重要的方面,當然除這些數據外,本身具有HTML5的特性也是非常重要的,800手機瀏覽器還給我們很多HTML5體驗,展現了一種對于HMTL5的一種融合以及更深的理解。
視頻播放
提起HTML5,很多人都會想到視頻播放。因為它完全不需要任何的插件支持,只要是瀏覽器支持即可,目前主流的視頻網站都早已經實現,他們完全支持HTML5的視頻直接播放。目前雖然還支持Flash插件,但是它會大大的增加電量消耗和性能的損耗,同時Adobe公司也宣布會停止Flash在手機端的更新。
現在,來看看800手機瀏覽器對于視頻的表現:
HTML5視頻體驗網站截圖
逼真的靈動效果,完全沒有卡頓的現象
800手機瀏覽器在播放過程中沒有出現視頻失真或者不流暢的情況。
CCS3特性
除此之外,800手機瀏覽器還展示了幾種HTML5獨有特性,比較代表性的有CSS特性等。
CCS3是CSS語言的新版,也是一個全新時代的技術,它可以給你的圖片添加圓角,可以讓你的圖片具有陰影特效,還可以打造一個矢量圖的效果。
游戲體驗
800手機瀏覽器不僅僅帶來了一些軟件上的體驗,還給我們的帶來了很多游戲上的體驗,來看看800手機瀏覽器的游戲效果如何吧。
這款游戲屬于一個網絡游戲,支持觸摸反饋,在試玩過程中,游戲的流暢度和直接下載游戲沒有太大的差別。
總結:
800手機瀏覽器在HMTL5上表現無懈可擊,給我留下很深刻的印象。它不僅僅表現在跑分測試數據上,更多的是表現在對于HTML5的融合上,是一款真正的HTML5瀏覽器。
前端開發這個行業發展飛速,特別是即將普遍的HTML5,本文將由廣州中星信息老師整理HTML5的基本使用。
1.small重新定義
不久前,我使用了<small>標簽來創建與logo相關的副標題。但是在HTML5中重新定義了<small>標簽,使之更能表現語義化,在<small>的字號都會變小,想想如果這個標簽用于網站的底部的版權信息還是個不錯的做法。
2. 去掉了javascript和CSS標簽的type屬性
在HTML5中,不再需要type屬性了,因為這顯得有點多余,去掉之后可以讓代碼更為簡潔。
<link href="path/to/stylesheet.css">
3.
5不支持<big>
<b>加粗
<em>加重
<i>斜體
<small>小號字
<strong>加重
<sub>上標
<sup>下標
<ins>插入
<des>刪除
第三課:
三種樣式表插入方法:
外部樣式表:<link rel="stylesheet" type="text/css" href="">
內部樣式表:<style type="text/css"> body{} </style>
內聯樣式表:<p style="color:green"></p>
第四課:HTML鏈接:
鏈接數據:
文本鏈接
圖片鏈接
屬性:
href屬性:指向另一個文檔的鏈接
name屬性 文檔內鏈接
img標簽屬性
alt屬性 圖片出現異常 替換文本屬性
width
height
4.
Html5 手機網站 input 設置為type=number 的問題
h5網頁input 的type設置為number一般會產生三個問題,一個問題是maxlength屬性不好用了。另外一個是form提交的時候,默認給取整了。三是部分安卓手機出現樣式問題。
問題一的解決辦法:
<input name="" type="number" oninput="checkTextLength(this,11)"/>
問題二,是因為form提交默認做了表單驗證,step默認是1,要設置step屬性,假如保留2位小數,寫法如下:
<input name="" type="number" step="0.01" min="1" />
*請認真填寫需求信息,我們會在24小時內與您取得聯系。