Submit Search
Upload
Concentrated HTML5 & Attractive HTML5
•
5 likes
•
3,346 views
Sho Ito
Follow
「ぎゅ〜っと濃縮、HTML5」と「Attractive HTML5」セッションの二本立て
Read less
Read more
Technology
Design
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 111
Download now
Download to read offline
Recommended
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Xamarin で今日から始めるクロスプラットフォーム開発
Xamarin で今日から始めるクロスプラットフォーム開発
友太 渡辺
Basis of Firefox Apps
Basis of Firefox Apps
dynamis
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
Wcosaka2012concrete5
Wcosaka2012concrete5
Hishikawa Takuro
Recommended
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Xamarin で今日から始めるクロスプラットフォーム開発
Xamarin で今日から始めるクロスプラットフォーム開発
友太 渡辺
Basis of Firefox Apps
Basis of Firefox Apps
dynamis
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
Wcosaka2012concrete5
Wcosaka2012concrete5
Hishikawa Takuro
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Masuda Tomoaki
Xamarin 101 ~環境構築からビルド・テストまで~
Xamarin 101 ~環境構築からビルド・テストまで~
Masaki Takeda
Firefox OS App Manager
Firefox OS App Manager
dynamis
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
Lt 20130209
Lt 20130209
Tomoyuki Obi
8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
Kensaku Komatsu
Xamarin + Visual Studio によるマルチプラットフォーム対応アプリ開発 - iOS, Android, Windows に対応しよう
Xamarin + Visual Studio によるマルチプラットフォーム対応アプリ開発 - iOS, Android, Windows に対応しよう
Akira Onishi
Microsoft Edge 最新アップデートとこれから
Microsoft Edge 最新アップデートとこれから
Osamu Monoe
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Yu Nobuoka
Apps for Web Platform
Apps for Web Platform
dynamis
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
一希 大田
About Chrome web store
About Chrome web store
knj77
Xamarin.Forms概要
Xamarin.Forms概要
Hironov OKUYAMA
Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善
Yuuki Nara
クライアントに感謝されるCMS導入のコツ
クライアントに感謝されるCMS導入のコツ
Hishikawa Takuro
Visual Studio + xamarin で始めるモバイル アプリ開発
Visual Studio + xamarin で始めるモバイル アプリ開発
インフラジスティックス・ジャパン株式会社
Attractive HTML5
Attractive HTML5
Sho Ito
AngularJSについて
AngularJSについて
昌生 高橋
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
IEとHTML5とワタシ
IEとHTML5とワタシ
Sho Ito
Profusion of RIAs
Profusion of RIAs
Sho Ito
More Related Content
What's hot
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Masuda Tomoaki
Xamarin 101 ~環境構築からビルド・テストまで~
Xamarin 101 ~環境構築からビルド・テストまで~
Masaki Takeda
Firefox OS App Manager
Firefox OS App Manager
dynamis
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
Lt 20130209
Lt 20130209
Tomoyuki Obi
8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
Kensaku Komatsu
Xamarin + Visual Studio によるマルチプラットフォーム対応アプリ開発 - iOS, Android, Windows に対応しよう
Xamarin + Visual Studio によるマルチプラットフォーム対応アプリ開発 - iOS, Android, Windows に対応しよう
Akira Onishi
Microsoft Edge 最新アップデートとこれから
Microsoft Edge 最新アップデートとこれから
Osamu Monoe
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Yu Nobuoka
Apps for Web Platform
Apps for Web Platform
dynamis
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
一希 大田
About Chrome web store
About Chrome web store
knj77
Xamarin.Forms概要
Xamarin.Forms概要
Hironov OKUYAMA
Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善
Yuuki Nara
クライアントに感謝されるCMS導入のコツ
クライアントに感謝されるCMS導入のコツ
Hishikawa Takuro
Visual Studio + xamarin で始めるモバイル アプリ開発
Visual Studio + xamarin で始めるモバイル アプリ開発
インフラジスティックス・ジャパン株式会社
Attractive HTML5
Attractive HTML5
Sho Ito
AngularJSについて
AngularJSについて
昌生 高橋
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
What's hot
(20)
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Xamarin 101 ~環境構築からビルド・テストまで~
Xamarin 101 ~環境構築からビルド・テストまで~
Firefox OS App Manager
Firefox OS App Manager
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Lt 20130209
Lt 20130209
8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
Xamarin + Visual Studio によるマルチプラットフォーム対応アプリ開発 - iOS, Android, Windows に対応しよう
Xamarin + Visual Studio によるマルチプラットフォーム対応アプリ開発 - iOS, Android, Windows に対応しよう
Microsoft Edge 最新アップデートとこれから
Microsoft Edge 最新アップデートとこれから
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Apps for Web Platform
Apps for Web Platform
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
About Chrome web store
About Chrome web store
Xamarin.Forms概要
Xamarin.Forms概要
Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善
クライアントに感謝されるCMS導入のコツ
クライアントに感謝されるCMS導入のコツ
Visual Studio + xamarin で始めるモバイル アプリ開発
Visual Studio + xamarin で始めるモバイル アプリ開発
Attractive HTML5
Attractive HTML5
AngularJSについて
AngularJSについて
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
HTML5 & The Web Platform
HTML5 & The Web Platform
Viewers also liked
IEとHTML5とワタシ
IEとHTML5とワタシ
Sho Ito
Profusion of RIAs
Profusion of RIAs
Sho Ito
ぎゅ〜っと濃縮、HTML5
ぎゅ〜っと濃縮、HTML5
Sho Ito
第2回Google Hackathon for GAE in 福井 事前事前勉強会
第2回Google Hackathon for GAE in 福井 事前事前勉強会
Sho Ito
Silverlight development using Eclipse4SL
Silverlight development using Eclipse4SL
Sho Ito
Introduce of Hokuriku Engineer Group
Introduce of Hokuriku Engineer Group
Sho Ito
Hokuriku.lang
Hokuriku.lang
Kiyokazu Kaba
[MindMap] A recommendation of the design for developers
[MindMap] A recommendation of the design for developers
Sho Ito
制約条件の理論On Fite091023
制約条件の理論On Fite091023
智弘 森下
で、オブジェクト指向って結局なんなのよ
で、オブジェクト指向って結局なんなのよ
katzchang Otani
Typetalk APIを使ったChrome拡張開発ノウハウ #1
Typetalk APIを使ったChrome拡張開発ノウハウ #1
Sho Ito
Viewers also liked
(11)
IEとHTML5とワタシ
IEとHTML5とワタシ
Profusion of RIAs
Profusion of RIAs
ぎゅ〜っと濃縮、HTML5
ぎゅ〜っと濃縮、HTML5
第2回Google Hackathon for GAE in 福井 事前事前勉強会
第2回Google Hackathon for GAE in 福井 事前事前勉強会
Silverlight development using Eclipse4SL
Silverlight development using Eclipse4SL
Introduce of Hokuriku Engineer Group
Introduce of Hokuriku Engineer Group
Hokuriku.lang
Hokuriku.lang
[MindMap] A recommendation of the design for developers
[MindMap] A recommendation of the design for developers
制約条件の理論On Fite091023
制約条件の理論On Fite091023
で、オブジェクト指向って結局なんなのよ
で、オブジェクト指向って結局なんなのよ
Typetalk APIを使ったChrome拡張開発ノウハウ #1
Typetalk APIを使ったChrome拡張開発ノウハウ #1
Similar to Concentrated HTML5 & Attractive HTML5
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
Akira Inoue
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
Tadahiro Higuchi
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
Microsoft
Web on Kernel
Web on Kernel
dynamis
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
Gamefest Japan 2010
Gamefest Japan 2010
Microsoft
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
Workshop1-01
Workshop1-01
mashimonator
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
Web Technology Meeting
Web Technology Meeting
dynamis
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
HTML5 for IA
HTML5 for IA
Atsushi HASEGAWA, Ph.D.
Workshop1-03
Workshop1-03
mashimonator
JavaScript And Keywords
JavaScript And Keywords
uupaa
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Takashi Endo
Html5 seminar 1_pac
Html5 seminar 1_pac
1PAC. INC.
20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料
leverages_event
Similar to Concentrated HTML5 & Attractive HTML5
(20)
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
Web on Kernel
Web on Kernel
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
Mvc conf session_5_isami
Mvc conf session_5_isami
パンダの会 Html5概説
パンダの会 Html5概説
Gamefest Japan 2010
Gamefest Japan 2010
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Workshop1-01
Workshop1-01
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Web Technology Meeting
Web Technology Meeting
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
HTML5 for IA
HTML5 for IA
Workshop1-03
Workshop1-03
JavaScript And Keywords
JavaScript And Keywords
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Html5 seminar 1_pac
Html5 seminar 1_pac
20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料
More from Sho Ito
Javaと小道具
Javaと小道具
Sho Ito
Doppel Travel
Doppel Travel
Sho Ito
Startup Concierge
Startup Concierge
Sho Ito
HTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるには
Sho Ito
AIR2.xとHTML5/CSS3と...
AIR2.xとHTML5/CSS3と...
Sho Ito
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Sho Ito
Flex/Flash meets HTML5 Family
Flex/Flash meets HTML5 Family
Sho Ito
分かった気になるHTML5 〜開発者の視点から〜
分かった気になるHTML5 〜開発者の視点から〜
Sho Ito
[MindMap]Software Patterns
[MindMap]Software Patterns
Sho Ito
ディベロッパーへデザインのススメ
ディベロッパーへデザインのススメ
Sho Ito
創法 - 創造技法
創法 - 創造技法
Sho Ito
More from Sho Ito
(11)
Javaと小道具
Javaと小道具
Doppel Travel
Doppel Travel
Startup Concierge
Startup Concierge
HTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるには
AIR2.xとHTML5/CSS3と...
AIR2.xとHTML5/CSS3と...
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Flex/Flash meets HTML5 Family
Flex/Flash meets HTML5 Family
分かった気になるHTML5 〜開発者の視点から〜
分かった気になるHTML5 〜開発者の視点から〜
[MindMap]Software Patterns
[MindMap]Software Patterns
ディベロッパーへデザインのススメ
ディベロッパーへデザインのススメ
創法 - 創造技法
創法 - 創造技法
Recently uploaded
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Recently uploaded
(12)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Concentrated HTML5 & Attractive HTML5
1.
ぎゅ∼っと濃縮、HTML5
& Attractive HTML5 マークアップからAPI、その魅力まで @shoito HTML5-FIT
2.
自己紹介/shoito
3.
宮城 → 福井
[3.5y]
4.
ソフトウェア設計ツールの開発
5.
Flex(Flash)アプリ開発 [3y]
6.
技術系コミュニティ
7.
HTML5に興味を持った訳
8.
ITシステムの変遷 高
C/S RIA ユーザビリティ 1990年代初頭∼ 2003年後半∼ メインフレーム Web 1990年代中頃∼ /ダム端末 ∼1980年代頃 低 コストパフォーマンス 高 参考文献:RIAシステム構築ガイド Essential 2007 p005
9.
HTML5とワタシ
10.
Hokuriku.lang - HTML5
2009/10
11.
HTML5 Tech Talk
in 金沢 2009/10
12.
HTML5勉強会@めがね会館
2010/03/12
13.
WCAF Seminar Vol.3
- HTML5 2010/03/20
14.
Chrome Extensions with
HTML5作ろう会 2010/04/12
15.
Google Hackathon for
Chrome Extension 2010/04/17, 24
16.
まずはご覧ください
17.
9elements.com
18.
Sketchpad
19.
HTML5 presentation
20.
Mozilla Bespin
21.
HTML5 QUEST
22.
chrome://newtab
23.
これまでの Webの制約が変わります
24.
ここからの目的 • HTML5の可能性を知ってもらうこと • HTML5に興味を持ってもらうこと •
HTML5を 分かった気 になってもらうこと
25.
お話すること • HTML5の概要 • HTML5の構文,
追加される要素/属性 • 関連APIの拡張で実現される機能 • HTML5の魅力
26.
今、HTMLはVer. 4
大前提
27.
WHATWG
W3C Web Applications 1.0 HTML5 HTML5 Microdata HTML5 Microdata canvas 2D Context HTML5 2D Context Cross-document messaging HTML5 Communications Channel messaging device HTML Device Web workers Web workers Web storage Web storage Server-sent events Server-sent events Web sockets Web sockets
28.
HTML5と関連仕様
Indexed Web workers Database API Web Storage Geolocation API HTML5 WebSocket File API Web SQL ...etc Database
29.
マークアップとAPIの仕様
HTML5
30.
前方互換性と後方互換性
HTML5の設計原則
31.
革新より発展を優先する HTML5の仕様策定スタンス
32.
マークアップはよりセマンティックに Webアプリはよりリッチに
HTML5がもたらす変化
33.
Webの技術 - これから
JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
34.
Webの技術 - これから
JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
35.
Webの技術 - これから
JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
36.
新しく追加されるタグ • セクショニングする新たなタグ •
section, article • header, footer • aside, nav, ... • canvas, video, audioタグ • ...etc
37.
削除されるタグ • applet • big •
font • frame • strike/s • tt • ...etc
38.
セクショニングする新たなタグ <article>
<footer> ブログやニュース記事における セクションのフッタを表現 記事本体を表現 <header> <section> セクションのヘッダを指定 文書などにおける一般的な <nav> セクションを表現 ページ内のリンクなど <aside> ナビゲーション情報を保持 ページ内容の主題と関連が ...etc あまりない内容を指定
39.
...etc <mark>
<datalist> マーキングされたテキストを表現 inputタグのlist要素と組み合わせて <progress> 入力候補を指定 ダウンロードや実行中のタスクの <embed> 進捗を表現 プラグインを利用するコンテンツに <command> 利用 ユーザーが実行するコマンドを表現 <meter> <time> ディスク容量などの測定値を表現 日付や時刻などを表現 ...etc
40.
HTML4の構造 HTML5の構造
html5を使ったブログのデザイン -html5doctor- -HTML5.JP
41.
入力サポート • Non-JavaScriptでバリデーションチェック • データの種類
• email • url <input name="pass" • date • tel password type="password"> • number • range • demo
42.
canvasタグ <canvas id= sky
></canvas>
43.
canvasタグ 名前を指定してcanvas領域を置く
<canvas id= sky width= 320 height= 240 /> canvasに描画するにはJavaScriptを使う <script> var canvas = document.getElementById( sky ); var context = canvas.getContext( 2d ); context.fillStyle = rgb(255, 0, 0) ; context.fillRect(0, 0, 100, 100); </script>
44.
video <video src= movie.mov
></video>
45.
videoタグ • W3Cはタグの規定のみ • コーデック/コンテナは規定していない
ブラウザの対応 Firefox ogg/theora Opera ogg/theora Safari H.264 Google Chrome ogg/theora, H.264
46.
videoタグ src属性に動画ファイルのパスを指定する
<video src= me.mov controls= true /> ブラウザ毎にサポートフォーマットが違う 複数フォーマットを指定しておくのが有効 <video controls= true > <source src= me.mov type= video/quicktime /> <source src= me.ogg type= video/ogg; codecs= theora, vorbis /> </video> demo
47.
独自データ属性 data- で始まるサイト独自の属性 適当な属性や要素がない時に独自定義 <ul>
<li data-country= JP >ハナミズキ</li> <li data-country= US >恋のマイアヒ</li> .... </ul>
48.
XHTML1からHTML5へ
その変換方法
49.
<!DOCTYPE html PUBLIC
-//W3C/DTD XHTML 1.0 Strict//EN http://www.w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd > DOCTYPEを変更するだけ <!DOCTYPE html>
50.
XHTML / HTML5の誤解
51.
JavaScript API拡張 アプリケーション・プラットフォームとしての
機能性を実現
52.
Webの技術 - これから
JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
53.
関連API • Application Cache
API • Communication API • Geolocation API • Web Storage • Web SQL Database • Web Workers • Web Socket • File API • ...etc
54.
Application Cache
オフライン実行
55.
ネットワークに接続していなくてもアプリケーション を利用できるようにするAPI
マニフェストファイルにファイルを列挙する CACHE MANIFEST hello.html hello.js NETWORK: server.cgi <!DOCTYPE html> <html manifest= hello.manifest >
56.
Communication API
ウィンドウ間連携
57.
Cross Document Messaging
ウィンドウ間でメッセージの送受信を行うAPI メッセージの受信 window.addEventListener( message , function() { ... }, false); メッセージの送信 postMessage( hogehoge , http://example.com/ );
58.
Geolocation API
位置情報
59.
ブラウザ経由で位置情報を取得するAPI function showMap(position)
{ .... } navigator.geolocation.getCurrentPosition(showMap); 位置情報の取得方法はブラウザの実装次第 Firefox 3.5はGoogle Location Serviceを利用 demo
60.
Web Storage
セッション・ストレージ ローカル・ストレージ KEY : VALUE KEY : VALUE KEY : VALUE
61.
セッション・ストレージ • ウィンドウ毎のデータを保持するストレージ • ウィンドウが閉じられるとデータは消える
sessionStorage.myKey = myValue; sessionStorage.setItem( yourKey , yourValue ); sessionStorage.clear();
62.
ローカル・ストレージ • 複数ウィンドウをまたがるストレージ • オリジン(プロトコル+ドメイン+ポート)毎に異なるスト
レージ • ウィンドウが閉じられてもデータは保持される localStorage.myKey = myValue; localStorage.removeItem( myKey ); localStorage.clear();
63.
Web Workers
並列処理
64.
JavaScriptでバッググラウンド処理を実現するAPI • バッググランド処理スレッド(ワーカー)を生成する • ワーカーはJavaScriptファイルに定義する •
ワーカー間ではメッセージの送受信でデータ通信する 制約 • バッググランドワーカーはDOMをいじれない • DOM操作はこれまで通りUIスレッド側で行う
65.
File API ブラウザ上でファイル操作
66.
ブラウザ上でファイル操作をするAPI ファイル読み込みの制約 •ユーザーアクションが必要(DnD, ファイル選択) •勝手にローカルファイルを読み込まれないように
demo
67.
68.
Attractive HTML5 HTML5の魅力をこっそりと
69.
ここからの目的 HTML5の魅力を ✤ 皆さんに共有すること ✤ 皆さんから共有してもらうこと
70.
私が感じる魅力
71.
標準技術 HTML, CSS, JavaScript
72.
標準技術 HTML, CSS, JavaScript
73.
デザイナ
1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
74.
Browser is a
Platform Webアプリケーションの制約からの解放
75.
No Plug-in Flash player,
Silverlight plug-in, JavaFX runtime
76.
Cross-Platform Windows, Mac OS
X, Linux, Chrome OS
77.
Multi-device PC, Mac, Mobile,
.....
78.
余談
79.
叶わなかった願い - Flash iPhone
OSへのFlash Playerの搭載
80.
iAd iPhone/iPad向け、モバイル広告 広告はHTML5で作る
81.
非Andoide Mobile AP-PFの共同開発 ブラウザのHTML5対応はどうなる?
82.
83.
Server-Side less オフライン、ローカルストレージ、Drag&Drop、File API、WebWorker
84.
Web/Desktopの低い垣根 Drag&Drop/File API、ネイティブアプリケーションとしてラッピング
85.
<header>
<section> <header> <nav> <aside> <article> <footer> <footer> Webがよりセマンティックに header, nav, section, article, footer, aside
86.
HTML5 is Simple! doctype,
meta, script, link 省略... <!doctype html> <meta charset= utf-8 > <script src= xxx.js ></script> <link rel= stylesheet href= xxx.css ></link>
87.
段階的変化の許容 HTML4/XHTMLからHTML5へ - 前方/後方互換性の維持(革新より発展)
88.
N
ew ! 常に最新のソフトウェアを使える Webアプリケーションの特性
89.
低コストな開発/実行環境 デバッグ、プロファイラなどがブラウザに組み込める/まれている
90.
私のイチバン
91.
デザイナ
1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
92.
皆さんが感じたHTML5の魅力って? 時間がなかったら懇親会で話しましょう
93.
94.
HTML5対応チェック
95.
When can I
use...
96.
HTML5 Demos and
Examples
97.
Modernizr
98.
巷のFlash悲観論 FlashってFlash Playerのこと?
Flash CSのこと?
99.
HTML5とFlashの共存
ExternalInterfaceを利用した JavaScript ActionScript連携
100.
HTML5 / Flash
比較 HTML5 Flash 公平性 ○ (標準技術) (Adobe独占) 互換性 (ブラウザ依存) ○ (Flash Playerのみ) PC普及率 (IE未サポート) ○ (ほぼ100%) モバイル普及率 △ △ 開発者数 ○(HTML, JavaScript) △ (ActionScript) 開発ツール ○ ○
101.
HTML5に関してコメント
102.
HTML5, いつから使えるの?
103.
もう, 使える機能から部分的に
104.
iPhone/Android
& IE以外のブラウザでは 既に結構イケる
105.
HTML5は デザイナ/開発者にとって魅力的
106.
次期Web標準技術なので
無視できない
107.
これまでの Webの制約が変わります
108.
提案
109.
別に作りたいサイトや Webアプリはないという方
110.
Chrome Extensionsで 便利なツールを作っては?
111.
Thanks!
shoito sho.ito@air-life.net http://twitter.com/shoito HTML5-FIT
Download now