Allen Long ihuihoo@gmail.com 微博 : http://weibo.com/huihoo Twitter: http://twitter.com/huihoo 2011-04
灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由 开源软件
议题 目前最热的 Web 技术 : HTML5, CSS3, JavaScript Firefox, Chrome, Opera, Safari, IE 对 HTML5 的支持 演示, 体验 HTML5 说说 Flash
1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 Ajax 2009 HTML 5 Web 技术发展史
HTML5 ~= HTML + CSS + JS HTML5? CSS3? JavaScript?ECMAScript?
Semantics <section>, <article>, <nav>, <header>, <footer>, <aside>, <hgroup>, <mark>, <figure>, <figcaption>
Offline & Storage AppCache, Local Storage, Web SQL & Indexed DB, File API, Online/Offline Events
Device Access Geolocation API, from Audio/Video input access to Microphones and Cameras
Connectivity Web Sockets, Server-Sent Events, be used for Chats, Games, Communication.
Multimedia Audio and video
3D, Graphics & Effects SVG, Canvas, WebGL, and CSS3 3D
Performance & Integration Web Workers, XMLHttpRequest(XHR), WebSocket, CSS3 Transitions
CSS3 CSS 3D Transforms, CSS3 Colors, CSS3 Animation...
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>http://dev.w3.org/html5/ </section> <aside> <p>http://whatwg.org </aside> </section> <footer> <p>(c) 2011 Huihoo.com </footer>
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>
HTML 新的 Form 类型 <input type="text" required /> <input type="email" value="ihuihoo@gmail.com" /> <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/> <input type="range" min="0" max="50" value="10" /> <input type="search" results="10" placeholder="search..." /> <input type="tel" placeholder="(555) 555-5555" 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" />
HTML 内置 SVG <html> <svg> <circle id="mycircle" class="important" cx="50%" cy="50%" r="100" fill="url(#mygradient)" onmousedown="alert('hello SVG!');"/> </svg> </html>
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
CSS3 Basic box model overflow-x, overflow-y Generated Content content Other modules media queries multi-column layout Web fonts speech
实时通信 主要体现在以下几个方面 : Web Workers WebSocket Animations transforms Notifications
Web Workers Web Workers: 该 API 为 Web 应用提供了后台处理能力 演示 :http://html5demos.com/worker 规范 :http://dev.w3.org/html5/workers/ Animations transforms
WebSocket WebSockets 通过单个 TCP 套接字在 Web 之上定义了一个双向全双工传输的通信通道 演示 :http://html5demos.com/web-socket 规范 :http://dev.w3.org/html5/websockets/
Notifications Notifications 将 Web 带入实时世界 var notification = new Notification("calendar.png", "Meeting about to begin", "Room 101"); Animations transforms notification.onclose = function() { cancelreminders(event); } notification.show(); 规范 :http://www.w3.org/tr/notifications/
与操作系统的集成 主要体现在以下几个方面 : Drag & Drop File API Animations transforms LTXLWC Geolocation
Drap & Drop 支持文件拖放功能 演示 :http://html5demos.com/drag Animations transforms LTXLWC 规范 :http://dev.w3.org/html5/spec/dnd.html
File API 支持文件拖放上传等功能 演示 :http://html5demos.com/file-api 规范 :http://www.w3.org/tr/fileapi/ Animations transforms LTXLWC
Geolocation 通过 Wi-Fi 基站和 GPS 获取定位信息会更准确, 也可通过 IP 地址等信息获得 演示 :http://demo.huihoo.com/html5/geolocation.html Animations transforms LTXLWC 规范 :http://www.w3.org/tr/geolocation-api/
浏览器 支持 HTML5 标准的主流浏览器 : Firefox 4 Chrome 10 Opera 11 Safari 5 IE 9
火狐 Firefox Firefox 不仅仅只是一款浏览器...
关于 Firefox 4 * 对 HTML5 规范更广泛的支持 ; * 采用了全新的 JägerMonkey JavaScript 脚本引擎, 性能的大幅提升 ; * 全新的用户界面, 让操作更加平滑 简单 ; * 功能强大的 Sync( 同步 ) 功能 ; * 通过标签组, 您可以更好的关注在某一类网页内容和应用上 ; * 提供了全新的扩展管理器, 更容易的管理火狐扩展, 更容易寻找和安装新扩展 ;... 更多 更酷的特性就等你自己体验了
HTML5 体验 先看一些简单的 HTML5 的例子 : http://demo.huihoo.com/html5 还有很多站点提供了 HTML5 的精彩在线体验
HTML5 and Mobile
Flash Adobe 在做更多的开放 Adobe 在其工具中加入对 HTML5 的更多支持 对我们来说, 可从 Flash 身上学到很多 不要将 HTML5 和 Flash 完全对立起来 融合 共存 HTML5 和 Flash 或许能为企业带来最大价值...
Flash 和 HTML5
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 的视频协同起来
Thank You!