HTML5勉強会@福岡
Upcoming SlideShare
Loading in...5
×
 

HTML5勉強会@福岡

on

  • 1,977 views

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

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

Statistics

Views

Total Views
1,977
Views on SlideShare
1,899
Embed Views
78

Actions

Likes
0
Downloads
7
Comments
0

3 Embeds 78

http://sevenstyleweb.com 72
http://www.slideshare.net 5
https://www.chatwork.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5勉強会@福岡 HTML5勉強会@福岡 Presentation Transcript

  • コーダーが気持よくHTML5にいくための準備
    KOUSUKE (seven) INAMOTO
    Generalasahi
  • 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
  • HTML
    =
    Hyper Text Markup Language
  • Markup Language
  • Agenda
    HTML5
    Tags
    ME
    micro-IA
  • <article> 内容が単体で完結しているセクションを表す
    <aside> 補足的な説明を表す
    <nav> Webサイトのナビゲーションリンクを配置するためのセクション
    <section> 汎用的なセクション
    <hgroup> 複数の見出しをひとまとまりにする
    <header> セクションのヘッダ
    <footer> セクションのフッタ
    <address>article/bodyに関する問い合わせ先アドレス
  • <article>
    <aside>
    <nav>
    <section>
    <hgroup>
    <header>
    <footer>
    <address>
    Design
    document
    HTML
  • Sample
  • <h1>
    <header>
    <nav>
  • <div>
    <div>
    <section>
    <section>
    <header>
  • <footer>
    <div>
  • ?
    <section> OR <div>
    <section> = structure.
    <div> = for css.
  • Agenda
    HTML5
    Tags
    ME
    micro-IA
  • Markup Engineer ≠ Coder
  • <article>
    <aside>
    <nav>
    <section>
    <hgroup>
    <header>
    <footer>
    <address>
    Design
    document
    HTML
    Think about the structure.
  • Think about the structure.
    Coder -> Markup Engineer  
  • Agenda
    HTML5
    Tags
    ME
    micro-IA
  • IA = Information Architecture  
    +
    micro?
  • micro-IA
    Think about the structure.
    Coder -> Markup Engineer  
    HTML5 master
  • コーダーが気持よくHTML5にいくための準備
    HTML5 -> HTML5 = Markup Language
    Tags -> structure
    ME -> think about the structure
    micro-IA -> HTML5 master
  • sevenstyleweb.com/blog/html5
    @sevenina
  • Thank you!