如何制作简易的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 幻灯片演示

主要内容

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

一、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幻灯片的制作过程

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

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

1. 功能点整理

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

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. 结合源代码逐步讲解

五、发散思路

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

木有了!

欢迎提问

向本文提出修改或勘误建议