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