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.

Attractive HTML5

2,207 views

Published on

HTML5について私が感じる魅力を語る
2010/04/29

Published in: Technology
  • Be the first to comment

Attractive HTML5

  1. 1. Attractive HTML5 HTML5の魅力をこっそりと @shoito HTML5-FIT
  2. 2. 自己紹介/shoito
  3. 3. 宮城 → 福井 [3.5y]
  4. 4. ソフトウェア設計ツールの開発
  5. 5. Flex(Flash)アプリ開発 [3y]
  6. 6. 技術系コミュニティ
  7. 7. HTML5に興味を持った訳
  8. 8. ITシステムの変遷高 C/S RIAユーザビリティ   1990年代初頭∼ 2003年後半∼  メインフレーム Web 1990年代中頃∼   /ダム端末 ∼1980年代頃低 コストパフォーマンス 高 参考文献:RIAシステム構築ガイド Essential 2007 p005
  9. 9. HTML5とワタシ
  10. 10. Hokuriku.lang - HTML5 2009/10
  11. 11. HTML5 Tech Talk in 金沢 2009/10
  12. 12. HTML5勉強会@めがね会館 2010/03/12
  13. 13. WCAF Seminar Vol.3 - HTML5 2010/03/20
  14. 14. Chrome Extensions with HTML5作ろう会 2010/04/12
  15. 15. Google Hackathon for Chrome Extension 2010/04/17, 24
  16. 16. 今日の目的HTML5の魅力を✤ 皆さんに共有すること✤ 皆さんから共有してもらうこと
  17. 17. まずはご覧ください
  18. 18. 9elements.com
  19. 19. Sketchpad
  20. 20. HTML5 presentation
  21. 21. Mozilla Bespin
  22. 22. HTML5 QUEST
  23. 23. chrome://newtab
  24. 24. 私が感じる魅力
  25. 25. 標準技術HTML, CSS, JavaScript
  26. 26. 標準技術HTML, CSS, JavaScript
  27. 27. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3標準技術HTML, CSS, JavaScript
  28. 28. Browser is a PlatformWebアプリケーションの制約からの解放
  29. 29. No Plug-inFlash player, Silverlight plug-in, JavaFX runtime
  30. 30. Cross-PlatformWindows, Mac OS X, Linux, Chrome OS
  31. 31. Multi-devicePC, Mac, Mobile, .....
  32. 32. 余談
  33. 33. 叶わなかった願い - FlashiPhone OSへのFlash Playerの搭載
  34. 34. iAdiPhone/iPad向け、モバイル広告 ­ 広告はHTML5で作る
  35. 35. 非Andoide Mobile AP-PFの共同開発ブラウザのHTML5対応はどうなる?
  36. 36. Server-Side lessオフライン、ローカルストレージ、Drag&Drop、File API、WebWorker
  37. 37. Web/Desktopの低い垣根Drag&Drop/File API、ネイティブアプリケーションとしてラッピング
  38. 38. <header> <section> <header> <nav> <aside> <article> <footer> <footer>Webがよりセマンティックにheader, nav, section, article, footer, aside
  39. 39. 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>
  40. 40. 段階的変化の許容HTML4/XHTMLからHTML5へ - 前方/後方互換性の維持(革新より発展)
  41. 41. N ew !常に最新のソフトウェアを使えるWebアプリケーションの特性
  42. 42. 低コストな開発/実行環境デバッグ、プロファイラなどがブラウザに組み込める/まれている
  43. 43. 私のイチバン
  44. 44. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3標準技術HTML, CSS, JavaScript
  45. 45. 皆さんが感じたHTML5の魅力って?時間がなかったら懇親会で話しましょう
  46. 46. HTML5対応チェック
  47. 47. When can I use...
  48. 48. HTML5 Demos and Examples
  49. 49. Modernizr
  50. 50. 巷のFlash悲観論FlashってFlash Playerのこと? Flash CSのこと?
  51. 51. HTML5とFlashの共存 ExternalInterfaceを利用した JavaScript ActionScript連携
  52. 52. HTML5 / Flash 比較 HTML5 Flash 公平性 ○ (標準技術) (Adobe独占) 互換性 (ブラウザ依存) ○ (Flash Playerのみ) PC普及率 (IE未サポート) ○ (ほぼ100%)モバイル普及率 △ △ 開発者数 ○(HTML, JavaScript) △ (ActionScript)開発ツール ○ ○
  53. 53. HTML5に関してコメント
  54. 54. HTML5,いつから使えるの?
  55. 55. もう, 使える機能から部分的に
  56. 56. iPhone/Android &IE以外のブラウザでは 既に結構イケる
  57. 57. HTML5はデザイナ/開発者にとって魅力的
  58. 58. 次期Web標準技術なので 無視できない
  59. 59. これまでのWebの制約が変わります
  60. 60. 提案
  61. 61. 別に作りたいサイトやWebアプリはないという方
  62. 62. Chrome Extensionsで便利なツールを作っては?
  63. 63. Thanks! shoito sho.ito@air-life.net http://twitter.com/shoito HTML5-FIT

×