我刚在马略卡岛的一个度假村度过了周末。我受邀参加了来自法兰克福的一家 IT 咨询公司的离岗培训，并在会上做了两个小时的 HTML5（再）入门介绍。

听众和挑战

这家咨询公司在他们所做的事情上非常成功，并且是一个非常成熟的 Java / 本地代码商店。他们的客户是保险公司、银行等等，这意味着 HTML5 这个话题在他们的讨论中只是间接出现。随着越来越多的客户寻求 iPad 应用和其他跨平台解决方案的需求，他们想更多地了解 HTML5，它能做什么，以及可以做什么。

这听起来像是走出我的舒适区的好机会，看看我作为网络技术倡导者的技能有多好。我始终乐观，我也认为这是一个很好的机会，可以在 IT 用于为许多人的生活带来改变的领域激发灵感。所以我答应了。

演示文稿

没有任何准备（没有时间），不知道听众是谁（结果是整个公司，包括非技术员工和一些承包商），被要求用德语发表演讲，我发现自己站在一个大约 70 人的房间里，设置我的电脑（第一次失败了，它很快就要被送到旧电脑农场了），很高兴地发现 WiFi 可以用，然后直接开始了。

与其孤立地谈论 HTML5，我认为最好展示网络作为开发平台以及过去几年中可能不为人知的进步。结果证明，这正是他们需要的，后来我和一些想认真尝试 HTML5 的人进行了很多一对一的交谈。他们的想法是将公司现在使用的部分工具从 Java 和固定大小、Photoshop 驱动的界面转换为使用 HTML5 和 JavaScript 的更灵活的解决方案。我敢说，这真是太棒了。

我所做的

考虑到这基本上是一个开放的 2.5 小时展示和与观众互动，我没有笔记。因此，这里列出了我展示和提到的内容，它们产生了相当大的影响，以及我展示这些内容的技术。

打下基础

我首先解释了对 HTML5 的需求（从文档到应用程序的转变），以及在拥有统一和定义的 HTML 解析器的情况下，我们终于在各个浏览器之间有了公平的竞争环境。我解释说，HTML5 应用和原生应用的面对面比较是不公平的，因为在许多情况下，浏览器的性能和 webview 的性能会受到硬件和操作系统的限制。这意味着浏览器无法使用原生代码可以使用的相同资源，当然这会影响性能。也就是说，web 应用比原生应用更灵活，更新也更容易。

本着抢先写作的精神，我还引用了马克·扎克伯格几周前在 TechCrunch Disrupt 上的话，并解释说他没有说 HTML5 是一个错误，而是说他们使用它的方式是错误的。我还指出他的话，即 Facebook 的移动网页用户数量超过了 Android 和 iOS 用户数量的总和。

技巧

我认为演示中最有影响力的部分是我没有准备任何幻灯片，而是使用浏览器向观众展示所有内容。我使用 Mozilla Thimble 展示实时代码以及我的更改的直接影响。我使用 Firefox 和 Chrome 中的开发者工具来展示如何更改实时网站并尝试现有页面中的一些新技术，而不是展示令人印象深刻但与观众无关的演示。

平台演示

总而言之，我的目标是表明 HTML5 是值得押注的，因为它属于 web 生态系统的一部分。这意味着，我没有从代码开始，而是展示了

• 使用在线编辑器进行协作编辑
• GitHub 作为获取代码、结识其他开发者和提交修复的地方
• 浏览器的开发者工具，展示现在我们可以在代码优先、部署、查找错误的开发周期之外进行测试和修复
• MDN 作为演示和文档的资源
• Browserstack.com 用于在您没有的浏览器和操作系统上进行测试

技术演示

技术演示很简单，但我得到了很多关于它们的正面反馈，因为我一直保持着它们的关联性。

• 介绍 HTML5 表单元素，并展示只需添加 number 属性和 required 属性，就可以确保该字段始终为数字，并且用户无法在（浏览器中）没有完全填写该字段的情况下提交表单。这意味着不再需要编写客户端验证，这对非 JavaScript 爱好者来说是一个很大的难题。
• 在页面中添加 video 元素，通过右键单击播放它，添加 controls 属性添加控件，并添加 CSS 转换（例如旋转），以证明视频在 HTML5 世界中只是另一个页面元素。
• 展示一个使用媒体查询进行响应式设计的简单示例，并展示 Firefox 开发者工具中的 响应式模式
• 展示 CSS 中一个简单的悬停状态，并添加一个过渡，以证明如今您可以非常简单地使事物看起来平滑，而无需添加另一个 JavaScript。
• 展示如何使用一些 CSS 过渡来逐步增强一个简单的 HTML 文档，使其看起来更加引人入胜。
• 展示本地存储的简单性（使用 123done 任务列表示例），并解释 AppCache 和清单文件如何将网页转换为本地缓存的应用程序。
• 展示使用 Canvas 在页面中绘制内容的简易方法，并解释使用拖放的 Canvas 还可以实现 图像裁剪 和 缩略图生成。
• 展示如今文件上传器对最终用户来说更加方便，以 Flickr 图像上传器为例
• 展示如何使用 Mozilla Popcorn 使视频与 web 内容互动 - 解释说这可以用于交互式培训材料

展望未来

根据观众的要求，我还展示了一些 web 技术的未来部分

• toycam 演示 解释说它使用 WebRTC，它可以用于获取视频输入并在浏览器中使用 WebGL 实时对其进行操作。我还指出 WebRTC 不限于此，它可以用于各种其他数据流任务
• Firefox OS，它的架构以及我们为什么要这样做
• Mozilla 的 Web API 及其在 Firefox OS 中的使用方式（展示 FFOS 桌面构建，使用拨号盘进行操作，并展示即使是键音也是使用 JavaScript 创建的）
• 解释 Persona，以及它如何让您在无需请求用户名和密码的情况下轻松验证 web 上的用户
• 展示 Banabread 演示，并解释它是如何通过使用 Emscripten 转换 C++ 代码来实现的
• 展示 Mozilla 应用商店预览，以及 HTML5 应用如何以原生方式安装并从应用程序文件夹和全屏运行

轮到你了

总而言之，我不得不说这次活动非常愉快，我从中学到了很多，并有一种满足感，那就是缩短了 web 设计世界与企业 IT 世界之间的差距。你也试试吧，我相信你会喜欢的。