整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
幾年來，HTML5移動開發(fā)技術(shù)如此火爆，學(xué)習(xí)HTML5開發(fā)技術(shù)的人員也是越來越多。那么我們在培訓(xùn)學(xué)習(xí)HTML5技術(shù)時，應(yīng)該了解哪些呢?今天華清遠(yuǎn)見HTML5培訓(xùn)專家就來為大家指點迷津。
首先，明確HTML5是什么?
HTML5是HTML經(jīng)過第五次重大修改，用于取代1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)的HTML標(biāo)準(zhǔn)版本。HTML5的具體定義為：“萬維網(wǎng)的核心語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言的第五次重大修改。”
其次，明確HTML5技術(shù)特點
NO1.語義特性
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)，更加豐富的標(biāo)簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。
NO2.本地存儲特性
基于HTML5開發(fā)的網(wǎng)頁app擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 app Cache，以及本地存儲功能。
NO3.設(shè)備兼容特性
從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。
NO4.連接特性
更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-SentEvent和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
NO5.網(wǎng)頁多媒體特性
支持網(wǎng)頁端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
NO6.三維、圖形及特效特性
基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。
NO7.性能與集成特性
沒有用戶會永遠(yuǎn)等待你的Loading——HTML5會通過XMLHttpRequest2等技術(shù)，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
NO8.CSS3特性
在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性。
HTML5技術(shù)毋庸置疑未來將成為web前端的主流開發(fā)技術(shù)，所以我們一定要抓住時代發(fā)展的機(jī)遇，如果對這方面感興趣趕緊學(xué)起來!!!
如果大家想要更加詳細(xì)的了解HTML5可以看下華清遠(yuǎn)見的官網(wǎng) http://html5.3g-edu.org/?ahbtt
. 什么是webSocket
webSocket實現(xiàn)實現(xiàn)推送消息
WebSocket是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
以前的推送技術(shù)使用 Ajax 輪詢，瀏覽器需要不斷地向服務(wù)器發(fā)送http請求來獲取最新的數(shù)據(jù)，浪費很多的帶寬等資源。
使用webSocket通訊，客戶端和服務(wù)端只需要一次握手建立連接，就可以互相發(fā)送消息，進(jìn)行數(shù)據(jù)傳輸，更實時地進(jìn)行通訊。相比http，減少了請求次數(shù)，不需要客戶端多次請求，服務(wù)器處理業(yè)務(wù)完畢后主動向客戶端推送消息。
2. webSocket心跳及重連機(jī)制
理解WebSocket心跳及重連機(jī)制
在使用 webSocket 的過程中，有時候會遇到網(wǎng)絡(luò)斷開的情況，但是在網(wǎng)絡(luò)斷開的時候，服務(wù)器端并沒有觸發(fā) onclose 事件。這樣會有：服務(wù)器會繼續(xù)向客戶端發(fā)送多余的連接，并且這些數(shù)據(jù)還會丟失。所以就需要一種機(jī)制來檢測客戶端和服務(wù)端是否處于正常的連接狀態(tài)。因此就有了websocket的心跳了。還有心跳，說明還活著，沒有心跳說明已經(jīng)掛掉了。
1. 為什么叫心跳包呢？
它就像心跳一樣每隔固定的時間發(fā)一次，來告訴服務(wù)器，我還活著。
2. 心跳機(jī)制是？
心跳機(jī)制是每隔一段時間會向服務(wù)器發(fā)送一個數(shù)據(jù)包，告訴服務(wù)器自己還活著，同時客戶端會確認(rèn)服務(wù)器端是否還活著，如果還活著的話，就會回傳一個數(shù)據(jù)包給客戶端來確定服務(wù)器端也還活著，否則的話，有可能是網(wǎng)絡(luò)斷開連接了。需要重連~
3.實現(xiàn)心跳檢測的思路：
每隔一段固定的時間，向服務(wù)器端發(fā)送一個ping數(shù)據(jù)，如果在正常的情況下，服務(wù)器會返回一個pong給客戶端，如果客戶端通過 onmessage 事件能監(jiān)聽到的話，說明請求正常，這里我們使用了一個定時器，每隔3秒的情況下，如果是網(wǎng)絡(luò)斷開的情況下，在指定的時間內(nèi)服務(wù)器端并沒有返回心跳響應(yīng)消息，因此服務(wù)器端斷開了，這個時候我們使用ws.close關(guān)閉連接，在一段時間后(在不同的瀏覽器下，時間是不一樣的，firefox響應(yīng)更快)，可以通過 onclose事件監(jiān)聽到。因此在onclose事件內(nèi)，我們可以調(diào)用 reconnect事件進(jìn)行重連操作。
3.webSocket的實現(xiàn)代碼
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<input id="url" type="text" size="30" value="ws://172.xx.x.xxx:8080/websocket/11"/>
<button onclick="openWebSocket()">打開WebSocket連接</button>
<br/><br/>
<textarea id="text" type="text"></textarea>
<button onclick="send()">發(fā)送消息</button>
<hr/>
<button onclick="closeWebSocket()">關(guān)閉WebSocket連接</button>
<hr/>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
function openWebSocket() {
var url = document.getElementById('url').value.trim();
//判斷當(dāng)前瀏覽器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket(url);
} else {
alert('當(dāng)前瀏覽器 Not support websocket')
}
//連接發(fā)生錯誤的回調(diào)方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket連接發(fā)生錯誤");
};
//連接成功建立的回調(diào)方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket連接成功");
};
//接收到消息的回調(diào)方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
};
//連接關(guān)閉的回調(diào)方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket連接關(guān)閉");
}
}
//監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
window.onbeforeunload = function () {
closeWebSocket();
};
//將消息顯示在網(wǎng)頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//關(guān)閉WebSocket連接
function closeWebSocket() {
websocket.close();
}
//發(fā)送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>
在vue中使用：
前，谷歌的Android操作系統(tǒng)（OS）占據(jù)了智能手機(jī)操作系統(tǒng)51.5%的市場份額，蘋果的iOS系統(tǒng)位列第二，占據(jù)了42.4%的市場份額。學(xué)習(xí)和開發(fā)這兩個平臺的應(yīng)用程序已經(jīng)成為了一種主流的趨勢，越來越多公司開始開發(fā)與Android和iPhone相關(guān)的應(yīng)用程序。那么，有哪些比較好用的工具能用來開發(fā)基于Android和iPhone的應(yīng)用程序呢？在這里小編就為大家簡單的介紹五款優(yōu)秀的開發(fā)工具。
除了程序員，相信很少有人自己寫代碼來開發(fā)軟件，這么專業(yè)的活普通人哪干得了？但假如有一款在線軟件可以讓你連一行代碼都不用寫，只需鼠標(biāo)揮舞幾下就能生成一個手機(jī)軟件，你信不信？AppMakr就是這樣好用的一款工具。
AppMakr是一家位于舊金山的高科技企業(yè)，它提供一個軟件開發(fā)平臺，讓很多不會編程的用戶也可以通過一個功能齊全的DIY工具包來開發(fā)手機(jī)應(yīng)用程序，用于蘋果公司的iOS、谷歌的Android或基于微軟Windows 7操作系統(tǒng)的手機(jī)。使用AppMakr開發(fā)一套功能齊全的應(yīng)用程序只需幾小時，并且該服務(wù)是完全免費的。同時AppMaker還有一些可供選擇的功能，包括將網(wǎng)站連接到你的應(yīng)用程序、HTML5功能、推送通知和廣告支持等。通過AppMaker賬戶，你可以創(chuàng)建無數(shù)的應(yīng)用程序。
ShoutEm公司是一個支持移動平臺設(shè)計、發(fā)布和管理本地iPhone、iPad和Android應(yīng)用中小型企業(yè)，這是一個歷史非常悠久的企業(yè)，長期以來提供世界一流的產(chǎn)品。
ShoutEm整個應(yīng)用程序的構(gòu)建過程是無縫的，你可以用它來構(gòu)建智能手機(jī)的應(yīng)用程序，也可以構(gòu)建一個平板電腦的單獨接口。如何專門為移動應(yīng)用構(gòu)建一個定制的內(nèi)容管理系統(tǒng)？不要擔(dān)心，你可以很容易的將ShoutEm構(gòu)建的應(yīng)用程序與時下流行的CMS等集成在一起。
Infinite Monkeys是世界上最大的DIY移動應(yīng)用程序發(fā)布平臺，在100多個國家擁有超過百萬的應(yīng)用程序開發(fā)商。在它的自助服務(wù)平臺，每一個普通人都能夠打造自己專屬的移動應(yīng)用程序，因為Infinite Monkeys是無需編碼并免費的。
MobBase是一款非常有趣的工具，它能幫助那些熱愛音樂的人構(gòu)建屬于自己的應(yīng)用程序。MobBase可以幫助樂隊創(chuàng)建個性化iPhone軟件，其中包括圖片、音樂文件、youtube視頻、演唱會信息、歌詞、新聞、Twitter以及RSS feed等內(nèi)容。
MobiCart采用的是將移動電子商務(wù)個性化到新的水平，他允許任何人都能夠在iOS和Android設(shè)備上快速部署本地化商店的應(yīng)用程序以及HTML。MobiCart結(jié)合了一個定制應(yīng)用程序開發(fā)平臺和在線系統(tǒng)共享擴(kuò)展。
FastReport VCL 5新版發(fā)布會，2014-11-25 15:00網(wǎng)絡(luò)直播，免費看 立即報名
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
