2009/9/18に福岡で行われたHTML5の勉強会で話したスライド。

1. コーダーが気持よくHTML5にいくための準備 KOUSUKE (seven) INAMOTO Generalasahi

2. Hello! 稲本浩介（稲本せぶん） 30ちゃい 株式会社ゼネラルアサヒwww.generalasahi.co.jp Webディレクター、マークアップエンジニア IA (9/14より） @sevenina sevenstyleweb.com/blog

3. Agenda HTML5 Tags ME micro-IA

4. Agenda HTML5 Tags ME micro-IA

6. <canvas> Webページ内に埋め込むことのできるグラフィック要素で、 JavaScriptを用いて自由に図形や画像の描画を行える。 （【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 マイコミジャーナル）

7. <canvas> javascript

8. HTML5 ≠ Expression HTML5 = Structure

9. HTML = Hyper Text Markup Language

10. Markup Language

11. Agenda HTML5 Tags ME micro-IA

12. <article> 内容が単体で完結しているセクションを表す <aside> 補足的な説明を表す <nav> Webサイトのナビゲーションリンクを配置するためのセクション <section> 汎用的なセクション <hgroup> 複数の見出しをひとまとまりにする <header> セクションのヘッダ <footer> セクションのフッタ <address>article/bodyに関する問い合わせ先アドレス

13. <article> <aside> <nav> <section> <hgroup> <header> <footer> <address> Design document HTML

14. Sample

16. <h1> <header> <nav>

17. <div> <div> <section> <section> <header>

18. <footer> <div>

19. ? <section> OR <div> <section> = structure. <div> = for css.

20. Agenda HTML5 Tags ME micro-IA

21. Markup Engineer ≠ Coder

22. <article> <aside> <nav> <section> <hgroup> <header> <footer> <address> Design document HTML Think about the structure.

23. Think about the structure. Coder -> Markup Engineer

24. Agenda HTML5 Tags ME micro-IA

25. IA = Information Architecture + micro?

27. micro-IA Think about the structure. Coder -> Markup Engineer HTML5 master

28. コーダーが気持よくHTML5にいくための準備 HTML5 -> HTML5 = Markup Language Tags -> structure ME -> think about the structure micro-IA -> HTML5 master

29. sevenstyleweb.com/blog/html5 @sevenina

30. Thank you!