Submit Search
Upload
HTML5 for IA
•
32 likes
•
5,888 views
Atsushi HASEGAWA, Ph.D.
Follow
Introducing HTML5 from IA viewpoint for Webmasters.
Read less
Read more
Design
Report
Share
Report
Share
1 of 28
Recommended
IA Summit 2013 Redux in Tokyo
IA Summit 2013 Redux in Tokyo
Concent, Inc.
JDBCでつながるSaasの世界
JDBCでつながるSaasの世界
CData Software Japan
API活用で更に広がるDynamicsエコシステム
API活用で更に広がるDynamicsエコシステム
CData Software Japan
Mobile Prototyping Tool CHIKUWA
Mobile Prototyping Tool CHIKUWA
Concent, Inc.
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
Kazumichi (Mario) Sakata
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Recommended
IA Summit 2013 Redux in Tokyo
IA Summit 2013 Redux in Tokyo
Concent, Inc.
JDBCでつながるSaasの世界
JDBCでつながるSaasの世界
CData Software Japan
API活用で更に広がるDynamicsエコシステム
API活用で更に広がるDynamicsエコシステム
CData Software Japan
Mobile Prototyping Tool CHIKUWA
Mobile Prototyping Tool CHIKUWA
Concent, Inc.
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
Kazumichi (Mario) Sakata
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Relations Team
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
Attractive HTML5
Attractive HTML5
Sho Ito
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
About rails 3
About rails 3
issei126
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5概要、コードサンプル
HTML5概要、コードサンプル
ourmaninjapan
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
テスト
テスト
Masashi Sato
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
Takashi Endo
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
株式会社GreenHack
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
HTML5
HTML5
smallworkshop
Data API 2.0
Data API 2.0
Yuji Takayama
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
Tadahiro Higuchi
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024
Atsushi HASEGAWA, Ph.D.
Design Confidence | Designship 2018
Design Confidence | Designship 2018
Atsushi HASEGAWA, Ph.D.
More Related Content
Similar to HTML5 for IA
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Relations Team
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
Attractive HTML5
Attractive HTML5
Sho Ito
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
About rails 3
About rails 3
issei126
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5概要、コードサンプル
HTML5概要、コードサンプル
ourmaninjapan
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
テスト
テスト
Masashi Sato
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
Takashi Endo
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
株式会社GreenHack
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
HTML5
HTML5
smallworkshop
Data API 2.0
Data API 2.0
Yuji Takayama
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
Tadahiro Higuchi
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
Similar to HTML5 for IA
(20)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
GDG Women DevfestW
GDG Women DevfestW
Attractive HTML5
Attractive HTML5
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Webapp startup example_to_dolist
Webapp startup example_to_dolist
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
About rails 3
About rails 3
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
HTML5概要、コードサンプル
HTML5概要、コードサンプル
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
テスト
テスト
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
HTML5
HTML5
Data API 2.0
Data API 2.0
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
マークアップ講座 01b HTML
マークアップ講座 01b HTML
More from Atsushi HASEGAWA, Ph.D.
IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024
Atsushi HASEGAWA, Ph.D.
Design Confidence | Designship 2018
Design Confidence | Designship 2018
Atsushi HASEGAWA, Ph.D.
デザインする組織、組織のデザイン
デザインする組織、組織のデザイン
Atsushi HASEGAWA, Ph.D.
HCD and NEXT DESIGN
HCD and NEXT DESIGN
Atsushi HASEGAWA, Ph.D.
サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜
Atsushi HASEGAWA, Ph.D.
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
Atsushi HASEGAWA, Ph.D.
DE$IGN and NEXT DESIGN
DE$IGN and NEXT DESIGN
Atsushi HASEGAWA, Ph.D.
Taxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 Tokyo
Atsushi HASEGAWA, Ph.D.
World IA Day 2017 Tokyo
World IA Day 2017 Tokyo
Atsushi HASEGAWA, Ph.D.
World IA Day 2017 Tokyo opening remarks
World IA Day 2017 Tokyo opening remarks
Atsushi HASEGAWA, Ph.D.
Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016
Atsushi HASEGAWA, Ph.D.
SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1
Atsushi HASEGAWA, Ph.D.
Era of UX Team of One
Era of UX Team of One
Atsushi HASEGAWA, Ph.D.
Japanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIA
Atsushi HASEGAWA, Ph.D.
サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015
Atsushi HASEGAWA, Ph.D.
UX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing Keynote
Atsushi HASEGAWA, Ph.D.
Good Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant Logic
Atsushi HASEGAWA, Ph.D.
Age of the Customer
Age of the Customer
Atsushi HASEGAWA, Ph.D.
Definition of UX from UX White Paper
Definition of UX from UX White Paper
Atsushi HASEGAWA, Ph.D.
UXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schoo
Atsushi HASEGAWA, Ph.D.
More from Atsushi HASEGAWA, Ph.D.
(20)
IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024
Design Confidence | Designship 2018
Design Confidence | Designship 2018
デザインする組織、組織のデザイン
デザインする組織、組織のデザイン
HCD and NEXT DESIGN
HCD and NEXT DESIGN
サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
DE$IGN and NEXT DESIGN
DE$IGN and NEXT DESIGN
Taxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 Tokyo
World IA Day 2017 Tokyo
World IA Day 2017 Tokyo
World IA Day 2017 Tokyo opening remarks
World IA Day 2017 Tokyo opening remarks
Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016
SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1
Era of UX Team of One
Era of UX Team of One
Japanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIA
サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015
UX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing Keynote
Good Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant Logic
Age of the Customer
Age of the Customer
Definition of UX from UX White Paper
Definition of UX from UX White Paper
UXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schoo
HTML5 for IA
1.
HTML5 for IA
2012/7/31 ⻑⾧長⾕谷川敦⼠士 @ahaseg Concent, Inc.
2.
HTML5 for IA •
セマンティックWebの実現 • 企業Webサイトがどう変わるか
3.
セマンティックWebとは セマンティック・ウェブ(Wikipediaより) セマンティック・ウェブ(Semantic Web)はW3Cのティム・バーナーズ=リーによって提唱された、 ウェブページの意味を扱うことを可能とする標準やツール群の開発によってWorld Wide
Webの利利便便 性を向上させるプロジェクト。セマンティック・ウェブの⽬目的はウェブページの閲覧という⾏行行為に、 データの交換の側⾯面に加えて意味の疎通を付け加えることにある。 現在のWorld Wide Web上のコンテンツは主にHTMLで記述されている。HTMLでは⽂文書構造を伝え ることは可能だが、個々の単語の意味をはじめとする詳細な意味を伝えることはできない。これに対 し、セマンティック・ウェブはXMLによって記述した⽂文書にRDFやOWLを⽤用いてタグを付け加え る。この、データの意味を記述したタグが⽂文書の含む意味を形式化し、コンピュータによる⾃自動的な 情報の収集や分析へのアプローチが可能となると期待されている。 セマンティックウェブはXML、XML Schema、RDF、RDF Schema、OWLなどの標準およびツール 群から構成されている。 OWL Web Ontology Language Overview [1]はセマンティックウェブに おけるこれら標準およびツール群の機能・関連について述べている。 参考:http://ja.wikipedia.org/wiki/セマンティック・ウェブ
4.
セマンティックWebとは • HTMLが、⾃自分⾃自⾝身がどんな情報かの 定義まで持っている状態
5.
セマンティックWebとは うれしいこと 1. 検索索エンジン(および同等のキュレーションサ
ービス)からのコンテンツ発⾒見見性向上 2. ユーザーのコンテンツの利利⽤用のしやすさ向上 3. 開発効率率率の向上
6.
セマンティックWebとは これまで、 • 標準的な技術がなかった • 標準的な語彙が運⽤用できなかった
↓ 構想⽌止まり
7.
セマンティックWebとは HTML5によって、 HTMLがセマンティックな構造を標準化
検索索エンジン連合主導による、標準語彙誕⽣生 ↓ 実現のタイミング
8.
ページ情報構造の変化
参考:http://www.concentinc.jp/news/2012/07/usable-‐‑‒usability-‐‑‒praise/
9.
<div>
</div> <div> </div> HTML4時代 HTML内の構造は、 外部からは均質に⾒見見える </div> </div> <div> </div>
10.
<header>
</header> <nav> <article> HTML5 HTMLが、意味構造を 定義する </nav> </article> <footer> </footer>
11.
ページ情報構造の変化
HTML4 HTML5 <div> <header> </div> </header> <div> </div> <nav> <article> </div> </div> </nav> </article> <div> <footer> </div> </footer>
12.
HTML5が持つ構造要素 •
body:本⽂文 • section:要素くくり • nav:ナビゲーション • article:記事 • aside:副次要素 • hx:⾒見見出し • hgroup:Hxのまとまり • header:ヘッダ • footer:フッタ 参考:http://www.w3.org/TR/2011/WD-‐‑‒html5-‐‑‒20110525/sections.html
13.
セマンティックWeb HTML5によって、 HTMLがセマンティックな構造を標準化
検索索エンジン連合主導による、標準語彙誕⽣生
14.
構造と要素 • 構造:HTML5 • 要素の属性(意味):???
15.
参考:https://play.google.com/store/apps/details?id=com.zeptolab.ctr.ads&hl=ja
16.
これは「アプリケーション」の情報です
名称:Cut the Rope 開発会社:ZeptoLab レーティング:4.5 (77,402票) 価格:99円 → 要素の属性情報 参考:https://play.google.com/store/apps/details?id=com.zeptolab.ctr.ads&hl=ja
17.
要素の属性情報 製品情報の標準要素定義 A社
B社 C社 → 業界標準定義が必要
18.
19.
代表的な 構造化データマークアップ • microdata • microformats •
RDFa
20.
schema.org • http://schema.org/ • microdata形式を⽤用いた、
構造化データマークアップの共通仕様 • 2011年年 Google、Yahoo!、Bingの3社で策定 • 2012年年 Googleではセマンティック検索索導⼊入
21.
リッチスニペット
22.
schema.org 対応しているコンテンツタイプ •
レビュー • ⼈人物 • 製品 • 会社と組織 • レシピ • イベント • ⾳音楽 → リッチスニペットテスティングツール → リッチスニペットについて 参考:http://schema.org/docs/gs.html#schemaorg_̲types
23.
セマンティックWeb HTML5によって、 HTMLがセマンティックな構造を標準化
検索索エンジン連合主導による、標準語彙誕⽣生 → ユーザーメリット、 企業メリットは?
24.
ユーザーから⾒見見た活⽤用 • レシピ to
Evernote • TripIt → ネット上の情報の標準化により、 活⽤用の幅が広がる
25.
セマンティックウェブ時代の
企業サイト • 企業情報サイトの構造 → よりコンテンツDB的な⽅方向性へ • 企業情報サイトの使われ⽅方 → 情報探索索の際には統合サイトからの利利⽤用がメインに • スマートフォンでの使われ⽅方 → Siriなどエージェント経由のアクセス増加 • 商品情報・⽣生活情報 → 標準化によって、横断的活⽤用が促進 • ニュース → ニュースリーダーからのアクセス
26.
セマンティックウェブ時代の
企業サイト • 標準語彙採⽤用による、設計プロセスの簡略略化 • 業界横断サービスによる、総合的なUX、ユーザビリティの向上
27.
まとめ:HTML5 for IA •
検索索エンジン効率率率 • ユーザーのデータ活⽤用 • 開発・制作効率率率向上
28.
CONCENT,inc New Logotype
Desing by Shintaro Kobayashi Twitter @ahaseg Facebook facebook.com/ahaseg ロゴタイプコンセプト ロゴマークコンセプト 新しさを感じさせながら、10 年後に古く感じさせない デザインを目 ロゴタイプの右肩に付いているマーク。丸の中の二本の棒は、良く見 指しました。角を少し丸める事で、有機的で親しみやすい雰囲気を出 れば右が少し短く、左が少し長い。これはコンセントです。わかりづ しつつも、文字の骨格はあくまでもニュートラルに設計することで、 らいです。しかし、この丸には可能性があります。WEB ではボタンに 奇をてらわない 現代らしさを表現しています。また、 右への傾きには、 なるかもしれません。紙ではハンコになって押されるかもしれません。 これから先、ますます加速していくだろう世の中の変化に、WEB(コ そうして様々なかたちで使用していくと、いずれこのマークだけで ンセント)と紙(アレフ・ゼロ)のハイブリットにより対応し、絶え CONCENT と読めるようになる。そんな存在になってくれることを ず前進していこう、という意志を込めました。 望んでいます。 THANKS! concentinc.jp/