html5+css3 (入門編)
DESCRIPTION
社内勉強会のために作ったものを共有TRANSCRIPT
HTML5 + CSS3(入門編)
高木博史
ONE-UP Inc.
@hi_takaki
HTML5とは？定義が人によって異なる
HTML文法
DOM
Web Storage
Web Workers
Web Socket
IndexedDB
HTML5 JavaScript API
CSS3 ｾﾚｸﾀ
Transition
Animation
Transform
CSS3
SVG
MathML
WebGL
一般定義
広義的な定義
HTML5ページの増加2011年5月にW3Cが最終草案を発表
HTML5ページの増加2011年5月にW3Cが最終草案を発表
最終草案 (Last Call Working Draft) ←イマココ
↓勧告候補 (Candidate Recommendation)
↓勧告案(Proposed Recommendation)
↓W3C勧告 (Recommendation)
W3C勧告は2014年
･･･まだまだ先は長い
HTML5
<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8" /> <title>タイトル</title>
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <link rel="stylesheet" href="style.css" /></head><body> <div id="wrapper"> <header> <hgroup> <h1>タイトル</h1>
<h2>サブタイトル</h2>
</hgroup> </header> <nav> <h2>ナビゲーション</h2> <ul> <li><a href="#">カテゴリ1 </a></li> <li><a href="#">カテゴリ2 </a></li> </ul> </nav> <article> <h2>記事タイトル</h2> <section> <h3>見出し</h3> <p>記事本文</p>
</section> <aside> <time datetime="2009 09-09 00:00 AM">2009 09-09 00:00 AM</time> </aside> </article> <footer> <p></p> </footer> </div></body></html>
お手本となるBOLERPLATEhttp://html5boilerplate.com/
さりげなくHTML5化されてるNHKページhttp://www.nhk.or.jp/studiopark/
HTML5化への考え方
HTML5&CSS3入門 with HTML5 パック 第6回 Graceful DegradationとPolyfill | デベロッパーセンターhttp://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html
Progressive Enhancement
↓
Graceful Degradation最近の環境を基準に、古い環境は最低限
古い環境を基準に、新しい環境へは+!を
CSS拡張メタ言語Sass Less
JavaScriptRuby
豊富になったライブラリ
jQueryModernizr - HTML5,CSS3機能判別/html5shiv同梱
Raphael.js - IE6,7,8でベクターグラフィックスを
THREE.JS - WebGLを簡易にするライブラリ
Sencha/jQuery Mobile - モバイル用UI Framework
jQuery UI/Kendo UI - Webアプリ向けUI Framework
Underscor.js - 配列やObjectを便利に扱える
Backbone.js - MVC大規模開発向け(Twitter,Facebook級)
Polyfill化(古い環境で新しい技術を再現)
HTML5 Advent Calendar 2011 : ATNDhttp://atnd.org/events/21987
【CSS3】覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。http://matome.naver.jp/odai/2132750704946539001
Less & Sass Advent calendar 2011 : ATNDhttp://atnd.org/events/21919
参考になるページとか