Enviar búsqueda
Cargar
初めてのHtml5 20120612
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
455 vistas
yohei iwakura
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 32
Descargar ahora
Recomendados
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
Shumpei Shiraishi
HTML5/Web標準オーバービュー
HTML5/Web標準オーバービュー
Shumpei Shiraishi
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
html講座
html講座
nitmic
HTML5概要、コードサンプル
HTML5概要、コードサンプル
ourmaninjapan
H T M L5 入門編
H T M L5 入門編
ngi group.
Recomendados
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
Shumpei Shiraishi
HTML5/Web標準オーバービュー
HTML5/Web標準オーバービュー
Shumpei Shiraishi
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
html講座
html講座
nitmic
HTML5概要、コードサンプル
HTML5概要、コードサンプル
ourmaninjapan
H T M L5 入門編
H T M L5 入門編
ngi group.
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
アシアル株式会社
Html5ってなに?
Html5ってなに?
Yoshinori Kamaishi
Html5で作るiPhoneアプリケーション2010
Html5で作るiPhoneアプリケーション2010
だいすけ ふるかわ
HTML5 のお話
HTML5 のお話
tomo_masakura
Html講習会資料
Html講習会資料
竹島 泉
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Yoshito Tabuchi
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
満徳 関
HTML5の話
HTML5の話
Hiroyuki Nozaki
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Attractive HTML5
Attractive HTML5
Sho Ito
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Hideki Akiba
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Más contenido relacionado
Destacado
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
アシアル株式会社
Html5ってなに?
Html5ってなに?
Yoshinori Kamaishi
Html5で作るiPhoneアプリケーション2010
Html5で作るiPhoneアプリケーション2010
だいすけ ふるかわ
HTML5 のお話
HTML5 のお話
tomo_masakura
Html講習会資料
Html講習会資料
竹島 泉
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Yoshito Tabuchi
Destacado
(13)
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
Html5ってなに?
Html5ってなに?
Html5で作るiPhoneアプリケーション2010
Html5で作るiPhoneアプリケーション2010
HTML5 のお話
HTML5 のお話
Html講習会資料
Html講習会資料
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
最速HTML勉強会
最速HTML勉強会
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
HTML5, きちんと。
HTML5, きちんと。
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Similar a 初めてのHtml5 20120612
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
満徳 関
HTML5の話
HTML5の話
Hiroyuki Nozaki
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Attractive HTML5
Attractive HTML5
Sho Ito
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Hideki Akiba
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
社内勉強会「HTML5でつながる」2012 09-07
社内勉強会「HTML5でつながる」2012 09-07
博宣 今村
HTML5でゲームが作れます
HTML5でゲームが作れます
amusementcreators
Html5 seminar 1_pac
Html5 seminar 1_pac
1PAC. INC.
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
Yusuke Hirano
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
Yusuke Hirano
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Akihiro Sugiyama
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
Similar a 初めてのHtml5 20120612
(20)
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
HTML5の話
HTML5の話
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
Attractive HTML5
Attractive HTML5
パンダの会 Html5概説
パンダの会 Html5概説
最近のブラウザ状況
最近のブラウザ状況
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
Htmlのコトバ
Htmlのコトバ
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
社内勉強会「HTML5でつながる」2012 09-07
社内勉強会「HTML5でつながる」2012 09-07
HTML5でゲームが作れます
HTML5でゲームが作れます
Html5 seminar 1_pac
Html5 seminar 1_pac
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Thing.jsについて
Thing.jsについて
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Más de yohei iwakura
香川県のコミュニティ等の報告
香川県のコミュニティ等の報告
yohei iwakura
AndroidBazaar&Conference,Diverse at うどん県の告知
AndroidBazaar&Conference,Diverse at うどん県の告知
yohei iwakura
地域情報アプリ
地域情報アプリ
yohei iwakura
やさしいAndroidの使い方
やさしいAndroidの使い方
yohei iwakura
Word pressで作るandroidアプリ
Word pressで作るandroidアプリ
yohei iwakura
香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部について
yohei iwakura
Androidで気軽にブログを始める20120131
Androidで気軽にブログを始める20120131
yohei iwakura
IP-PBX-Android
IP-PBX-Android
yohei iwakura
Más de yohei iwakura
(8)
香川県のコミュニティ等の報告
香川県のコミュニティ等の報告
AndroidBazaar&Conference,Diverse at うどん県の告知
AndroidBazaar&Conference,Diverse at うどん県の告知
地域情報アプリ
地域情報アプリ
やさしいAndroidの使い方
やさしいAndroidの使い方
Word pressで作るandroidアプリ
Word pressで作るandroidアプリ
香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部について
Androidで気軽にブログを始める20120131
Androidで気軽にブログを始める20120131
IP-PBX-Android
IP-PBX-Android
初めてのHtml5 20120612
1.
初めてのHTML5 2012.07.07
2.
・自己紹介 ・HTML5とは ・策定の進捗 ・XHTML/HTML4.01との違い ・レイアウト ・グラフィック ・最後に
3.
岩倉 洋平 iwakura
yohei 主に大阪・香川を拠点として活動しているWeb制作業者で す。SE/PGと営業しています。 所属 : zamuu :日本Androidの会 四国支部 Twitter :@dr_cova Site :http://zamuu.net/
4.
HTML5とは
5.
HTML5とは WhatwgとW3Cが策定を進めている次世代の HTMLです。 今までのHTML4に対し、新たなタグが追加され たり、非推奨となったり。
6.
HTML5とは HTMLを取り巻く要素
CSS3 Browser HTML5 JQuery PC/Phone
7.
HTML5とは
…とこれは『狭義のHTML5』 今までのマークアップ言語は言語そのものの定 義という役割で収まっていました。
8.
HTML5とは もう1つ『広義のHTML5』というものがありま す。 カメラ・マイク・各種センサーへのデバイスアクセス データストレージ 通信制御(ソケット) マルチメディア(ビデオ・オーディオ) (まだまだありますが、代表的なAPI機能を記載)
9.
HTML5とは 広義のHTML5・・・ HTMLでデバイス制御ができるとか 夢が広がりませんか?
10.
HTML5とは 百聞は一見にしかず HTMLでカメラ制御 (OperaMobile) <!DOCTYPE html> <h1>Simple web
camera display demo</h1><video autoplay></video><script type="text/javascript">var video = document.getElementsByTagName('video')[0], heading = document.getElementsByTagName('h1')[0];if(navigator.getUserMedia) { navigator.getUserMedia('video', successCallback, errorCallback); function successCallback( stream ) { video.src = stream; } function errorCallback( error ) { heading.textContent = "An error occurred: [CODE " + error.code + "]"; }} else { heading.textContent = "Native web camera streaming is not supported in this browser!";}</script>
11.
策定の進捗
12.
2008年1月 HTML5 草案第1版 2011年5月
HTML5 最終草案 最新技術がいい 正式勧告は・・・ でしょ!
13.
2年後の2014年を目指しているそうです。 冷静に考えたらHTML5って まだ早すぎなんじゃない?
そりゃないぜ~ フライング失格のボ〇ト
14.
XHTML1.1/HTML4.01との違い Webサイト・Webアプリケーション・スマホアプリそれぞれ、環 境条件が違います。ここでは変更点を見ながら、HTML5をどのよ うに対応したらよいか考えてみたいと思います。
15.
HTML5との大きな違いとして、そのHTMLのDOC宣言部分が良 くとりあげられます。 <?xml version="1.0" encoding="UTF-8"
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <title>タイトル</title></head> <body>XHTML1.0です</body></html> <!DOCTYPE html> <html dir="ltr" lang="ja"> <head> <title>タイトル</title> </head> <body>HTML5です</body></html>
16.
DOCTYPEが簡素化されます。 <!DOCTYPE html> 先頭がこのタグだったらHTML5と考えてよいと 思います。Web系やHTMLに弱くてもここは押 さえておきましょう。
17.
XHTML1.1/HTML4.01との違い - レイアウト - HTML5の中でも狭義の定義(マークアップ言語)として代表的なタ グの紹介をします。
18.
その他、代表的な追加タグを記載します。 <header> <hgroup> <nav><section><footer>
19.
表示上は同じでも、タグがより明確に役割を宣 言するようになりました。 HTML5では、サイトを見る側(人・検索ボッ ト)などにとって読みやすいようになっていま す。 SEO対策を気にするようなWeb制作時には、よ り優位になると推測できます。
20.
ブラウザの下位互換はどのようになるので しょうか?
え、非対応 ブラウザなの!? IE8 HTML5でサ イト作って ~♪ お任せくだ さい!
21.
HTML5でマークアップしただけのサイト メニューに<nav>が適用され<li>が崩れています。
22.
下位互換表示用にhtml5.jsというライブラリを 紹介します。
23.
「html5.js」を読込んだサイト <!--[if lt IE
9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
24.
もう1つサイト制作でよく使うタグ類がありま す。問合せフォーム等の<input>タグです。こち らも種類が増えています。 date、datetime、datetime-local、month、week、time、number、range、 search、tel、url、email、color
25.
入力Validatorをブラウザが勝手に行ってくれる ので非常に楽です。 …が、これらinput typeは未実装のブラウザがあ ります。
26.
サイト制作において、レイアウトはHTML5の追 加タグを使用していった方がSEO対策としても 優位に働いてくれそうです。が、フォームにつ いては現状のHTML4.01などと同様のままの方 がよいと考えます。
27.
XHTML1.1/HTML4.01との違い - グラフィック -
28.
追加タグの中でもマルチメディア関連も目立つ のですが、もう1つサイト制作において使用し そうなのがグラフ描画などの<canvas>タグです。 <canvas>タグで囲まれた中に JavaScriptで線や円が描けます。 今までグラフ専用ライブラリ使用して ませんでしたか? 既にJSライブラリ化され、グラフ描画 も比較的楽に描けるようになっていま す。
29.
デモ
30.
たのしい<canvas> HTML5が取り上げられるもう1つの要素 スマートフォン
31.
1. ブラウザによってはレイアウト崩れや表示されないなど、未サ ポートであるタグも多々見受けられます。ただ、Web業界におい てはこれからの動向を考えると(SEOの観点からも)、互換性を考慮 しながらできるだけ導入した方が賢明だと考えます。 2. デバイス連携やグラフィックなどのサポートにより、Web制作業 者、システム業者ともにJavaScriptの重要性がより高まり、要望も 増えて死ねる 夢が広がります。
32.
ご清聴ありがとうございまし た。
Descargar ahora