如何制作简易的HTML5幻灯片
本文摘自 勾三股四 更早时期的 不老歌 博客。
在此贴上本人在HTML5研究小组5月14日技术分享沙龙的主题分享。和当天分享的内容略有出入，“出入部分”属个人言论，不代表HTML5研究小组立场
在线PPT：http://jinjiang.github.com/html5-slides-20110512
源代码：https://github.com/Jinjiang/html5-slides-20110512
如何制作简易的HTML5幻灯片
赵锦江
自我介绍
- 赵锦江(勾三股四)
- Tags: maxthon/f2e/music/football
- QQ: 110698041
- E/M: zhaojinjiang@yahoo.com.cn
- Blog: http://bulaoge.net/?g3g4
HTML5 幻灯片演示
- 《HTML5游戏开发实例分享》(罗睿 2011.02) 之html5重构版
- http://slides.html5rocks.com/
- S5: A Simple Standards-Based Slide Show System
- CSSS: CSS-based SlideShow System
主要内容
- HTML5简简简介
- 我们该如何看待HTML5
- 前端vs前端工程师
- 前端的发展和浏览器的发展
- How HTML5? Why Slide Shows?
- HTML5幻灯片的制作过程
- 功能点摘要
- 结合代码讲解实现思路
- 发散思维
一、HTML5简简简介
HTML 5 === Web Application
二、我们该如何看待HTML5
前端 != 前端工程师
- 前端开发需要更广阔的技术视野
- 而不仅仅是
JS语言专家
- 而不仅仅是
- 前端开发中
界面和交互所占的比例越来越小- 文件处理、图形处理、网络通信、数据库操作……
- 前端开发有了真正的开发的味道
- 面向对象思想、数据结构与算法、编译原理……
- 面临严峻挑战，转变观念非常重要！
- 前端工程师将无法胜任前端的工作
——这绝对不是危言耸听！
- 前端工程师将无法胜任前端的工作
前端的发展和浏览器的发展
- IE6 份额居高不下
- HTML5 对开发人员的帮助是直接的，对用户的帮助是间接的
- Web App 还没有在国内市场扮演起重要的角色
- 尊重技术，同时尊重用户
IE6可以死……
药家鑫必需死！
三、How HTML5? Why Slide Shows?
How HTML5?
How HTML5?
Why Slide Shows?
- 《让子弹飞》：步子迈大了，容易扯着蛋！
- 国内现在都在谈概念、秀技术，至今没有真正的王牌产品问世
- 幻灯片是常见应用，接触的机会非常频繁
- 网上已经有一些HTML5幻灯片的出现，但我们缺乏对其深入的了解
- 通过共鸣度较高的简单应用的实战，拉进我们和HTML5之间的距离
- 大家平时既是观察者，又是使用者，今天大家都会变成开发者！
四、HTML5幻灯片的制作过程
- 功能点摘要
- HTML结构设计
- 分步实现JS逻辑和CSS表现
- 特殊元素特殊处理
- 其它高级处理
- 结合源代码逐步讲解
注：部分动画和缩放特效暂只针对 Webkit v533.9 内核进行开发
1. 功能点整理
- 上翻页，下翻页
- 快捷键：上、下、左、右
- 快捷键：PAGE UP、PAGE DOWN
鼠标单击事件、鼠标滚轮事件触摸屏幕事件
- 翻页到最前、最后：
- 快捷键：HOME、END
- 翻到指定的页
- 通过location hash，即#slideX
- 注意：要考虑hash纠错
- 通过快捷键，Ctrl + G
- 通过location hash，即#slideX
2. HTML结构设计
- 原则：尽量让结构简单、尽量沿用Powerpoint的结构
- 只要body > div(.slide)
- 确定id命名规律：#slideX
- 提供统一的.tmpl-xxx模板类型，这里和Powerpoint中的模板对应
- 每个页面都可以由标题(h1)、次标题(h2)、正文、段落、图片等固定标签组合而成，和Powerpoint中的元素对应
3. 分步实现JS逻辑和CSS表现
- 初始化基本样式
- 通过:target伪类实现当前显示哪张幻灯片
- 为不同的模板类设置不一样的显示效果
- 设置三个基本的翻页的js接口：gotoPage/gotoNext/gotoPrev
- 在页面载入时进行初始化调整
- 绑定相关的鼠标、键盘事件
4. 特殊元素特殊处理
- 幻灯片内部动画
- 通过为动画元素增加一个特殊的class来进行识别
- 当幻灯片内有input/textarea/select，且用户聚焦在这些表单控件上时，需要屏蔽全局快捷键和鼠标事件
5. 其它高级处理
- 加入幻灯之间的切换动画，未来可尝试插件化和多样化
- 完善幻灯片样式模板机制，未来可尝试模板代码独立
- 设计了几个简单的程序钩子(hooks)
- 兼容 IE 6
- 通过条件注释 + 程序钩子 (+ flash)实现
- 用一颗 Web App 的心去看待 IE 6，那么它也是 HTML5 的一部分 ^_^
6. 结合源代码逐步讲解
- HTML代码 (index.html, 右键菜单→查看源代码)
- 样式代码 (style.css)
- 兼容IE的样式代码 (style.ie.css)
- 脚本代码 (script.js)
- 兼容IE的脚本代码 (script.ie.js)
五、发散思路
- 更好的标签语义
- 根据文字内容多少自适应文字大小
- 快速预览多张幻灯片的全局查看模式
- 页面悬停左右区域时显示翻页按钮
- 辅助工具：马克笔等
- 开发配套的可视化编辑器和页面生成程序
- 可以将网页格式在博客和幻灯片之间自由转换
- 完成一个带账户系统的幻灯片分享网站
- 应对不同的浏览器和操作系统
- 无障碍操作、演示用的移动端简易控制器
木有了！
欢迎提问