1 / 47

HTML5

HTML5. 用. 应. 分. 享. HTML5 在 YuanOS & 猎豹 浏览器中的 应用. 猎豹浏览器 万振. HTML5 是什么？. HTML5 有哪些特性？. 当然，今天我不 打算回答这两个问题. 由于普通话不够标准， 加上 HTML5 的 发音真的很拗口 所以，我 用 H5 来表示 HTML5. H5 ≈ HTML5. H5 在 YuanOS 中的应用. YuanOS 是一款 WebOS. 没有 人谈论 H5 的时候 ，我们就开始了探索之旅 起初 ， AJAX 带来的变革让我们欣喜若狂

rhian
Télécharger la présentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 用 应 分 享 HTML5在YuanOS & 猎豹浏览器中的应用 猎豹浏览器 万振

  2. HTML5是什么？

  3. HTML5有哪些特性？

  4. 当然，今天我不打算回答这两个问题

  5. 由于普通话不够标准，加上HTML5的发音真的很拗口由于普通话不够标准，加上HTML5的发音真的很拗口 所以，我用H5来表示HTML5 H5≈HTML5

  6. H5在YuanOS中的应用

  7. YuanOS是一款WebOS • 没有人谈论H5的时候，我们就开始了探索之旅 • 起初，AJAX带来的变革让我们欣喜若狂 • 它刺激我们用极其复杂的方式来实现WebApp

  8. png阴影 • Flash上传 • Flash本地存储 • SVG • ……

  9. 这种痛苦一直延续到H5的诞生

  10. 基于H5我们重构了YuanOS

  11. 多数H5特性均应用于YuanOS 最记忆深刻的 -- H5的原生拖拽

  12. 可拖拽的元素 <div id=“dra" draggable="true"></div> 能够被拖拽的元素一定要设置属性：draggable=”true” 然后将'dragstart'事件绑定到draggable元素上

  13. 目标区域droppable 对于所有的droppable区域我们绑定这些事件：'dragover','dragleave'和'drop' 可以将整个body作为droppable区域， droppable区域可以接受来自任何地方的拖拽数据，包括其他浏览器或者本地。

  14. “drop” vardt = ev.originalEvent.dataTransfer; var texts = dt.getData('Text');

  15. 通过拖拽--设置背景 (演示)

  16. 2. 通过拖拽--保存网址和内容 (演示)

  17. 3. 一个综合的案例 (演示)

  18. 拖拽+Canvas+File API，实现在线生成个性日历

  19. varsourcei = $('<imgsrc="' + most_photo + '">'); var source = $('<canvas />'); var b = p_Width / p_width; var W = Math.round(b * width); var H = Math.round(b * height); source.attr({ width: W, height: H }); var source2D = source[0].getContext("2d"); source2D.drawImage(sourcei[0], Math.round(p_left * b * -1), Math.round(p_top * b * -1), W, H, 0, 0, W, H); var T = gettop(json, i); ctx.drawImage(source[0], Math.round(left * B), Math.round(T * B), Math.round(width * B), Math.round(height * B)) ctx.drawImage(imgs, 0, 0);

  20. 其他应用截图

  21. H5让WebOS越来越具备可操作性，取代桌面或者说成为桌面以外的一种重要选择。H5让WebOS越来越具备可操作性，取代桌面或者说成为桌面以外的一种重要选择。 指日可待！

  22. H5在猎豹浏览器中的应用

  23. 一样浏览器，别样NewTab

  24. NewTab是？ 在创建一个新的标签页时，取代浏览器默认主页的，带有网站缩略图导航的页面

  25. 你常见到的是这些吧？

  26. 它 们 … …

  27. 所以，猎豹浏览器重新发明了NewTab

  28. 如何做到？

  29. HTML5 + CSS3

  30. 通过CSS3属性Transform实现重力感应以及翻页特效通过CSS3属性Transform实现重力感应以及翻页特效

  31. -webkit-transform: rotateX(-0.75deg) rotateY(0.94230723deg); -webkit-transform-origin: 50% 50%;

  32. 通过LocalStorage提升NewTab效率

  33. varLocalStorage = window.localStorage; LocalStorage.setItem(name, value);

  34. 通过CSS3“Scale”属性实现无级缩放

  35. -webkit-transform: scale(0.22592592592592595)

  36. 历史记录也疯狂！

  37. 酷炫与安全

  38. 请期待更多惊喜……

  39. 谢 谢！

  40. 欢迎交流

More Related