update html5 training

Author: webzhao

content/.DS_Store

@@ -1,5 +1,7 @@
 ## 动画效果
 
+---
+
 
 ### transition（过渡）
 
@@ -120,3 +122,5 @@ transition: width 1s linear, height 1s linear 1s;
 
 * translate3d(10px, 0, 0)
 * rotateX() 或 rotateY();
+
+---

content/html5/animation.md

@@ -1,5 +1,14 @@
 ## 实践
 
-* MEAN开发
+---
+
+### MEAN开发
+
+* Mongodb
+* Express
 * Node
 * Angular
+
+---
+
+[移动端Demo](http://skyweaver213.github.io/slide/widget/slide1/slide.html)

content/html5/case-study.md

@@ -6,6 +6,8 @@
 * 圆角
 * 阴影
 * 背景缩放
+* Flexbox布局
+* 媒体查询和响应式设计
 
 ---
 
@@ -68,3 +70,67 @@
 
 <iframe height='836' scrolling='no' src='http://codepen.io/herihehe/embed/aLwGt/?height=836&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/herihehe/pen/aLwGt/'>CSS Background Size</a> by Heri Setiawan (<a href='http://codepen.io/herihehe'>@herihehe</a>) on <a href='http://codepen.io'>CodePen</a>.
 </iframe>
+
+---
+
+### Flexbox可控制容器内的子元素：
+
+* 水平或垂直排成一行
+* 控制子元素对齐方式
+* 控制子元素的宽度/高度
+* 控制子元素显示顺序
+* 控制子元素是否折行
+
+---
+
+Flexbox是W3C布局方面标准中的*终极武器*
+
+---
+
+![axis](img/css3/axis.png)
+
+---
+
+[Flexbox Demo](http://dabblet.com/gist/95e5b65622aeae4d031d)
+
+---
+
+### 响应式设计是什么？
+
+一种能在不同屏幕大小的设备上都能提供优秀的浏览体验的网页设计方案
+
+---
+
+
+### media query
+
+针对不同的屏幕，应用不同的样式
+
+```markup
+<link rel="stylesheet" href="m.css"
+	media="screen and (max-width: 480px)">
+```
+
+```css
+@media screen and (min-width: 480px) {
+	.selector {  … }
+}
+```
+
+---
+
+### 可以查询的media
+
+* width
+* height
+* device-width
+* device-height
+* device-pixel-ratio
+* orientation
+
+---
+
+
+@state: green
+
+<p style="font-size:6em"><i class="fa fa-comments"></i></p>

content/html5/css3.md

@@ -10,36 +10,68 @@
 
 ---
 
-### 获取文件对象
+### 通过文件选择框获取文件对象
 
-```markup
-<input type="file" id="files" name="files[]" multiple />
-<output id="list"></output>
-<script>
-  function handleFileSelect(evt) {
-    var files = evt.target.files;
+* 监听`<input type="file">`的`change`事件
+* 通过 input.files 属性获取文件对象列表
 
-    var output = [];
-    for (var i = 0, f; f = files[i]; i++) {
-      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
-                  f.size, ' bytes, last modified: ',
-                  f.lastModifiedDate.toLocaleDateString(), '</li>');
-    }
-    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
-  }
-  document.getElementById('files').addEventListener('change', handleFileSelect, false);
-</script>
-```
+---
+
+### [Demo](http://jsbin.com/jarice/edit?js,output)
+
+---
+
+### 通过拖拽获取文件对象
+
+* 选定一个可拖放的区域
+* 给这个元素绑定dragenter、dragover事件并组织默认行为
+* 绑定drop事件，通过 e.dataTransfer.files 获取文件对象
+
+---
+
+### [Demo](http://jsbin.com/yogamu/4/edit?html,js,output)
+
+---
+
+### 读取文件内容
+
+* fileReader.readAsBinaryString(Blob|File)
+* fileReader.readAsText(Blob|File, opt_encoding)
+* fileReader.readAsDataURL(Blob|File)
+* fileReader.readAsArrayBuffer(Blob|File)
+
+---
+
+### Blob
+
+* Binary large object
+* 二进制文件容器
+* 可以修改
+
+---
+
+### [Data URL Demo](http://jsbin.com/zosine/edit?html,js,console,output)
+
+---
+
+### [Read Text Demo](http://jsbin.com/zecabi/2/edit?html,js,output)
 
 ---
 
-### 读取文件
+### 文件上传
 
-* FileReader.readAsBinaryString(Blob|File)
-* FileReader.readAsText(Blob|File, opt_encoding)
-* FileReader.readAsDataURL(Blob|File)
-* FileReader.readAsArrayBuffer(Blob|File)
+* 使用FormData和XMLHttpRequest
+* 不使用FormData（上传前进行图片压缩）
+    * fileReader.readAsBinaryString()
+    * xmlHttpRequest.sendAsBinary()
 
 ---
 
-### 示例：图片处理
+### [示例：图片处理](http://makeitsolutions.com/labs/jic/)
+
+---
+
+
+@state: green
+
+<p style="font-size:6em"><i class="fa fa-comments"></i></p>

content/html5/file-api.md

@@ -55,9 +55,6 @@
 * 练习环境
 	* [Chrome](http://www.google.com/chrome/)或[Firefox](https://www.mozilla.org/)浏览器
 	* [Atom](https://atom.io/)或[Sublime Text](http://www.sublimetext.com/)编辑器
-* 在线提交
-	* 地址：http://jsbin.com
-	* //TODO
 
 ---
 

content/html5/getting-started.md

@@ -0,0 +1,45 @@
+## HTML5 vs Native
+
+---
+
+<style>
+.reveal table {font-size: 0.8em}
+.reveal table td,.reveal table th {padding: 0.5em}
+.reveal table td:first-child {white-space:nowrap}
+</style>
+
+|  | HTML5 | 原生应用 |
+|--------------|----------------------|----------------------|
+| 更新 | 只需要服务器部署新版本，比较方便 | 需要发布新版客户端，需要商店审核，新版覆盖需要较长时间 |
+| 动画 | 可以实现基本的动画效果，在低配置机器上不流畅 | 动画效果可以很炫，很流畅 |
+| 加载速度 | 较慢。尤其是首次，可以充分利用缓存机制做优化 | 较快 |
+| 开发成本 | 低。Web标准技术已经非常适合开发应用 | 高，人员、时间 |
+| 访问硬件能力 | 仅限部分API | 所有设备权限 |
+| 适用场景 | 内容内应用 | 重交互类应用 |
+
+---
+
+### Hybrid 应用
+
+* 在原生应用中嵌入 HTML5 页面
+* WebView
+
+---
+
+### 已有框架
+
+* PhoneGap
+* Apache Cordova
+* Appcelerator Titanium
+* AppCan
+
+---
+
+### 客户端和 HTML5 通信
+
+* 客户端调用HTML5接口
+    * javascript: 伪协议
+* HTML5中调用客户端功能
+    * Android: 截获页面上的prompt, console等调用
+    * Android: addJavascriptInterface
+    * iOS: 自定义协议拦截

content/html5/html5-vs-native.md

@@ -1,13 +1,33 @@
-## Web font
+## Web fonts
 
 ---
 
-### Web Font
+### Web Fonts
 
-* CSS中引入自定义字体
+* 在页面上使用服务器字体
+* 满足设计师对特殊字体使用的需求
+* 与使用图片展示特殊字体的方案对比
+    * 文件更小
+    * 易于维护
 
 ---
 
+<link href='https://fonts.googleapis.com/css?family=Black+Ops+One|Frijole|Rock+Salt' rel='stylesheet' type='text/css'>
+
+<p style="font-family:'Black Ops One';font-size: 2em">Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+
+---
+
+<p style="font-family:Frijole;font-size: 2em">Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+
+---
+
+<p style="font-family:'Rock Salt';font-size: 2em">Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+
+---
+
+### 引入Web Font
+
 ```css
 @font-face {
   font-family: 'fancyFont';
@@ -27,20 +47,29 @@
 ### 中文字体
 
 * 中文字体太大，十几到几十兆
-* 版权意识
 
 ---
 
 ### 字体裁切工具
 
-* fontmin
-* fontspider
+* [fontmin](http://ecomfe.github.io/fontmin/)
+* [fontspider](http://font-spider.org/)
+
+---
+
+### Demo
+
+---
+
+### UTF-8 字符
+
+<p style="font-size:2em">&#9829; &#10026; &#8734; &#9993; &#9888; &#9992; &#10047;  &#9775;</p>
 
 ---
 
 ### 图标字体
 
-* 将页面上的图标做成字体
+* 将图标做成字体在页面上使用
 * 优点
     * 随意调整大小、颜色、阴影、透明度等
     * 尺寸小
@@ -49,15 +78,42 @@
 
 ### 使用图标库
 
-* fontawesome
-* iconmoon
-* 阿里图标库
+* [Fontawesome](http://fortawesome.github.io/Font-Awesome/icons/)
+* [iconmoon](https://icomoon.io/app)
+* [阿里图标库](http://www.iconfont.cn/)
 
 ---
 
-### 自定义图标字体
+### 自己动手制作Font icons
 
 * 导出SVG文件
 * 使用工具生成
-    * fontello
-    * customfont
+    * [fontello](http://fontello.com/)
+    * [customfont](http://fontcustom.com/)
+
+---
+
+### 浏览器支持
+
+* IE 4+
+* Firefox
+* Chrome
+* Android
+* Safari
+
+---
+
+### 注意事项
+
+* 渲染问题
+    * Chrome 阻塞渲染 + 超时
+    * 其它浏览器：页面闪动
+    * 解决办法：base64后inline
+* 锯齿（Windows Chrome下）
+* 版权
+
+---
+
+@state: green
+
+<p style="font-size:6em"><i class="fa fa-comments"></i></p>