課程簡(jiǎn)介
本課程為期兩天，從HTML5 的基礎(chǔ)出發(fā)，結(jié)合實(shí)戰(zhàn)中的各種精彩實(shí)例，將學(xué)員帶入HTML5 的世界。通過(guò)對(duì)各個(gè)實(shí)例細(xì)節(jié)的分析，詳細(xì)講解HTML5 技術(shù)的各個(gè)部分，深入到HTML5 的核心，讓學(xué)員充分學(xué)習(xí)并體驗(yàn)HTML5。
課程中結(jié)合動(dòng)手、互動(dòng)，讓學(xué)員真正掌握HTML5 架構(gòu)的技術(shù)細(xì)節(jié)，從CSS3 布局以及javascript特效等基礎(chǔ)開(kāi)始，學(xué)習(xí)跨瀏覽器、跨平臺(tái)搭建優(yōu)質(zhì)HTML5 網(wǎng)站、HTML5 web APP 的方法。
目標(biāo)收益
培訓(xùn)對(duì)象
1. 有一定web 基礎(chǔ)的技術(shù)人員，深入學(xué)習(xí)新技術(shù)?
2. 產(chǎn)品、設(shè)計(jì)人員，對(duì)前端周邊技術(shù)能得到很好的了解和提高?
3. 項(xiàng)目管理人員，對(duì)大方向的技術(shù)發(fā)展有深入的了解?
課程內(nèi)容
本課程為期兩天，從HTML5 的基礎(chǔ)出發(fā)，結(jié)合實(shí)戰(zhàn)中的各種精彩實(shí)例，將學(xué)員帶入HTML5 的世界。通過(guò)對(duì)各個(gè)實(shí)例細(xì)節(jié)的分析，詳細(xì)講解HTML5 技術(shù)的各個(gè)部分，深入到HTML5 的核心，讓學(xué)員充分學(xué)習(xí)并體驗(yàn)HTML5。
課程中結(jié)合動(dòng)手、互動(dòng)，讓學(xué)員真正掌握HTML5 架構(gòu)的技術(shù)細(xì)節(jié)，從CSS3 布局以及javascript特效等基礎(chǔ)開(kāi)始，學(xué)習(xí)跨瀏覽器、跨平臺(tái)搭建優(yōu)質(zhì)HTML5 網(wǎng)站、HTML5 web APP 的方法。
課程大綱
| HTML5 到底給網(wǎng)站架構(gòu)帶來(lái)了什么改變? | HTML5 到底給網(wǎng)站架構(gòu)帶來(lái)了什么改變? |
| 四大門戶網(wǎng)站HTML5 架構(gòu)總分析 |
a) 門戶HTML5網(wǎng)站架構(gòu)全解析 b) 重要性能指標(biāo)分析詳解 c) 不可阻擋的移動(dòng)時(shí)代H5架構(gòu) |
| . 繪圖頁(yè)面的H5 設(shè)計(jì)——移動(dòng)端QQ 財(cái)經(jīng)股票行情圖 |
a) canvas 繪制股票行情圖細(xì)節(jié)分析 b) 提高繪圖性能的幾個(gè)秘籍 |
| 優(yōu)酷網(wǎng)站的架構(gòu)分析——H5 多媒體兼容解決方案 |
a) 跨平臺(tái)的音頻、視頻架構(gòu)設(shè)計(jì) b) 媒體播放器與繪圖結(jié)合的妙用 |
| 新浪網(wǎng)本地存儲(chǔ)Local storage 深入探討 |
a) 傳統(tǒng)cookie與H5本地存儲(chǔ)之取舍 b) 新浪網(wǎng)如何利用localstorage減少網(wǎng)站并發(fā)請(qǐng)求 c) web QQ 是如何利用localstorage實(shí)現(xiàn)頁(yè)面間通訊的 |
| 移動(dòng)端百度首頁(yè)詳解——如何巧妙使用H5 提升網(wǎng)站性能，節(jié)省公司流量 |
a) 從百度首頁(yè)幾次改版中得到的架構(gòu)啟發(fā) b) 一次由4k到3k的精彩升級(jí) |
| 實(shí)例分析——HTML5 搭建新聞客戶端APP |
?a) 跨平臺(tái)的H5本地應(yīng)用的快速制作 b) HTML5 web APP 與本地native APP 之間的博弈 c) HTML5 與本地APP 究竟該如何選擇? |
| 移動(dòng)端的地理定位，如何定H5 規(guī)范? |
a) 利用手機(jī)快速測(cè)量辦公室大小 b) 頭頂?shù)腉PS衛(wèi)星，到底能給我們什么 |
| 熱點(diǎn)新聞先知道——多并發(fā)的H5 消息推送詳解 |
a) H5 本地存儲(chǔ)、跨域post、socket 三箭齊發(fā)的系統(tǒng)架構(gòu) b) 在開(kāi)發(fā)socket真實(shí)場(chǎng)景時(shí)，需要注意什么 |
| 回歸H5 基礎(chǔ)——開(kāi)發(fā)需要的高級(jí)javascript簡(jiǎn)述 |
a) js引用類型里面的注意事項(xiàng) b) apply 和call 到底都有哪些巧妙用法? c) 回歸原點(diǎn)，為何DOM結(jié)構(gòu)如此的重要 d) Ajax 到底瞞著我們做了些什么——架構(gòu)設(shè)計(jì)中的異步請(qǐng)求 e) 如何充分利用chrome調(diào)試工具幫助我們 |
| . HTML5頁(yè)面如何自適應(yīng)移動(dòng)端繁多的尺寸——移動(dòng)頁(yè)面架構(gòu)詳談 |
a) 快速制作自己的微信分享HTML5專題 b) 由HTML5小游戲APP引申出來(lái)的思考 |
| HTML5移動(dòng)小游戲案例剖析——1010! |
a) 跟本地1010一樣的webAPP?b) 如何快速搭建HTML5架構(gòu)c) Android 開(kāi)發(fā)的性能瓶頸 d) 如何做到橫屏、豎屏同時(shí)支持 |
| CSS3排版布局深入淺出 |
a) CSS3 在HTML5 頁(yè)面中扮演的角色 b) 解決跨平臺(tái)布局的CSS3關(guān)鍵點(diǎn) c) CSS 關(guān)鍵技術(shù)點(diǎn)一覽 d) H5 頁(yè)面布局基礎(chǔ)練習(xí)——用多種方法實(shí)現(xiàn)固定寬度且居中的排版 |
|
CSS3在CSS2之上的擴(kuò)展 |
a) CSS3 的媒體支持 b) 盒子模型在CSS3布局中的應(yīng)用 c) 外引字體的巧妙應(yīng)用 d) 適應(yīng)用戶閱讀習(xí)慣的CSS3分欄 e) CSS3 的變幻與動(dòng)畫 f) CSS3 與javascript的互動(dòng) |
| 利用CSS3 快速搭建一鍵換膚的H5 頁(yè)面a) 如何處理不同屏幕的排版b) 應(yīng)對(duì)高清retina屏實(shí)例分析 |
a) float 排版你所不知道的妙用 b) position 定位的性能到底怎么樣? c) H5+CSS3 終極架構(gòu)實(shí)例——禪意花園 |
| ipad中的CSS3與HTML5頁(yè)面架構(gòu) |
a) 如何處理不同屏幕的排版 b) 應(yīng)對(duì)高清retina屏實(shí)例分析 |
| 微信HTML5 應(yīng)用和實(shí)踐 |
a) 進(jìn)入大眾視野的微信公眾平臺(tái) b) 開(kāi)發(fā)模式基本功能簡(jiǎn)述 c) 微信開(kāi)發(fā)平臺(tái)的使用 d) 開(kāi)發(fā)者模式一探究竟 |
| HTML5與CSS3性能優(yōu)化 |
a) 為什么頁(yè)面性能如此的重要 b) 網(wǎng)頁(yè)性能都有哪些指標(biāo) c) HTML5 頁(yè)面在性能優(yōu)化上面的那些心得 d) 站在架構(gòu)的高度，提升用戶體驗(yàn) |
|
H5與CSS3布局的衍生——響應(yīng)式web設(shè)計(jì) |
a) 什么是響應(yīng)式web設(shè)計(jì) b) 如何做一個(gè)響應(yīng)式設(shè)計(jì)c) 合理使用HTML5和CSS3 d) 漸進(jìn)增強(qiáng)e) CSS4 橫空出世 |
|
HTML5 到底給網(wǎng)站架構(gòu)帶來(lái)了什么改變? HTML5 到底給網(wǎng)站架構(gòu)帶來(lái)了什么改變? |
|
四大門戶網(wǎng)站HTML5 架構(gòu)總分析 a) 門戶HTML5網(wǎng)站架構(gòu)全解析 b) 重要性能指標(biāo)分析詳解 c) 不可阻擋的移動(dòng)時(shí)代H5架構(gòu) |
|
. 繪圖頁(yè)面的H5 設(shè)計(jì)——移動(dòng)端QQ 財(cái)經(jīng)股票行情圖 a) canvas 繪制股票行情圖細(xì)節(jié)分析 b) 提高繪圖性能的幾個(gè)秘籍 |
|
優(yōu)酷網(wǎng)站的架構(gòu)分析——H5 多媒體兼容解決方案 a) 跨平臺(tái)的音頻、視頻架構(gòu)設(shè)計(jì) b) 媒體播放器與繪圖結(jié)合的妙用 |
|
新浪網(wǎng)本地存儲(chǔ)Local storage 深入探討 a) 傳統(tǒng)cookie與H5本地存儲(chǔ)之取舍 b) 新浪網(wǎng)如何利用localstorage減少網(wǎng)站并發(fā)請(qǐng)求 c) web QQ 是如何利用localstorage實(shí)現(xiàn)頁(yè)面間通訊的 |
|
移動(dòng)端百度首頁(yè)詳解——如何巧妙使用H5 提升網(wǎng)站性能，節(jié)省公司流量 a) 從百度首頁(yè)幾次改版中得到的架構(gòu)啟發(fā) b) 一次由4k到3k的精彩升級(jí) |
|
實(shí)例分析——HTML5 搭建新聞客戶端APP ?a) 跨平臺(tái)的H5本地應(yīng)用的快速制作 b) HTML5 web APP 與本地native APP 之間的博弈 c) HTML5 與本地APP 究竟該如何選擇? |
|
移動(dòng)端的地理定位，如何定H5 規(guī)范? a) 利用手機(jī)快速測(cè)量辦公室大小 b) 頭頂?shù)腉PS衛(wèi)星，到底能給我們什么 |
|
熱點(diǎn)新聞先知道——多并發(fā)的H5 消息推送詳解 a) H5 本地存儲(chǔ)、跨域post、socket 三箭齊發(fā)的系統(tǒng)架構(gòu) b) 在開(kāi)發(fā)socket真實(shí)場(chǎng)景時(shí)，需要注意什么 |
|
回歸H5 基礎(chǔ)——開(kāi)發(fā)需要的高級(jí)javascript簡(jiǎn)述 a) js引用類型里面的注意事項(xiàng) b) apply 和call 到底都有哪些巧妙用法? c) 回歸原點(diǎn)，為何DOM結(jié)構(gòu)如此的重要 d) Ajax 到底瞞著我們做了些什么——架構(gòu)設(shè)計(jì)中的異步請(qǐng)求 e) 如何充分利用chrome調(diào)試工具幫助我們 |
|
. HTML5頁(yè)面如何自適應(yīng)移動(dòng)端繁多的尺寸——移動(dòng)頁(yè)面架構(gòu)詳談 a) 快速制作自己的微信分享HTML5專題 b) 由HTML5小游戲APP引申出來(lái)的思考 |
|
HTML5移動(dòng)小游戲案例剖析——1010! a) 跟本地1010一樣的webAPP?b) 如何快速搭建HTML5架構(gòu)c) Android 開(kāi)發(fā)的性能瓶頸 d) 如何做到橫屏、豎屏同時(shí)支持 |
|
CSS3排版布局深入淺出 a) CSS3 在HTML5 頁(yè)面中扮演的角色 b) 解決跨平臺(tái)布局的CSS3關(guān)鍵點(diǎn) c) CSS 關(guān)鍵技術(shù)點(diǎn)一覽 d) H5 頁(yè)面布局基礎(chǔ)練習(xí)——用多種方法實(shí)現(xiàn)固定寬度且居中的排版 |
|
CSS3在CSS2之上的擴(kuò)展 a) CSS3 的媒體支持 b) 盒子模型在CSS3布局中的應(yīng)用 c) 外引字體的巧妙應(yīng)用 d) 適應(yīng)用戶閱讀習(xí)慣的CSS3分欄 e) CSS3 的變幻與動(dòng)畫 f) CSS3 與javascript的互動(dòng) |
|
利用CSS3 快速搭建一鍵換膚的H5 頁(yè)面a) 如何處理不同屏幕的排版b) 應(yīng)對(duì)高清retina屏實(shí)例分析 a) float 排版你所不知道的妙用 b) position 定位的性能到底怎么樣? c) H5+CSS3 終極架構(gòu)實(shí)例——禪意花園 |
|
ipad中的CSS3與HTML5頁(yè)面架構(gòu) a) 如何處理不同屏幕的排版 b) 應(yīng)對(duì)高清retina屏實(shí)例分析 |
|
微信HTML5 應(yīng)用和實(shí)踐 a) 進(jìn)入大眾視野的微信公眾平臺(tái) b) 開(kāi)發(fā)模式基本功能簡(jiǎn)述 c) 微信開(kāi)發(fā)平臺(tái)的使用 d) 開(kāi)發(fā)者模式一探究竟 |
|
HTML5與CSS3性能優(yōu)化 a) 為什么頁(yè)面性能如此的重要 b) 網(wǎng)頁(yè)性能都有哪些指標(biāo) c) HTML5 頁(yè)面在性能優(yōu)化上面的那些心得 d) 站在架構(gòu)的高度，提升用戶體驗(yàn) |
|
H5與CSS3布局的衍生——響應(yīng)式web設(shè)計(jì) a) 什么是響應(yīng)式web設(shè)計(jì) b) 如何做一個(gè)響應(yīng)式設(shè)計(jì)c) 合理使用HTML5和CSS3 d) 漸進(jìn)增強(qiáng)e) CSS4 橫空出世 |
近期公開(kāi)課推薦
