Concentrated HTML5 & Attractive HTML5
?
5 likes?3,347 views
「ぎゅ?っと濃縮、HTML5」と「Attractive HTML5」セッションの二本立て
![宮城 → 福井 [3.5y]](https://image.slidesharecdn.com/concentratedattractivehtml5-100429101733-phpapp02/85/Concentrated-HTML5-Attractive-HTML5-3-320.jpg)
![Flex(Flash)アプリ開発 [3y]](https://image.slidesharecdn.com/concentratedattractivehtml5-100429101733-phpapp02/85/Concentrated-HTML5-Attractive-HTML5-5-320.jpg)
Concentrated HTML5 & Attractive HTML5
- 1. ぎゅ～っと浓缩、贬罢惭尝5 ＆ Attractive HTML5 マークアップからAPI、その魅力まで @shoito HTML5-FIT
- 2. 自己绍介/蝉丑辞颈迟辞
- 3. 宮城 → 福井 [3.5y]
- 6. 技术系コミュニティ
- 8. ITシステムの変遷 高 C/S RIA ユーザビリティ ??1990年代初頭～ 2003年後半～ ?メインフレーム Web 1990年代中頃～?? /ダム端末 ～1980年代頃 低 コストパフォーマンス 高 参考文献：RIAシステム構築ガイド Essential 2007 p005
- 9. 贬罢惭尝5とワタシ
- 10. Hokuriku.lang - HTML5 2009/10
- 11. HTML5 Tech Talk in 金沢 2009/10
- 12. 贬罢惭尝5勉强会＠めがね会馆 2010/03/12
- 13. WCAF Seminar Vol.3 - HTML5 2010/03/20
- 14. Chrome Extensions with HTML5作ろう会 2010/04/12
- 15. Google Hackathon for Chrome Extension 2010/04/17, 24
- 16. まずはご覧ください
- 17. 9elements.com
- 18. Sketchpad
- 20. Mozilla Bespin
- 21. HTML5 QUEST
- 22. chrome://newtab
- 24. ここからの目的 ? HTML5の可能性を知ってもらうこと ? HTML5に興味を持ってもらうこと ? HTML5を 分かった気 になってもらうこと
- 25. お話すること ? HTML5の概要 ? HTML5の構文, 追加される要素/属性 ? 関連APIの拡張で実現される機能 ? HTML5の魅力
- 26. 今、HTMLはVer. 4 大前提
- 27. WHATWG W3C Web Applications 1.0 HTML5 HTML5 Microdata HTML5 Microdata canvas 2D Context HTML5 2D Context Cross-document messaging HTML5 Communications Channel messaging device HTML Device Web workers Web workers Web storage Web storage Server-sent events Server-sent events Web sockets Web sockets
- 28. 贬罢惭尝５と関连仕様 Indexed Web workers Database API Web Storage Geolocation API HTML5 WebSocket File API Web SQL ...etc Database
- 29. マークアップと础笔滨の仕様 HTML5
- 30. 前方互换性と后方互换性 贬罢惭尝5の设计原则
- 32. マークアップはよりセマンティックに Webアプリはよりリッチに 贬罢惭尝5がもたらす変化
- 33. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
- 34. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
- 35. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
- 36. 新しく追加されるタグ ? セクショニングする新たなタグ ? section, article ? header, footer ? aside, nav, ... ? canvas, video, audioタグ ? ...etc
- 37. 削除されるタグ ? applet ? big ? font ? frame ? strike/s ? tt ? ...etc
- 38. セクショニングする新たなタグ <article> <footer> ブログやニュース記事における セクションのフッタを表現 記事本体を表現 <header> <section> セクションのヘッダを指定 文書などにおける一般的な <nav> セクションを表現 ページ内のリンクなど <aside> ナビゲーション情報を保持 ページ内容の主題と関連が ...etc あまりない内容を指定
- 39. ...etc <mark> <datalist> マーキングされたテキストを表現 inputタグのlist要素と組み合わせて <progress> 入力候補を指定 ダウンロードや実行中のタスクの <embed> 進捗を表現 プラグインを利用するコンテンツに <command> 利用 ユーザーが実行するコマンドを表現 <meter> <time> ディスク容量などの測定値を表現 日付や時刻などを表現 ...etc
- 40. 贬罢惭尝4の构造???贬罢惭尝5の构造 html5を使ったブログのデザイン -html5doctor- -HTML5.JP
- 41. 入力サポート ? Non-JavaScriptでバリデーションチェック ? データの種類 ? email ? url <input name="pass" ? date ? tel password type="password"> ? number ? range ? demo
- 42. canvasタグ <canvas id= sky ></canvas>
- 43. canvasタグ 名前を指定してcanvas領域を置く <canvas id= sky width= 320 height= 240 /> canvasに描画するにはJavaScriptを使う <script> var canvas = document.getElementById( sky ); var context = canvas.getContext( 2d ); context.?llStyle = rgb(255, 0, 0) ; context.?llRect(0, 0, 100, 100); </script>
- 45. videoタグ ? W3Cはタグの規定のみ ? コーデック/コンテナは規定していない ブラウザの対応 Firefox ogg/theora Opera ogg/theora Safari H.264 Google Chrome ogg/theora, H.264
- 46. videoタグ src属性に動画ファイルのパスを指定する <video src= /slideshow/concentrated-attractive-html5/3902821/me.mov controls= true /> ブラウザ毎にサポートフォーマットが違う 複数フォーマットを指定しておくのが有効 <video controls= true > <source src= /slideshow/concentrated-attractive-html5/3902821/me.mov type= video/quicktime /> <source src= me.ogg type= video/ogg; codecs= theora, vorbis /> </video> demo
- 47. 独自データ属性 data- で始まるサイト独自の属性 適当な属性や要素がない時に独自定義 <ul> <li data-country= JP >ハナミズキ</li> <li data-country= US >恋のマイアヒ</li> .... </ul>
- 48. 齿贬罢惭尝1から贬罢惭尝5へ その変换方法
- 49. <!DOCTYPE html PUBLIC -//W3C/DTD XHTML 1.0 Strict//EN http://www.w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd > DOCTYPEを変更するだけ <!DOCTYPE html>
- 50. XHTML / HTML5の誤解
- 51. JavaScript API拡張 アプリケーション?プラットフォームとしての 机能性を実现
- 52. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
- 53. 関連API ? Application Cache API ? Communication API ? Geolocation API ? Web Storage ? Web SQL Database ? Web Workers ? Web Socket ? File API ? ...etc
- 54. Application Cache オフライン実行
- 55. ネットワークに接続していなくてもアプリケーション を利用できるようにするAPI マニフェストファイルにファイルを列挙する CACHE MANIFEST hello.html hello.js NETWORK: server.cgi <!DOCTYPE html> <html manifest= hello.manifest >
- 56. Communication API ウィンドウ间连携
- 57. Cross Document Messaging ウィンドウ間でメッセージの送受信を行うAPI メッセージの受信 window.addEventListener( message , function() { ... }, false); メッセージの送信 postMessage( hogehoge , http://example.com/ );
- 58. Geolocation API 位置情报
- 59. ブラウザ経由で位置情报を取得するAPI function showMap(position) { .... } navigator.geolocation.getCurrentPosition(showMap); 位置情报の取得方法はブラウザの実装次第 Firefox 3.5はGoogle Location Serviceを利用 demo
- 60. Web Storage セッション?ストレージ ローカル?ストレージ KEY : VALUE KEY : VALUE KEY : VALUE
- 61. セッション?ストレージ ? ウィンドウ毎のデータを保持するストレージ ? ウィンドウが閉じられるとデータは消える sessionStorage.myKey = myValue; sessionStorage.setItem( yourKey , yourValue ); sessionStorage.clear();
- 62. ローカル?ストレージ ? 複数ウィンドウをまたがるストレージ ? オリジン(プロトコル+ドメイン+ポート)毎に異なるスト レージ ? ウィンドウが閉じられてもデータは保持される localStorage.myKey = myValue; localStorage.removeItem( myKey ); localStorage.clear();
- 63. Web Workers 并列処理
- 64. JavaScriptでバッググラウンド処理を実現するAPI ? バッググランド処理スレッド(ワーカー)を生成する ? ワーカーはJavaScriptファイルに定義する ? ワーカー間ではメッセージの送受信でデータ通信する 制約 ? バッググランドワーカーはDOMをいじれない ? DOM操作はこれまで通りUIスレッド側で行う
- 70. 私が感じる魅力
- 73. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
- 74. Browser is a Platform Webアプリケーションの制約からの解放
- 75. No Plug-in Flash player, Silverlight plug-in, JavaFX runtime
- 76. Cross-Platform Windows, Mac OS X, Linux, Chrome OS
- 77. Multi-device PC, Mac, Mobile, .....
- 78. 余谈
- 79. 叶わなかった願い - Flash iPhone OSへのFlash Playerの搭載
- 85. <header> <section> <header> <nav> <aside> <article> <footer> <footer> Webがよりセマンティックに header, nav, section, article, footer, aside
- 86. HTML5 is Simple! doctype, meta, script, link 省略... <!doctype html> <meta charset= utf-8 > <script src= /slideshow/concentrated-attractive-html5/3902821/xxx.js ></script> <link rel= stylesheet href= xxx.css ></link>
- 88. N ew ！ 常に最新のソフトウェアを使える Webアプリケーションの特性
- 90. 私のイチバン
- 91. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
- 94. 贬罢惭尝5対応チェック
- 95. When can I use...
- 96. HTML5 Demos and Examples
- 97. Modernizr
- 98. 巷のFlash悲観論 FlashってFlash Playerのこと？ Flash CSのこと？
- 99. 贬罢惭尝5と贵濒补蝉丑の共存 ExternalInterfaceを利用した JavaScript ActionScript連携
- 100. HTML5 / Flash 比較 HTML5 Flash 公平性 ○ (標準技術) (Adobe独占) 互換性 (ブラウザ依存) ○ (Flash Playerのみ) PC普及率 (IE未サポート) ○ (ほぼ100%) モバイル普及率 △ △ 開発者数 ○(HTML, JavaScript) △ (ActionScript) 開発ツール ○ ○
- 101. 贬罢惭尝5に関してコメント
- 102. HTML5, いつから使えるの？
- 103. もう, 使える機能から部分的に
- 104. iPhone/Android ＆ IE以外のブラウザでは 既に結構イケる
- 106. 次期奥别产标準技术なので 无视できない
- 107. これまでの Webの制約が変わります
- 108. 提案
- 111. Thanks! shoito sho.ito@air-life.net http://twitter.com/shoito HTML5-FIT