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