如何制作简易的HTML5幻灯片

• 赵锦江(勾三股四)
• Tags: maxthon/f2e/music/football
• QQ: 110698041
• E/M: [email protected]
• Blog: http://bulaoge.net/?g3g4

• 《HTML5游戏开发实例分享》(罗睿 2011.02) 之html5重构版
  • 原版链接
• http://slides.html5rocks.com/
• S5: A Simple Standards-Based Slide Show System
• CSSS: CSS-based SlideShow System

1. HTML5简简简介
2. 我们该如何看待HTML5
   1. 前端vs前端工程师
   2. 前端的发展和浏览器的发展
3. How HTML5? Why Slide Shows?
4. HTML5幻灯片的制作过程
   1. 功能点摘要
   2. 结合代码讲解实现思路
5. 发散思维

• 前端开发需要更广阔的技术视野
  • 而不仅仅是JS语言专家
• 前端开发中界面和交互所占的比例越来越小
  • 文件处理、图形处理、网络通信、数据库操作……
• 前端开发有了真正的开发的味道
  • 面向对象思想、数据结构与算法、编译原理……


• 面临严峻挑战，转变观念非常重要！
  • 前端工程师将无法胜任前端的工作
    ——这绝对不是危言耸听！

• IE6 份额居高不下
• HTML5 对开发人员的帮助是直接的，对用户的帮助是间接的
• Web App 还没有在国内市场扮演起重要的角色
• 尊重技术，同时尊重用户

• 《让子弹飞》：步子迈大了，容易扯着蛋！
• 国内现在都在谈概念、秀技术，至今没有真正的王牌产品问世
• 幻灯片是常见应用，接触的机会非常频繁
• 网上已经有一些HTML5幻灯片的出现，但我们缺乏对其深入的了解
• 通过共鸣度较高的简单应用的实战，拉进我们和HTML5之间的距离
• 大家平时既是观察者，又是使用者，今天大家都会变成开发者！

1. 功能点摘要
2. HTML结构设计
3. 分步实现JS逻辑和CSS表现
4. 特殊元素特殊处理
5. 其它高级处理
6. 结合源代码逐步讲解

注：部分动画和缩放特效暂只针对 Webkit _v533.9 内核进行开发

• 上翻页，下翻页
  • 快捷键：上、下、左、右
  • 快捷键：PAGE UP、PAGE DOWN
  • 鼠标单击事件、鼠标滚轮事件
  • 触摸屏幕事件
• 翻页到最前、最后：
  • 快捷键：HOME、END
• 翻到指定的页
  • 通过location hash，即#slideX
    • 注意：要考虑hash纠错
  • 通过快捷键，Ctrl + G

• 原则：尽量让结构简单、尽量沿用Powerpoint的结构
• 只要body > div(.slide)
• 确定id命名规律：#slideX
• 提供统一的.tmpl-xxx模板类型，这里和Powerpoint中的模板对应
• 每个页面都可以由标题(h1)、次标题(h2)、正文、段落、图片等固定标签组合而成，和Powerpoint中的元素对应

• 初始化基本样式
• 通过:target伪类实现当前显示哪张幻灯片
• 为不同的模板类设置不一样的显示效果
• 设置三个基本的翻页的js接口：gotoPage/gotoNext/gotoPrev
• 在页面载入时进行初始化调整
• 绑定相关的鼠标、键盘事件

• 幻灯片内部动画
  • 通过为动画元素增加一个特殊的class来进行识别
• 当幻灯片内有input/textarea/select，且用户聚焦在这些表单控件上时，需要屏蔽全局快捷键和鼠标事件

测试用文本框：

• 加入幻灯之间的切换动画，未来可尝试插件化和多样化
• 完善幻灯片样式模板机制，未来可尝试模板代码独立
  • 模板展示
• 设计了几个简单的程序钩子(hooks)
• 兼容 IE 6
  • 通过条件注释 + 程序钩子 (+ flash)实现
  • 用一颗 Web App 的心去看待 IE 6，那么它也是 HTML5 的一部分 ^_^

• HTML代码 (index.html, 右键菜单→查看源代码)
• 样式代码 (style.css)
  • 兼容IE的样式代码 (style.ie.css)
• 脚本代码 (script.js)
  • 兼容IE的脚本代码 (script.ie.js)

• 更好的标签语义
• 根据文字内容多少自适应文字大小
• 快速预览多张幻灯片的全局查看模式
• 页面悬停左右区域时显示翻页按钮
• 辅助工具：马克笔等
• 开发配套的可视化编辑器和页面生成程序
• 可以将网页格式在博客和幻灯片之间自由转换
• 完成一个带账户系统的幻灯片分享网站
• 应对不同的浏览器和操作系统
• 无障碍操作、演示用的移动端简易控制器