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