Suche senden
Hochladen
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
•
3 gefällt mir
•
1,906 views
圭輔 大曽根
Folgen
2012年12月13日に開催された【TechBuzz】第8回HTML5開発技術勉強会での発表資料です。
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 84
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Junko Nukaga
「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasual
SATOSHI TAGOMORI
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
Muyuu Fujita
Wco2012 不動産プラグイン.活用例
Wco2012 不動産プラグイン.活用例
加藤 貴一
Code Anything
Code Anything
Yoshitaka Kawashima
Empfohlen
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Junko Nukaga
「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasual
SATOSHI TAGOMORI
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
Muyuu Fujita
Wco2012 不動産プラグイン.活用例
Wco2012 不動産プラグイン.活用例
加藤 貴一
Code Anything
Code Anything
Yoshitaka Kawashima
「LESS」ことはじめ
「LESS」ことはじめ
Eigoro Yamamura
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
Movable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamans
Kunihiko Miyanaga
すごいぞ!Google Chrome
すごいぞ!Google Chrome
Eigoro Yamamura
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
WordPress+不動産プラグイン活用例
WordPress+不動産プラグイン活用例
加藤 貴一
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
W ctokyo2012 timing
W ctokyo2012 timing
Takashi Kitamura
Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)
Joe_noh
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
horike37
2012年8月10日 勉強会
2012年8月10日 勉強会
Rin Yano
セプテーニさんでのセミナー
セプテーニさんでのセミナー
Tokusei Noborio
Word camptokyo2012セッション資料
Word camptokyo2012セッション資料
horike37
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
.インストールをやってみよう
.インストールをやってみよう
ohotech
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
iPhoneアプリを作ってみよう
iPhoneアプリを作ってみよう
Nagao Shun
Html5でできること。そこからwebの未来を考える。
Html5でできること。そこからwebの未来を考える。
Masakazu Muraoka
イスラエル発アドテクスタートアップ企業の現状と未来
イスラエル発アドテクスタートアップ企業の現状と未来
Naoji Taniguchi
jQueryで作るカスタム投稿の画像スライダーライブラリ
jQueryで作るカスタム投稿の画像スライダーライブラリ
Takashi Uemura
累計DL数3,600万のアプリを成長させ続けるためのピボット
累計DL数3,600万のアプリを成長させ続けるためのピボット
圭輔 大曽根
マイクロサービスとABテスト
マイクロサービスとABテスト
圭輔 大曽根
Weitere ähnliche Inhalte
Ähnlich wie HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
「LESS」ことはじめ
「LESS」ことはじめ
Eigoro Yamamura
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
Movable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamans
Kunihiko Miyanaga
すごいぞ!Google Chrome
すごいぞ!Google Chrome
Eigoro Yamamura
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
WordPress+不動産プラグイン活用例
WordPress+不動産プラグイン活用例
加藤 貴一
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
W ctokyo2012 timing
W ctokyo2012 timing
Takashi Kitamura
Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)
Joe_noh
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
horike37
2012年8月10日 勉強会
2012年8月10日 勉強会
Rin Yano
セプテーニさんでのセミナー
セプテーニさんでのセミナー
Tokusei Noborio
Word camptokyo2012セッション資料
Word camptokyo2012セッション資料
horike37
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
.インストールをやってみよう
.インストールをやってみよう
ohotech
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
iPhoneアプリを作ってみよう
iPhoneアプリを作ってみよう
Nagao Shun
Html5でできること。そこからwebの未来を考える。
Html5でできること。そこからwebの未来を考える。
Masakazu Muraoka
イスラエル発アドテクスタートアップ企業の現状と未来
イスラエル発アドテクスタートアップ企業の現状と未来
Naoji Taniguchi
jQueryで作るカスタム投稿の画像スライダーライブラリ
jQueryで作るカスタム投稿の画像スライダーライブラリ
Takashi Uemura
Ähnlich wie HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
(20)
「LESS」ことはじめ
「LESS」ことはじめ
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Movable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamans
すごいぞ!Google Chrome
すごいぞ!Google Chrome
20151206 hamamatsu handson
20151206 hamamatsu handson
WordPress+不動産プラグイン活用例
WordPress+不動産プラグイン活用例
Aiming study#6pdf
Aiming study#6pdf
W ctokyo2012 timing
W ctokyo2012 timing
Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
2012年8月10日 勉強会
2012年8月10日 勉強会
セプテーニさんでのセミナー
セプテーニさんでのセミナー
Word camptokyo2012セッション資料
Word camptokyo2012セッション資料
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
.インストールをやってみよう
.インストールをやってみよう
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
iPhoneアプリを作ってみよう
iPhoneアプリを作ってみよう
Html5でできること。そこからwebの未来を考える。
Html5でできること。そこからwebの未来を考える。
イスラエル発アドテクスタートアップ企業の現状と未来
イスラエル発アドテクスタートアップ企業の現状と未来
jQueryで作るカスタム投稿の画像スライダーライブラリ
jQueryで作るカスタム投稿の画像スライダーライブラリ
Mehr von 圭輔 大曽根
累計DL数3,600万のアプリを成長させ続けるためのピボット
累計DL数3,600万のアプリを成長させ続けるためのピボット
圭輔 大曽根
マイクロサービスとABテスト
マイクロサービスとABテスト
圭輔 大曽根
Gunosy における AWS 上での自然言語処理・機械学習の活用事例
Gunosy における AWS 上での自然言語処理・機械学習の活用事例
圭輔 大曽根
Gunosyデータマイニング研究会 #118 これからの強化学習
Gunosyデータマイニング研究会 #118 これからの強化学習
圭輔 大曽根
いまさら聞けない機械学習の評価指標
いまさら聞けない機械学習の評価指標
圭輔 大曽根
記事分類における教師データおよびモデルの管理
記事分類における教師データおよびモデルの管理
圭輔 大曽根
論文紹介@ Gunosyデータマイニング研究会 #97
論文紹介@ Gunosyデータマイニング研究会 #97
圭輔 大曽根
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
圭輔 大曽根
d3jsハンズオン @E2D3ハッカソン
d3jsハンズオン @E2D3ハッカソン
圭輔 大曽根
2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話」
2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話」
圭輔 大曽根
第一回チキチキ秋のデータサイエンスアイデアソン&ハッカソン』開催報告会 アプリ名: 守備視え〜る
第一回チキチキ秋のデータサイエンスアイデアソン&ハッカソン』開催報告会 アプリ名: 守備視え〜る
圭輔 大曽根
5分で分かった気になるリーンスタートアップ(用語編)
5分で分かった気になるリーンスタートアップ(用語編)
圭輔 大曽根
Mehr von 圭輔 大曽根
(12)
累計DL数3,600万のアプリを成長させ続けるためのピボット
累計DL数3,600万のアプリを成長させ続けるためのピボット
マイクロサービスとABテスト
マイクロサービスとABテスト
Gunosy における AWS 上での自然言語処理・機械学習の活用事例
Gunosy における AWS 上での自然言語処理・機械学習の活用事例
Gunosyデータマイニング研究会 #118 これからの強化学習
Gunosyデータマイニング研究会 #118 これからの強化学習
いまさら聞けない機械学習の評価指標
いまさら聞けない機械学習の評価指標
記事分類における教師データおよびモデルの管理
記事分類における教師データおよびモデルの管理
論文紹介@ Gunosyデータマイニング研究会 #97
論文紹介@ Gunosyデータマイニング研究会 #97
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
d3jsハンズオン @E2D3ハッカソン
d3jsハンズオン @E2D3ハッカソン
2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話」
2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話」
第一回チキチキ秋のデータサイエンスアイデアソン&ハッカソン』開催報告会 アプリ名: 守備視え〜る
第一回チキチキ秋のデータサイエンスアイデアソン&ハッカソン』開催報告会 アプリ名: 守備視え〜る
5分で分かった気になるリーンスタートアップ(用語編)
5分で分かった気になるリーンスタートアップ(用語編)
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
1.
HTML5を用いた
セマンティックな文書作成 株式会社サイバード 大曽根圭輔 12年12月14日金曜日
2.
自己紹介
• 氏名 大曽根圭輔 • 経歴 茨城県に生まれる 筑波大学大学院を卒業 2012年度に新卒として(株)サイバードに入社 12年12月14日金曜日
3.
自己紹介
• 学生時代の研究 HAI、人工知能、感性工学、人間中心システム • Twitter @dr_paradi • Facebook 本名 12年12月14日金曜日
4.
現在の業務
• スマホ向けのWebサイトを作ったり • iOSのアプリ作ったり • Facebookアプリ作ったり。。。 12年12月14日金曜日
5.
現在の業務
• 業務でもHTML5! -> スマートフォン対応 12年12月14日金曜日
6.
はじめての外部発表! 12年12月14日金曜日
7.
発表の流れ
• 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ 12年12月14日金曜日
8.
発表の流れ
• 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ 12年12月14日金曜日
9.
ここで一旦質問
http://www.flickr.com/ 12年12月14日金曜日
10.
HTML5といえば? 12年12月14日金曜日
11.
ググってみた 12年12月14日金曜日
12.
12年12月14日金曜日
13.
12年12月14日金曜日
14.
12年12月14日金曜日
15.
12年12月14日金曜日
16.
HTML5とは 12年12月14日金曜日
17.
もっとセマンティックな文書を
もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様 12年12月14日金曜日
18.
もっとセマンティックな文書を
もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様 12年12月14日金曜日
19.
もっとセマンティックな文書を! 12年12月14日金曜日
20.
発表の流れ
• 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ 12年12月14日金曜日
21.
セマンティック
データの意味, 意味規則 つまり・・・ HTML5では、文書が持つデータの意味をよ り明確に表すことができるようになる 12年12月14日金曜日
22.
セマンティック
HTML5では、文書が持つデータの意味を より明確に表すことができるようになる 逆に言うと 「文書の中身」を理解しないといけない 「表現の方法」を理解しないといけない ということ 12年12月14日金曜日
23.
今まで(HTML4)
<div>ヘッダー</div> <div> <div> <div> ナビゲーシ サイドバー 記事 ョン 広告 </div> </div> </div> <div>フッター</div> 12年12月14日金曜日
24.
これから(HTML5)
<header>ヘッダー</header> <nav> <article> <aside> ナビゲー サイドバー 記事 ション 広告 </nav> </article> </aside> <footer>フッター</footer> 12年12月14日金曜日
25.
これから(HTML5)
<header>ヘッダー</header> <nav> <article> <aside> ナビゲー サイドバー 記事 ション 広告 </nav> </article> </aside> <footer>フッター</footer> 12年12月14日金曜日
26.
これから(HTML5)
<header>ヘッダー</header> <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer> 12年12月14日金曜日
27.
メインコンテンツを
これから(HTML5) 機械的に抽出できる = <header>ヘッダー</header> SEO対策になる <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer> 12年12月14日金曜日
28.
メインコンテンツを
これから(HTML5) 機械的に抽出できる 音声読み上げ機能 = <header>ヘッダー</header> SEO対策になる <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer> 12年12月14日金曜日
29.
リッチな表現に注目がいきがちな
(広義の)HTML5 12年12月14日金曜日
30.
見た目も重要(HTML5+CSS3) 12年12月14日金曜日
31.
「セマンティック」
にマークアップすることも 大事にしませんか? 12年12月14日金曜日
32.
発表の流れ
• 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ 12年12月14日金曜日
33.
HTML (というかWorld Wide
Web)は もともと学術的な情報交換のために 開発された http://www.flickr.com/ 12年12月14日金曜日
34.
環境に左右されることなく文章の内容を 読者に「正しく」伝えることが重要 12年12月14日金曜日
35.
テキストの意味を正しく伝える
http://www.flickr.com/ 12年12月14日金曜日
36.
いくつかを紹介
• <em> • <b> • <cite> • <q> • <br> 12年12月14日金曜日
37.
<em>
・emphasisの略 ・そのコンテンツの強調 ・重要であることを表現したい場合 12年12月14日金曜日
38.
突然ですが 12年12月14日金曜日
39.
剛力彩芽はかわいい 12年12月14日金曜日
40.
<em>剛力彩芽</em>はかわいい
剛力彩芽は<em>かわいい</em> 12年12月14日金曜日
41.
文章の内容(意図)を正しく伝えられる 12年12月14日金曜日
42.
<b>
・通常の文章や言葉との区別を表す ・記事のリード文 ・レビューの中での商品名 ・文章内のキーワード 12年12月14日金曜日
43.
剛力彩芽の写真集
<b>『 AYAME GOURIKI 』</b> が発売しました。 12年12月14日金曜日
44.
<q>
・quotationの略 ・他のソースから引用された短文 ・ダブルクォーテーションが自動的に表示 12年12月14日金曜日
45.
<cite>
・作品(小説、新聞、ゲーム等)のタイトル ・人の名前をcite要素で囲んではいけない ・人の名前を装飾する場合span要素で囲み CSSを使用 12年12月14日金曜日
46.
私は、ノルウェイの森に出てくる 春の熊くらいに好きだよ
という表現が好きです 12年12月14日金曜日
47.
私は、ノルウェイの森に出てくる 春の熊くらいに好きだよ
という表現が好きです 12年12月14日金曜日
48.
<p>
私は、 <cite> ノルウェイの森 </cite> に出てくる <q> 春の熊くらいに好きだよ </q> という表現が好きです </p> 12年12月14日金曜日
49.
間違った例 12年12月14日金曜日
50.
<p>
私は, <cite> スティーブ・ジョブズ </cite> の <q> STAY HUNGRY. STAY FOOLISH. </q> という言葉が好きです。 </p> 12年12月14日金曜日
51.
<p>
私は, <cite> スティーブ・ジョブズ </cite> の <q> STAY HUNGRY. STAY FOOLISH. </q> という言葉が好きです。 </p> 12年12月14日金曜日
52.
<br>
・breakの略 ・改行を表す 12年12月14日金曜日
53.
見た目を整えるためには使わない 12年12月14日金曜日
54.
どういうときに使うかというと 12年12月14日金曜日
55.
<p>
ちはやぶる<br> ����神代も聞かず<br> ����龍田川<br> ����からくれなゐに<br>� ����水くくるとは<br> </p> 12年12月14日金曜日
56.
正しくマークアップすれば 文章の内容を正しく伝えることができるように
http://www.flickr.com/ 12年12月14日金曜日
57.
発表の流れ
• 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ 12年12月14日金曜日
58.
articleとsectionの
違いって? 12年12月14日金曜日
59.
HTML5
<article>, 今まで <section>, <div> <nav>, <header>, <footer>... 12年12月14日金曜日
60.
<article>
文書やサイトの独立して完結する部分 内容だけ抜き出しても違和感がないもの ブログやニュースの記事など 12年12月14日金曜日
61.
<section>
文書内の章や節を表す 意味や機能のひとまとまりの区切り 12年12月14日金曜日
62.
• 或阿呆の一生
芥川龍之介 一 時代 それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二 母 狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 <中略>しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。 12年12月14日金曜日
63.
• 或阿呆の一生
<article> 芥川龍之介 一 時代 それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二 母 狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 <中略>しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。 12年12月14日金曜日
64.
• 或阿呆の一生
<article> 芥川龍之介 一 時代 <section> それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二 母 <section> 狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 <中略>しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。 12年12月14日金曜日
65.
• 一 時代
それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、…… 12年12月14日金曜日
66.
• 一 時代
<section> それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、…… 12年12月14日金曜日
67.
• 一 時代
<section> <p> それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… <p> そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、…… 12年12月14日金曜日
68.
あくまで一例
人の主観による場合も 12年12月14日金曜日
69.
• 一 時代 それは或本屋の二階だつた。二十歳の彼は書
棚にかけた西洋風の梯子に登り、新らしい本を探してゐ た。モオパスサン、ボオドレエル、ストリントベリイ、 イブセン、シヨウ、トルストイ、……そのうちに日の暮 は迫り出した。しかし彼は熱心に本の背文字を読みつづ けた。そこに並んでゐるのは本といふよりも寧ろ世紀末 それ自身だつた。ニイチエ、ヴエルレエン、ゴンクウル 兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、…… 12年12月14日金曜日
70.
• 一 時代
<section> <p> それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… <p> そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、…… 12年12月14日金曜日
71.
機械(ブラウザ)からみてわかりやすい
ソースコードをみれば人間もわかりやすい 12年12月14日金曜日
72.
12年12月14日金曜日
73.
<article>
• 河童・或阿呆の一生 大導寺信輔の半生 玄鶴山房 蜃気楼 河童 或阿呆の一生 歯車 12年12月14日金曜日
74.
<article>
• 河童・或阿呆の一生 大導寺信輔の半生 玄鶴山房 蜃気楼 河童 或阿呆の一生 歯車 12年12月14日金曜日
75.
<article>
• 河童・或阿呆の一生 大導寺信輔の半生 <article> 玄鶴山房 <article> 蜃気楼 <article> 河童 <article> 或阿呆の一生 <article> 歯車 <article> 12年12月14日金曜日
76.
きちんと構造化するとわかりやすい 12年12月14日金曜日
77.
発表の流れ
• 自己紹介 • HTML5とは? • セマンティックとは • アウトラインの構造化 • テキストレベルの意味付け • まとめ 12年12月14日金曜日
78.
もっとセマンティックな文書を
もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様 12年12月14日金曜日
79.
もっとセマンティックな文書を
もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様 12年12月14日金曜日
80.
もっとセマンティックな文書を! 12年12月14日金曜日
81.
正しくマークアップすれば 文章の内容を正しく伝えることができるように
http://www.flickr.com/ 12年12月14日金曜日
82.
「セマンティック」
にマークアップすることも 大事にしませんか? 12年12月14日金曜日
83.
ご清聴ありがとうございました。 12年12月14日金曜日
84.
参考文献
• HTML5マークアップガイドブック • html5.jp • 理系発想の文章術 • 20歳の自分に受けさせたい文章講座 12年12月14日金曜日
Jetzt herunterladen