├── .gitignore ├── README.md ├── content ├── casestudy-of-360internetional.md ├── css3-layout.md ├── explore-nodejs.md ├── front-end-essentials-1.md ├── front-end-essentials-2.md ├── front-end-essentials-3.md ├── front-end-essentials-4.md ├── front-end-learning.md ├── front-end-tools.md ├── high-performance-web.md ├── html5-and-css3.md ├── html5 │ ├── animation.md │ ├── canvas.md │ ├── case-study.md │ ├── css3.md │ ├── file-api.md │ ├── geolocation.md │ ├── getting-started.md │ ├── html5-overview.md │ ├── html5-vs-native.md │ ├── multimedia.md │ ├── web-fonts.md │ ├── web-form-2.md │ ├── web-socket.md │ └── web-storage.md ├── mobile-debugging.md ├── mobile-web-1.md ├── mobile-web-2.md ├── mobile-web-3.md ├── mobile-web-4.md ├── mobile-web-5.md ├── mobile-web-6.md ├── mobile-web-7.md ├── road-to-frontend.md ├── secrets-of-chrome-devtools.md ├── talking-about-web-design.md └── units-of-measure-in-android.md ├── css ├── 360safe │ └── font.css ├── font-awesome.min.css ├── index.css ├── print │ ├── paper.css │ └── pdf.css ├── reveal.css ├── reveal.min.css └── theme │ ├── README.md │ ├── beige.css │ ├── dark.css │ ├── default.css │ ├── moon.css │ ├── night.css │ ├── serif.css │ ├── simple.css │ ├── sky.css │ ├── solarized.css │ ├── source │ ├── beige.scss │ ├── default.scss │ ├── moon.scss │ ├── night.scss │ ├── serif.scss │ ├── simple.scss │ ├── sky.scss │ └── solarized.scss │ └── template │ ├── mixins.scss │ ├── settings.scss │ └── theme.scss ├── demos ├── circle.js ├── css3 │ ├── news.html │ └── region.html ├── devtools │ ├── .sass-cache │ │ └── d34f6c8ea23c9b93f472e8ec867ef13c77875159 │ │ │ └── style.scssc │ ├── .sass.html.swp │ ├── .style.scss.swp │ ├── canvas.html │ ├── conditional.html │ ├── data.json │ ├── dom_breakpoint.html │ ├── sass.html │ ├── source_map.html │ ├── style.css │ ├── style.css.map │ ├── style.scss │ └── xhr.html ├── html5 │ ├── form.html │ ├── localstorage.html │ ├── semantics.html │ ├── svg │ │ └── icomoon_5_icons │ │ │ ├── Read Me.txt │ │ │ ├── SVG │ │ │ ├── binoculars.svg │ │ │ ├── cog.svg │ │ │ ├── earth.svg │ │ │ ├── gift.svg │ │ │ └── spoon-knife.svg │ │ │ ├── demo-files │ │ │ └── demo.css │ │ │ ├── demo.html │ │ │ ├── selection.json │ │ │ ├── style.css │ │ │ └── svgdefs.svg │ └── video.html ├── learning │ └── css.html ├── myapp.js ├── read_file.js ├── server.js ├── server2.js └── test.txt ├── fonts ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf └── fontawesome-webfont.woff ├── html5.html ├── img ├── 360safe │ ├── compare.png │ ├── example.png │ ├── sprite.png │ └── woff.png ├── css3 │ ├── android.png │ ├── axis.png │ ├── chrome.png │ ├── firefox.png │ ├── ie.png │ ├── ios.png │ ├── opera.png │ ├── region.png │ └── safari.png ├── debug │ ├── android_browser.svg │ ├── carnaval.png │ ├── chrome.svg │ ├── dev.png │ ├── ios_debug.jpg │ ├── mobile_setting.jpg │ ├── opera.svg │ ├── safari.svg │ ├── safari_menu.png │ └── safari_setting.png ├── design │ ├── 360safe.png │ ├── apple.png │ ├── braun_t3.jpg │ ├── braun_vs_apple.png │ ├── dark-side.jpg │ ├── drive.png │ ├── google.png │ ├── google_correct.png │ ├── google_marked.png │ ├── google_principle.png │ ├── google_wrong.png │ ├── ipod1.jpg │ ├── line-height-vs-line-width.png │ ├── metrics.png │ ├── plus.png │ ├── smashing_correct.png │ ├── smashing_wrong.png │ ├── texture1.png │ └── texture2.png ├── devtools │ ├── chrome.png │ ├── chrome.svg │ ├── chrome_end.jpg │ └── chrome_start.jpg ├── essentials │ ├── box-model.png │ ├── content-model.svg │ └── named-color.png ├── fetools │ ├── ape.jpg │ ├── cover.jpg │ └── cover2.jpg ├── html5 │ ├── 3d.svg │ ├── axis.jpg │ ├── bunny.mp4 │ ├── connectivity.svg │ ├── css3.svg │ ├── device.svg │ ├── img.png │ ├── integration.svg │ ├── movie.ogg │ ├── multimedia.svg │ ├── offline.svg │ └── semantics.svg ├── learning │ ├── ban.png │ ├── css-definitive-guide.jpg │ ├── css-mastery.jpg │ ├── html5.png │ ├── http-definitive-guide.jpg │ ├── javascript-definitive-guide.jpg │ ├── professional-javascript.jpg │ └── w3school.png ├── mobile │ ├── ShadowsocksX-2.6.1.dmg │ ├── android-version.png │ ├── css-pixel.png │ ├── dom.png │ ├── ios-version.png │ ├── layout-viewport.png │ ├── render-tree.png │ ├── resolution-chart.png │ ├── scale.png │ ├── svg-demo.svg │ ├── touch.png │ └── visual-viewport.png ├── node │ ├── block_server.svg │ ├── event_loop.png │ ├── nodejs.png │ ├── non-block.svg │ ├── single_thread.svg │ ├── th.svg │ ├── threads.svg │ └── waterfall.svg ├── road │ └── cover.jpg └── units │ ├── htcone.png │ ├── ruler.png │ └── setting.png ├── index.html ├── js ├── reveal.js └── reveal.min.js ├── lib ├── css │ ├── monokai.css │ └── zenburn.css ├── font │ ├── league_gothic-webfont.eot │ ├── league_gothic-webfont.svg │ ├── league_gothic-webfont.ttf │ ├── league_gothic-webfont.woff │ └── league_gothic_license └── js │ ├── classList.js │ ├── head.min.js │ └── html5shiv.js ├── package.json ├── play.html ├── plugin ├── highlight │ └── highlight.js ├── markdown │ ├── example.html │ ├── example.md │ ├── markdown.js │ └── marked.js ├── multiplex │ ├── client.js │ ├── index.js │ └── master.js ├── notes-server │ ├── client.js │ ├── index.js │ └── notes.html ├── notes │ ├── notes.html │ └── notes.js ├── postmessage │ ├── example.html │ └── postmessage.js ├── print-pdf │ └── print-pdf.js ├── prism │ ├── prism.css │ └── prism.js ├── remotes │ └── remotes.js ├── search │ └── search.js └── zoom-js │ └── zoom.js ├── print.html └── slides.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io 2 | 3 | ### Windows ### 4 | # Windows image file caches 5 | Thumbs.db 6 | ehthumbs.db 7 | 8 | # Folder config file 9 | Desktop.ini 10 | 11 | # Recycle Bin used on file shares 12 | $RECYCLE.BIN/ 13 | 14 | # Windows Installer files 15 | *.cab 16 | *.msi 17 | *.msm 18 | *.msp 19 | 20 | # Windows shortcuts 21 | *.lnk 22 | 23 | 24 | ### OSX ### 25 | .DS_Store 26 | .AppleDouble 27 | .LSOverride 28 | 29 | # Icon must end with two \r 30 | Icon 31 | 32 | 33 | # Thumbnails 34 | ._* 35 | 36 | # Files that might appear in the root of a volume 37 | .DocumentRevisions-V100 38 | .fseventsd 39 | .Spotlight-V100 40 | .TemporaryItems 41 | .Trashes 42 | .VolumeIcon.icns 43 | 44 | # Directories potentially created on remote AFP share 45 | .AppleDB 46 | .AppleDesktop 47 | Network Trash Folder 48 | Temporary Items 49 | .apdisk 50 | 51 | 52 | ### Linux ### 53 | *~ 54 | 55 | # KDE directory preferences 56 | .directory 57 | 58 | # Linux trash folder which might appear on any partition or disk 59 | .Trash-* 60 | 61 | 62 | ### Vim ### 63 | [._]*.s[a-w][a-z] 64 | [._]s[a-w][a-z] 65 | *.un~ 66 | Session.vim 67 | .netrwhist 68 | *~ 69 | 70 | 71 | ### SublimeText ### 72 | # cache files for sublime text 73 | *.tmlanguage.cache 74 | *.tmPreferences.cache 75 | *.stTheme.cache 76 | 77 | # workspace files are user-specific 78 | *.sublime-workspace 79 | 80 | # project files should be checked into the repository, unless a significant 81 | # proportion of contributors will probably not be using SublimeText 82 | # *.sublime-project 83 | 84 | # sftp configuration file 85 | sftp-config.json 86 | 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | sharing 2 | ======= 3 | 4 | Knowledge sharing 5 | 6 | http://webzhao.github.io/sharing/ 7 | -------------------------------------------------------------------------------- /content/front-end-tools.md: -------------------------------------------------------------------------------- 1 | 2 |
3 |

前端开发者工具

4 |

赵文博

5 |
6 | 7 | @bg: img/fetools/cover2.jpg, @bgColor: #eee 8 | 9 | --- 10 | 11 |
本节内容主要是给同学们介绍一些**非常好用**的工具，开阔一下视野，不会深入去讲每个工具的具体功能和使用哈。
12 | 13 | --- 14 | 15 | @fragment 16 | 17 | ## 我们为什么需要工具？ 18 | 19 | * 避免重复工作 20 | * 提高开发效率 21 | * 减少错误概率 22 | 23 | --- 24 | 25 | 26 | ## 前端工具 27 | 28 | * 编写代码工具 29 | * 调试工具 30 | * 测试工具 31 | * 优化工具 32 | 33 | --- 34 | 35 | ## 代码编写工具 36 | 37 | @state: blue 38 | 39 | --- 40 | 41 | ## 编辑器 42 | 43 | * [VIM](http://www.vim.org/) 44 | * [Vundle](https://github.com/gmarik/Vundle.vim): the plug-in manager for Vim 45 | 46 | * [Sublime Text](http://www.sublimetext.com/) 47 | * [Package Control](https://sublime.wbond.net/) 48 | 49 | --- 50 | 51 | ## 代码生成工具 52 | 53 | * [Emmet](http://emmet.io/) 54 | * CSS3生成工具 55 | * [CSS3 Generator](http://css3generator.com/) 56 | * [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) 57 | * [Prefix Free](http://leaverou.github.io/prefixfree/) 58 | 59 | --- 60 | 61 | ## 预编译：复杂问题简单化 62 | 63 | * [CoffeeScript](http://coffeescript.org/) 64 | * [SASS](http://sass-lang.com/) 65 | 66 | --- 67 | 68 | ## 代码检查 69 | 70 | * [JSHint](http://www.jshint.com/install/) 71 | * [CSSLint](http://csslint.net/) 72 | 73 | --- 74 | 75 | ## 调试工具 76 | 77 | --- 78 | 79 | ## 浏览器调试工具 80 | 81 | * [Chrome开发者工具](slides.html?file=secrets-of-chrome-devtools) 82 | * IE/Firebug/Opera 83 | 84 | --- 85 | 86 | ## Chrome开发者工具 87 | 88 | * $ in Console 89 | * 断点设置 90 | * DOM断点 91 | * XHR断点 92 | * 异常断点 93 | * 查看元素事件绑定 94 | * 格式化代码 95 | * 本地修改 96 | * Workspace 97 | 98 | --- 99 | 100 | ## HTTP调试工具 101 | 102 | * [Fiddler](http://www.telerik.com/fiddler) 103 | 104 | * 查看请求 105 | * 本地映射 106 | * 设置断点 107 | * 模拟慢网速 108 | 109 | * [Charles](http://www.charlesproxy.com/) 110 | 111 | --- 112 | 113 | ## 在线Demo工具 114 | 115 | * [Dabblet](http://dabblet.com/) 116 | * [CodePen](http://codepen.io/) 117 | * [JSBin](http://jsbin.com) 118 | 119 | --- 120 | 121 | ## 测试工具 122 | 123 | * [Jasmine](http://jasmine.github.io/) 124 | * [PhantomJS](http://phantomjs.org/): headless WebKit 125 | 126 | 127 | --- 128 | 129 | ## 浏览器测试 130 | 131 | * [BrowserStack](http://www.browserstack.com/) 132 | * [Browserling](https://www.browserling.com/) 133 | * [Modern.IE](https://www.modern.ie/en-us) 134 | 135 | --- 136 | 137 | ## 优化工具 138 | 139 | --- 140 | 141 | ## 性能评估和检查 142 | 143 | * [PageSpeed](https://developers.google.com/speed/pagespeed/) 144 | * [YSlow](http://yslow.org/) 145 | 146 | --- 147 | 148 | ## 图片压缩 149 | 150 | * [TinyPNG](https://tinypng.com/) 151 | 152 | --- 153 | 154 | ## 网站监控 155 | 156 | * [360网站监控](http://jk.cloud.360.cn/) 157 | * [阿里测](http://alibench.com/) 158 | 159 | --- 160 | 161 | ## 自己开发工具 162 | 163 | 人和动物的区别就是，人会制造工具 164 | 165 | @bg: img/fetools/ape.jpg, @bgColor: #eee 166 | 167 | --- 168 | 169 | @state: green 170 | 171 |

172 | 173 | --- 174 | 175 | @state: blue 176 | 177 | ## 谢谢大家！ 178 | 179 |

180 | 181 | 182 | -------------------------------------------------------------------------------- /content/html5/animation.md: -------------------------------------------------------------------------------- 1 | ## 动画效果 2 | 3 | --- 4 | 5 | 6 | ### transition（过渡） 7 | 8 | * 从一个状态到另一个状态的过渡 9 | * 动画的意义：告诉用户发生了什么 10 | 11 | --- 12 | 13 | ### 指定transition 14 | 15 | * 什么属性发生变化时需要过渡 16 | * 过渡持续多长时间 17 | * 速度变化是什么样 18 | * 是否有延迟 19 | 20 | --- 21 | 22 | ### transition 23 | 24 | ```css 25 | transition: all 1s linear 0.5s; 26 | transition: width 1s linear, height 1s linear 1s; 27 | ``` 28 | 29 | [代码](http://jsbin.com/zivoji) 30 | 31 | --- 32 | 33 | ### transition-property 34 | 35 | * 指定哪些属性是需要过渡的 36 | * 可以指定多个用逗号隔开 37 | 38 | --- 39 | 40 | ### transition-duration 41 | 42 | * 指定过渡时间 43 | * 可以指定多个，和属性对应 44 | 45 | --- 46 | 47 | ### transition-timing-function 48 | 49 | * 指定过渡的过程中，属性值变化的快慢 50 | * [常见时间函数](http://cubic-bezier.com) 51 | 52 | --- 53 | 54 | ### transition-delay 55 | 56 | * 指定过渡要延迟多久才开始 57 | * 可以指定过个，和属性对应 58 | 59 | --- 60 | 61 | ### transitionend 事件 62 | 63 | * 在JavaScript中，可以监听transitionend事件来得知过渡完成 64 | * 注意：避免使用setTimeout来做动画完成后的事 65 | 66 | --- 67 | 68 | ### 练习：翻页应用 69 | 70 | 页面切换放手后的动画 71 | 72 | --- 73 | 74 | ### animation 75 | 76 | * 动画可以实现更复杂的样式变化效果 77 | 78 | --- 79 | 80 | ### 使用CSS animation 81 | 82 | * 定义关键帧 83 | * 指定动画行为 84 | 85 | --- 86 | 87 | ### demo 88 | 89 | [代码](http://jsbin.com/yazaqe/edit?html,output) 90 | 91 | --- 92 | 93 | ### transform 变形 94 | 95 | * 对元素进行变形 96 | - 平移 97 | - 旋转 98 | - 缩放 99 | - 扭曲 100 | * 例如 101 | - transform: translate(10px, 20px) scale(0.5); 102 | 103 | --- 104 | 105 | ### translate 平移 106 | 107 | * translate(10px, 10px) 108 | * translate3d(10px, 10px, 100px) 109 | * translateX(10px) 110 | * translateY(500px) 111 | 112 | --- 113 | 114 | ### rotate 115 | 116 | * rotate(30deg) 117 | * transform-origin 118 | 119 | --- 120 | 121 | ### 3D 122 | 123 | * translate3d(10px, 0, 0) 124 | * rotateX() 或 rotateY(); 125 | 126 | --- 127 | -------------------------------------------------------------------------------- /content/html5/canvas.md: -------------------------------------------------------------------------------- 1 | ## Canvas 2 | 3 | --- 4 | 5 | ### Canvas是什么？ 6 | 7 | * HTML5新增的一个绘图元素 8 | * 使用JavaScript控制图形绘制 9 | * 可绘制路径、矩形、圆形、字符以及添加图像等 10 | 11 | --- 12 | 13 | ### 获取Canvas对象 14 | 15 | ```markup 16 | 17 | 23 | ``` 24 | 25 | --- 26 | 27 | ### 坐标系 28 | 29 | 30 | 31 | --- 32 | 33 | ### 矩形 34 | 35 | * cxt.fillRect(x, y, w, h); 36 | * cxt.clearRect(x, y, w, h); 37 | * cxt.strokeRect(x, y, w, h); 38 | 39 | --- 40 | 41 | 42 | 43 | --- 44 | 45 | ### 路径 46 | 47 | * beginPath() 开始路径绘制 48 | * moveTo(x, y) 移动到指定位置 49 | * lineTo(x, y) 从当前位置绘制直线到指定位置 50 | * closePath() 结束路径 51 | * stroke() 描边 52 | * fill() 填充 53 | 54 | --- 55 | 56 | ### 画个三角形 57 | 58 | 59 | 60 | --- 61 | 62 | ### 曲线 63 | 64 | ```javascript 65 | // 圆弧 66 | arc(x, y, radius, startAngle, endAngle, anticlockwise) 67 | // 二次贝塞尔曲线 68 | quadraticCurveTo(cp1x, cp1y, x, y) 69 | // 三次贝塞尔曲线 70 | bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 71 | ``` 72 | 73 | --- 74 | 75 | ### 贝塞尔曲线 76 | 77 | 78 | 79 | --- 80 | 81 | ### 二阶贝塞尔曲线 82 | 83 | 84 | 85 | --- 86 | 87 | ### 三阶贝塞尔曲线 88 | 89 | 90 | 91 | 92 | --- 93 | 94 | ### 绘制心形 95 | 96 | 97 | 98 | --- 99 | 100 | ### 显示文字 101 | 102 | * fillText(text, x, y, maxWidth) 103 | * strokeText(text, x, y, maxWidth) 104 | * 文本样式控制 105 | * font = "48px Arial" 106 | * textAlign = "left" 107 | * measureText(text) 108 | 109 | --- 110 | 111 | ### Demo 112 | 113 | 114 | 115 | --- 116 | 117 | ### 使用图片 118 | 119 | ```javascript 120 | drawImage( 121 | image, 122 | sx, sy, sWidth, sHeight, // 原图 123 | dx, dy, dWidth, dHeight // 绘制到Canvas 124 | ) 125 | ``` 126 | 127 | --- 128 | 129 | ### Demo 130 | 131 | 132 | 133 | --- 134 | 135 | ### 变换 136 | 137 | * 对画布进行变换 138 | * translate(x, y) 139 | * scale(x, y) 140 | * rotate(angle) 141 | * save() 142 | * restore() 143 | 144 | --- 145 | 146 | 147 | 148 | --- 149 | 150 | ### 动画 151 | 152 | 153 | 154 | --- 155 | 156 | ### 事件绑定 157 | 158 | * 只能绑定在canvas元素上 159 | * 通过事件发生的坐标，判断发生在哪个图形上 160 | 161 | --- 162 | 163 | ### Canvas 使用场景 164 | 165 | * 对性能要求 166 | * 图形交互较少 167 | 168 | --- 169 | 170 | @state: green 171 | 172 |

173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /content/html5/case-study.md: -------------------------------------------------------------------------------- 1 | ## 实践 2 | 3 | --- 4 | 5 | ### MEAN开发 6 | 7 | * Mongodb 8 | * Express 9 | * Node 10 | * Angular 11 | 12 | --- 13 | 14 | [移动端Demo](http://skyweaver213.github.io/slide/widget/slide1/slide.html) 15 | -------------------------------------------------------------------------------- /content/html5/css3.md: -------------------------------------------------------------------------------- 1 | ## CSS3新特性 2 | 3 | --- 4 | 5 | * 高级选择器 6 | * 圆角 7 | * 阴影 8 | * 背景缩放 9 | * Flexbox布局 10 | * 媒体查询和响应式设计 11 | 12 | --- 13 | 14 | ### 兄弟选择器 15 | 16 | * E ~ F 一般兄弟选择器 17 | * E + F 相邻兄弟选择器 18 | 19 | --- 20 | 21 | ### 兄弟选择器 22 | 23 | 25 | 26 | --- 27 | 28 | ### :checked与兄弟选择器结合 29 | 30 | 32 | 33 | ### 结构伪类 34 | 35 | * :first-child 36 | * :last-child 37 | * :nth-child() 38 | 39 | --- 40 | 41 | 42 | 43 | ### :not() 否定伪类 44 | 45 | 47 | 48 | --- 49 | 50 | ### border-radius 圆角 51 | 52 | * border-radius: 5px 53 | * 可以指定四个方向 54 | * 可以使用百分数 55 | 56 | --- 57 | 58 | 60 | 61 | --- 62 | 63 | ### 阴影 64 | 65 | 66 | 67 | --- 68 | 69 | ### background-size 背景缩放 70 | 71 | 73 | 74 | --- 75 | 76 | ### Flexbox可控制容器内的子元素： 77 | 78 | * 水平或垂直排成一行 79 | * 控制子元素对齐方式 80 | * 控制子元素的宽度/高度 81 | * 控制子元素显示顺序 82 | * 控制子元素是否折行 83 | 84 | --- 85 | 86 | Flexbox是W3C布局方面标准中的*终极武器* 87 | 88 | --- 89 | 90 | ![axis](img/css3/axis.png) 91 | 92 | --- 93 | 94 | [Flexbox Demo](http://dabblet.com/gist/95e5b65622aeae4d031d) 95 | 96 | --- 97 | 98 | ### 响应式设计是什么？ 99 | 100 | 一种能在不同屏幕大小的设备上都能提供优秀的浏览体验的网页设计方案 101 | 102 | --- 103 | 104 | 105 | ### media query 106 | 107 | 针对不同的屏幕，应用不同的样式 108 | 109 | ```markup 110 | 112 | ``` 113 | 114 | ```css 115 | @media screen and (min-width: 480px) { 116 | .selector { … } 117 | } 118 | ``` 119 | 120 | --- 121 | 122 | ### 可以查询的media 123 | 124 | * width 125 | * height 126 | * device-width 127 | * device-height 128 | * device-pixel-ratio 129 | * orientation 130 | 131 | --- 132 | 133 | 134 | @state: green 135 | 136 |

137 | -------------------------------------------------------------------------------- /content/html5/file-api.md: -------------------------------------------------------------------------------- 1 | ## File API 2 | 3 | --- 4 | 5 | ### File API是什么 6 | 7 | * 允许开发者访问用户选中的文件 8 | * 文件选择框 9 | * 文件拖放 10 | 11 | --- 12 | 13 | ### 通过文件选择框获取文件对象 14 | 15 | * 监听``的`change`事件 16 | * 通过 input.files 属性获取文件对象列表 17 | 18 | --- 19 | 20 | ### [Demo](http://jsbin.com/jarice/edit?js,output) 21 | 22 | --- 23 | 24 | ### 通过拖拽获取文件对象 25 | 26 | * 选定一个可拖放的区域 27 | * 给这个元素绑定dragenter、dragover事件并组织默认行为 28 | * 绑定drop事件，通过 e.dataTransfer.files 获取文件对象 29 | 30 | --- 31 | 32 | ### [Demo](http://jsbin.com/yogamu/4/edit?html,js,output) 33 | 34 | --- 35 | 36 | ### 读取文件内容 37 | 38 | * fileReader.readAsBinaryString(Blob|File) 39 | * fileReader.readAsText(Blob|File, opt_encoding) 40 | * fileReader.readAsDataURL(Blob|File) 41 | * fileReader.readAsArrayBuffer(Blob|File) 42 | 43 | --- 44 | 45 | ### Blob 46 | 47 | * Binary large object 48 | * 二进制文件容器 49 | * 可以修改 50 | 51 | --- 52 | 53 | ### [Data URL Demo](http://jsbin.com/zosine/edit?html,js,console,output) 54 | 55 | --- 56 | 57 | ### [Read Text Demo](http://jsbin.com/zecabi/2/edit?html,js,output) 58 | 59 | --- 60 | 61 | ### 文件上传 62 | 63 | * 使用FormData和XMLHttpRequest 64 | * 不使用FormData（上传前进行图片压缩） 65 | * fileReader.readAsBinaryString() 66 | * xmlHttpRequest.sendAsBinary() 67 | 68 | --- 69 | 70 | ### [示例：图片处理](http://makeitsolutions.com/labs/jic/) 71 | 72 | --- 73 | 74 | 75 | @state: green 76 | 77 |

78 | -------------------------------------------------------------------------------- /content/html5/geolocation.md: -------------------------------------------------------------------------------- 1 | ## 地理位置 2 | 3 | --- 4 | 5 | ### Geolocation 6 | 7 | * 使用HTML5的geolocation API可以获取地理位置 8 | * 浏览器会采用GPS、WIFI、基站等多种方式定位 9 | * 注意：使用地理位置信息需要得到用户授权 10 | 11 | --- 12 | 13 | ### get current position 14 | 15 | ```javascript 16 | navigator.geolocation.getCurrentPosition(function(pos){ 17 | console.log(pos); 18 | }, function(err){ 19 | console.log(err); 20 | }, { 21 | enableHighAccuracy: true, 22 | timeout: 5000, 23 | maximumAge: 5000 24 | }); 25 | ``` 26 | 27 | --- 28 | 29 | ###demo 30 | 31 | [代码](http://output.jsbin.com/kuwuzi) 32 | 33 | --- 34 | 35 | ### watch position 36 | 37 | * 持续跟踪设备位置的改变 38 | * navigator.geolocation.watchPosition 39 | * navigator.geolocation.clearWatch 40 | 41 | --- 42 | 43 | ### 经纬度 --> 地址 44 | 45 | * 逆向地理编码API 46 | 47 | --- 48 | 49 | ### Geolocation使用注意事项 50 | 51 | * 用户授权过程必不可少 52 | * 定位速度比较慢 53 | * Google服务不稳定 54 | 55 | --- 56 | 57 | ### 兼容性 58 | 59 | * IE9+ 60 | * Firefox 61 | * Chrome 62 | * iOS 63 | * Android 64 | 65 | --- 66 | 67 | @state: green 68 | 69 |

70 | 71 | 72 | -------------------------------------------------------------------------------- /content/html5/getting-started.md: -------------------------------------------------------------------------------- 1 | 2 | ## 深入 HTML 3 | 4 | 赵文博 5 | 6 | --- 7 | 8 | ### 赵文博 9 | 10 | * 2008年开始专注前端 11 | * 先后在金山、百度、Yahoo!任职 12 | * 现在负责360商业产品前端团队 13 | 14 |

15 |   16 |   17 |   18 |   19 |

20 | 21 | --- 22 | 23 | ### 课程安排 24 | 25 | * HTML5特性篇 26 | * 实例和答疑篇 27 | 28 | --- 29 | 30 | ### HTML5 特性 31 | 32 | | | | | | 33 | |----------|---------|------------|-------------| 34 | | HTML5概述 | 离线存储 | Canvas画布 | Geolocation | 35 | | 视频和音频 | Web Form 2 | Web Font | File API | 36 | | WebSocket | CSS3新特性 | 动画效果 | 37 | 38 | 42 | 43 | --- 44 | 45 | ### 实例和答疑篇 46 | 47 | * NodeJS介绍 48 | * AngularJS 49 | * MEANS项目实例 50 | 51 | --- 52 | 53 | ### 准备工作 54 | 55 | * 练习环境 56 | * [Chrome](http://www.google.com/chrome/)或[Firefox](https://www.mozilla.org/)浏览器 57 | * [Atom](https://atom.io/)或[Sublime Text](http://www.sublimetext.com/)编辑器 58 | 59 | --- 60 | 61 | @state: green 62 | 63 |

64 | -------------------------------------------------------------------------------- /content/html5/html5-overview.md: -------------------------------------------------------------------------------- 1 | ## HTML5 概览 2 | 3 | --- 4 | 5 | ### HTML5的兴起 6 | 7 | * XHTML2 vs. HTML5 8 | * 移动Web 9 | 10 | --- 11 | 12 | ### HTML 5 设计思想 13 | 14 | * 兼容已有内容 15 | * 避免不必要的复杂性 16 | * 解决现实的问题 17 | * 优雅降级 18 | * 尊重事实标准 19 | * 用户 》开发者 》浏览器厂商 》标准制定者 》理论完美 20 | 21 | --- 22 | 23 | ### HTML5 有哪些东西？ 24 | 25 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |

语义化标签
性能和集成
连通性
离线与存储

设备访问
多媒体
CSS3样式
图形与3D效果
51 | 52 | --- 53 | 54 | ### [语义化](/demos/html5/semantics.html) 55 | 56 | * 结构 57 | * section、article、nav、header、footer、aside、main 58 | * 媒体 59 | * video、audio 60 | * 表单 61 | * 新增表单验证和表单类型 62 | * 其它 63 | * figure、data、time、progress 64 | 65 | --- 66 | 67 | ### 性能 & 集成 68 | 69 | * [Web Workers](http://html5demos.com/worker) 70 | * [拖放](http://html5demos.com/dnd-upload) 71 | * XMLHttpRequest Level 2 72 | * [History API](http://html5demos.com/history/second) 73 | * requestAnimationFrame 74 | * [全屏 API](http://davidwalsh.name/demo/fullscreen.php) 75 | 76 | --- 77 | 78 | ### 连通性 79 | 80 | * Web Sockets 81 | * [WebRTC](http://www.clicktorelease.com/code/optical-flow-webrtc/) 82 | 83 | --- 84 | 85 | ### 设备访问 86 | 87 | * 使用地理位置定位 88 | * 检测设备方向 89 | 90 | --- 91 | 92 | ### 离线 & 存储 93 | 94 | * 离线资源：应用程序缓存 95 | * 在线和离线事件 96 | * localStorage 97 | * IndexedDB 98 | * 文件API 99 | 100 | --- 101 | 102 | ### CSS3样式 103 | 104 | * 更灵活的布局方式 105 | * 动画效果 106 | * 阴影、圆角、边框等 107 | 108 | --- 109 | 110 | ### 多媒体 111 | 112 | * 视频 113 | * 音频 114 | 115 | --- 116 | 117 | ### 图形与3D效果 118 | 119 | * Canvas绘图 120 | * SVG矢量图 121 | * WebGL 122 | 123 | --- 124 | ### 兼容性 125 | 126 | * 特性支持 127 | * 降级方案 128 | * 兼容性速查 [Can I Use.com](http://caniuse.com/) 129 | * bug 130 | * [StackOverflow](http://stackoverflow.com/) 131 | * [Android Bug List](https://code.google.com/p/android/issues/list) 132 | 133 | --- 134 | 135 | @state: green 136 | 137 |

138 | -------------------------------------------------------------------------------- /content/html5/html5-vs-native.md: -------------------------------------------------------------------------------- 1 | ## HTML5 vs Native 2 | 3 | --- 4 | 5 | 10 | 11 | | | HTML5 | 原生应用 | 12 | |--------------|----------------------|----------------------| 13 | | 更新 | 只需要服务器部署新版本，比较方便 | 需要发布新版客户端，需要商店审核，新版覆盖需要较长时间 | 14 | | 动画 | 可以实现基本的动画效果，在低配置机器上不流畅 | 动画效果可以很炫，很流畅 | 15 | | 加载速度 | 较慢。尤其是首次，可以充分利用缓存机制做优化 | 较快 | 16 | | 开发成本 | 低。Web标准技术已经非常适合开发应用 | 高，人员、时间 | 17 | | 访问硬件能力 | 仅限部分API | 所有设备权限 | 18 | | 适用场景 | 内容内应用 | 重交互类应用 | 19 | 20 | --- 21 | 22 | ### Hybrid 应用 23 | 24 | * 在原生应用中嵌入 HTML5 页面 25 | * WebView 26 | 27 | --- 28 | 29 | ### 已有框架 30 | 31 | * PhoneGap 32 | * Apache Cordova 33 | * Appcelerator Titanium 34 | * AppCan 35 | 36 | --- 37 | 38 | ### 客户端和 HTML5 通信 39 | 40 | * 客户端调用HTML5接口 41 | * javascript: 伪协议 42 | * HTML5中调用客户端功能 43 | * Android: 截获页面上的prompt, console等调用 44 | * Android: addJavascriptInterface 45 | * iOS: 自定义协议拦截 46 | -------------------------------------------------------------------------------- /content/html5/multimedia.md: -------------------------------------------------------------------------------- 1 | ## Video 和 Audio 2 | 3 | --- 4 | 5 | ### Video 6 | 7 | * HTML5 标签 8 | * 不使用任何插件直接播放视频 9 | * 提供JavaScript API控制视频播放暂停等 10 | 11 | --- 12 | 13 | ### 引入 14 | 15 | ```markup 16 | 18 | 19 | 23 | ``` 24 | 25 | --- 26 | 27 | ### 标签的属性 28 | 29 | * controls 是否显示控制元素 30 | * src 视频源 31 | * autoplay 自动播放 32 | * preload 预先加载 33 | 34 | --- 35 | 36 | ### 视频格式 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |
格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No
75 | 76 | --- 77 | 78 | 79 | 80 | --- 81 | 82 | ### [JavaScript控制](/demos/html5/video.html) 83 | 84 | ```javascript 85 | var v = document.getElementById('video'); 86 | v.play(); 87 | v.pause(); 88 | v.load(); 89 | ``` 90 | 91 | --- 92 | 93 | ### 事件 94 | 95 | * play 96 | * pause 97 | * waiting 98 | * seeking 99 | * timeupdate 100 | 101 | --- 102 | 103 | ### Video与Canvas结合 104 | 105 | * drawImage(video, 0, 0, w, h) 106 | * [demo](http://html5doctor.com/demos/video-canvas-magic/demo1.html) 107 | 108 | --- 109 | 110 | ### Audio 111 | 112 | ```markup 113 | 115 | 116 | 120 | ``` 121 | 122 | --- 123 | 124 | ### Web Audio API 125 | 126 | * [API](https://webaudio.github.io/web-audio-api/) 127 | * [Demo](http://mdn.github.io/violent-theremin/) 128 | 129 | --- 130 | 131 | 132 | @state: green 133 | 134 |

135 | 136 | -------------------------------------------------------------------------------- /content/html5/web-fonts.md: -------------------------------------------------------------------------------- 1 | ## Web fonts 2 | 3 | --- 4 | 5 | ### Web Fonts 6 | 7 | * 在页面上使用服务器字体 8 | * 满足设计师对特殊字体使用的需求 9 | * 与使用图片展示特殊字体的方案对比 10 | * 文件更小 11 | * 易于维护 12 | 13 | --- 14 | 15 | 16 | 17 |

Grumpy wizards make toxic brew for the evil Queen and Jack.

18 | 19 | --- 20 | 21 |

Grumpy wizards make toxic brew for the evil Queen and Jack.

22 | 23 | --- 24 | 25 |

Grumpy wizards make toxic brew for the evil Queen and Jack.

26 | 27 | --- 28 | 29 | ### 引入Web Font 30 | 31 | ```css 32 | @font-face { 33 | font-family: 'fancyFont'; 34 | src: url('http://www.example.com/fancyFont.eot'); 35 | src: url('http://www.example.com/fancyFont.eot?#iefix') format('embedded-opentype'), 36 | url('http://www.example.com/fancyFont.woff') format('woff'), /* 所有现代浏览器 */ 37 | url('http://www.example.com/fancyFont.ttf') format('truetype'), /* Safari, Android, iOS */ 38 | url('http://www.example.com/fancyFont.svg#svgFontName') format('svg'); /* Legacy iOS */ 39 | } 40 | .title { 41 | font-family: 'fancyFont'; 42 | } 43 | ``` 44 | 45 | --- 46 | 47 | ### 中文字体 48 | 49 | * 中文字体太大，十几到几十兆 50 | 51 | --- 52 | 53 | ### 字体裁切工具 54 | 55 | * [fontmin](http://ecomfe.github.io/fontmin/) 56 | * [fontspider](http://font-spider.org/) 57 | 58 | --- 59 | 60 | ### Demo 61 | 62 | --- 63 | 64 | ### UTF-8 字符 65 | 66 |

♥ ✪ ∞ ✉ ⚠ ✈ ✿ ☯

67 | 68 | --- 69 | 70 | ### 图标字体 71 | 72 | * 将图标做成字体在页面上使用 73 | * 优点 74 | * 随意调整大小、颜色、阴影、透明度等 75 | * 尺寸小 76 | 77 | --- 78 | 79 | ### 使用图标库 80 | 81 | * [Fontawesome](http://fortawesome.github.io/Font-Awesome/icons/) 82 | * [iconmoon](https://icomoon.io/app) 83 | * [阿里图标库](http://www.iconfont.cn/) 84 | 85 | --- 86 | 87 | ### 自己动手制作Font icons 88 | 89 | * 导出SVG文件 90 | * 使用工具生成 91 | * [fontello](http://fontello.com/) 92 | * [customfont](http://fontcustom.com/) 93 | 94 | --- 95 | 96 | ### 浏览器支持 97 | 98 | * IE 4+ 99 | * Firefox 100 | * Chrome 101 | * Android 102 | * Safari 103 | 104 | --- 105 | 106 | ### 注意事项 107 | 108 | * 渲染问题 109 | * Chrome 阻塞渲染 + 超时 110 | * 其它浏览器：页面闪动 111 | * 解决办法：base64后inline 112 | * 锯齿（Windows Chrome下） 113 | * 版权 114 | 115 | --- 116 | 117 | @state: green 118 | 119 |

120 | -------------------------------------------------------------------------------- /content/html5/web-form-2.md: -------------------------------------------------------------------------------- 1 | ## Web Form 2.0 2 | 3 | --- 4 | 5 | ### placeholder 6 | 7 | 8 | 9 | ```markup 10 | 11 | ``` 12 | 13 | --- 14 | 15 | ### email 16 | 17 |
18 | 19 |
20 | 21 | ```markup 22 | 23 | ``` 24 | 25 | --- 26 | 27 | ### url 28 | 29 | 30 |
31 | 32 |
33 | 34 | ```markup 35 | 36 | ``` 37 | 38 | --- 39 | 40 | ### number 41 | 42 |
43 | 44 |
45 | 46 | ```markup 47 | 48 | ``` 49 | 50 | --- 51 | 52 | ### range 53 | 54 |
55 | 56 |
57 | 58 | ```markup 59 | 60 | ``` 61 | 62 | --- 63 | 64 | ### 日期时间 65 | 66 |
67 |

date:

68 |

datetime:

69 |

datetime-local:

70 |

month:

71 |

week:

72 |

time:

73 |
74 | 75 | --- 76 | 77 | ### search 78 | 79 |
80 | 81 |
82 | 83 | ```markup 84 | 85 | ``` 86 | 87 | --- 88 | 89 | ### color 90 | 91 |
92 | 93 |
94 | 95 | ```markup 96 | 97 | ``` 98 | 99 | --- 100 | 101 | ### 选择多个文件 102 | 103 |
104 | 105 |
106 | 107 | ```markup 108 | 109 | ``` 110 | 111 | 112 | --- 113 | 114 | ### 必填验证 115 | 116 |
117 | 118 |
119 | 120 | ```markup 121 | 122 | ``` 123 | 124 | --- 125 | 126 | ### 正则验证 127 | 128 |
129 | 130 |
131 | 132 | ```markup 133 | 139 | ``` 140 | 141 | --- 142 | 143 | ### 表单验证JavaScript接口 144 | 145 | * 方法 146 | * checkValidity() 147 | * setCustomValidity() 148 | 149 | --- 150 | 151 | ### 发送表单数据 152 | 153 | ```javascript 154 | var formElement = document.querySelector("form"); 155 | var formData = new FormData(formElement); 156 | var request = new XMLHttpRequest(); 157 | request.open("POST", "submitform.php"); 158 | request.send(formData); 159 | ``` 160 | 161 | --- 162 | 163 | @state: green 164 | 165 |

166 | 167 | -------------------------------------------------------------------------------- /content/html5/web-socket.md: -------------------------------------------------------------------------------- 1 | ## WebSocket 2 | 3 | --- 4 | 5 | ### 什么是WebSocket 6 | 7 | * 在网络浏览器和服务器之间建立Socket连接 8 | * 可以建立浏览器和服务器间的全双工连接 9 | 10 | --- 11 | 12 | ### WebSocket 协议 13 | 14 | +---------------------------+--------------+ 15 | | XMLHttpRequest | WebSocket | 16 | +---------------------------+------+ + 17 | | HTTP | | 18 | +----------------------------------+-------+ 19 | | TCP | 20 | +------------------------------------------+ 21 | | IP | 22 | +------------------------------------------+ 23 | 24 | --- 25 | 26 | ### 连接过程 27 | 28 | 客户端发起 WebSocket 握手请求，基于HTTP 29 | 30 | ``` 31 | GET /chat HTTP/1.1 32 | Host: example.com:8000 33 | Upgrade: websocket 34 | Connection: Upgrade 35 | Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== 36 | Sec-WebSocket-Version: 13 37 | ``` 38 | 39 | --- 40 | 41 | 服务器回应握手请求 42 | 43 | ``` 44 | HTTP/1.1 101 Switching Protocols 45 | Upgrade: websocket 46 | Connection: Upgrade 47 | Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= 48 | ``` 49 | 50 | --- 51 | 52 | 交换数据帧 53 | 54 | 
 55 | 0                   1                   2                   3
 56 | 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
 57 | +-+-+-+-+-------+-+-------------+-------------------------------+
 58 | |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
 59 | |I|S|S|S|  (4)  |A|     (7)     |            (16/64)            |
 60 | |N|V|V|V|       |S|             |   (if payload len==126/127)   |
 61 | | |1|2|3|       |K|             |                               |
 62 | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
 63 | |    Extended payload length continued, if payload len == 127   |
 64 | + - - - - - - - - - - - - - - - +-------------------------------+
 65 | |                               | Masking-key, if MASK set to 1 |
 66 | +-------------------------------+-------------------------------+
 67 | |    Masking-key (continued)    |          Payload Data         |
 68 | +-------------------------------- - - - - - - - - - - - - - - - +
 69 | :                   Payload Data continued ...                  :
 70 | + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
 71 | |                   Payload Data continued ...                  |
 72 | +---------------------------------------------------------------+
 73 |
74 | 75 | --- 76 | 77 | ### 心跳检测 78 | 79 | * Ping 80 | * Pong 81 | 82 | --- 83 | 84 | ### 关闭连接 85 | 86 | * 发送特殊帧数据 87 | * 0x08 88 | 89 | --- 90 | 91 | ### 浏览器端创建连接 92 | 93 | ```javascript 94 | var connection = new WebSocket('ws://example.com/echo'); 95 | ``` 96 | 97 | --- 98 | 99 | ### 在浏览器端与服务器通信 100 | 101 | ```javascript 102 | connection.onopen = function () { 103 | console.log('连接到服务器啦！'); 104 | }; 105 | 106 | connection.send('消息内容'); 107 | 108 | connection.onerror = function (error) { 109 | console.log('WebSocket Error ' + error); 110 | }; 111 | 112 | connection.onmessage = function (e) { 113 | console.log('Server: ' + e.data); 114 | }; 115 | ``` 116 | 117 | --- 118 | 119 | ### 服务端接处理 120 | 121 | * [socket.io](http://socket.io/) 122 | * [Websocket-Node](https://github.com/theturtle32/WebSocket-Node) 123 | 124 | --- 125 | 126 | ```javascript 127 | //node 128 | var WebSocketServer = require('websocket').server; 129 | var http = require('http'); 130 | 131 | var server = http.createServer(function(request, response) { 132 | console.log((new Date()) + ' Received request for ' + request.url); 133 | response.writeHead(404); 134 | response.end(); 135 | }); 136 | server.listen(8080, function() { 137 | console.log((new Date()) + ' Server is listening on port 8080'); 138 | }); 139 | 140 | wsServer = new WebSocketServer({ 141 | httpServer: server, 142 | autoAcceptConnections: false 143 | }); 144 | 145 | wsServer.on('request', function(request) { 146 | var connection = request.accept('echo-protocol', request.origin); 147 | console.log((new Date()) + ' Connection accepted.'); 148 | connection.on('message', function(message) { 149 | connection.send('some message'); 150 | }); 151 | connection.on('close', function(reasonCode, description) { 152 | console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); 153 | }); 154 | }); 155 | ``` 156 | 157 | --- 158 | 159 | ### [实例：聊天程序](http://localhost:3000/) 160 | 161 | --- 162 | 163 | @state: green 164 | 165 |

166 | -------------------------------------------------------------------------------- /content/mobile-web-1.md: -------------------------------------------------------------------------------- 1 | # 移动Web开发 2 | ### 赵文博 3 | #### webzhao@gmail.com 4 | 5 | --- 6 | 7 | ### 课程内容 8 | 9 | * 移动Web的世界 10 | * Viewport与屏幕分辨率 11 | * 响应式设计 12 | * Touch事件 13 | * 高性能动画 14 | * 使用移动设备API 15 | * 移动Web调试 16 | 17 | 18 | --- 19 | 20 | ## 进入移动Web的世界 21 | 22 | --- 23 | 24 | ### 什么是移动Web 25 | 26 | * 使用Web标准技术 27 | * HTML(5) 28 | * CSS 29 | * JavaScript 30 | * SVG 31 | * 在智能移动设备上使用 32 | * 手机（iPhone、Android） 33 | * 平板电脑 34 | 35 | --- 36 | 37 | ### 手机 - 屏幕 38 | 39 | ![screen](http://p8.qhimg.com/d/inn/9d6d2597/stat.png) 40 | 41 | --- 42 | 43 | ### 手机 - 分辨率 44 | 45 | ![resolution](img/mobile/resolution-chart.png) 46 | 47 | --- 48 | 49 | ### 手机 - GPS 50 | 51 | * 绝大多数手机具备GPS 52 | * 可以获取精确地理位置 53 | 54 | --- 55 | 56 | ### 陀螺仪 57 | 58 | * 获取手机在三维空间的运动加速度 59 | * 可以实现摇一摇等功能 60 | 61 | --- 62 | 63 | ### 相机 64 | 65 | * 用户可以上传照片文件 66 | * 500 ～ 1300万像素 67 | * 一般照片尺寸为1 ～ 5M 68 | 69 | --- 70 | 71 | ## 移动网络 72 | 73 | --- 74 | 75 | ### 移动网络 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
网络类型所占比例平均速度
WiFi69.1%1M/S
4G7.5%0.8M/S
3G10.9%120K/S
2G12.4%20K/S
108 | 109 | --- 110 | 111 | ## 移动操作系统 112 | 113 | --- 114 | 115 | ### 两大平台 116 | 117 | * iOS 32% 118 | * Android 68% 119 | * Windows Phone 120 | 121 | 122 | --- 123 | 124 | ### iOS 125 | 126 | iOS Version 127 | 128 | --- 129 | 130 | ### Android 131 | 132 | Android Version 133 | 134 | --- 135 | 136 | ## 移动端浏览器 137 | 138 | --- 139 | 140 | ### 浏览器 141 | 142 | * 都是基于Webkit内核 143 | * 类型 144 | - 内置浏览器 145 | - 第三方浏览器 146 | - WebView 147 | 148 | --- 149 | 150 | ### 内置浏览器 151 | 152 | * iOS 153 | - Safari 154 | * Android 4.3及以下 155 | - Android内置浏览器 156 | * Android 4.4及以上 157 | - Google停止开发Android内置浏览器 158 | - 系统内置浏览器由手机厂商自己决定（自己开发、Chrome等） 159 | 160 | --- 161 | 162 | ### 第三方浏览器 163 | 164 | * 用户自行下载安装的浏览器 165 | * 用户量最多 166 | * UC 167 | * QQ 168 | * Opera 169 | 170 | --- 171 | 172 | ### 国内浏览器 173 | 174 | * 附加“功能” 175 | * 省流量 176 | * 夜间模式 177 | * 滑动前进后退 178 | * 开发者文档 179 | * [UC](http://www.uc.cn/business/developer/) 180 | * [QQ](http://open.mb.qq.com/doc?id=1201) 181 | 182 | --- 183 | 184 | ### WebView 185 | 186 | * 一种在应用中嵌入页面的技术 187 | * 在Android和iOS中都可以实现 188 | * 最常用的WebView 189 | - 微信 190 | - 微博 191 | 192 | --- 193 | 194 | ### iOS上的WebView 195 | 196 | * 苹果安全限制比较严格 197 | * 只能使用iOS提供的UIWebView控件 198 | * 比Safari性能稍微差一些 199 | 200 | --- 201 | 202 | ### Android 203 | 204 | * 默认的WebView 205 | - 4.4以下 基于Android内置浏览器 206 | - 4.4及以上 基于Chromium 207 | * 自定义WebView 208 | - 腾讯X5 209 | - 安卓的开放造成的兼容性问题 210 | 211 | --- 212 | 213 | ### 兼容性 214 | 215 | * 特性支持 216 | * 降级方案 217 | * 兼容性速查 [Can I Use.com](http://caniuse.com/) 218 | * bug 219 | * [StackOverflow](http://stackoverflow.com/) 220 | * [Android Bug List](https://code.google.com/p/android/issues/list) 221 | 222 | 223 | --- 224 | 225 | ### 开发工具 226 | 227 | * Chrome浏览器 228 | * 脚本库 229 | * 原生JS 230 | * Zepto 231 | 232 | -------------------------------------------------------------------------------- /content/mobile-web-3.md: -------------------------------------------------------------------------------- 1 | ## 响应式设计 2 | 3 | --- 4 | 5 | ### 响应式设计是什么？ 6 | 7 | 一种能在不同屏幕大小的设备上都能提供优秀的浏览体验的网页设计方案 8 | 9 | --- 10 | 11 | ### 实际应用中的响应式设计 12 | 13 | * [Microsoft](http://www.microsoft.com/) 14 | * [Baidu](https://www.baidu.com/) 15 | 16 | --- 17 | 18 | ### 响应式设计中的图片 19 | 20 | * 大图随容器自动缩放，保持高宽比 21 | * max-width: 100% 22 | * [Demo](http://output.jsbin.com/hifubu) 23 | 24 | --- 25 | 26 | ### 背景图片 27 | 28 | * background-size: cover 29 | * [Demo](http://www.h5shuo.com/pc) 30 | 31 | --- 32 | 33 | ### 练习： 34 | 35 | 一栏定宽，另一栏自适应 36 | 37 | --- 38 | 39 | ### 多种实现方式 40 | 41 | * 绝对定位与margin 42 | * float与BFC 43 | * 模拟table 44 | * flex布局 45 | 46 | --- 47 | 48 | ### flex box详解 49 | 50 | http://flexboxin5.com/ 51 | 52 | --- 53 | 54 | ### flex box新旧语法 55 | 56 | http://pleeease.io/play/ 57 | 58 | --- 59 | 60 | ### 练习 61 | 62 | 导航栏布局，多栏平均分配 63 | 64 | --- 65 | 66 | ### 多种实现方式 67 | 68 | * float + 百分比宽度 69 | * 模拟table 70 | * flex布局 71 | 72 | --- 73 | 74 | ### 练习 75 | 76 | 网格布局，自动换行 77 | 78 | --- 79 | 80 | ### 实现方案 81 | 82 | * float + 百分比宽度 83 | * inline-block + justify 84 | * flex 85 | 86 | --- 87 | 88 | ### media query 89 | 90 | 针对不同的屏幕，应用不同的样式 91 | 92 | ```markup 93 | 95 | ``` 96 | 97 | ```css 98 | @media screen and (min-width: 480px) { 99 | .selector { … } 100 | } 101 | ``` 102 | 103 | --- 104 | 105 | ### 可以查询的media 106 | 107 | * width 108 | * height 109 | * device-width 110 | * device-height 111 | * device-pixel-ratio 112 | * orientation 113 | 114 | --- 115 | 116 | ### 练习 117 | 118 | 使用media query实现菜单自动折行 119 | 120 | --- 121 | 122 | ### JS的自适应 123 | 124 | * match media 125 | * orientationChange事件 126 | 127 | --- 128 | 129 | ### 高度的响应（100%高） 130 | 131 | * height: 100%生效条件 132 | * 父容器高度不依赖于它的高度 133 | * html, body { height: 100% } 134 | 135 | --- 136 | 137 | ### 练习：几页全屏应用 138 | 139 | [Demo](http://output.jsbin.com/dabuya) 140 | 141 | 142 | -------------------------------------------------------------------------------- /content/mobile-web-4.md: -------------------------------------------------------------------------------- 1 | ## Touch事件 2 | 3 | --- 4 | 5 | ### 鼠标事件 6 | 7 | - mousedown 8 | - mousemove 9 | - mouseup 10 | - click 11 | 12 | --- 13 | 14 | ### touch事件 15 | 16 | - touchstart 17 | - touchmove 18 | - touchend 19 | - touchcancel 20 | 21 | --- 22 | 23 | ### 兼容鼠标事件 24 | 25 | ![touch](img/mobile/touch.png) 26 | 27 | --- 28 | 29 | ### 事件触发顺序 30 | 31 | [代码](http://jsbin.com/qewiya/1/edit?html,js,output) 32 | 33 | --- 34 | 35 | ![http://output.jsbin.com/qewiya](http://qr.liantu.com/api.php?w=500&text=http://output.jsbin.com/qewiya) 36 | 37 | --- 38 | 39 | ### 为什么click会有延迟？ 40 | 41 | * 移动浏览器双击缩放页面 42 | * 触摸一下之后要判断是否有第二下 43 | 44 | --- 45 | 46 | ### 使用tap事件 47 | 48 | * zepto 49 | * fastclick 50 | * hammer 51 | 52 | --- 53 | 54 | ### 事件穿透 55 | 56 | [代码](http://jsbin.com/nidate/4/edit) 57 | 58 | --- 59 | 60 | ![http://output.jsbin.com/nidate/4](http://qr.liantu.com/api.php?w=500&text=http://output.jsbin.com/nidate/4) 61 | 62 | --- 63 | 64 | ### TouchEvent对象 65 | 66 | * touches 67 | * targetTouches 68 | * changedTouches 69 | 70 | --- 71 | 72 | ### Touch对象 73 | 74 | * clientX 75 | * clientY 76 | * pageX 77 | * pageY 78 | 79 | --- 80 | 81 | ### 练习 82 | 83 | [图片拖动](http://output.jsbin.com/josoda) 84 | 85 | --- 86 | 87 | ### touchcancel事件 88 | 89 | * 被系统通知、应用切换等中断 90 | * 超出边界 91 | 92 | 93 | -------------------------------------------------------------------------------- /content/mobile-web-5.md: -------------------------------------------------------------------------------- 1 | ## 高性能动画 2 | 3 | --- 4 | 5 | ### transition（过渡） 6 | 7 | * 从一个状态到另一个状态的过渡 8 | * 动画的意义：告诉用户发生了什么 9 | 10 | --- 11 | 12 | ### 指定transition 13 | 14 | * 什么属性发生变化时需要过渡 15 | * 过渡持续多长时间 16 | * 速度变化是什么样 17 | * 是否有延迟 18 | 19 | --- 20 | 21 | ### transition 22 | 23 | ```css 24 | transition: all 1s linear 0.5s; 25 | transition: width 1s linear, height 1s linear 1s; 26 | ``` 27 | 28 | [代码](http://jsbin.com/zivoji) 29 | 30 | --- 31 | 32 | ### transition-property 33 | 34 | * 指定哪些属性是需要过渡的 35 | * 可以指定多个用逗号隔开 36 | 37 | --- 38 | 39 | ### transition-duration 40 | 41 | * 指定过渡时间 42 | * 可以指定多个，和属性对应 43 | 44 | --- 45 | 46 | ### transition-timing-function 47 | 48 | * 指定过渡的过程中，属性值变化的快慢 49 | * [常见时间函数](http://cubic-bezier.com) 50 | 51 | --- 52 | 53 | ### transition-delay 54 | 55 | * 指定过渡要延迟多久才开始 56 | * 可以指定过个，和属性对应 57 | 58 | --- 59 | 60 | ### transitionend 事件 61 | 62 | * 在JavaScript中，可以监听transitionend事件来得知过渡完成 63 | * 注意：避免使用setTimeout来做动画完成后的事 64 | 65 | --- 66 | 67 | ### 练习：翻页应用 68 | 69 | 页面切换放手后的动画 70 | 71 | --- 72 | 73 | ### animation 74 | 75 | * 动画可以实现更复杂的样式变化效果 76 | 77 | --- 78 | 79 | ### 使用CSS animation 80 | 81 | * 定义关键帧 82 | * 指定动画行为 83 | 84 | --- 85 | 86 | ### demo 87 | 88 | [代码](http://jsbin.com/yazaqe/edit?html,output) 89 | 90 | --- 91 | 92 | ### transform 变形 93 | 94 | * 对元素进行变形 95 | - 平移 96 | - 旋转 97 | - 缩放 98 | - 扭曲 99 | * 例如 100 | - transform: translate(10px, 20px) scale(0.5); 101 | 102 | --- 103 | 104 | ### translate 平移 105 | 106 | * translate(10px, 10px) 107 | * translate3d(10px, 10px, 100px) 108 | * translateX(10px) 109 | * translateY(500px) 110 | 111 | --- 112 | 113 | ### rotate 114 | 115 | * rotate(30deg) 116 | * transform-origin 117 | 118 | --- 119 | 120 | ### 3D 121 | 122 | * translate3d(10px, 0, 0) 123 | * rotateX() 或 rotateY(); 124 | 125 | --- 126 | 127 | ## 高性能动画 128 | 129 | --- 130 | 131 | ### 浏览器渲染过程 132 | 133 | ```markup 134 | 135 | 136 |

Article

137 |

Hi, I'm Banana

138 |
139 | 140 |
141 | 142 | 143 | ``` 144 | 145 | --- 146 | 147 | ### DOM 148 | 149 | dom 150 | 151 | --- 152 | 153 | ### DOM + CSS = Render Tree 154 | 155 | render tree 156 | 157 | --- 158 | 159 | ### layout 布局 160 | 161 | * 确定元素的位置 162 | * 确定元素的高宽 163 | * 确定元素的层叠关系 164 | 165 | --- 166 | 167 | ### 绘制 168 | 169 | * 绘制颜色 170 | * 背景颜色 171 | * 图片 172 | * 文字 173 | * 阴影 174 | 175 | --- 176 | 177 | ### GPU合成 178 | 179 | * 上传网页图层到GPU 180 | * GPU将图层合成 181 | * 显示到屏幕 182 | 183 | --- 184 | 185 | ### 浏览器渲染 186 | 187 | * 三个阶段：Layout、Paint、Composite 188 | * 修改不同的CSS属性会从不同阶段开始重新渲染 189 | * 重新开始得越靠前，花费时间越多 190 | 191 | --- 192 | 193 | ### 硬件加速 194 | 195 | * 尽可能将渲染任务交给最后一个阶段，即GPU合成时去完成 196 | * 尽量避免layout和paint 197 | * Layer生成 198 | * 3D的transform 199 | * animation 200 | 201 | --- 202 | 203 | ### 硬件加速的动画为什么快？ 204 | 205 | * Layer会被GPU缓存 206 | * 对于不需要重绘的动画，CPU只需告诉GPU位置、缩放、透明度等信息即可 207 | 208 | --- 209 | 210 | ### 练习：使用硬件加速重写翻页 211 | 212 | --- 213 | 214 | ### 滚动 215 | 216 | * 减少在每一帧的操作，尤其是引发重排、重绘的操作及复杂计算 217 | * 适当降低touchmove等事件的调用频率 218 | 219 | --- 220 | 221 | ### demo 222 | 223 | 滚动时，显示当前区块的标题 224 | 225 | 226 | -------------------------------------------------------------------------------- /content/mobile-web-6.md: -------------------------------------------------------------------------------- 1 | ## 设备API 2 | 3 | --- 4 | 5 | ### Geolocation 6 | 7 | * 使用HTML5的geolocation API可以获取地理位置 8 | * 浏览器会采用GPS、WIFI、基站等多种方式定位 9 | * 注意：使用地理位置信息需要得到用户授权 10 | 11 | --- 12 | 13 | ### get current position 14 | 15 | ```javascript 16 | navigator.getCurrentPosition(function(pos){ 17 | console.log(pos); 18 | }, function(err){ 19 | console.log(err); 20 | }, { 21 | enableHighAccuracy: true, 22 | timeout: 5000, 23 | maximumAge: 5000 24 | }); 25 | ``` 26 | 27 | --- 28 | 29 | ###demo 30 | 31 | [代码](http://output.jsbin.com/kuwuzi) 32 | 33 | --- 34 | 35 | ### watch position 36 | 37 | * 持续跟踪设备位置的改变 38 | * navigator.geolocation.watchPosition 39 | * navigator.geolocation.clearWatch 40 | 41 | --- 42 | 43 | ## 图片上传 44 | 45 | * input type="file" 46 | 47 | --- 48 | 49 | ### 浏览器支持 50 | 51 | * iOS 6+ 52 | * 安卓内置浏览器：2.3+ 53 | * WebView： 54 | * 4.4以下：客户端实现设置WebChromeClient，并实现其中的openFileChooser方法 55 | * 4.4及以上：需要客户端实现，并提供接口给页面 56 | 57 | --- 58 | 59 | ### Demo 60 | 61 | [File upload](http://codepen.io/webzhao/embed/gpRNBQ/?height=480&theme-id=0&default-tab=result) 62 | 63 | --- 64 | 65 | ### 注意 66 | 67 | * 图片一般1-5M左右，上传前一般需要压缩 68 | * 图片包含转向信息，需要处理 69 | 70 | --- 71 | 72 | ### 设备运动API（devicemotion） 73 | 74 | * devicemotion事件 75 | * DeviceMotionEvent对象 76 | * acceleration 77 | * accelerationIncludingGravity 78 | * 浏览器 79 | * iOS 4.3+ 80 | * Android 3.0+ 81 | 82 | --- 83 | 84 | ### 练习 85 | 86 | [摇一摇](http://codepen.io/webzhao/embed/pJwMvy/?height=480&theme-id=0&default-tab=result) 87 | 88 | 89 | -------------------------------------------------------------------------------- /content/mobile-web-7.md: -------------------------------------------------------------------------------- 1 | ## 移动Web调试 2 | 3 | --- 4 | 5 | ### 使用Chrome模拟 6 | 7 | * User-Agent 8 | * 屏幕 9 | - 分辨率 10 | - Device Pixel Ratio 11 | - 缩放 12 | * 传感器 13 | - touch事件 14 | - 地理位置 15 | 16 | --- 17 | 18 | ## 在设备上访问网页 19 | 20 | --- 21 | 22 | ## 如何设置hosts？ 23 | 24 | --- 25 | 26 | ### Android 27 | 28 | * 已经取得root权限 29 | * Root Explorer等文件编辑工具修改/etc/hosts 30 | * 专门的hosts管理工具 31 | * 没有root权限 32 | * adb 33 | 34 | --- 35 | 36 | ### iOS 37 | 38 | * 越狱 39 | * 使用文件编辑工具或管理工具 40 | * 未越狱 41 | * 其它办法 42 | 43 | --- 44 | 45 | ### 代理服务器方法 46 | 47 | * 启动一台机器作为代理服务器（Fiddler、Charles即可） 48 | * 在手机上设置代理服务器 49 | * 手机将会使用代理服务器上的设置 50 | 51 | --- 52 | 53 | ## 远程调试 54 | 55 | --- 56 | 57 | ### 调试iOS设备 58 | 59 | --- 60 | 61 | ### 调试Android设备 62 | 63 | --- 64 | 65 | ### 限制 66 | 67 | * iOS 6+ 68 | * Android 4.0+ 69 | 70 | --- 71 | 72 | ### 低版本Android：Weinre 73 | 74 | Web inspector remote 75 | 76 | --- 77 | 78 | ### Weinre工作原理 79 | 80 | * 开启一个web socket服务器 81 | * 注入脚本到调试页面，页面状态以JSON格式发送到服务器；接收服务器调试命令。 82 | * 以webkit的调试工具为基础 83 | 84 | --- 85 | 86 | 谢谢！ 87 | -------------------------------------------------------------------------------- /content/road-to-frontend.md: -------------------------------------------------------------------------------- 1 | 4 | 5 | # 前端之路 6 | ### 赵文博 7 | 8 | @bg: img/road/cover.jpg, @bgColor: #eee 9 | 10 | --- 11 | 12 | ## whoami 13 | 14 | @state: blue, @fragment 15 | 16 | * **赵文博** 17 | * 七年前端 18 | * 奇舞团前端技术经理 19 |

20 |   21 |   22 |   23 |   24 |

25 | 26 | --- 27 | 28 | ## 什么是前端？ 29 | 30 | --- 31 | 32 | * 做页面的 33 | * 切图 34 | * 页面效果 35 | * 开发HTML5 36 | 37 | --- 38 | 39 | 前端负责网站的展示和交互 40 | 41 | --- 42 | 43 | 前端与后端 44 | 45 | (browser side | server side) 46 | 47 | --- 48 | 49 | Node JS 50 | 51 | --- 52 | 53 | App 54 | 55 | --- 56 | 57 | * 功能 58 | * 兼容性 59 | * 界面美观 60 | * 性能 61 | * 用户体验 62 | 63 | --- 64 | 65 | ## 前端：从过去到现在 66 | 67 | --- 68 | 69 | 1996 年的yahoo 70 | 71 | --- 72 | 73 | 界面变得复杂 74 | 75 | --- 76 | 77 | table布局 78 | dreamweaver 79 | 80 | --- 81 | 82 | 网站重构XHTML 83 | Web标准 84 | 85 | --- 86 | 87 | 切页面 88 | 给页面加点效果JavaScript 89 | 90 | --- 91 | 92 | Web 2.0 93 | 交互 94 | 95 | --- 96 | 97 | Ajax的兴起（技术1999年就可以实现） 98 | 技术与需求相互促进 99 | 100 | --- 101 | 102 | HTML5的兴起 103 | 104 | --- 105 | 106 | 移动 107 | 108 | --- 109 | 110 | 复杂==》工程化 111 | 模块加载器 112 | 工具 113 | 架构 114 | 115 | --- 116 | 117 | ## 前端技术 118 | 119 | --- 120 | 121 | 三层结构 122 | 123 | --- 124 | 125 | HTML语义化 126 | 127 | --- 128 | 129 | CSS 展现 130 | 131 | --- 132 | 133 | JavaScript交互 134 | 135 | --- 136 | 137 | web标准 138 | 139 | --- 140 | 141 | HTTP协议 142 | 143 | --- 144 | 145 | ## 前端如何学习 146 | 147 | --- 148 | 149 | 基础的重要性 150 | 151 | --- 152 | 153 | 前端的变化（周刊、） 154 | 155 | --- 156 | 157 | 技术（算法、架构、前端工程） 158 | 159 | --- 160 | 161 | 超越前端（NodeJS、Hybrid APP） 162 | 163 | --- 164 | 165 | ## 360前端 166 | 167 | --- 168 | 169 | 孔雀翎 170 | 171 | --- 172 | 173 | 数据可视化（旅游预测） 174 | 175 | --- 176 | 177 | NovaUI 178 | 179 | --- 180 | 181 | 周刊 182 | 183 | --- 184 | 185 | # 作业 186 | 187 | 1. 简历 188 | 2. 开发一个图片查看器（拖动、放大） 189 | 190 | --- 191 | 192 | @state: green 193 | 194 |

195 | 196 | --- 197 | 198 | @state: blue 199 | 200 | ## 谢谢大家！ 201 | 202 |

203 | 204 | 205 | -------------------------------------------------------------------------------- /content/units-of-measure-in-android.md: -------------------------------------------------------------------------------- 1 | 9 | 10 |

Android中的长度单位

11 | ### 赵文博@奇舞团 12 | ### zhaowenbo@360.cn 13 | 14 | ---------- 15 | 16 | ## 3种长度单位： 17 | ### 物理长度 18 | ### 屏幕像素 19 | ### 相对长度 20 | 21 | ---------- 22 | 23 | ## 物理长度 24 | 25 | ---------- 26 | 27 | ## mm 28 |

millimeter，毫米。

29 |

成年人食指平均宽度为16mm。

30 | 31 | ---------- 32 | 33 | ## in 34 |

inch，英寸。

35 |

iPhone 5屏幕对角线长度为5in。

36 | 37 | ---------- 38 | 39 | ## pt 40 |

point，点、磅。

41 |

1/72英寸。一张A4纸宽度为595pt。

42 | 43 | ---------- 44 | 45 |
46 |

什么情况下用物理单位？

47 |
48 | 49 | ---------- 50 | 51 |
52 | 55 |
56 | 57 | ---------- 58 | 59 | ## 屏幕像素 60 | 61 | ---------- 62 | 63 | ## px 64 |

对应显示屏的物理分辨率

65 |

4.4英寸的HTC Magic分辨率为320 X 480

66 |

4.7英寸的HTC One分辨率为1920 X 1080

67 | 68 | ---------- 69 | 70 |
71 | 72 |

这是24px的文字

73 |
74 | 75 | ---------- 76 | 77 |
78 |

不要使用px做单位！

79 |
80 | 81 | ---------- 82 | 83 | ## 相对单位 84 | 85 | ---------- 86 | 87 | ## dp 88 |

Density-independent Pixels

89 |

一个抽象的长度单位

90 |

在160dpi的屏幕上，1dp等于1px

91 |

dpi÷160 = 1dp÷1px

92 | 93 | ---------- 94 | 95 |
96 |

推荐使用dp做单位！

97 |
98 | 99 | ---------- 100 | 101 | ## sp 102 |

Scale-independent Pixels

103 |

和dp相同，除非...

104 | 105 | ---------- 106 | 107 |
108 | 109 |
110 | 111 | ---------- 112 | 113 |
114 |

设置字体大小时请使用sp做单位！

115 |
116 | 117 | ---------- 118 | 119 | ## QA 120 | #  121 |

因为每个人都听懂了

122 | 123 | ---------- 124 | 125 |
126 |

:-)

127 |
128 | 129 | ---------- 130 | 131 |
132 |

参考资料

133 |

http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

134 |

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

135 |

136 | 137 | 138 |

139 |
140 | 141 | -------------------------------------------------------------------------------- /css/360safe/font.css: -------------------------------------------------------------------------------- 1 | 2 | @charset "UTF-8"; 3 | 4 | @font-face { 5 | font-family: "safe360"; 6 | src:url("http://www.360safe.com/static/fonts/safe360.eot"); 7 | src: url("http://www.360safe.com/static/fonts/safe360.eot?#iefix") format("eot"); 8 | src: local("☺"), url("http://www.360safe.com/static/fonts/safe360.woff") format("woff"), url("http://www.360safe.com/static/fonts/safe360.ttf") format("truetype"), url("http://www.360safe.com/static/fonts/safe360.svg#safe360") format("svg"); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | [data-icon]:before { 14 | font-family: "safe360"; 15 | content: attr(data-icon); 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none !important; 20 | speak: none; 21 | display: inline-block; 22 | text-decoration: none; 23 | width: 1em; 24 | line-height: 1em; 25 | -webkit-font-smoothing: antialiased; 26 | } 27 | 28 | [class^="icon-"]:before, 29 | [class*=" icon-"]:before { 30 | font-family: "safe360"; 31 | font-style: normal; 32 | font-weight: normal; 33 | font-variant: normal; 34 | text-transform: none !important; 35 | speak: none; 36 | display: inline-block; 37 | text-decoration: none; 38 | width: 1em; 39 | line-height: 1em; 40 | -webkit-font-smoothing: antialiased; 41 | } 42 | 43 | 44 | .icon-back:before { 45 | content: "a"; 46 | } 47 | 48 | .icon-download:before { 49 | content: "c"; 50 | } 51 | 52 | .icon-facebook-circle:before { 53 | content: "d"; 54 | } 55 | 56 | .icon-go:before { 57 | content: "e"; 58 | } 59 | 60 | .icon-gplus-circle:before { 61 | content: "f"; 62 | } 63 | 64 | .icon-mail-circle:before { 65 | content: "g"; 66 | } 67 | 68 | .icon-facebook:before { 69 | content: "i"; 70 | } 71 | 72 | .icon-news:before { 73 | content: "j"; 74 | } 75 | 76 | .icon-twitter:before { 77 | content: "k"; 78 | } 79 | 80 | .icon-scroll:before { 81 | content: "l"; 82 | } 83 | 84 | .icon-top:before { 85 | content: "m"; 86 | } 87 | 88 | .icon-twitter-circle:before { 89 | content: "n"; 90 | } 91 | 92 | .icon-safe:before { 93 | content: "o"; 94 | } 95 | 96 | .icon-cooperate:before { 97 | content: "q"; 98 | } 99 | 100 | .icon-support:before { 101 | content: "r"; 102 | } 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: normal 16px/1.8 "Segoe UI Light", "Lucida Grande", "Microsoft Jhenghei", "Microsoft Yahei", Arial, Helvetica, Sans-Serif; 3 | padding: 2em; 4 | background: #f1f1f1; 5 | color: #666; 6 | } 7 | h1, h2, h3 { 8 | font-weight: normal; 9 | font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue Light", "Microsoft Jhenghei", "Microsoft Yahei", Sans-Serif; 10 | } 11 | h1 { 12 | font-size: 400%; 13 | margin: 0 0 .3em; 14 | } 15 | a { 16 | text-decoration: none; 17 | } 18 | #doc { 19 | margin: 0 auto; 20 | max-width: 1200px; 21 | min-height: 800px; 22 | overflow: hidden; 23 | } 24 | .decks { 25 | overflow: hidden; 26 | *zoom: 1; 27 | margin: 0 -1.5em; 28 | padding: 0; 29 | } 30 | .decks .deck { 31 | float: left; 32 | margin: 1.5em; 33 | } 34 | .deck { 35 | list-style: none; 36 | padding: 0; 37 | margin: 0; 38 | width: 14.5em; 39 | height: 12em; 40 | overflow: hidden; 41 | background: #333; 42 | padding: 1em; 43 | text-align: center; 44 | } 45 | .deck .title { 46 | font-size: 150%; 47 | color: #fff; 48 | color: rgba(255,255,255,0.7); 49 | max-height: 4em; 50 | overflow: hidden; 51 | -webkit-transition: color 0.1s ease-in; 52 | transition: color 0.1s ease-in; 53 | } 54 | .deck .subtitle { 55 | color: #fff; 56 | color: rgba(255,255,255,0.3); 57 | -webkit-transition: color 0.1s ease-in; 58 | transition: color 0.1s ease-in; 59 | } 60 | .deck a:hover .title { 61 | color: #fff; 62 | } 63 | .deck a:hover .subtitle { 64 | color: #fff; 65 | } 66 | .deck:nth-child(5n+1) { 67 | background-color: #09c; 68 | } 69 | .deck:nth-child(5n+2) { 70 | background-color: #93c; 71 | } 72 | .deck:nth-child(5n+3) { 73 | background-color: #690; 74 | } 75 | .deck:nth-child(5n+4) { 76 | background-color: #f80; 77 | } 78 | .deck:nth-child(5n) { 79 | background-color: #c00; 80 | } 81 | 82 | 83 | /* mobile */ 84 | @media only screen and (max-width: 768px) { 85 | body {padding: 1em;} 86 | h1 {font-size: 200%;} 87 | } 88 | @media only screen and (min-width: 480px) and (max-width: 768px) { 89 | .decks .deck {width: 33%} 90 | } 91 | -------------------------------------------------------------------------------- /css/print/pdf.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | 14 | * { 15 | -webkit-print-color-adjust: exact; 16 | } 17 | 18 | body { 19 | font-size: 18pt; 20 | width: auto; 21 | height: auto; 22 | border: 0; 23 | padding: 0; 24 | float: none !important; 25 | overflow: visible; 26 | } 27 | 28 | html { 29 | width: 100%; 30 | height: 100%; 31 | overflow: visible; 32 | } 33 | 34 | @page { 35 | size: letter landscape; 36 | margin: 0; 37 | } 38 | 39 | /* SECTION 2: Remove any elements not needed in print. 40 | This would include navigation, ads, sidebars, etc. */ 41 | .nestedarrow, 42 | .controls, 43 | .reveal .progress, 44 | .reveal.overview, 45 | .fork-reveal, 46 | .share-reveal, 47 | .state-background { 48 | display: none !important; 49 | } 50 | 51 | /* SECTION 3: Set body font face, size, and color. 52 | Consider using a serif font for readability. */ 53 | body, p, td, li, div { 54 | font-size: 18pt; 55 | } 56 | 57 | /* SECTION 4: Set heading font face, sizes, and color. 58 | Diffrentiate your headings from your body text. 59 | Perhaps use a large sans-serif for distinction. */ 60 | h1,h2,h3,h4,h5,h6 { 61 | text-shadow: 0 0 0 #000 !important; 62 | } 63 | 64 | /* SECTION 5: Make hyperlinks more usable. 65 | Ensure links are underlined, and consider appending 66 | the URL to the end of the link for usability. */ 67 | a:link, 68 | a:visited { 69 | font-weight: bold; 70 | text-decoration: underline; 71 | } 72 | 73 | 74 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 75 | ul, ol, div, p { 76 | visibility: visible; 77 | position: static; 78 | width: auto; 79 | height: auto; 80 | display: block; 81 | overflow: visible; 82 | margin: auto; 83 | } 84 | .reveal .slides { 85 | position: static; 86 | width: 100%; 87 | height: auto; 88 | 89 | left: auto; 90 | top: auto; 91 | margin-left: auto; 92 | margin-right: auto; 93 | margin-top: auto; 94 | padding: auto; 95 | 96 | overflow: visible; 97 | display: block; 98 | 99 | text-align: center; 100 | 101 | -webkit-perspective: none; 102 | -moz-perspective: none; 103 | -ms-perspective: none; 104 | perspective: none; 105 | 106 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 107 | -moz-perspective-origin: 50% 50%; 108 | -ms-perspective-origin: 50% 50%; 109 | perspective-origin: 50% 50%; 110 | } 111 | .reveal .slides section { 112 | 113 | page-break-after: always !important; 114 | 115 | visibility: visible !important; 116 | position: static !important; 117 | width: 100% !important; 118 | height: auto !important; 119 | min-height: initial !important; 120 | display: block !important; 121 | overflow: visible !important; 122 | 123 | left: 0 !important; 124 | top: 0 !important; 125 | margin-left: 0px !important; 126 | margin-top: 50px !important; 127 | padding: 20px 0px !important; 128 | 129 | opacity: 1 !important; 130 | 131 | -webkit-transform-style: flat !important; 132 | -moz-transform-style: flat !important; 133 | -ms-transform-style: flat !important; 134 | transform-style: flat !important; 135 | 136 | -webkit-transform: none !important; 137 | -moz-transform: none !important; 138 | -ms-transform: none !important; 139 | transform: none !important; 140 | } 141 | .reveal section.stack { 142 | margin: 0px !important; 143 | padding: 0px !important; 144 | page-break-after: avoid !important; 145 | } 146 | .reveal section .fragment { 147 | opacity: 1 !important; 148 | visibility: visible !important; 149 | 150 | -webkit-transform: none !important; 151 | -moz-transform: none !important; 152 | -ms-transform: none !important; 153 | transform: none !important; 154 | } 155 | .reveal img { 156 | box-shadow: none; 157 | } 158 | .reveal .roll { 159 | overflow: visible; 160 | line-height: 1em; 161 | } 162 | .reveal small a { 163 | font-size: 16pt !important; 164 | } 165 | -------------------------------------------------------------------------------- /css/theme/README.md: -------------------------------------------------------------------------------- 1 | ## Dependencies 2 | 3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#development-environment 4 | 5 | 6 | 7 | ## Creating a Theme 8 | 9 | To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js). 10 | 11 | Each theme file does four things in the following order: 12 | 13 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** 14 | Shared utility functions. 15 | 16 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** 17 | Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. 18 | 19 | 3. **Override** 20 | This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. 21 | 22 | 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** 23 | The template theme file which will generate final CSS output based on the currently defined variables. -------------------------------------------------------------------------------- /css/theme/moon.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 2 | /** 3 | * Solarized Dark theme for reveal.js. 4 | * Author: Achim Staebler 5 | */ 6 | @font-face { 7 | font-family: 'League Gothic'; 8 | src: url("../../lib/font/league_gothic-webfont.eot"); 9 | src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; } 12 | 13 | /** 14 | * Solarized colors by Ethan Schoonover 15 | */ 16 | html * { 17 | color-profile: sRGB; 18 | rendering-intent: auto; } 19 | 20 | /********************************************* 21 | * GLOBAL STYLES 22 | *********************************************/ 23 | body { 24 | background: #002b36; 25 | background-color: #002b36; } 26 | 27 | .reveal { 28 | font-family: "Lato", sans-serif; 29 | font-size: 36px; 30 | font-weight: 200; 31 | letter-spacing: -0.02em; 32 | color: #93a1a1; } 33 | 34 | ::selection { 35 | color: white; 36 | background: #d33682; 37 | text-shadow: none; } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | .reveal h1, 43 | .reveal h2, 44 | .reveal h3, 45 | .reveal h4, 46 | .reveal h5, 47 | .reveal h6 { 48 | margin: 0 0 20px 0; 49 | color: #eee8d5; 50 | font-family: "League Gothic", Impact, sans-serif; 51 | line-height: 0.9em; 52 | letter-spacing: 0.02em; 53 | text-transform: uppercase; 54 | text-shadow: none; } 55 | 56 | .reveal h1 { 57 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 58 | 59 | /********************************************* 60 | * LINKS 61 | *********************************************/ 62 | .reveal a:not(.image) { 63 | color: #268bd2; 64 | text-decoration: none; 65 | -webkit-transition: color .15s ease; 66 | -moz-transition: color .15s ease; 67 | -ms-transition: color .15s ease; 68 | -o-transition: color .15s ease; 69 | transition: color .15s ease; } 70 | 71 | .reveal a:not(.image):hover { 72 | color: #78b9e6; 73 | text-shadow: none; 74 | border: none; } 75 | 76 | .reveal .roll span:after { 77 | color: #fff; 78 | background: #1a6091; } 79 | 80 | /********************************************* 81 | * IMAGES 82 | *********************************************/ 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255, 255, 255, 0.12); 86 | border: 4px solid #93a1a1; 87 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 88 | -webkit-transition: all .2s linear; 89 | -moz-transition: all .2s linear; 90 | -ms-transition: all .2s linear; 91 | -o-transition: all .2s linear; 92 | transition: all .2s linear; } 93 | 94 | .reveal a:hover img { 95 | background: rgba(255, 255, 255, 0.2); 96 | border-color: #268bd2; 97 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 98 | 99 | /********************************************* 100 | * NAVIGATION CONTROLS 101 | *********************************************/ 102 | .reveal .controls div.navigate-left, 103 | .reveal .controls div.navigate-left.enabled { 104 | border-right-color: #268bd2; } 105 | 106 | .reveal .controls div.navigate-right, 107 | .reveal .controls div.navigate-right.enabled { 108 | border-left-color: #268bd2; } 109 | 110 | .reveal .controls div.navigate-up, 111 | .reveal .controls div.navigate-up.enabled { 112 | border-bottom-color: #268bd2; } 113 | 114 | .reveal .controls div.navigate-down, 115 | .reveal .controls div.navigate-down.enabled { 116 | border-top-color: #268bd2; } 117 | 118 | .reveal .controls div.navigate-left.enabled:hover { 119 | border-right-color: #78b9e6; } 120 | 121 | .reveal .controls div.navigate-right.enabled:hover { 122 | border-left-color: #78b9e6; } 123 | 124 | .reveal .controls div.navigate-up.enabled:hover { 125 | border-bottom-color: #78b9e6; } 126 | 127 | .reveal .controls div.navigate-down.enabled:hover { 128 | border-top-color: #78b9e6; } 129 | 130 | /********************************************* 131 | * PROGRESS BAR 132 | *********************************************/ 133 | .reveal .progress { 134 | background: rgba(0, 0, 0, 0.2); } 135 | 136 | .reveal .progress span { 137 | background: #268bd2; 138 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 139 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 140 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 141 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 142 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 143 | -------------------------------------------------------------------------------- /css/theme/night.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 3 | /** 4 | * Black theme for reveal.js. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #111111; 13 | background-color: #111111; } 14 | 15 | .reveal { 16 | font-family: "Open Sans", sans-serif; 17 | font-size: 30px; 18 | font-weight: 200; 19 | letter-spacing: -0.02em; 20 | color: #eeeeee; } 21 | 22 | ::selection { 23 | color: white; 24 | background: #e7ad52; 25 | text-shadow: none; } 26 | 27 | /********************************************* 28 | * HEADERS 29 | *********************************************/ 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: 0 0 20px 0; 37 | color: #eeeeee; 38 | font-family: "Montserrat", Impact, sans-serif; 39 | line-height: 0.9em; 40 | letter-spacing: -0.03em; 41 | text-transform: none; 42 | text-shadow: none; } 43 | 44 | .reveal h1 { 45 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 46 | 47 | /********************************************* 48 | * LINKS 49 | *********************************************/ 50 | .reveal a:not(.image) { 51 | color: #e7ad52; 52 | text-decoration: none; 53 | -webkit-transition: color .15s ease; 54 | -moz-transition: color .15s ease; 55 | -ms-transition: color .15s ease; 56 | -o-transition: color .15s ease; 57 | transition: color .15s ease; } 58 | 59 | .reveal a:not(.image):hover { 60 | color: #f3d7ac; 61 | text-shadow: none; 62 | border: none; } 63 | 64 | .reveal .roll span:after { 65 | color: #fff; 66 | background: #d08a1d; } 67 | 68 | /********************************************* 69 | * IMAGES 70 | *********************************************/ 71 | .reveal section img { 72 | margin: 15px 0px; 73 | background: rgba(255, 255, 255, 0.12); 74 | border: 4px solid #eeeeee; 75 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 76 | -webkit-transition: all .2s linear; 77 | -moz-transition: all .2s linear; 78 | -ms-transition: all .2s linear; 79 | -o-transition: all .2s linear; 80 | transition: all .2s linear; } 81 | 82 | .reveal a:hover img { 83 | background: rgba(255, 255, 255, 0.2); 84 | border-color: #e7ad52; 85 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 86 | 87 | /********************************************* 88 | * NAVIGATION CONTROLS 89 | *********************************************/ 90 | .reveal .controls div.navigate-left, 91 | .reveal .controls div.navigate-left.enabled { 92 | border-right-color: #e7ad52; } 93 | 94 | .reveal .controls div.navigate-right, 95 | .reveal .controls div.navigate-right.enabled { 96 | border-left-color: #e7ad52; } 97 | 98 | .reveal .controls div.navigate-up, 99 | .reveal .controls div.navigate-up.enabled { 100 | border-bottom-color: #e7ad52; } 101 | 102 | .reveal .controls div.navigate-down, 103 | .reveal .controls div.navigate-down.enabled { 104 | border-top-color: #e7ad52; } 105 | 106 | .reveal .controls div.navigate-left.enabled:hover { 107 | border-right-color: #f3d7ac; } 108 | 109 | .reveal .controls div.navigate-right.enabled:hover { 110 | border-left-color: #f3d7ac; } 111 | 112 | .reveal .controls div.navigate-up.enabled:hover { 113 | border-bottom-color: #f3d7ac; } 114 | 115 | .reveal .controls div.navigate-down.enabled:hover { 116 | border-top-color: #f3d7ac; } 117 | 118 | /********************************************* 119 | * PROGRESS BAR 120 | *********************************************/ 121 | .reveal .progress { 122 | background: rgba(0, 0, 0, 0.2); } 123 | 124 | .reveal .progress span { 125 | background: #e7ad52; 126 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 127 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 128 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 131 | -------------------------------------------------------------------------------- /css/theme/serif.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. 7 | */ 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #f0f1eb; 13 | background-color: #f0f1eb; } 14 | 15 | .reveal { 16 | font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; 17 | font-size: 36px; 18 | font-weight: 200; 19 | letter-spacing: -0.02em; 20 | color: black; } 21 | 22 | ::selection { 23 | color: white; 24 | background: #26351c; 25 | text-shadow: none; } 26 | 27 | /********************************************* 28 | * HEADERS 29 | *********************************************/ 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: 0 0 20px 0; 37 | color: #383d3d; 38 | font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; 39 | line-height: 0.9em; 40 | letter-spacing: 0.02em; 41 | text-transform: none; 42 | text-shadow: none; } 43 | 44 | .reveal h1 { 45 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 46 | 47 | /********************************************* 48 | * LINKS 49 | *********************************************/ 50 | .reveal a:not(.image) { 51 | color: #51483d; 52 | text-decoration: none; 53 | -webkit-transition: color .15s ease; 54 | -moz-transition: color .15s ease; 55 | -ms-transition: color .15s ease; 56 | -o-transition: color .15s ease; 57 | transition: color .15s ease; } 58 | 59 | .reveal a:not(.image):hover { 60 | color: #8b7c69; 61 | text-shadow: none; 62 | border: none; } 63 | 64 | .reveal .roll span:after { 65 | color: #fff; 66 | background: #25211c; } 67 | 68 | /********************************************* 69 | * IMAGES 70 | *********************************************/ 71 | .reveal section img { 72 | margin: 15px 0px; 73 | background: rgba(255, 255, 255, 0.12); 74 | border: 4px solid black; 75 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 76 | -webkit-transition: all .2s linear; 77 | -moz-transition: all .2s linear; 78 | -ms-transition: all .2s linear; 79 | -o-transition: all .2s linear; 80 | transition: all .2s linear; } 81 | 82 | .reveal a:hover img { 83 | background: rgba(255, 255, 255, 0.2); 84 | border-color: #51483d; 85 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 86 | 87 | /********************************************* 88 | * NAVIGATION CONTROLS 89 | *********************************************/ 90 | .reveal .controls div.navigate-left, 91 | .reveal .controls div.navigate-left.enabled { 92 | border-right-color: #51483d; } 93 | 94 | .reveal .controls div.navigate-right, 95 | .reveal .controls div.navigate-right.enabled { 96 | border-left-color: #51483d; } 97 | 98 | .reveal .controls div.navigate-up, 99 | .reveal .controls div.navigate-up.enabled { 100 | border-bottom-color: #51483d; } 101 | 102 | .reveal .controls div.navigate-down, 103 | .reveal .controls div.navigate-down.enabled { 104 | border-top-color: #51483d; } 105 | 106 | .reveal .controls div.navigate-left.enabled:hover { 107 | border-right-color: #8b7c69; } 108 | 109 | .reveal .controls div.navigate-right.enabled:hover { 110 | border-left-color: #8b7c69; } 111 | 112 | .reveal .controls div.navigate-up.enabled:hover { 113 | border-bottom-color: #8b7c69; } 114 | 115 | .reveal .controls div.navigate-down.enabled:hover { 116 | border-top-color: #8b7c69; } 117 | 118 | /********************************************* 119 | * PROGRESS BAR 120 | *********************************************/ 121 | .reveal .progress { 122 | background: rgba(0, 0, 0, 0.2); } 123 | 124 | .reveal .progress span { 125 | background: #51483d; 126 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 127 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 128 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 131 | -------------------------------------------------------------------------------- /css/theme/simple.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 2 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 3 | /** 4 | * A simple theme for reveal.js presentations, similar 5 | * to the default theme. The accent color is darkblue. 6 | * 7 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 8 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 9 | */ 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: white; 15 | background-color: white; } 16 | 17 | .reveal { 18 | font-family: "Lato", sans-serif; 19 | font-size: 36px; 20 | font-weight: 200; 21 | letter-spacing: -0.02em; 22 | color: black; } 23 | 24 | ::selection { 25 | color: white; 26 | background: rgba(0, 0, 0, 0.99); 27 | text-shadow: none; } 28 | 29 | /********************************************* 30 | * HEADERS 31 | *********************************************/ 32 | .reveal h1, 33 | .reveal h2, 34 | .reveal h3, 35 | .reveal h4, 36 | .reveal h5, 37 | .reveal h6 { 38 | margin: 0 0 20px 0; 39 | color: black; 40 | font-family: "News Cycle", Impact, sans-serif; 41 | line-height: 0.9em; 42 | letter-spacing: 0.02em; 43 | text-transform: none; 44 | text-shadow: none; } 45 | 46 | .reveal h1 { 47 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 48 | 49 | /********************************************* 50 | * LINKS 51 | *********************************************/ 52 | .reveal a:not(.image) { 53 | color: darkblue; 54 | text-decoration: none; 55 | -webkit-transition: color .15s ease; 56 | -moz-transition: color .15s ease; 57 | -ms-transition: color .15s ease; 58 | -o-transition: color .15s ease; 59 | transition: color .15s ease; } 60 | 61 | .reveal a:not(.image):hover { 62 | color: #0000f1; 63 | text-shadow: none; 64 | border: none; } 65 | 66 | .reveal .roll span:after { 67 | color: #fff; 68 | background: #00003f; } 69 | 70 | /********************************************* 71 | * IMAGES 72 | *********************************************/ 73 | .reveal section img { 74 | margin: 15px 0px; 75 | background: rgba(255, 255, 255, 0.12); 76 | border: 4px solid black; 77 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 78 | -webkit-transition: all .2s linear; 79 | -moz-transition: all .2s linear; 80 | -ms-transition: all .2s linear; 81 | -o-transition: all .2s linear; 82 | transition: all .2s linear; } 83 | 84 | .reveal a:hover img { 85 | background: rgba(255, 255, 255, 0.2); 86 | border-color: darkblue; 87 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 88 | 89 | /********************************************* 90 | * NAVIGATION CONTROLS 91 | *********************************************/ 92 | .reveal .controls div.navigate-left, 93 | .reveal .controls div.navigate-left.enabled { 94 | border-right-color: darkblue; } 95 | 96 | .reveal .controls div.navigate-right, 97 | .reveal .controls div.navigate-right.enabled { 98 | border-left-color: darkblue; } 99 | 100 | .reveal .controls div.navigate-up, 101 | .reveal .controls div.navigate-up.enabled { 102 | border-bottom-color: darkblue; } 103 | 104 | .reveal .controls div.navigate-down, 105 | .reveal .controls div.navigate-down.enabled { 106 | border-top-color: darkblue; } 107 | 108 | .reveal .controls div.navigate-left.enabled:hover { 109 | border-right-color: #0000f1; } 110 | 111 | .reveal .controls div.navigate-right.enabled:hover { 112 | border-left-color: #0000f1; } 113 | 114 | .reveal .controls div.navigate-up.enabled:hover { 115 | border-bottom-color: #0000f1; } 116 | 117 | .reveal .controls div.navigate-down.enabled:hover { 118 | border-top-color: #0000f1; } 119 | 120 | /********************************************* 121 | * PROGRESS BAR 122 | *********************************************/ 123 | .reveal .progress { 124 | background: rgba(0, 0, 0, 0.2); } 125 | 126 | .reveal .progress span { 127 | background: darkblue; 128 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 131 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 132 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 133 | -------------------------------------------------------------------------------- /css/theme/sky.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 3 | /** 4 | * Sky theme for reveal.js. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #add9e4; 13 | background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 14 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); 15 | background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 16 | background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 17 | background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 18 | background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 19 | background-color: #f7fbfc; } 20 | 21 | .reveal { 22 | font-family: "Open Sans", sans-serif; 23 | font-size: 36px; 24 | font-weight: 200; 25 | letter-spacing: -0.02em; 26 | color: #333333; } 27 | 28 | ::selection { 29 | color: white; 30 | background: #134674; 31 | text-shadow: none; } 32 | 33 | /********************************************* 34 | * HEADERS 35 | *********************************************/ 36 | .reveal h1, 37 | .reveal h2, 38 | .reveal h3, 39 | .reveal h4, 40 | .reveal h5, 41 | .reveal h6 { 42 | margin: 0 0 20px 0; 43 | color: #333333; 44 | font-family: "Quicksand", sans-serif; 45 | line-height: 0.9em; 46 | letter-spacing: -0.08em; 47 | text-transform: uppercase; 48 | text-shadow: none; } 49 | 50 | .reveal h1 { 51 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 52 | 53 | /********************************************* 54 | * LINKS 55 | *********************************************/ 56 | .reveal a:not(.image) { 57 | color: #3b759e; 58 | text-decoration: none; 59 | -webkit-transition: color .15s ease; 60 | -moz-transition: color .15s ease; 61 | -ms-transition: color .15s ease; 62 | -o-transition: color .15s ease; 63 | transition: color .15s ease; } 64 | 65 | .reveal a:not(.image):hover { 66 | color: #74a7cb; 67 | text-shadow: none; 68 | border: none; } 69 | 70 | .reveal .roll span:after { 71 | color: #fff; 72 | background: #264c66; } 73 | 74 | /********************************************* 75 | * IMAGES 76 | *********************************************/ 77 | .reveal section img { 78 | margin: 15px 0px; 79 | background: rgba(255, 255, 255, 0.12); 80 | border: 4px solid #333333; 81 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 82 | -webkit-transition: all .2s linear; 83 | -moz-transition: all .2s linear; 84 | -ms-transition: all .2s linear; 85 | -o-transition: all .2s linear; 86 | transition: all .2s linear; } 87 | 88 | .reveal a:hover img { 89 | background: rgba(255, 255, 255, 0.2); 90 | border-color: #3b759e; 91 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 92 | 93 | /********************************************* 94 | * NAVIGATION CONTROLS 95 | *********************************************/ 96 | .reveal .controls div.navigate-left, 97 | .reveal .controls div.navigate-left.enabled { 98 | border-right-color: #3b759e; } 99 | 100 | .reveal .controls div.navigate-right, 101 | .reveal .controls div.navigate-right.enabled { 102 | border-left-color: #3b759e; } 103 | 104 | .reveal .controls div.navigate-up, 105 | .reveal .controls div.navigate-up.enabled { 106 | border-bottom-color: #3b759e; } 107 | 108 | .reveal .controls div.navigate-down, 109 | .reveal .controls div.navigate-down.enabled { 110 | border-top-color: #3b759e; } 111 | 112 | .reveal .controls div.navigate-left.enabled:hover { 113 | border-right-color: #74a7cb; } 114 | 115 | .reveal .controls div.navigate-right.enabled:hover { 116 | border-left-color: #74a7cb; } 117 | 118 | .reveal .controls div.navigate-up.enabled:hover { 119 | border-bottom-color: #74a7cb; } 120 | 121 | .reveal .controls div.navigate-down.enabled:hover { 122 | border-top-color: #74a7cb; } 123 | 124 | /********************************************* 125 | * PROGRESS BAR 126 | *********************************************/ 127 | .reveal .progress { 128 | background: rgba(0, 0, 0, 0.2); } 129 | 130 | .reveal .progress span { 131 | background: #3b759e; 132 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 133 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 134 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 135 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 136 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 137 | -------------------------------------------------------------------------------- /css/theme/solarized.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 2 | /** 3 | * Solarized Light theme for reveal.js. 4 | * Author: Achim Staebler 5 | */ 6 | @font-face { 7 | font-family: 'League Gothic'; 8 | src: url("../../lib/font/league_gothic-webfont.eot"); 9 | src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; } 12 | 13 | /** 14 | * Solarized colors by Ethan Schoonover 15 | */ 16 | html * { 17 | color-profile: sRGB; 18 | rendering-intent: auto; } 19 | 20 | /********************************************* 21 | * GLOBAL STYLES 22 | *********************************************/ 23 | body { 24 | background: #fdf6e3; 25 | background-color: #fdf6e3; } 26 | 27 | .reveal { 28 | font-family: "Lato", sans-serif; 29 | font-size: 36px; 30 | font-weight: 200; 31 | letter-spacing: -0.02em; 32 | color: #657b83; } 33 | 34 | ::selection { 35 | color: white; 36 | background: #d33682; 37 | text-shadow: none; } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | .reveal h1, 43 | .reveal h2, 44 | .reveal h3, 45 | .reveal h4, 46 | .reveal h5, 47 | .reveal h6 { 48 | margin: 0 0 20px 0; 49 | color: #586e75; 50 | font-family: "League Gothic", Impact, sans-serif; 51 | line-height: 0.9em; 52 | letter-spacing: 0.02em; 53 | text-transform: uppercase; 54 | text-shadow: none; } 55 | 56 | .reveal h1 { 57 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 58 | 59 | /********************************************* 60 | * LINKS 61 | *********************************************/ 62 | .reveal a:not(.image) { 63 | color: #268bd2; 64 | text-decoration: none; 65 | -webkit-transition: color .15s ease; 66 | -moz-transition: color .15s ease; 67 | -ms-transition: color .15s ease; 68 | -o-transition: color .15s ease; 69 | transition: color .15s ease; } 70 | 71 | .reveal a:not(.image):hover { 72 | color: #78b9e6; 73 | text-shadow: none; 74 | border: none; } 75 | 76 | .reveal .roll span:after { 77 | color: #fff; 78 | background: #1a6091; } 79 | 80 | /********************************************* 81 | * IMAGES 82 | *********************************************/ 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255, 255, 255, 0.12); 86 | border: 4px solid #657b83; 87 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 88 | -webkit-transition: all .2s linear; 89 | -moz-transition: all .2s linear; 90 | -ms-transition: all .2s linear; 91 | -o-transition: all .2s linear; 92 | transition: all .2s linear; } 93 | 94 | .reveal a:hover img { 95 | background: rgba(255, 255, 255, 0.2); 96 | border-color: #268bd2; 97 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 98 | 99 | /********************************************* 100 | * NAVIGATION CONTROLS 101 | *********************************************/ 102 | .reveal .controls div.navigate-left, 103 | .reveal .controls div.navigate-left.enabled { 104 | border-right-color: #268bd2; } 105 | 106 | .reveal .controls div.navigate-right, 107 | .reveal .controls div.navigate-right.enabled { 108 | border-left-color: #268bd2; } 109 | 110 | .reveal .controls div.navigate-up, 111 | .reveal .controls div.navigate-up.enabled { 112 | border-bottom-color: #268bd2; } 113 | 114 | .reveal .controls div.navigate-down, 115 | .reveal .controls div.navigate-down.enabled { 116 | border-top-color: #268bd2; } 117 | 118 | .reveal .controls div.navigate-left.enabled:hover { 119 | border-right-color: #78b9e6; } 120 | 121 | .reveal .controls div.navigate-right.enabled:hover { 122 | border-left-color: #78b9e6; } 123 | 124 | .reveal .controls div.navigate-up.enabled:hover { 125 | border-bottom-color: #78b9e6; } 126 | 127 | .reveal .controls div.navigate-down.enabled:hover { 128 | border-top-color: #78b9e6; } 129 | 130 | /********************************************* 131 | * PROGRESS BAR 132 | *********************************************/ 133 | .reveal .progress { 134 | background: rgba(0, 0, 0, 0.2); } 135 | 136 | .reveal .progress span { 137 | background: #268bd2; 138 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 139 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 140 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 141 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 142 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 143 | -------------------------------------------------------------------------------- /css/theme/source/beige.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Beige theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @font-face { 17 | font-family: 'League Gothic'; 18 | src: url('../../lib/font/league_gothic-webfont.eot'); 19 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 20 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 21 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 22 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 23 | 24 | font-weight: normal; 25 | font-style: normal; 26 | } 27 | 28 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 29 | 30 | 31 | // Override theme settings (see ../template/settings.scss) 32 | $mainColor: #333; 33 | $headingColor: #333; 34 | $headingTextShadow: none; 35 | $backgroundColor: #f7f3de; 36 | $linkColor: #8b743d; 37 | $linkColorHover: lighten( $linkColor, 20% ); 38 | $selectionBackgroundColor: rgba(79, 64, 28, 0.99); 39 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 40 | 41 | // Background generator 42 | @mixin bodyBackground() { 43 | @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); 44 | } 45 | 46 | 47 | 48 | // Theme template ------------------------------ 49 | @import "../template/theme"; 50 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/default.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Default theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @font-face { 17 | font-family: 'League Gothic'; 18 | src: url('../../lib/font/league_gothic-webfont.eot'); 19 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 20 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 21 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 22 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 23 | 24 | font-weight: normal; 25 | font-style: normal; 26 | } 27 | 28 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 29 | 30 | // Override theme settings (see ../template/settings.scss) 31 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 32 | 33 | // Background generator 34 | @mixin bodyBackground() { 35 | @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); 36 | } 37 | 38 | 39 | 40 | // Theme template ------------------------------ 41 | @import "../template/theme"; 42 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/moon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Dark theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @font-face { 16 | font-family: 'League Gothic'; 17 | src: url('../../lib/font/league_gothic-webfont.eot'); 18 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 19 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 20 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 21 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 22 | 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | 27 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 28 | 29 | /** 30 | * Solarized colors by Ethan Schoonover 31 | */ 32 | html * { 33 | color-profile: sRGB; 34 | rendering-intent: auto; 35 | } 36 | 37 | // Solarized colors 38 | $base03: #002b36; 39 | $base02: #073642; 40 | $base01: #586e75; 41 | $base00: #657b83; 42 | $base0: #839496; 43 | $base1: #93a1a1; 44 | $base2: #eee8d5; 45 | $base3: #fdf6e3; 46 | $yellow: #b58900; 47 | $orange: #cb4b16; 48 | $red: #dc322f; 49 | $magenta: #d33682; 50 | $violet: #6c71c4; 51 | $blue: #268bd2; 52 | $cyan: #2aa198; 53 | $green: #859900; 54 | 55 | // Override theme settings (see ../template/settings.scss) 56 | $mainColor: $base1; 57 | $headingColor: $base2; 58 | $headingTextShadow: none; 59 | $backgroundColor: $base03; 60 | $linkColor: $blue; 61 | $linkColorHover: lighten( $linkColor, 20% ); 62 | $selectionBackgroundColor: $magenta; 63 | 64 | 65 | 66 | // Theme template ------------------------------ 67 | @import "../template/theme"; 68 | // --------------------------------------------- 69 | -------------------------------------------------------------------------------- /css/theme/source/night.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 16 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 17 | 18 | 19 | // Override theme settings (see ../template/settings.scss) 20 | $backgroundColor: #111; 21 | 22 | $mainFont: 'Open Sans', sans-serif; 23 | $linkColor: #e7ad52; 24 | $linkColorHover: lighten( $linkColor, 20% ); 25 | $headingFont: 'Montserrat', Impact, sans-serif; 26 | $headingTextShadow: none; 27 | $headingLetterSpacing: -0.03em; 28 | $headingTextTransform: none; 29 | $selectionBackgroundColor: #e7ad52; 30 | $mainFontSize: 30px; 31 | 32 | 33 | // Theme template ------------------------------ 34 | @import "../template/theme"; 35 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/serif.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Override theme settings (see ../template/settings.scss) 18 | $mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 19 | $mainColor: #000; 20 | $headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 21 | $headingColor: #383D3D; 22 | $headingTextShadow: none; 23 | $headingTextTransform: none; 24 | $backgroundColor: #F0F1EB; 25 | $linkColor: #51483D; 26 | $linkColorHover: lighten( $linkColor, 20% ); 27 | $selectionBackgroundColor: #26351C; 28 | 29 | 30 | 31 | // Theme template ------------------------------ 32 | @import "../template/theme"; 33 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/simple.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | 22 | // Override theme settings (see ../template/settings.scss) 23 | $mainFont: 'Lato', sans-serif; 24 | $mainColor: #000; 25 | $headingFont: 'News Cycle', Impact, sans-serif; 26 | $headingColor: #000; 27 | $headingTextShadow: none; 28 | $headingTextTransform: none; 29 | $backgroundColor: #fff; 30 | $linkColor: #00008B; 31 | $linkColorHover: lighten( $linkColor, 20% ); 32 | $selectionBackgroundColor: rgba(0, 0, 0, 0.99); 33 | 34 | 35 | 36 | // Theme template ------------------------------ 37 | @import "../template/theme"; 38 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/sky.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Sky theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 17 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainFont: 'Open Sans', sans-serif; 22 | $mainColor: #333; 23 | $headingFont: 'Quicksand', sans-serif; 24 | $headingColor: #333; 25 | $headingLetterSpacing: -0.08em; 26 | $headingTextShadow: none; 27 | $backgroundColor: #f7fbfc; 28 | $linkColor: #3b759e; 29 | $linkColorHover: lighten( $linkColor, 20% ); 30 | $selectionBackgroundColor: #134674; 31 | 32 | // Background generator 33 | @mixin bodyBackground() { 34 | @include radial-gradient( #add9e4, #f7fbfc ); 35 | } 36 | 37 | 38 | 39 | // Theme template ------------------------------ 40 | @import "../template/theme"; 41 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/solarized.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Light theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @font-face { 16 | font-family: 'League Gothic'; 17 | src: url('../../lib/font/league_gothic-webfont.eot'); 18 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 19 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 20 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 21 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 22 | 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | 27 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 28 | 29 | 30 | /** 31 | * Solarized colors by Ethan Schoonover 32 | */ 33 | html * { 34 | color-profile: sRGB; 35 | rendering-intent: auto; 36 | } 37 | 38 | // Solarized colors 39 | $base03: #002b36; 40 | $base02: #073642; 41 | $base01: #586e75; 42 | $base00: #657b83; 43 | $base0: #839496; 44 | $base1: #93a1a1; 45 | $base2: #eee8d5; 46 | $base3: #fdf6e3; 47 | $yellow: #b58900; 48 | $orange: #cb4b16; 49 | $red: #dc322f; 50 | $magenta: #d33682; 51 | $violet: #6c71c4; 52 | $blue: #268bd2; 53 | $cyan: #2aa198; 54 | $green: #859900; 55 | 56 | // Override theme settings (see ../template/settings.scss) 57 | $mainColor: $base00; 58 | $headingColor: $base01; 59 | $headingTextShadow: none; 60 | $backgroundColor: $base3; 61 | $linkColor: $blue; 62 | $linkColorHover: lighten( $linkColor, 20% ); 63 | $selectionBackgroundColor: $magenta; 64 | 65 | // Background generator 66 | // @mixin bodyBackground() { 67 | // @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); 68 | // } 69 | 70 | 71 | 72 | // Theme template ------------------------------ 73 | @import "../template/theme"; 74 | // --------------------------------------------- 75 | -------------------------------------------------------------------------------- /css/theme/template/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin vertical-gradient( $top, $bottom ) { 2 | background: $top; 3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); 4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); 5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); 6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% ); 7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); 8 | background: linear-gradient( top, $top 0%, $bottom 100% ); 9 | } 10 | 11 | @mixin horizontal-gradient( $top, $bottom ) { 12 | background: $top; 13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); 14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); 15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); 16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% ); 17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); 18 | background: linear-gradient( left, $top 0%, $bottom 100% ); 19 | } 20 | 21 | @mixin radial-gradient( $outer, $inner, $type: circle ) { 22 | background: $outer; 23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); 25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 29 | } -------------------------------------------------------------------------------- /css/theme/template/settings.scss: -------------------------------------------------------------------------------- 1 | // Base settings for all themes that can optionally be 2 | // overridden by the super-theme 3 | 4 | // Background of the presentation 5 | $backgroundColor: #2b2b2b; 6 | 7 | // Primary/body text 8 | $mainFont: 'Lato', sans-serif; 9 | $mainFontSize: 36px; 10 | $mainColor: #eee; 11 | 12 | // Headings 13 | $headingFont: 'League Gothic', Impact, sans-serif; 14 | $headingColor: #eee; 15 | $headingLineHeight: 0.9em; 16 | $headingLetterSpacing: 0.02em; 17 | $headingTextTransform: uppercase; 18 | $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); 19 | $heading1TextShadow: $headingTextShadow; 20 | 21 | // Links and actions 22 | $linkColor: #13DAEC; 23 | $linkColorHover: lighten( $linkColor, 20% ); 24 | 25 | // Text selection 26 | $selectionBackgroundColor: #FF5E99; 27 | $selectionColor: #fff; 28 | 29 | // Generates the presentation background, can be overridden 30 | // to return a background image or gradient 31 | @mixin bodyBackground() { 32 | background: $backgroundColor; 33 | } -------------------------------------------------------------------------------- /css/theme/template/theme.scss: -------------------------------------------------------------------------------- 1 | // Base theme template for reveal.js 2 | 3 | /********************************************* 4 | * GLOBAL STYLES 5 | *********************************************/ 6 | 7 | body { 8 | @include bodyBackground(); 9 | background-color: $backgroundColor; 10 | } 11 | 12 | .reveal { 13 | font-family: $mainFont; 14 | font-size: $mainFontSize; 15 | font-weight: 200; 16 | letter-spacing: -0.02em; 17 | color: $mainColor; 18 | } 19 | 20 | ::selection { 21 | color: $selectionColor; 22 | background: $selectionBackgroundColor; 23 | text-shadow: none; 24 | } 25 | 26 | /********************************************* 27 | * HEADERS 28 | *********************************************/ 29 | 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: 0 0 20px 0; 37 | color: $headingColor; 38 | 39 | font-family: $headingFont; 40 | line-height: $headingLineHeight; 41 | letter-spacing: $headingLetterSpacing; 42 | 43 | text-transform: $headingTextTransform; 44 | text-shadow: $headingTextShadow; 45 | } 46 | 47 | .reveal h1 { 48 | text-shadow: $heading1TextShadow; 49 | } 50 | 51 | 52 | /********************************************* 53 | * LINKS 54 | *********************************************/ 55 | 56 | .reveal a:not(.image) { 57 | color: $linkColor; 58 | text-decoration: none; 59 | 60 | -webkit-transition: color .15s ease; 61 | -moz-transition: color .15s ease; 62 | -ms-transition: color .15s ease; 63 | -o-transition: color .15s ease; 64 | transition: color .15s ease; 65 | } 66 | .reveal a:not(.image):hover { 67 | color: $linkColorHover; 68 | 69 | text-shadow: none; 70 | border: none; 71 | } 72 | 73 | .reveal .roll span:after { 74 | color: #fff; 75 | background: darken( $linkColor, 15% ); 76 | } 77 | 78 | 79 | /********************************************* 80 | * IMAGES 81 | *********************************************/ 82 | 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255,255,255,0.12); 86 | border: 4px solid $mainColor; 87 | 88 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 89 | 90 | -webkit-transition: all .2s linear; 91 | -moz-transition: all .2s linear; 92 | -ms-transition: all .2s linear; 93 | -o-transition: all .2s linear; 94 | transition: all .2s linear; 95 | } 96 | 97 | .reveal a:hover img { 98 | background: rgba(255,255,255,0.2); 99 | border-color: $linkColor; 100 | 101 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 102 | } 103 | 104 | 105 | /********************************************* 106 | * NAVIGATION CONTROLS 107 | *********************************************/ 108 | 109 | .reveal .controls div.navigate-left, 110 | .reveal .controls div.navigate-left.enabled { 111 | border-right-color: $linkColor; 112 | } 113 | 114 | .reveal .controls div.navigate-right, 115 | .reveal .controls div.navigate-right.enabled { 116 | border-left-color: $linkColor; 117 | } 118 | 119 | .reveal .controls div.navigate-up, 120 | .reveal .controls div.navigate-up.enabled { 121 | border-bottom-color: $linkColor; 122 | } 123 | 124 | .reveal .controls div.navigate-down, 125 | .reveal .controls div.navigate-down.enabled { 126 | border-top-color: $linkColor; 127 | } 128 | 129 | .reveal .controls div.navigate-left.enabled:hover { 130 | border-right-color: $linkColorHover; 131 | } 132 | 133 | .reveal .controls div.navigate-right.enabled:hover { 134 | border-left-color: $linkColorHover; 135 | } 136 | 137 | .reveal .controls div.navigate-up.enabled:hover { 138 | border-bottom-color: $linkColorHover; 139 | } 140 | 141 | .reveal .controls div.navigate-down.enabled:hover { 142 | border-top-color: $linkColorHover; 143 | } 144 | 145 | 146 | /********************************************* 147 | * PROGRESS BAR 148 | *********************************************/ 149 | 150 | .reveal .progress { 151 | background: rgba(0,0,0,0.2); 152 | } 153 | .reveal .progress span { 154 | background: $linkColor; 155 | 156 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 157 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 158 | -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 159 | -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 160 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 161 | } 162 | 163 | 164 | -------------------------------------------------------------------------------- /demos/circle.js: -------------------------------------------------------------------------------- 1 | var pi = Math.PI; 2 | exports.area = function (r) { 3 | return pi * r * r; 4 | }; 5 | exports.circumference = function (r) { 6 | return 2 * pi * r; 7 | }; -------------------------------------------------------------------------------- /demos/css3/news.html: -------------------------------------------------------------------------------- 1 |

新浪体育讯　当地时间7月6日下午16时，巴西队在驻地特雷索波利斯备战半决赛与德国的比赛，今天主力球员依然以调整为主，替补阵容则再次与弗鲁米嫩塞U-20青年队热身。 2 | 3 |

替补阵容包括：后卫阿尔维斯、丹特、恩里克、马克斯韦尔，中场古斯塔沃、埃尔南内斯、伯纳德、威廉和拉米雷斯，前锋若。比赛踢得波澜不惊，小队员在对抗上明显吃亏很难给成年队造成实质威胁，伯纳德、拉米雷斯和丹特各入一球，巴西替补阵容轻松取胜。[投注：巴西胜赔2.67][没账号?注册就送88元] 4 | 5 |

因为内马尔肯定将因伤缺席世界杯剩余比赛，谁来顶替他的位置就成了大家关注的焦点。从目前来看，威廉首发的可能性最大，切尔西中场在技术特点上与内马尔最为接近，都具备速度和突破能力，只是威廉更多是创造机会而内马尔同时能够终结，不过威廉已经是巴西攻击型中场线上主力之外最好的球员，同时斯科拉里很喜欢威廉，威廉在昨天训练中受的伤也已经没有大碍。 6 | -------------------------------------------------------------------------------- /demos/css3/region.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3 Region Demo 6 | 25 | 26 | 27 | 28 |

29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /demos/devtools/.sass-cache/d34f6c8ea23c9b93f472e8ec867ef13c77875159/style.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/demos/devtools/.sass-cache/d34f6c8ea23c9b93f472e8ec867ef13c77875159/style.scssc -------------------------------------------------------------------------------- /demos/devtools/.sass.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/demos/devtools/.sass.html.swp -------------------------------------------------------------------------------- /demos/devtools/.style.scss.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/demos/devtools/.style.scss.swp -------------------------------------------------------------------------------- /demos/devtools/canvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /demos/devtools/conditional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /demos/devtools/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "errno": 3, 3 | "errmsg": "订单保存失败" 4 | } 5 | -------------------------------------------------------------------------------- /demos/devtools/dom_breakpoint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

当前时间是：

10 | 11 | 12 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /demos/devtools/sass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SASS 6 | 7 | 8 | 9 |

this is title

10 |
11 |
Module title
12 |
13 | 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /demos/devtools/source_map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demos/devtools/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #ff4444; } 3 | 4 | .mod { 5 | border: 1px solid #ff4444; } 6 | 7 | .mod .hd { 8 | background: #ff4444; 9 | color: #fff; 10 | border-bottom: 1px solid #ff4444; } 11 | 12 | .mod .bd { 13 | background: white; 14 | color: #ff4444; } 15 | 16 | /*# sourceMappingURL=style.css.map */ 17 | -------------------------------------------------------------------------------- /demos/devtools/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAEA,EAAG;EACC,KAAK,EAHO,OAAI;;AAKpB,IAAK;EACD,MAAM,EAAE,iBAAwB;;AAEpC,QAAS;EACL,UAAU,EATE,OAAI;EAUhB,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,iBAAwB;;AAE3C,QAAS;EACL,UAAU,EAAE,KAA4B;EACxC,KAAK,EAfO,OAAI", 4 | "sources": ["style.scss"], 5 | "names": [], 6 | "file": "style.css" 7 | } 8 | -------------------------------------------------------------------------------- /demos/devtools/style.scss: -------------------------------------------------------------------------------- 1 | $primary-color: #f44; 2 | 3 | h1 { 4 | color: $primary-color; 5 | } 6 | .mod { 7 | border: 1px solid $primary-color; 8 | } 9 | .mod .hd { 10 | background: $primary-color; 11 | color: #fff; 12 | border-bottom: 1px solid $primary-color; 13 | } 14 | .mod .bd { 15 | background: lighten($primary-color, 60%); 16 | color: $primary-color; 17 | } 18 | -------------------------------------------------------------------------------- /demos/devtools/xhr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /demos/html5/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | form 7 | 8 | 9 |
10 |

email:

11 |

url:

12 |

date:

13 |

number:

14 |

color:

15 | 16 |
17 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /demos/html5/localstorage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | localStorage 6 | 7 | 8 | 9 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demos/html5/semantics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 语义化标签 6 | 7 | 8 | 9 |
10 |
11 |

网站名称

12 |

网站口号 Slogan

13 |
14 | 22 |
23 | 24 |
25 |
26 |

文章标题

27 |
28 |

第一节标题

29 |

第一节段落1

30 |

更多内容

31 |
32 |
33 |

第二节标题

34 |

第二节段落1

35 |

更多内容

36 |

37 |

38 | pic 39 | 图片说明 40 |
41 |

42 |
43 |
44 |
45 | 46 | 49 | 50 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/Read Me.txt: -------------------------------------------------------------------------------- 1 | The *SVG* folder contains the icons you selected as separate SVG files. 2 | 3 | If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack. 4 | 5 | The *demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the element), copy the element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's tag. After copying this SVG, you can reference your glyphs like the following: 6 | 7 | 8 | 9 | You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file. 10 | If you prefer to reference an external SVG (containing ) instead of embedding it in HTML, you will need to use javascript to fetch the SVG in order to make sure your SVGs will work fine in IE. IcoMoon's Quick Usage mode can take care of that and host your SVGs too. 11 | 12 | You may ignore the *svgdefs.svg* file. It contains the same SVG definitions as the ones you can find in the demo.html file. 13 | 14 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu > Manage Projects) to retrieve your icon selection. 15 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/SVG/binoculars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/SVG/cog.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/SVG/earth.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/SVG/gift.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/SVG/spoon-knife.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd; 14 | } 15 | small { 16 | font-size: .66666667em; 17 | } 18 | a { 19 | color: #e74c3c; 20 | text-decoration: none; 21 | } 22 | a:hover, a:focus { 23 | box-shadow: 0 1px #e74c3c; 24 | } 25 | .bshadow0, input { 26 | box-shadow: inset 0 -2px #e7e7e7; 27 | } 28 | input:hover { 29 | box-shadow: inset 0 -2px #ccc; 30 | } 31 | input, fieldset { 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 17em; 50 | margin-right: 1.5em; 51 | float: left; 52 | overflow: hidden; 53 | } 54 | svg { 55 | color: #444444; 56 | } 57 | .liga { 58 | width: 80%; 59 | width: calc(100% - 2.5em); 60 | } 61 | .talign-right { 62 | text-align: right; 63 | } 64 | .talign-center { 65 | text-align: center; 66 | } 67 | .bgc1 { 68 | background: #f1f1f1; 69 | } 70 | .fgc0 { 71 | color: #000; 72 | } 73 | .fgc1 { 74 | color: #999; 75 | } 76 | p { 77 | margin-top: 1em; 78 | margin-bottom: 1em; 79 | } 80 | .mvm { 81 | margin-top: .75em; 82 | margin-bottom: .75em; 83 | } 84 | .mtn { 85 | margin-top: 0; 86 | } 87 | .mtl, .mal { 88 | margin-top: 1.5em; 89 | } 90 | .mbl, .mal { 91 | margin-bottom: 1.5em; 92 | } 93 | .mal, .mhl { 94 | margin-left: 1.5em; 95 | margin-right: 1.5em; 96 | } 97 | .mhmm { 98 | margin-left: 1em; 99 | margin-right: 1em; 100 | } 101 | .mls { 102 | margin-left: .25em; 103 | } 104 | .ptl { 105 | padding-top: 1.5em; 106 | } 107 | .pbs, .pvs { 108 | padding-bottom: .25em; 109 | } 110 | .pvs, .pts { 111 | padding-top: .25em; 112 | } 113 | .unit { 114 | float: left; 115 | } 116 | .unitRight { 117 | float: right; 118 | } 119 | .size1of2 { 120 | width: 50%; 121 | } 122 | .size1of1 { 123 | width: 100%; 124 | } 125 | .clearfix:before, .clearfix:after { 126 | content: " "; 127 | display: table; 128 | } 129 | .clearfix:after { 130 | clear: both; 131 | } 132 | .hidden-true { 133 | display: none; 134 | } 135 | .textbox0 { 136 | width: 3em; 137 | background: #f1f1f1; 138 | padding: .25em .5em; 139 | line-height: 1.5; 140 | height: 1.5em; 141 | } 142 | .fs0 { 143 | font-size: 16px; 144 | } 145 | .fs1 { 146 | font-size: 32px; 147 | } 148 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/style.css: -------------------------------------------------------------------------------- 1 | [class^="icon-"], [class*=" icon-"] { 2 | display: inline-block; 3 | width: 1em; 4 | height: 1em; 5 | fill: currentColor; 6 | } 7 | 8 | /* ======================================================================================= 9 | Example showing how to change the color/size of the icons: 10 | .icon-name { 11 | font-size: 32px; // works because "width" & "height" were set using em units 12 | color: red; // works for single-colored icons, because "fill" was set to "currentColor" 13 | } 14 | ======================================================================================== */ 15 | -------------------------------------------------------------------------------- /demos/html5/svg/icomoon_5_icons/svgdefs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | binoculars 5 | 6 | 7 | 8 | cog 9 | 10 | 11 | 12 | gift 13 | 14 | 15 | 16 | spoon-knife 17 | 18 | 19 | 20 | earth 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /demos/html5/video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /demos/learning/css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Test 6 | 10 | 11 | 12 |
13 | desc 14 |

text description

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demos/myapp.js: -------------------------------------------------------------------------------- 1 | var circle = require('./circle.js'); 2 | console.log('半径为4的圆面积是：' + circle.area(4)); -------------------------------------------------------------------------------- /demos/read_file.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | fs.readFile('test.txt', 'utf8', function(err, data){ 3 | console.log(data); 4 | }); 5 | console.log('开始读文件了...'); 6 | -------------------------------------------------------------------------------- /demos/server.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | http.createServer(function (req, res) { 3 | res.writeHead(200, {'Content-Type':'text/html'}); 4 | res.write('Hello World\n'); 5 | res.end(); 6 | }).listen(1337); 7 | console.log('服务器运行中...'); 8 | -------------------------------------------------------------------------------- /demos/server2.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var server = http.createServer(); 3 | server.on('request', function(req, res){ 4 | res.writeHead(200, {'Content-Type':'text/html'}); 5 | res.end('Hello World\n' + Math.random()); 6 | }); 7 | server.on('request', function(req, res){ 8 | console.log(new Date().toLocaleString() + '\t' + 9 | req.url + '\t' + 10 | req.headers['user-agent'] 11 | ); 12 | }); 13 | server.listen(1337); 14 | console.log('服务器运行中...'); 15 | -------------------------------------------------------------------------------- /demos/test.txt: -------------------------------------------------------------------------------- 1 | 测试文字 --来自奇舞团 -------------------------------------------------------------------------------- /fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /html5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 培训 6 | 17 | 18 | 19 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /img/360safe/compare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/360safe/compare.png -------------------------------------------------------------------------------- /img/360safe/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/360safe/example.png -------------------------------------------------------------------------------- /img/360safe/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/360safe/sprite.png -------------------------------------------------------------------------------- /img/360safe/woff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/360safe/woff.png -------------------------------------------------------------------------------- /img/css3/android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/android.png -------------------------------------------------------------------------------- /img/css3/axis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/axis.png -------------------------------------------------------------------------------- /img/css3/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/chrome.png -------------------------------------------------------------------------------- /img/css3/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/firefox.png -------------------------------------------------------------------------------- /img/css3/ie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/ie.png -------------------------------------------------------------------------------- /img/css3/ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/ios.png -------------------------------------------------------------------------------- /img/css3/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/opera.png -------------------------------------------------------------------------------- /img/css3/region.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/region.png -------------------------------------------------------------------------------- /img/css3/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/css3/safari.png -------------------------------------------------------------------------------- /img/debug/android_browser.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/debug/carnaval.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/debug/carnaval.png -------------------------------------------------------------------------------- /img/debug/dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/debug/dev.png -------------------------------------------------------------------------------- /img/debug/ios_debug.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/debug/ios_debug.jpg -------------------------------------------------------------------------------- /img/debug/mobile_setting.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/debug/mobile_setting.jpg -------------------------------------------------------------------------------- /img/debug/safari_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/debug/safari_menu.png -------------------------------------------------------------------------------- /img/debug/safari_setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/debug/safari_setting.png -------------------------------------------------------------------------------- /img/design/360safe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/360safe.png -------------------------------------------------------------------------------- /img/design/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/apple.png -------------------------------------------------------------------------------- /img/design/braun_t3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/braun_t3.jpg -------------------------------------------------------------------------------- /img/design/braun_vs_apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/braun_vs_apple.png -------------------------------------------------------------------------------- /img/design/dark-side.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/dark-side.jpg -------------------------------------------------------------------------------- /img/design/drive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/drive.png -------------------------------------------------------------------------------- /img/design/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/google.png -------------------------------------------------------------------------------- /img/design/google_correct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/google_correct.png -------------------------------------------------------------------------------- /img/design/google_marked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/google_marked.png -------------------------------------------------------------------------------- /img/design/google_principle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/google_principle.png -------------------------------------------------------------------------------- /img/design/google_wrong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/google_wrong.png -------------------------------------------------------------------------------- /img/design/ipod1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/ipod1.jpg -------------------------------------------------------------------------------- /img/design/line-height-vs-line-width.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/line-height-vs-line-width.png -------------------------------------------------------------------------------- /img/design/metrics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/metrics.png -------------------------------------------------------------------------------- /img/design/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/plus.png -------------------------------------------------------------------------------- /img/design/smashing_correct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/smashing_correct.png -------------------------------------------------------------------------------- /img/design/smashing_wrong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/smashing_wrong.png -------------------------------------------------------------------------------- /img/design/texture1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/texture1.png -------------------------------------------------------------------------------- /img/design/texture2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/design/texture2.png -------------------------------------------------------------------------------- /img/devtools/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/devtools/chrome.png -------------------------------------------------------------------------------- /img/devtools/chrome_end.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/devtools/chrome_end.jpg -------------------------------------------------------------------------------- /img/devtools/chrome_start.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/devtools/chrome_start.jpg -------------------------------------------------------------------------------- /img/essentials/box-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/essentials/box-model.png -------------------------------------------------------------------------------- /img/essentials/named-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/essentials/named-color.png -------------------------------------------------------------------------------- /img/fetools/ape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/fetools/ape.jpg -------------------------------------------------------------------------------- /img/fetools/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/fetools/cover.jpg -------------------------------------------------------------------------------- /img/fetools/cover2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/fetools/cover2.jpg -------------------------------------------------------------------------------- /img/html5/3d.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 3D Effects Logo 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/html5/axis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/html5/axis.jpg -------------------------------------------------------------------------------- /img/html5/bunny.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/html5/bunny.mp4 -------------------------------------------------------------------------------- /img/html5/connectivity.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Connectivity Logo 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/html5/css3.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 CSS Styling Logo 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/html5/device.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Device Access Logo 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/html5/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/html5/img.png -------------------------------------------------------------------------------- /img/html5/integration.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Performance and Integration Logo 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/html5/movie.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/html5/movie.ogg -------------------------------------------------------------------------------- /img/html5/multimedia.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Multimedia Logo 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/html5/offline.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Offline Storage Logo 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/html5/semantics.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Semantics Logo 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/learning/ban.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/ban.png -------------------------------------------------------------------------------- /img/learning/css-definitive-guide.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/css-definitive-guide.jpg -------------------------------------------------------------------------------- /img/learning/css-mastery.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/css-mastery.jpg -------------------------------------------------------------------------------- /img/learning/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/html5.png -------------------------------------------------------------------------------- /img/learning/http-definitive-guide.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/http-definitive-guide.jpg -------------------------------------------------------------------------------- /img/learning/javascript-definitive-guide.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/javascript-definitive-guide.jpg -------------------------------------------------------------------------------- /img/learning/professional-javascript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/professional-javascript.jpg -------------------------------------------------------------------------------- /img/learning/w3school.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/learning/w3school.png -------------------------------------------------------------------------------- /img/mobile/ShadowsocksX-2.6.1.dmg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/ShadowsocksX-2.6.1.dmg -------------------------------------------------------------------------------- /img/mobile/android-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/android-version.png -------------------------------------------------------------------------------- /img/mobile/css-pixel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/css-pixel.png -------------------------------------------------------------------------------- /img/mobile/dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/dom.png -------------------------------------------------------------------------------- /img/mobile/ios-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/ios-version.png -------------------------------------------------------------------------------- /img/mobile/layout-viewport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/layout-viewport.png -------------------------------------------------------------------------------- /img/mobile/render-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/render-tree.png -------------------------------------------------------------------------------- /img/mobile/resolution-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/resolution-chart.png -------------------------------------------------------------------------------- /img/mobile/scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/scale.png -------------------------------------------------------------------------------- /img/mobile/touch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/touch.png -------------------------------------------------------------------------------- /img/mobile/visual-viewport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/mobile/visual-viewport.png -------------------------------------------------------------------------------- /img/node/block_server.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | req 10 | res 11 | wait 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 35 | 36 | 37 | 39 | 40 | 41 | 42 | DB 43 | 44 | -------------------------------------------------------------------------------- /img/node/event_loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/node/event_loop.png -------------------------------------------------------------------------------- /img/node/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/node/nodejs.png -------------------------------------------------------------------------------- /img/road/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/road/cover.jpg -------------------------------------------------------------------------------- /img/units/htcone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/units/htcone.png -------------------------------------------------------------------------------- /img/units/ruler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/units/ruler.png -------------------------------------------------------------------------------- /img/units/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/img/units/setting.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wenbo's Slides 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Wenbo's Slides

16 |
17 |
18 | 92 |
93 |
94 | 95 | 96 | -------------------------------------------------------------------------------- /lib/css/monokai.css: -------------------------------------------------------------------------------- 1 | /* 2 | Monokai style - ported by Luigi Maselli - http://grigio.org 3 | */ 4 | 5 | pre code { 6 | display: block; padding: 0.5em; 7 | background: #272822; 8 | } 9 | 10 | pre .tag, 11 | pre .tag .title, 12 | pre .keyword, 13 | pre .literal, 14 | pre .change, 15 | pre .winutils, 16 | pre .flow, 17 | pre .lisp .title, 18 | pre .clojure .built_in, 19 | pre .nginx .title, 20 | pre .tex .special { 21 | color: #F92672; 22 | } 23 | 24 | pre code { 25 | color: #DDD; 26 | } 27 | 28 | pre code .constant { 29 | color: #66D9EF; 30 | } 31 | 32 | pre .class .title { 33 | color: white; 34 | } 35 | 36 | pre .attribute, 37 | pre .symbol, 38 | pre .symbol .string, 39 | pre .value, 40 | pre .regexp { 41 | color: #BF79DB; 42 | } 43 | 44 | pre .tag .value, 45 | pre .string, 46 | pre .subst, 47 | pre .title, 48 | pre .haskell .type, 49 | pre .preprocessor, 50 | pre .ruby .class .parent, 51 | pre .built_in, 52 | pre .sql .aggregate, 53 | pre .django .template_tag, 54 | pre .django .variable, 55 | pre .smalltalk .class, 56 | pre .javadoc, 57 | pre .django .filter .argument, 58 | pre .smalltalk .localvars, 59 | pre .smalltalk .array, 60 | pre .attr_selector, 61 | pre .pseudo, 62 | pre .addition, 63 | pre .stream, 64 | pre .envvar, 65 | pre .apache .tag, 66 | pre .apache .cbracket, 67 | pre .tex .command, 68 | pre .prompt { 69 | color: #A6E22E; 70 | } 71 | 72 | pre .comment, 73 | pre .java .annotation, 74 | pre .python .decorator, 75 | pre .template_comment, 76 | pre .pi, 77 | pre .doctype, 78 | pre .deletion, 79 | pre .shebang, 80 | pre .apache .sqbracket, 81 | pre .tex .formula { 82 | color: #75715E; 83 | } 84 | 85 | pre .keyword, 86 | pre .literal, 87 | pre .css .id, 88 | pre .phpdoc, 89 | pre .title, 90 | pre .haskell .type, 91 | pre .vbscript .built_in, 92 | pre .sql .aggregate, 93 | pre .rsl .built_in, 94 | pre .smalltalk .class, 95 | pre .diff .header, 96 | pre .chunk, 97 | pre .winutils, 98 | pre .bash .variable, 99 | pre .apache .tag, 100 | pre .tex .special, 101 | pre .request, 102 | pre .status { 103 | font-weight: bold; 104 | } 105 | 106 | pre .coffeescript .javascript, 107 | pre .javascript .xml, 108 | pre .tex .formula, 109 | pre .xml .javascript, 110 | pre .xml .vbscript, 111 | pre .xml .css, 112 | pre .xml .cdata { 113 | opacity: 0.5; 114 | } 115 | -------------------------------------------------------------------------------- /lib/css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; padding: 0.5em; 10 | background: #3F3F3F; 11 | color: #DCDCDC; 12 | } 13 | 14 | pre .keyword, 15 | pre .tag, 16 | pre .django .tag, 17 | pre .django .keyword, 18 | pre .css .class, 19 | pre .css .id, 20 | pre .lisp .title { 21 | color: #E3CEAB; 22 | } 23 | 24 | pre .django .template_tag, 25 | pre .django .variable, 26 | pre .django .filter .argument { 27 | color: #DCDCDC; 28 | } 29 | 30 | pre .number, 31 | pre .date { 32 | color: #8CD0D3; 33 | } 34 | 35 | pre .dos .envvar, 36 | pre .dos .stream, 37 | pre .variable, 38 | pre .apache .sqbracket { 39 | color: #EFDCBC; 40 | } 41 | 42 | pre .dos .flow, 43 | pre .diff .change, 44 | pre .python .exception, 45 | pre .python .built_in, 46 | pre .literal, 47 | pre .tex .special { 48 | color: #EFEFAF; 49 | } 50 | 51 | pre .diff .chunk, 52 | pre .ruby .subst { 53 | color: #8F8F8F; 54 | } 55 | 56 | pre .dos .keyword, 57 | pre .python .decorator, 58 | pre .class .title, 59 | pre .haskell .label, 60 | pre .function .title, 61 | pre .ini .title, 62 | pre .diff .header, 63 | pre .ruby .class .parent, 64 | pre .apache .tag, 65 | pre .nginx .built_in, 66 | pre .tex .command, 67 | pre .input_number { 68 | color: #efef8f; 69 | } 70 | 71 | pre .dos .winutils, 72 | pre .ruby .symbol, 73 | pre .ruby .symbol .string, 74 | pre .ruby .symbol .keyword, 75 | pre .ruby .symbol .keymethods, 76 | pre .ruby .string, 77 | pre .ruby .instancevar { 78 | color: #DCA3A3; 79 | } 80 | 81 | pre .diff .deletion, 82 | pre .string, 83 | pre .tag .value, 84 | pre .preprocessor, 85 | pre .built_in, 86 | pre .sql .aggregate, 87 | pre .javadoc, 88 | pre .smalltalk .class, 89 | pre .smalltalk .localvars, 90 | pre .smalltalk .array, 91 | pre .css .rules .value, 92 | pre .attr_selector, 93 | pre .pseudo, 94 | pre .apache .cbracket, 95 | pre .tex .formula { 96 | color: #CC9393; 97 | } 98 | 99 | pre .shebang, 100 | pre .diff .addition, 101 | pre .comment, 102 | pre .java .annotation, 103 | pre .template_comment, 104 | pre .pi, 105 | pre .doctype { 106 | color: #7F9F7F; 107 | } 108 | 109 | pre .xml .css, 110 | pre .xml .javascript, 111 | pre .xml .vbscript, 112 | pre .tex .formula { 113 | opacity: 0.5; 114 | } 115 | 116 | -------------------------------------------------------------------------------- /lib/font/league_gothic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/lib/font/league_gothic-webfont.eot -------------------------------------------------------------------------------- /lib/font/league_gothic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/lib/font/league_gothic-webfont.ttf -------------------------------------------------------------------------------- /lib/font/league_gothic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webzhao/sharing/c5e60ea637cb041f78e76195f53750ce7597f3af/lib/font/league_gothic-webfont.woff -------------------------------------------------------------------------------- /lib/font/league_gothic_license: -------------------------------------------------------------------------------- 1 | SIL Open Font License (OFL) 2 | http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | -------------------------------------------------------------------------------- /lib/js/classList.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p 3 | Copyright Tero Piirainen (tipiirai) 4 | License MIT / http://bit.ly/mit-license 5 | Version 0.96 6 | 7 | http://headjs.com 8 | */(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Markdown Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 | 23 |
24 | 34 |
35 | 36 | 37 |
38 | 52 |
53 | 54 | 55 |
56 | 67 |
68 | 69 |
70 |
71 | 72 | 73 | 74 | 75 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /plugin/markdown/example.md: -------------------------------------------------------------------------------- 1 | # Markdown Demo 2 | 3 | 4 | 5 | ## External 1.1 6 | 7 | Content 1.1 8 | 9 | 10 | ## External 1.2 11 | 12 | Content 1.2 13 | 14 | 15 | 16 | ## External 2 17 | 18 | Content 2.1 19 | 20 | 21 | 22 | ## External 3.1 23 | 24 | Content 3.1 25 | 26 | 27 | ## External 3.2 28 | 29 | Content 3.2 30 | -------------------------------------------------------------------------------- /plugin/multiplex/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var multiplex = Reveal.getConfig().multiplex; 3 | var socketId = multiplex.id; 4 | var socket = io.connect(multiplex.url); 5 | 6 | socket.on(multiplex.id, function(data) { 7 | // ignore data from sockets that aren't ours 8 | if (data.socketId !== socketId) { return; } 9 | if( window.location.host === 'localhost:1947' ) return; 10 | 11 | Reveal.slide(data.indexh, data.indexv, data.indexf, 'remote'); 12 | }); 13 | }()); 14 | -------------------------------------------------------------------------------- /plugin/multiplex/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var fs = require('fs'); 3 | var io = require('socket.io'); 4 | var crypto = require('crypto'); 5 | 6 | var app = express.createServer(); 7 | var staticDir = express.static; 8 | 9 | io = io.listen(app); 10 | 11 | var opts = { 12 | port: 1948, 13 | baseDir : __dirname + '/../../' 14 | }; 15 | 16 | io.sockets.on('connection', function(socket) { 17 | socket.on('slidechanged', function(slideData) { 18 | if (typeof slideData.secret == 'undefined' || slideData.secret == null || slideData.secret === '') return; 19 | if (createHash(slideData.secret) === slideData.socketId) { 20 | slideData.secret = null; 21 | socket.broadcast.emit(slideData.socketId, slideData); 22 | }; 23 | }); 24 | }); 25 | 26 | app.configure(function() { 27 | [ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) { 28 | app.use('/' + dir, staticDir(opts.baseDir + dir)); 29 | }); 30 | }); 31 | 32 | app.get("/", function(req, res) { 33 | fs.createReadStream(opts.baseDir + '/index.html').pipe(res); 34 | }); 35 | 36 | app.get("/token", function(req,res) { 37 | var ts = new Date().getTime(); 38 | var rand = Math.floor(Math.random()*9999999); 39 | var secret = ts.toString() + rand.toString(); 40 | res.send({secret: secret, socketId: createHash(secret)}); 41 | }); 42 | 43 | var createHash = function(secret) { 44 | var cipher = crypto.createCipher('blowfish', secret); 45 | return(cipher.final('hex')); 46 | }; 47 | 48 | // Actually listen 49 | app.listen(opts.port || null); 50 | 51 | var brown = '\033[33m', 52 | green = '\033[32m', 53 | reset = '\033[0m'; 54 | 55 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /plugin/multiplex/master.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // don't emit events from inside the previews themselves 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | var multiplex = Reveal.getConfig().multiplex; 5 | 6 | var socket = io.connect(multiplex.url); 7 | 8 | var notify = function( slideElement, indexh, indexv, origin ) { 9 | if( typeof origin === 'undefined' && origin !== 'remote' ) { 10 | var nextindexh; 11 | var nextindexv; 12 | 13 | var fragmentindex = Reveal.getIndices().f; 14 | if (typeof fragmentindex == 'undefined') { 15 | fragmentindex = 0; 16 | } 17 | 18 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 19 | nextindexh = indexh; 20 | nextindexv = indexv + 1; 21 | } else { 22 | nextindexh = indexh + 1; 23 | nextindexv = 0; 24 | } 25 | 26 | var slideData = { 27 | indexh : indexh, 28 | indexv : indexv, 29 | indexf : fragmentindex, 30 | nextindexh : nextindexh, 31 | nextindexv : nextindexv, 32 | secret: multiplex.secret, 33 | socketId : multiplex.id 34 | }; 35 | 36 | socket.emit('slidechanged', slideData); 37 | } 38 | } 39 | 40 | Reveal.addEventListener( 'slidechanged', function( event ) { 41 | notify( event.currentSlide, event.indexh, event.indexv, event.origin ); 42 | } ); 43 | 44 | var fragmentNotify = function( event ) { 45 | notify( Reveal.getCurrentSlide(), Reveal.getIndices().h, Reveal.getIndices().v, event.origin ); 46 | }; 47 | 48 | Reveal.addEventListener( 'fragmentshown', fragmentNotify ); 49 | Reveal.addEventListener( 'fragmenthidden', fragmentNotify ); 50 | }()); -------------------------------------------------------------------------------- /plugin/notes-server/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // don't emit events from inside the previews themselves 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | 5 | var socket = io.connect(window.location.origin); 6 | var socketId = Math.random().toString().slice(2); 7 | 8 | console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId); 9 | window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId); 10 | 11 | // Fires when a fragment is shown 12 | Reveal.addEventListener( 'fragmentshown', function( event ) { 13 | var fragmentData = { 14 | fragment : 'next', 15 | socketId : socketId 16 | }; 17 | socket.emit('fragmentchanged', fragmentData); 18 | } ); 19 | 20 | // Fires when a fragment is hidden 21 | Reveal.addEventListener( 'fragmenthidden', function( event ) { 22 | var fragmentData = { 23 | fragment : 'previous', 24 | socketId : socketId 25 | }; 26 | socket.emit('fragmentchanged', fragmentData); 27 | } ); 28 | 29 | // Fires when slide is changed 30 | Reveal.addEventListener( 'slidechanged', function( event ) { 31 | var nextindexh; 32 | var nextindexv; 33 | var slideElement = event.currentSlide; 34 | 35 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 36 | nextindexh = event.indexh; 37 | nextindexv = event.indexv + 1; 38 | } else { 39 | nextindexh = event.indexh + 1; 40 | nextindexv = 0; 41 | } 42 | 43 | var notes = slideElement.querySelector('aside.notes'); 44 | var slideData = { 45 | notes : notes ? notes.innerHTML : '', 46 | indexh : event.indexh, 47 | indexv : event.indexv, 48 | nextindexh : nextindexh, 49 | nextindexv : nextindexv, 50 | socketId : socketId, 51 | markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false 52 | 53 | }; 54 | 55 | socket.emit('slidechanged', slideData); 56 | } ); 57 | }()); 58 | -------------------------------------------------------------------------------- /plugin/notes-server/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var fs = require('fs'); 3 | var io = require('socket.io'); 4 | var _ = require('underscore'); 5 | var Mustache = require('mustache'); 6 | 7 | var app = express.createServer(); 8 | var staticDir = express.static; 9 | 10 | io = io.listen(app); 11 | 12 | var opts = { 13 | port : 1947, 14 | baseDir : __dirname + '/../../' 15 | }; 16 | 17 | io.sockets.on('connection', function(socket) { 18 | socket.on('slidechanged', function(slideData) { 19 | socket.broadcast.emit('slidedata', slideData); 20 | }); 21 | socket.on('fragmentchanged', function(fragmentData) { 22 | socket.broadcast.emit('fragmentdata', fragmentData); 23 | }); 24 | }); 25 | 26 | app.configure(function() { 27 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) { 28 | app.use('/' + dir, staticDir(opts.baseDir + dir)); 29 | }); 30 | }); 31 | 32 | app.get("/", function(req, res) { 33 | fs.createReadStream(opts.baseDir + '/index.html').pipe(res); 34 | }); 35 | 36 | app.get("/notes/:socketId", function(req, res) { 37 | 38 | fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) { 39 | res.send(Mustache.to_html(data.toString(), { 40 | socketId : req.params.socketId 41 | })); 42 | }); 43 | // fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res); 44 | }); 45 | 46 | // Actually listen 47 | app.listen(opts.port || null); 48 | 49 | var brown = '\033[33m', 50 | green = '\033[32m', 51 | reset = '\033[0m'; 52 | 53 | var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' ); 54 | 55 | console.log( brown + "reveal.js - Speaker Notes" + reset ); 56 | console.log( "1. Open the slides at " + green + slidesLocation + reset ); 57 | console.log( "2. Click on the link your JS console to go to the notes page" ); 58 | console.log( "3. Advance through your slides and your notes will advance automatically" ); 59 | -------------------------------------------------------------------------------- /plugin/notes-server/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Slide Notes 7 | 8 | 87 | 88 | 89 | 90 | 91 |
92 | 93 |
94 | 95 |
96 | 97 | UPCOMING: 98 |
99 |
100 | 101 | 102 | 103 | 104 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /plugin/notes/notes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles opening of and synchronization with the reveal.js 3 | * notes window. 4 | */ 5 | var RevealNotes = (function() { 6 | 7 | function openNotes() { 8 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path 9 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path 10 | var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' ); 11 | 12 | // Fires when slide is changed 13 | Reveal.addEventListener( 'slidechanged', function( event ) { 14 | post('slidechanged'); 15 | } ); 16 | 17 | // Fires when a fragment is shown 18 | Reveal.addEventListener( 'fragmentshown', function( event ) { 19 | post('fragmentshown'); 20 | } ); 21 | 22 | // Fires when a fragment is hidden 23 | Reveal.addEventListener( 'fragmenthidden', function( event ) { 24 | post('fragmenthidden'); 25 | } ); 26 | 27 | /** 28 | * Posts the current slide data to the notes window 29 | * 30 | * @param {String} eventType Expecting 'slidechanged', 'fragmentshown' 31 | * or 'fragmenthidden' set in the events above to define the needed 32 | * slideDate. 33 | */ 34 | function post( eventType ) { 35 | var slideElement = Reveal.getCurrentSlide(), 36 | messageData; 37 | 38 | if( eventType === 'slidechanged' ) { 39 | var notes = slideElement.querySelector( 'aside.notes' ), 40 | indexh = Reveal.getIndices().h, 41 | indexv = Reveal.getIndices().v, 42 | nextindexh, 43 | nextindexv; 44 | 45 | if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { 46 | nextindexh = indexh; 47 | nextindexv = indexv + 1; 48 | } else { 49 | nextindexh = indexh + 1; 50 | nextindexv = 0; 51 | } 52 | 53 | messageData = { 54 | notes : notes ? notes.innerHTML : '', 55 | indexh : indexh, 56 | indexv : indexv, 57 | nextindexh : nextindexh, 58 | nextindexv : nextindexv, 59 | markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false 60 | }; 61 | } 62 | else if( eventType === 'fragmentshown' ) { 63 | messageData = { 64 | fragment : 'next' 65 | }; 66 | } 67 | else if( eventType === 'fragmenthidden' ) { 68 | messageData = { 69 | fragment : 'prev' 70 | }; 71 | } 72 | 73 | notesPopup.postMessage( JSON.stringify( messageData ), '*' ); 74 | } 75 | 76 | // Navigate to the current slide when the notes are loaded 77 | notesPopup.addEventListener( 'load', function( event ) { 78 | post('slidechanged'); 79 | }, false ); 80 | } 81 | 82 | // If the there's a 'notes' query set, open directly 83 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { 84 | openNotes(); 85 | } 86 | 87 | // Open the notes when the 's' key is hit 88 | document.addEventListener( 'keydown', function( event ) { 89 | // Disregard the event if the target is editable or a 90 | // modifier is present 91 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; 92 | 93 | if( event.keyCode === 83 ) { 94 | event.preventDefault(); 95 | openNotes(); 96 | } 97 | }, false ); 98 | 99 | return { open: openNotes }; 100 | })(); 101 | -------------------------------------------------------------------------------- /plugin/postmessage/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 |
11 | 12 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /plugin/postmessage/postmessage.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | simple postmessage plugin 4 | 5 | Useful when a reveal slideshow is inside an iframe. 6 | It allows to call reveal methods from outside. 7 | 8 | Example: 9 | var reveal = window.frames[0]; 10 | 11 | // Reveal.prev(); 12 | reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*'); 13 | // Reveal.next(); 14 | reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*'); 15 | // Reveal.slide(2, 2); 16 | reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*'); 17 | 18 | Add to the slideshow: 19 | 20 | dependencies: [ 21 | ... 22 | { src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } } 23 | ] 24 | 25 | */ 26 | 27 | (function (){ 28 | 29 | window.addEventListener( "message", function ( event ) { 30 | var data = JSON.parse( event.data ), 31 | method = data.method, 32 | args = data.args; 33 | 34 | if( typeof Reveal[method] === 'function' ) { 35 | Reveal[method].apply( Reveal, data.args ); 36 | } 37 | }, false); 38 | 39 | }()); 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /plugin/print-pdf/print-pdf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * phantomjs script for printing presentations to PDF. 3 | * 4 | * Example: 5 | * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf 6 | * 7 | * By Manuel Bieh (https://github.com/manuelbieh) 8 | */ 9 | 10 | // html2pdf.js 11 | var page = new WebPage(); 12 | var system = require( 'system' ); 13 | 14 | page.paperSize = { 15 | format: 'A4', 16 | orientation: 'landscape', 17 | margin: { 18 | left: '0', 19 | right: '0', 20 | top: '0', 21 | bottom: '0' 22 | } 23 | }; 24 | page.zoomFactor = 1.5; 25 | 26 | var revealFile = system.args[1] || 'index.html?print-pdf'; 27 | var slideFile = system.args[2] || 'slides.pdf'; 28 | 29 | if( slideFile.match( /\.pdf$/gi ) === null ) { 30 | slideFile += '.pdf'; 31 | } 32 | 33 | console.log( 'Printing PDF...' ); 34 | 35 | page.open( revealFile, function( status ) { 36 | console.log( 'Printed succesfully' ); 37 | page.render( slideFile ); 38 | phantom.exit(); 39 | } ); -------------------------------------------------------------------------------- /plugin/prism/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * okaidia theme for JavaScript, CSS and HTML 3 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/ 4 | * @author ocodia 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #f8f8f2; 10 | text-shadow: 0 1px rgba(0,0,0,0.3); 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | 18 | -moz-tab-size: 4; 19 | -o-tab-size: 4; 20 | tab-size: 4; 21 | 22 | -webkit-hyphens: none; 23 | -moz-hyphens: none; 24 | -ms-hyphens: none; 25 | hyphens: none; 26 | } 27 | 28 | /* Code blocks */ 29 | pre[class*="language-"] { 30 | padding: 1em; 31 | margin: .5em 0; 32 | overflow: auto; 33 | border-radius: 0.3em; 34 | } 35 | 36 | :not(pre) > code[class*="language-"], 37 | pre[class*="language-"] { 38 | background: #272822; 39 | } 40 | 41 | /* Inline code */ 42 | :not(pre) > code[class*="language-"] { 43 | padding: .1em; 44 | border-radius: .3em; 45 | } 46 | 47 | .token.comment, 48 | .token.prolog, 49 | .token.doctype, 50 | .token.cdata { 51 | color: slategray; 52 | } 53 | 54 | .token.punctuation { 55 | color: #f8f8f2; 56 | } 57 | 58 | .namespace { 59 | opacity: .7; 60 | } 61 | 62 | .token.property, 63 | .token.tag, 64 | .token.constant, 65 | .token.symbol { 66 | color: #f92672; 67 | } 68 | 69 | .token.boolean, 70 | .token.number{ 71 | color: #ae81ff; 72 | } 73 | 74 | .token.selector, 75 | .token.attr-name, 76 | .token.string, 77 | .token.builtin { 78 | color: #a6e22e; 79 | } 80 | 81 | 82 | .token.operator, 83 | .token.entity, 84 | .token.url, 85 | .language-css .token.string, 86 | .style .token.string, 87 | .token.variable { 88 | color: #f8f8f2; 89 | } 90 | 91 | .token.atrule, 92 | .token.attr-value 93 | { 94 | color: #e6db74; 95 | } 96 | 97 | 98 | .token.keyword{ 99 | color: #66d9ef; 100 | } 101 | 102 | .token.regex, 103 | .token.important { 104 | color: #fd971f; 105 | } 106 | 107 | .token.important { 108 | font-weight: bold; 109 | } 110 | 111 | .token.entity { 112 | cursor: help; 113 | } 114 | 115 | -------------------------------------------------------------------------------- /plugin/remotes/remotes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Touch-based remote controller for your presentation courtesy 3 | * of the folks at http://remotes.io 4 | */ 5 | 6 | (function(window){ 7 | 8 | /** 9 | * Detects if we are dealing with a touch enabled device (with some false positives) 10 | * Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js 11 | */ 12 | var hasTouch = (function(){ 13 | return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch; 14 | })(); 15 | 16 | /** 17 | * Detects if notes are enable and the current page is opened inside an /iframe 18 | * this prevents loading Remotes.io several times 19 | */ 20 | var remotesAndIsNotes = (function(){ 21 | return !(window.RevealNotes && self == top); 22 | })(); 23 | 24 | if(!hasTouch && !remotesAndIsNotes){ 25 | head.ready( 'remotes.ne.min.js', function() { 26 | new Remotes("preview") 27 | .on("swipe-left", function(e){ Reveal.right(); }) 28 | .on("swipe-right", function(e){ Reveal.left(); }) 29 | .on("swipe-up", function(e){ Reveal.down(); }) 30 | .on("swipe-down", function(e){ Reveal.up(); }) 31 | .on("tap", function(e){ Reveal.next(); }) 32 | .on("zoom-out", function(e){ Reveal.toggleOverview(true); }) 33 | .on("zoom-in", function(e){ Reveal.toggleOverview(false); }) 34 | ; 35 | } ); 36 | 37 | head.js('https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js'); 38 | } 39 | })(window); --------------------------------------------------------------------------------