Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5の話    2012.03.10九州GTUG in 鹿児島  野崎 弘幸
自己紹介野崎 弘幸鹿児島企業に所属しています。日本Androidの会鹿児島支部長 / 運営委員        不定期でAndroidの勉強会やってます。        Android技術に関する勉強会。        アプリ作成の技術とか、組込...
アジェンダ   もう一般的。HTML5  HTML5なマークアップコーポレートサイトにHTML5を。
もう一般的。HTML5
右肩上がりの注目度!
Amazonで検索すると、 参考書もいっぱい。
JAGKでもやった。          2010年6月8日  日本Androidの会鹿児島支部 第3回勉強会 「HTML5とスマートフォン」(野崎 弘幸)          2010年11年16日  日本Androidの会鹿児島支部 第7回勉強...
GDD2011でもHTML5関連セッション多かった。
HTML5なマークアップ
HTML5で何が変わる?   ウェブページがリッチに。       そして、  ブラウザがプラグインなしで、アプリケーションの基盤を担えるように。    まさにこれから旬な技術。
HTML5はWEBの最新技術全般   関連API等の周りの技術も含めると      覚えることたくさん。video要素やcanvas要素などのマルチメディア系   File、Strage、Cache等のデータ系   WebSocket、Mess...
ともあれ、まずはマークアップを。      バリバリの開発者から、     HTMLのマークアップは、   苦手だと言うのをよく耳にします。   プログラム言語は、エラーが出るが、   HTMLは白黒はっきりさせにくい。   どの要素が適切かは...
マークアップをマスターするには。   作法を覚えて、そして書いてみて、  ひたすらにノウハウをためるべし。   W3C HTML5仕様の最終草案で、   規定されている要素は108個。
ここを読めばだいたいバッチリ。   http://diveintohtml5.info/
コーポレートサイトに  HTML5を。
HTML5をどう取り入れるか?        具体例として、手を付けやすい身近な感じのコーポレートサイトに   HTML5を取り入れるという前提で     考えてみたいと思います。
マークアップは、ザクッとこんな感じ  DOCTYPE、html、headの各要素をHTML5の作法で。              新要素 を気にして書く。(section、nav、article、aside、hgroup、header、foot...
HTML5未対応のブラウザに対応            新しい要素に、  display:blockスタイルを定義。  HTML5有効化スクリプトを適用。   http://code.google.com/p/html5shim/
pjaxを取り入れてみる。       HTML5のpushStateを使えば、     ブラウザの履歴を操作できる。 よく例に出されるのがGitHubのあれ。           pjax = pushstate + ajax       第...
Media Queriesを取り入れてみる。                 CSS3の機能。  画面サイズによってスタイルを変える。       既存のスタイルを上書き適用。    未対応のブラウザにはこれで対応。   http://code...
今回、HTML5で作ってみたサイト。お休みの日はサービス作るよプロジェクト。     http://cybercenter.jp/
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

HTML5の話

13,981 views

Published on

2012/03/10 九州GTUG in 鹿児島
「HTML5の話」

Published in: Technology
  • Be the first to comment

HTML5の話

  1. 1. HTML5の話 2012.03.10九州GTUG in 鹿児島 野崎 弘幸
  2. 2. 自己紹介野崎 弘幸鹿児島企業に所属しています。日本Androidの会鹿児島支部長 / 運営委員 不定期でAndroidの勉強会やってます。 Android技術に関する勉強会。 アプリ作成の技術とか、組込みとか、 クラウドやHTML5のことも。
  3. 3. アジェンダ もう一般的。HTML5 HTML5なマークアップコーポレートサイトにHTML5を。
  4. 4. もう一般的。HTML5
  5. 5. 右肩上がりの注目度!
  6. 6. Amazonで検索すると、 参考書もいっぱい。
  7. 7. JAGKでもやった。 2010年6月8日 日本Androidの会鹿児島支部 第3回勉強会 「HTML5とスマートフォン」(野崎 弘幸) 2010年11年16日 日本Androidの会鹿児島支部 第7回勉強会AndroidはHTML5の羊の夢をみるか?(森 史憲)
  8. 8. GDD2011でもHTML5関連セッション多かった。
  9. 9. HTML5なマークアップ
  10. 10. HTML5で何が変わる? ウェブページがリッチに。 そして、 ブラウザがプラグインなしで、アプリケーションの基盤を担えるように。 まさにこれから旬な技術。
  11. 11. HTML5はWEBの最新技術全般 関連API等の周りの技術も含めると 覚えることたくさん。video要素やcanvas要素などのマルチメディア系 File、Strage、Cache等のデータ系 WebSocket、Messaging等の通信系 javascriptも必須  などなど。
  12. 12. ともあれ、まずはマークアップを。 バリバリの開発者から、 HTMLのマークアップは、 苦手だと言うのをよく耳にします。 プログラム言語は、エラーが出るが、 HTMLは白黒はっきりさせにくい。 どの要素が適切かは、文脈に依存する。人が判断するので、少なからず解釈の違いもでる。
  13. 13. マークアップをマスターするには。 作法を覚えて、そして書いてみて、 ひたすらにノウハウをためるべし。 W3C HTML5仕様の最終草案で、 規定されている要素は108個。
  14. 14. ここを読めばだいたいバッチリ。 http://diveintohtml5.info/
  15. 15. コーポレートサイトに HTML5を。
  16. 16. HTML5をどう取り入れるか? 具体例として、手を付けやすい身近な感じのコーポレートサイトに HTML5を取り入れるという前提で 考えてみたいと思います。
  17. 17. マークアップは、ザクッとこんな感じ DOCTYPE、html、headの各要素をHTML5の作法で。 新要素 を気にして書く。(section、nav、article、aside、hgroup、header、footer)     セクションごとにh1を書けるのです。 フォームのバリデーションが便利な感じです。
  18. 18. HTML5未対応のブラウザに対応 新しい要素に、 display:blockスタイルを定義。 HTML5有効化スクリプトを適用。 http://code.google.com/p/html5shim/
  19. 19. pjaxを取り入れてみる。 HTML5のpushStateを使えば、 ブラウザの履歴を操作できる。 よく例に出されるのがGitHubのあれ。 pjax = pushstate + ajax 第19回html5とか勉強会 pjaxhttp://www.slideshare.net/KensakuKOMATSU/19html5
  20. 20. Media Queriesを取り入れてみる。 CSS3の機能。 画面サイズによってスタイルを変える。 既存のスタイルを上書き適用。 未対応のブラウザにはこれで対応。 http://code.google.com/p/css3-mediaqueries-js/
  21. 21. 今回、HTML5で作ってみたサイト。お休みの日はサービス作るよプロジェクト。 http://cybercenter.jp/
  22. 22. ご清聴ありがとうございました。

×