HTML5培訓(xùn)(天貓伊語衣顏,雙十一).ppt

2019/7/3,HTML5入門,作者：陳偉明 郵件： 英文名：clear,2019/7/3,目錄,什么是HTML5？我跳過 介紹上一次中博培訓(xùn)內(nèi)容 介紹HTML5的大致內(nèi)容 實(shí)際應(yīng)用案例 js框架介紹 我個(gè)人在研究過程中的失敗的感受,2019/7/3,什么是HTML5，跳過吧,自己修煉，自己動(dòng)手豐衣足食,2019/7/3,介紹上一次中博培訓(xùn)內(nèi)容,規(guī)范 案例: 表單 圖表 HTML5時(shí)鐘實(shí)例 多媒體視頻和音頻 sencha animator,2019/7/3,介紹HTML5的大致內(nèi)容,表單新特性 canvas 多媒體播放 離線應(yīng)用 本地存儲(chǔ) web workers 地理位置信息接口 CSS3 websocket media query,2019/7/3,表單新特性,表單校驗(yàn) 新表單元素 演示,2019/7/3,canvas,涂鴉板 restore()和save() context.save(); context.translate(selectedLayer.offsetX+selectedLayer.width/2),(selectedLayer.offsetY+selectedLayer.height/2); context.rotate(angle); context.translate(0-(selectedLayer.offsetX+selectedLayer.width/2),0-(selectedLayer.offsetY+selectedLayer.height/2); context.restore();,2019/7/3,多媒體播放,羞澀的寶寶,2019/7/3,離線應(yīng)用,需要服務(wù)器端支持 CACHE MANIFEST manifest text/cache-manifest ,2019/7/3,本地存儲(chǔ),DOM Storage web sql Database FileSystem 目錄結(jié)構(gòu),2019/7/3,web workers,js中的多線程 解決大量計(jì)算導(dǎo)致用戶界面卡主問題,2019/7/3,獲取地理位置信息,getCurrentPosition 用來獲取用戶當(dāng)前的位置信息，該方法帶有三個(gè)參數(shù)： successCallback：成功獲取用戶位置信息后的回調(diào)函數(shù) errorCallback：獲取用戶位置信息失敗時(shí)的回調(diào)函數(shù) positionOptions：可選。獲取用戶位置信息的配置參數(shù),2019/7/3,獲取地理位置信息,watchPosition watchPosition 的三個(gè)參數(shù)和 getCurrentPosition 完全一樣，,2019/7/3,CSS3,這是一大的點(diǎn) 過渡(Transition) 動(dòng)畫(animator) 變形(Transform) 樣式(style),2019/7/3,實(shí)際應(yīng)用案例,淘寶手機(jī)客戶端 去哪兒網(wǎng)手機(jī)客戶端 clear SoundCloud是世界領(lǐng)先的基于聲音分享的社交平臺(tái)，每個(gè)人可以錄制并上傳自己的聲音，同時(shí)分享給社區(qū)的好友 豆瓣 淘寶優(yōu)酷,2019/7/3,js框架介紹,jquery 與 zepto sencha touch 與 jquery mobile phoneGap backbone.js是一個(gè)基于jquery和underscore.js庫的一個(gè)web端的MVC框架 commjs標(biāo)準(zhǔn),2019/7/3,jquery 與 zepto,jquery適合于PC web 技術(shù) zepto 適合于移動(dòng)設(shè)備技術(shù),2019/7/3,commjs標(biāo)準(zhǔn),一個(gè)標(biāo)準(zhǔn)，一個(gè)規(guī)范，用于規(guī)范化代碼，譬如模塊，包機(jī)制等,2019/7/3,我個(gè)人在研究過程中的失敗的感受,dpi ontouchmove ontouchend ontouchup 強(qiáng)制硬件加速 translate3d(x, y, z) 或者任何只適用于3D的屬性，比如 -webkit-perspective -webkit-backface-visibility,2019/7/3,HTML5 MultiTouch API,事件對(duì)象 $(document.body).on(“touchstart, function (e) console.log(e.touches0.pageX); ); e.touches = 一個(gè)包含touc