| |
HTML5高級開發(fā)與應(yīng)用實戰(zhàn)培訓(xùn)
|
| |
 班級規(guī)模及環(huán)境--熱線:4008699035 手機:15921673576( 微信同號) |
|
每期人數(shù)限3到5人。 |
| 上課時間和地點 |
上課地點：【上海】：同濟大學(xué)(滬西)/新城金郡商務(wù)樓(11號線白銀路站) 【深圳分部】：電影大廈(地鐵一號線大劇院站)/深圳大學(xué)成教院 【北京分部】：北京中山學(xué)院/福鑫大樓 【南京分部】：金港大廈(和燕路) 【武漢分部】：佳源大廈（高新二路） 【成都分部】：領(lǐng)館區(qū)1號（中和大道） 【沈陽分部】：沈陽理工大學(xué)/六宅臻品 【鄭州分部】：鄭州大學(xué)/錦華大廈 【石家莊分部】：河北科技大學(xué)/瑞景大廈 【廣州分部】：廣糧大廈 【西安分部】：協(xié)同大廈
最近開課時間(周末班/連續(xù)班/晚班）：2020年3月16日 |
| 實驗設(shè)備 |
☆資深工程師授課
☆注重質(zhì)量
☆邊講邊練
☆合格學(xué)員免費推薦工作
★實驗設(shè)備請點擊這兒查看★ |
| 質(zhì)量保障 |
1、培訓(xùn)過程中，如有部分內(nèi)容理解不透或消化不好，可免費在以后培訓(xùn)班中重聽；
2、培訓(xùn)結(jié)束后,授課老師留給學(xué)員聯(lián)系方式,保障培訓(xùn)效果,免費提供課后技術(shù)支持。
3、培訓(xùn)合格學(xué)員可享受免費推薦就業(yè)機會。 |
課程大綱 |
第一部分：課程介紹
HTML5高級開發(fā)與應(yīng)用實戰(zhàn)培訓(xùn)????
課程名稱 HTML5高級開發(fā)與應(yīng)用實戰(zhàn)培訓(xùn)
課程描述 本課程主要針對前端開發(fā)相關(guān)技術(shù)人員，深入講授當(dāng)前炙手可熱的HTML5新技術(shù)。課程的主要內(nèi)容有以下幾個部分：第一部分是講HTML5的歷史，開發(fā)框架以及開發(fā)工具等基礎(chǔ)知識；第二部分講的是javascript和jQuery的開發(fā)和使用以及CSS3的知識；第三部分是講HTML5語義化便簽體系；第四部分是講HTML5所有的新加功能以及標(biāo)簽等；第五部分講HTML5本地存儲技術(shù)和文件系統(tǒng)API；第六部分講HTML5多線程編程，服務(wù)器和客戶端數(shù)據(jù)交互等高級編程技術(shù)；第七部分講常用硬件訪問技術(shù)；第八部分講HTML5的3D繪圖技術(shù)webGL,第九部分講跨平臺的移動開發(fā)技術(shù).
本課程內(nèi)容豐富，涵蓋面廣，講解由淺入深，并始終以案例講解和一線開發(fā)經(jīng)驗貫穿始終。通過本課程的學(xué)習(xí)，可使得學(xué)員對HTML5的開發(fā)有一個很好的了解，對具體開發(fā)工作游刃有余。
授課對象 程序員、架構(gòu)師等技術(shù)開發(fā)類崗位，了解Web開發(fā)基本技術(shù)：包括HTML和DHTML、CSS、Javascript
學(xué)習(xí)屬性 概念/理論： 講授、啟發(fā)、提問、個人思考等
步驟/結(jié)構(gòu)： 實戰(zhàn)演練＋動手練習(xí)
實用技巧： 實戰(zhàn)經(jīng)驗講授、案例分析等
學(xué)習(xí)工具： 工具應(yīng)用分析、使用練習(xí)等
實戰(zhàn)案例： 小組研討、互動討論、實戰(zhàn)演練等
課堂練習(xí)： 個人練習(xí)、小組研討等
綜合測評： 個人測試等
授課說明 課程形式： 課堂講授、講義解析、項目關(guān)聯(lián)
培訓(xùn)環(huán)境 機器要求： RAM：8G以上
CPU：雙核以上
軟件要求： Windows Server 2003+SP2或其他windows 操作系統(tǒng)
瀏覽器IE10，瀏覽器opera
瀏覽器firefox，瀏覽器chrome
等所有主流瀏覽器
Dreamweaver
其它要求： 局域網(wǎng)、白板、投影儀
課程內(nèi)容
? HTML5基礎(chǔ)和環(huán)境
? HTML5的前世今生
? 開發(fā)環(huán)境準(zhǔn)備
? Dreamweaver
? HTML5 Javascript編程
? Javascript核心語法
? Javascript面向?qū)ο缶幊?br>
? prototype
? 類的定義（封裝），繼承，多肽
? callee和caller
? 定時器
? DOM
? jQuery對象
? jQuery選擇器
? CSS3顯示效果
? CSS3 選擇器
? Webfonts,Text wrapping,Text stroke,Border image...等16種常用效果展示
? HTML5新增功能和標(biāo)簽（一）
? HTML5 head標(biāo)準(zhǔn)寫法
? HTML5語義化標(biāo)簽體系
? 自定義數(shù)據(jù)的使用
? 兼容性
? 自定義數(shù)據(jù)配合JS優(yōu)點缺點
? 【實驗一】用jQuery顯示各種字符效果
? 【實驗二】用語義化標(biāo)簽體系實現(xiàn)一個HTML5頁面
? HTML5新增標(biāo)簽和功能（二）
? HTML5全局屬性
? contenteditable
? Accesskey
? dir
? HTML5智能表單
? color, email, date...等十三種新的輸入類型
? required, autofocus, pattern...等六個新屬性
? <datalist>, <output>,<progress>...等五個新的 elements
? HTML5表單驗證
? JS配合HTML5表單校驗
? checkValidity()方法的使用
? HTML5 Canvas
? 瀏覽器對Canvas的支持情況
? 柵格圖基本特性
? 在頁面中添加Canvas
? Canvas坐標(biāo)系
? 描邊樣式和填充樣式
? 直線和曲線繪制
? Canvas的路徑（Path）使用
? Canvas復(fù)雜圖形的繪制
? Canvas插入圖片
? Canvas線性漸變和徑向漸變
? Canvas陰影效果
? Canvas的變換技術(shù)
? Canvas的動畫制作
? HTML5 SVG
? 瀏覽器對SVG的支持檢測
? 矢量圖基本特性
? 在頁面中添加SVG
? SVG的組件定義標(biāo)簽defs使用
? SVG的線性漸變和放射性漸變
? SVG路徑（PATH）
? SVG的PATH中的八種常用命令
? 【實驗三】演示智能表單的各種特性
? 【討論一】canvas和SVG的異同
? 【案例一】動畫“窗外下著雨”
? HTML5新增標(biāo)簽和功能（三）
? 拖拽功能
? dragable屬性
? DataTransfer對象
? Drag事件
1）ondragstart
2）ondragenter
3）ondragstart
4）ondragenter
5）Ondragover
6）ondrop
7）ondragend
? HTML5 Video和Audio標(biāo)簽
? 瀏覽機器對Video和Audio的支持檢測
? HTML5支持的視頻和音頻格式
? Video的播放屬性和UI屬性
? Audio的播放屬性和UI屬性
? HTML5 桌面通知Notifications
? webkitNotifications對象的使用
? createNotification()方法的參數(shù)
? 設(shè)定通知圖標(biāo)
? 設(shè)置標(biāo)題和內(nèi)容
? 用checkPermission檢查用戶授權(quán)
? 用requestPermission()請求權(quán)限
? HTML5之前的本地存儲技術(shù)
? Cookies
? Flash Storage
? IE UserData
? Google Gears
? Dojo Storage
? Window.name(hack)
? 【討論三】羅列的這些本地存儲技術(shù)存在那些局限性
? 【案例二】實現(xiàn)一個將垃圾拖動到垃圾箱的web頁面
? 【案例三】實現(xiàn)一個頁面Audio播放器和一個頁面Video播放器
? 【案例四】彈出一個桌面通知，顯示一段時間，讓其自動消失
? Web Storage
? localStorage
? sessionStorage
? Storage事件處理
? Web SQL Database
? 數(shù)據(jù)庫的建立
? 數(shù)據(jù)庫的版本管理
? 事務(wù)處理
? 執(zhí)行SQL語句
? 結(jié)果集的處理
? Indexed Database
? 版本管理
? onupgradeneeded事件
? onversionchange事件
? 事務(wù)處理
? Object Store的操作
? 創(chuàng)建Object Store
? 讀/寫Object Store
? 刪除Object Store
? 索引查詢
? 查詢條件IDBKeyRange
? 游標(biāo)
? 四種游標(biāo)方向
? 【實驗四】分別使用Web Storage，Web SQL，IndexDb讀寫數(shù)據(jù)
? 【討論四】這三種本地存儲的性能分析比較
? FileSystem API
? 請求File System
? 臨時（TEMPORARY）文件系統(tǒng)
? 持久（PERSISTENT）文件系統(tǒng)
? 讀取和處理文件
? File/Blob API
? FileList API
? FileReader API
? 創(chuàng)建和寫入
? BlobBuilder API
? FileWriter API
? 目錄和文件系統(tǒng)訪問
? DirectoryReader API
? FileEntry/DirectoryEntry
? LocalFileSystem
? FileReader API
? FileSystem & FileWriter API
? HTML5 fileSystem API比較好的應(yīng)用
? Native Drag & Drop
? Desktop Drag-In
? Desktop Drag-Out
? 【實驗五】使用FileApi讀寫本地文件
? HTML5多線程
? Web Workers
? 如何使用Web Worker
? 主線程與新線程之間的數(shù)據(jù)交換
? 要點與局限性
? 典型案例分析
? SharedWorker
? 如何使用SharedWorker
? 要點與局限性
? XMLHttpRequest2
? 跨源數(shù)據(jù)請求
? 上傳文件到服務(wù)器端
? 進度事件（Progress events）
? HTML5服務(wù)器和客戶端通訊模式
? Server-Send Event模式
? Server-Send Event客戶端實現(xiàn)
? Server-Send Event服務(wù)器端實現(xiàn)
? WebSocket模式
? 輪詢
? 長輪詢
? Comet
? WebSocket機制
? WebSocket客戶端實現(xiàn)
? WebSocket服務(wù)器端實現(xiàn)
? 【案例五】聊天室服務(wù)端和客戶端實現(xiàn)
? 離線web應(yīng)用程序
? 新增的本地緩存
? 本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別
? manifest文件
? 瀏覽器與服務(wù)器的交互過程
? applicationcache對象
? swapcache方法
? applicationcache對象的事件
? 【案例六】一個便簽紙的web應(yīng)用
? 硬件訪問API
? geolocation
? geolocation的用法
? 地理信息的定位精度
? 測試geolocation的方法
? 兼容性和兼容檢測
? getCurrentPosition()的使用
? latitude和longitude
? altitude和altitudeAccuracy?
? heading和speed
? Device Orientation
? Speech Input
? 【案例七】實現(xiàn)一個定位導(dǎo)航web應(yīng)用
? WebGL基本組成
? 場景
? 渲染器
? 光源
? 物體的形狀和材質(zhì)
? 【案例八】實現(xiàn)一倆可不同角度觀察的汽車的三維模型
? jQuery Mobile編程
? jQuery Mobile關(guān)鍵特性
? jQuery Mobile鏈接處理方式
? jQuery Mobile使用頁眉、工具欄和標(biāo)簽欄
? jQuery Mobile中的表單和按鈕
? jQuery Mobile中的列表和表格
? List View的使用
? Grid layout的使用
? jQuery Mobile和CSS結(jié)合
? jQuery Mobile主題
? jQuery Mobile的API
? jQuery Mobile事件
? 觸摸事件
? 方向改變事件
? 滾動事件
? 頁面隱藏和顯示事件
? 頁面初始化
? jQuery Mobile的移動設(shè)備支持情況
? jQuery Mobile和服務(wù)器集成
? PhoneGap的跨平臺開發(fā)
? PhoneGap的架構(gòu)
? PhoneGap與本地系統(tǒng)iOS,Android等的關(guān)系
? PhoneGap與HTML5、CSS3、JavaScript的關(guān)系
? PhoneGap支持的移動平臺核心功能
? 相機訪問
? 文件訪問
? 地理定位
? 加速器
? 獲取聯(lián)系人
? 聲音和振動
? jQuery Mobile和PhoneGap結(jié)合使用
? PhoneGap的功能擴展
? PhoneGap插件開發(fā)
? PhoneGap插件安裝
? 【實驗六】在Android平臺實現(xiàn)：列出PhoneGap支持的Device，分別通過按鈕點擊實現(xiàn)支持
? 【實驗七】在iOS平臺實現(xiàn)：列出PhoneGap支持的Device，分別通過按鈕點擊實現(xiàn)支持
總結(jié)、討論、答疑
|
|
|
|
|
|
|
首頁 課程表 在線聊 報名 講師 品牌 QQ聊 活動 就業(yè)
