软件工程建设师-10个html5精彩运用设计案例文档.docxVIP

10个HTML5精彩应用设计案例 现在我们已经可以使用HTML 5开发出网络在线应用程序，在这篇文章中，我们来看看最近国外的一些使用HTML 5开发的网站，您将需要一个支持HTML 5的浏览器。 AD： 在 HYPERLINK /art/200907/133407.htm \t _blank HTML 5未成熟应用的时候，流媒体播放等一些精彩应用必须借助第三方软件才可以实现，比如Flash等。但是现在HTML 5已经将其超过，它不但可以播放视频和音频，而且还可以开发出各种网络在线应用程序，如标识的地理位置、离线存储、拖放、图片处理等。在这篇文章中，我们来看看最近国外的一些使用HTML 5开发的网站。请注意，您将需要一个支持HTML 5的浏览器。 一、处理图片 网址：/files/collage/demo.html 本网站使用了HTML 5的Canvas元素来创建一个图层列表，通过从图片库选择图片添加后，会新建一个新的图层，每一层都可以通过操纵将图片进行：移动、缩放、旋转、改变图层上下级、删除层、改变透明度、改变混合模式、启用或禁用的图片阴影。 二、图片编辑 网址：/html5editor 百鸟居的HTML 5的图片编辑器十分的非常方便快捷，可以说它将在线图片编辑革新化。 通过简单的上传和点击，任何人都可以通过互联网编辑精美的图片，或者通过多层操作来执行简单的图层合并、单层编辑等功能。 三、待办事项 网址：http://10/Uploads/58/ 5List是一个使用HTML 5、CSS 3和JavaScript编写的记事本，利用了HTML 5的功能，包括localStorage，它具有客户端数据库存储功能。通过5List，可将用户提交的待办数据保存到用户本地机器上。 四、拖拽图片上传 网址：/openweb/imageUploader/ 这个使用HTML 5开发的图片上传功能，在Mozilla的Firefox 3.6中测试通过，发现Firefox 3.6支持HTML 5的部分功能。 它支持将图片直接拖拽到浏览器进行上传。 五、谷歌吃豆子 网址：/game/google-pacman/ 这是谷哥为纪念吃豆子游戏30周年，将网站首页换成此游戏LOGO而设计的！据说这个游戏255关，包括最后一关! 六、表单 网址：/code/fun-with-html5-forms/ 一个非常有用的表单示例代码，使用HTML 5开发，包含了常见的表单操作，它能将需要的表单字段进行验证、字段占位符、日期选择器和电子邮件验证等，可用于网页和手机网页等具体领域。 七、图表 网址：/finance/index HumbleFinance是使用HTML 5开发的数据可视化工具，如使用HTML 5进行交互式数据图形演示，它可用于显示任何两个2-D的数据集。 八、在线幻灯片制作 网址：http://10/Uploads/143/ 此幻灯片展示了HTML 5的localStorage和ContentEditable功能，应用十分丰富。简单的操作界面，利用CSS 3功能，同时又保持较小的文件大小。它支持将内容“自动保存”到本地（通过localStorage），拥有增加、减少和主题更换操作。 九、在线绘图 网址：/ MURO是一个纯HTML 5开发的在线绘图工具，它有两种模式：基本和专业，它们都免费使用。 MURO支持效果有滤镜、锐化工具和画笔，所有的操作在一个直观和简单的界面里进行，使用相当容易。 十、地理定位 网址：/#Geolocation 这个Web应用程序会自动检测您所在的位置，然后使用谷歌地图返回附近的就业信息。 不过需要注意的是，它要求分享您浏览器所处的地址信息。