Downloaded 31 times
![宮城 → 福井 [3.5y]](https://image.slidesharecdn.com/concentratedattractivehtml5-100429101733-phpapp02/75/Concentrated-HTML5-Attractive-HTML5-3-2048.jpg)
![Flex(Flash)アプリ開発 [3y]](https://image.slidesharecdn.com/concentratedattractivehtml5-100429101733-phpapp02/75/Concentrated-HTML5-Attractive-HTML5-5-2048.jpg)
More Related Content
![[MindMap] A recommendation of the design for developers](https://cdn.slidesharecdn.com/ss_thumbnails/recomm-of-design-for-dev-mm-090912114356-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Concentrated HTML5 & Attractive HTML5
![[MindMap]Software Patterns](https://cdn.slidesharecdn.com/ss_thumbnails/software-patterns-mm-090915060830-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Concentrated HTML5 & Attractive HTML5
- 1. ぎゅ∼っと濃縮、HTML5 ＆ Attractive HTML5 マークアップからAPI、その魅力まで @shoito HTML5-FIT
- 2.
- 3. 宮城 → 福井[3.5y]
- 4.
- 5.
- 6.
- 7.
- 8. ITシステムの変遷 高 C/S RIA ユーザビリティ 1990年代初頭∼ 2003年後半∼ メインフレーム Web 1990年代中頃∼ /ダム端末 ∼1980年代頃 低 コストパフォーマンス 高 参考文献：RIAシステム構築ガイド Essential 2007 p005
- 9.
- 10. Hokuriku.lang - HTML5 2009/10
- 11. HTML5 Tech Talkin 金沢 2009/10
- 12. HTML5勉強会＠めがね会館 2010/03/12
- 13. WCAF Seminar Vol.3- HTML5 2010/03/20
- 14. Chrome Extensions withHTML5作ろう会 2010/04/12
- 15. Google Hackathon forChrome Extension 2010/04/17, 24
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 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. HTML５と関連仕様 Indexed Web workers Database API Web Storage Geolocation API HTML5 WebSocket File API Web SQL ...etc Database
- 29. マークアップとAPIの仕様 HTML5
- 30. 前方互換性と後方互換性 HTML5の設計原則
- 31.
- 32. マークアップはよりセマンティックに Webアプリはよりリッチに HTML5がもたらす変化
- 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. HTML4の構造 HTML5の構造 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.fillStyle = rgb(255, 0, 0) ; context.fillRect(0, 0, 100, 100); </script>
- 44. video <video src= movie.mov></video>
- 45. videoタグ • W3Cはタグの規定のみ • コーデック/コンテナは規定していない ブラウザの対応 Firefox ogg/theora Opera ogg/theora Safari H.264 Google Chrome ogg/theora, H.264
- 46. videoタグ src属性に動画ファイルのパスを指定する <video src= me.mov controls= true /> ブラウザ毎にサポートフォーマットが違う 複数フォーマットを指定しておくのが有効 <video controls= true > <source src= 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. XHTML1からHTML5へ その変換方法
- 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.
- 51.
- 52. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
- 53. 関連API • Application CacheAPI • 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スレッド側で行う
- 65.
- 66.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
- 74. Browser is aPlatform Webアプリケーションの制約からの解放
- 75. No Plug-in Flash player,Silverlight plug-in, JavaFX runtime
- 76. Cross-Platform Windows, Mac OSX, Linux, Chrome OS
- 77.
- 78.
- 79. 叶わなかった願い - Flash iPhoneOSへのFlash Playerの搭載
- 80.
- 81.
- 83.
- 84.
- 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= xxx.js ></script> <link rel= stylesheet href= xxx.css ></link>
- 87.
- 88. N ew ！ 常に最新のソフトウェアを使える Webアプリケーションの特性
- 89.
- 90.
- 91. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
- 92.
- 94.
- 95. When can Iuse...
- 96. HTML5 Demos andExamples
- 97.
- 98. 巷のFlash悲観論 FlashってFlash Playerのこと？ Flash CSのこと？
- 99. HTML5とFlashの共存 ExternalInterfaceを利用した JavaScript ActionScript連携
- 100. HTML5 / Flash比較 HTML5 Flash 公平性 ○ (標準技術) (Adobe独占) 互換性 (ブラウザ依存) ○ (Flash Playerのみ) PC普及率 (IE未サポート) ○ (ほぼ100%) モバイル普及率 △ △ 開発者数 ○(HTML, JavaScript) △ (ActionScript) 開発ツール ○ ○
- 101.
- 102.
- 103.
- 104. iPhone/Android ＆ IE以外のブラウザでは 既に結構イケる
- 105.
- 106. 次期Web標準技術なので 無視できない
- 107.
- 108.
- 109.
- 110.
- 111. Thanks! shoito sho.ito@air-life.net http://twitter.com/shoito HTML5-FIT