あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた

1,997 views
1,922 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,997
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた

    1. 1. あなたはどのタイプがお好き? ~ イケメンHTML5系男子 ゲットのしかた ~ 2010.9.10 KyotoGTUG GirlsHackathon 村岡 正和
    2. 2. 自己紹介村岡正和 @bathtimefish【仕事】神戸でITシステム開発/コンサルティングをやってます。【活動】HTML5-WEST.jp Co-Founder, 京都GTUG, CSS Nite in OSAKA, OSCKansai実行委員, 中国ニュースブログ「Shanghai Watch」運営【好きなもの】HTML5, Python, JavaScript, 中国拳法
    3. 3. 太極拳は、
    4. 4. 美容と健康にいいです。
    5. 5. HTML5とは?• HTMLの次のバージョン• 現在W3Cで標準化作業中• 正式勧告は2022年?• 正式勧告を待たず実装が進んでいる• 今までに比べて大幅な改良が施されている
    6. 6. HTML5の強化点• 要素の刷新 新規追加される要素、なくなる要素 section, header, nav, footer, article ... frameset, applet, dir, center ...• 様々なAPIの追加 ビデオ、オーディオコントロール、2D&3Dグラフィック制御、 オフライン動作、バックグラウンド処理、双方向通信...• ユニバーサル・アクセス 様々なデバイスで利用されることが考慮されている。 障がい者対応などWebアクセシビリティにも配慮されている。 できるだけ簡単な記述で強力な機能を使えるよう設計されている。
    7. 7. 注目されている点• マルチメディア要素 video, audio, canvas, svg... プラグインなどの機能を使わずマルチメディアの再生・コントロール が可能になる。• 強力なAPIによるRIA開発 グラフィックの動的生成、オフライン動作、バックグラウンド処理、 データベース、双方向通信 を JavaScriptで利用できる。• Webセマンティクス 正しくマークアップする → データに意味を持たせる 機械が理解しやすいWebコンテンツ → Webの発展に貢献
    8. 8. 草食系男子もいいけど、
    9. 9. HTML5系男子もいいん じゃないですか?
    10. 10. HTML5系イケメンの紹介~ 3つのタイプに分けてみました ~
    11. 11. TYPE. One
    12. 12. TYPE. One ビジュアル系、チャラ男系、ホスト系
    13. 13. TYPE. One ビジュアル系、チャラ男系、ホスト系 いわゆるギークの敵!
    14. 14. Webを華やかに演出• Video 動画コンテンツをブラウザ内蔵のプレイヤーで再生できる <video src=”movie.webm” autoplay loop controls>• Audio 動画コンテンツをブラウザ内蔵のプレイヤーで再生できる• Canvas 2Dグラフィックを描画できる。JavaScriptで描画をコントロール• SVG Scalable Vector Graphics ベクターグラフィックを記述するXML言語• WebGL 3Dグラフィックを描画できる。JavaScriptで描画をコントロール
    15. 15. ビジュアル系というか、グラフィック系ですよね。
    16. 16. ビジュアル系というか、グラフィック系ですよね。 若い子はすぐ顔で転ぶ
    17. 17. ビジュアル系というか、グラフィック系ですよね。 若い子はすぐ顔で転ぶころびやがって!!(怒)
    18. 18. TYPE. Two
    19. 19. TYPE. Two守ってやるよ系
    20. 20. TYPE. Two 守ってやるよ系安定と安心をゲットしたいアナタのHTML5
    21. 21. データを保存し、安全に使う• Web Storage API クライアントにデータを保存する仕組み。クッキーのようなもの• Application Cache Webリソースをキャッシュに保存。オフラインでも表示可能に• Web Sql Database API Sqlでクライアントサイドのデータベースを利用する仕組み 現在標準化が中止されているが、一部のブラウザで利用可能• Indexed Database API クライアントサイドのデータベースを利用する仕組み 標準化が検討されている
    22. 22. 「だいじょうぶ、オレがお前を守ってやるよ。」
    23. 23. 「だいじょうぶ、オレがお前を守ってやるよ。」 わかっちゃいるけど、うれしいですよね♥
    24. 24. TYPE. Three
    25. 25. TYPE. Three ふだんは無口、でも仕事はすごい系
    26. 26. TYPE. Three ふだんは無口、でも仕事はすごい系 白シャツでうでまくりって、なんかステキじゃないですか!?
    27. 27. 強力なバックグラウンド機能• Geolocation API 位置情報サービスを利用できる• Drag and Drop API ドラッグ&ドロップ機能。ブラウザ内だけでなくブラウザの外からの D&Dもサポート。• File API ローカルのファイルの内容を読み込むための仕組み• Webworker API マルチスレッド機能を提供。重い処理をバックグラウンドで処理させ ることができる。• WebSocket API 双方向通信が利用可能になる。リアルタイムな通信処理が可能とな る。
    28. 28. 「やばい、グッときた。」 by 篠原⃝子
    29. 29. 「やばい、グッときた。」 by 篠原⃝子 ちょっと古いですね…
    30. 30. ゲット どのタイプをHackする?• まずは理想を持つことが重要。 どんなものを作りたいか? Ideathonで考えてね!• 本命とガッツリつきあう。 一つの機能をカスタマイズしてリッチなコンテンツを作成• とりあえずフタマタ、3マタで様子をみる。 複数の機能を組み合わせて新しいサービスを開発• CSS3 もかなりのイケメン! HTML5と組み合わせることで表現豊かなコンテンツを作成できる。• デートには下調べが重要! ブラウザによって使えない機能がある。(実装がまちまち) 使いたい機能が利用できるブラウザで開発しよう。
    31. 31. イケメンは、取り扱いが難しい!?
    32. 32. 来週、HTML5と楽しくつきあってください♥
    33. 33. Happy Hacking !

    ×