HTML5の話

11,297 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,297
On SlideShare
0
From Embeds
0
Number of Embeds
8,948
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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. ご清聴ありがとうございました。

×