コーダーが気持よくHTML5 にいくための準備

KOUSUKE (seven) INAMOTOGeneralasahi

Hello!• 稲本浩介（稲本せぶん）• 30 ちゃい• 株式会社ゼネラルアサヒ

www.generalasahi.co.jp• Web ディレクター、マークアップエンジニア• IA 　 (9/14 より）• @sevenina• sevenstyleweb.com/blog

Agenda

• HTML5• Tags• ME• micro-IA

Agenda

• HTML5• Tags• ME• micro-IA

<canvas>Web ページ内に埋め込むことのできるグラフィック要素で、

JavaScript を用いて自由に図形や画像の描画を行える。（ 【特集】詳解 ! HTML 5 と関連 API の最新動向 - 新タグ &API 編　マイコミジャーナル）

<canvas>javascript

HTML5 　≠ 　 Expression

HTML5 　 = 　 Structure

Hyper Text Markup Language

HTML=

Markup Language

Agenda

• HTML5• Tags• ME• micro-IA

<article> 内容が単体で完結しているセクションを表す

<aside> 補足的な説明を表す

<nav> Web サイトのナビゲーションリンクを配置するためのセクション

<section> 汎用的なセクション

<hgroup> 複数の見出しをひとまとまりにする

<header> セクションのヘッダ

<footer> セクションのフッタ

<address> article/body に関する問い合わせ先アドレス

Designdocument HTML

<article>

<aside>

<nav>

<section>

<hgroup>

<header>

<footer>

<address>

Sample

<header> <h1> <nav>

<section> <header> <section><div> <div>

<footer> <div>

<section> OR <div>

<section> = structure.<div> = for css.

?

Agenda

• HTML5• Tags• ME• micro-IA

Markup Engineer 　≠　 Coder

Designdocument HTML

<article>

<aside>

<nav>

<section>

<hgroup>

<header>

<footer>

<address>

Think about the structure.

Coder → Markup Engineer 　

Think about the structure.

Agenda

• HTML5• Tags• ME• micro-IA

IA = Information Architecture 　

+micro?

micro-IA

Coder → Markup Engineer 　

Think about the structure.

HTML5 master

• HTML5 → 　 HTML5 = Markup Language• Tags → 　 structure• ME 　→　 think about the structure• micro-IA 　→　 HTML5 master

コーダーが気持よくHTML5 にいくための準備

sevenstyleweb.com/blog/html5

@sevenina

Thank you!