灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由开源软件

Size: px

Start display at page:

Download "灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由开源软件"

祭淹伏
7 years ago
Views:

1 Allen Long 微博 : Twitter:

2 灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由开源软件

3 议题目前最热的 Web 技术 : HTML5, CSS3, JavaScript Firefox, Chrome, Opera, Safari, IE 对 HTML5 的支持演示, 体验 HTML5 说说 Flash

4 1991 HTML 1994 HTML CSS 1 + JavaScript 1997 HTML CSS XHTML Tableless Web Design 2005 Ajax 2009 HTML 5 Web 技术发展史

5 HTML5 ~= HTML + CSS + JS HTML5? CSS3? JavaScript?ECMAScript?

6 Semantics <section>, <article>, <nav>, <header>, <footer>, <aside>, <hgroup>, <mark>, <figure>, <figcaption>

7 Offline & Storage AppCache, Local Storage, Web SQL & Indexed DB, File API, Online/Offline Events

8 Device Access Geolocation API, from Audio/Video input access to Microphones and Cameras

9 Connectivity Web Sockets, Server-Sent Events, be used for Chats, Games, Communication.

10 Multimedia Audio and video

11 3D, Graphics & Effects SVG, Canvas, WebGL, and CSS3 3D

12 Performance & Integration Web Workers, XMLHttpRequest(XHR), WebSocket, CSS3 Transitions

13 CSS3 CSS 3D Transforms, CSS3 Colors, CSS3 Animation...

14 HTML 更好的语义标签 <section>, <article>, <aside>, <footer>, <header>, <hgroup>, <figure>, <figcaption>, <nav> 等标签 <section> <h1>html5</h1> <section> <h2>introduction</h2> <p>in this section, we discuss HTML5 </section> <section> <h2>specification</h2> <P> </section> <aside> <p> </aside> </section> <footer> <p>(c) 2011 Huihoo.com </footer>

15 HTML 应用标签 <meter min="0" max="100" low="40" high="90" optimum="100" value="91">a+</meter> <progress>downloading...</progress> <progress value="75" max="100">3/4 complete</progress>

16 HTML 新的 Form 类型 <input type="text" required /> <input type=" " /> <input type="date" min=" " max=" " value=" "/> <input type="range" min="0" max="50" value="10" /> <input type="search" results="10" placeholder="search..." /> <input type="tel" placeholder="(555) " pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$" /> <input type="color" placeholder="e.g. #bbbbbb" /> <input type="number" step="1" min="-5" max="10" value="0" />

17 HTML 内置 SVG <html> <svg> <circle id="mycircle" class="important" cx="50%" cy="50%" r="100" fill="url(#mygradient)" onmousedown="alert('hello SVG!');"/> </svg> </html>

18 CSS3 Borders border-color border-image border-radius box-shadow Backgrounds background-origin and background-clip background-size multiple backgrounds Color HSL colors HSLA colors opacity RGBA colors Text effects text-shadow text-overflow word-wrap User-interface box-sizing resize outline nav-top, nav-right, nav-bottom, nav-left Selectors attribute selectors

19 CSS3 Basic box model overflow-x, overflow-y Generated Content content Other modules media queries multi-column layout Web fonts speech

20 实时通信主要体现在以下几个方面 : Web Workers WebSocket Animations transforms Notifications

21 Web Workers Web Workers: 该 API 为 Web 应用提供了后台处理能力演示 : 规范 : Animations transforms

22 WebSocket WebSockets 通过单个 TCP 套接字在 Web 之上定义了一个双向全双工传输的通信通道演示 : 规范 :

23 Notifications Notifications 将 Web 带入实时世界 var notification = new Notification("calendar.png", "Meeting about to begin", "Room 101"); Animations transforms notification.onclose = function() { cancelreminders(event); } notification.show(); 规范 :

24 与操作系统的集成主要体现在以下几个方面 : Drag & Drop File API Animations transforms LTXLWC Geolocation

25 Drap & Drop 支持文件拖放功能演示 : Animations transforms LTXLWC 规范 :

26 File API 支持文件拖放上传等功能演示 : 规范 : Animations transforms LTXLWC

27 Geolocation 通过 Wi-Fi 基站和 GPS 获取定位信息会更准确, 也可通过 IP 地址等信息获得演示 : Animations transforms LTXLWC 规范 :

29 浏览器支持 HTML5 标准的主流浏览器 : Firefox 4 Chrome 10 Opera 11 Safari 5 IE 9

30 火狐 Firefox Firefox 不仅仅只是一款浏览器...

31 关于 Firefox 4 * 对 HTML5 规范更广泛的支持 ; * 采用了全新的 JägerMonkey JavaScript 脚本引擎, 性能的大幅提升 ; * 全新的用户界面, 让操作更加平滑简单 ; * 功能强大的 Sync( 同步 ) 功能 ; * 通过标签组, 您可以更好的关注在某一类网页内容和应用上 ; * 提供了全新的扩展管理器, 更容易的管理火狐扩展, 更容易寻找和安装新扩展 ;... 更多更酷的特性就等你自己体验了

32 HTML5 体验先看一些简单的 HTML5 的例子 : 还有很多站点提供了 HTML5 的精彩在线体验

33 HTML5 and Mobile

34 Flash Adobe 在做更多的开放 Adobe 在其工具中加入对 HTML5 的更多支持对我们来说, 可从 Flash 身上学到很多不要将 HTML5 和 Flash 完全对立起来融合共存 HTML5 和 Flash 或许能为企业带来最大价值...

35 Flash 和 HTML5

36 HTML5 视频和 Flash 视频 <video> <source src="movie.mp4"> <source src="movie.ogv"> <object data="movie.swf"> <a href="movie.mp4">download</a> </object> </video> 让 HTML5 的视频与 Flash 的视频协同起来

37 Thank You!

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas Contents 目錄 chapter 1 1-1... 1-2 1-2... 1-3 HTML5... 1-3... 1-5 1-3... 1-9 Web Storage... 1-9... 1-10 1-4 HTML5... 1-14... 1-14... 1-15 HTML5... 1-15... 1-15... 1-16 1-5... 1-18 Apps... 1-18 HTML5 Cache

灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由 开源软件

灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由开源软件