Download to read offline
Uploaded byAtsushi Miura
Tech.G HTML5 プレ講座
グローバル・テクノロジー・デザイン株式会社がトレーニングスタジオ「Tech.G」で開催するHTML5マークアップ講座のプレ講座で紹介したスライド。 講座で使用したサンプルデータは下記。 http://bit.ly/15C4643
![東京では語れないHTML5[仮題]](https://cdn.slidesharecdn.com/ss_thumbnails/20121019-121023230242-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Tech.G HTML5 プレ講座
- 1. HTML5⼊入⾨門 プレ講座 Tech.G by GTD 三浦@muse71
- 2. ◎⾃自⼰己紹介 名前 ： 三浦 敦史 年年齢 ： ４9 職業 ： Webディレクター （プランニング、テクニカル系） フロントエンドエンジニア （UI開発、マークアップ） システム設計、制作コンサルティング 制作技術⽀支援など。 http://about.me/atsushi.miura 講師 ： スクール、企業研修等講師 （Web制作全般、2Dグラフィックなど） その他 ： (社)⽇日本Webデザイナーズ協会 会員 ⽶米Appcelerator社認定 Titanium アプリケーション デベロッパー 作業領領域 ： HTML5、CSS3、JavaScript、PHP、Java、 Flash
- 3.
- 4. HTML5ってなに？ なにが違う？ なにを学べばいい？ なぜHTML5？ なにができる？ 本⽇日のアジェンダ
- 5. プレ講座の⽬目的 宣伝です！ （^^;）
- 6.
- 7. WHATWG OPERA Apple MOZILLA Google Microsoft Web Application 1.0 W3C HTML5
- 8. ◎HTML5の定義 Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines detailed processing models to foster interoperable implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves markup for documents. ➡ ⽂文書のマークアップを改善する。 Introduces markup and APIs for emerging idioms, such as Web applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと API を提供する。 HTML5 differences from HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
- 9. ◎HTML5の定義 Defines a single language called HTML5 which can be written in HTM ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、 定義する。 要素・属性定義 Defines detailed processing models to foster interoperable implemen マークアップ例例 ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の 実装⽅方法 Improves markup for documents. ➡ ⽂文書のマークアップを改善する。 Introduces markup and APIs for emerging idioms, such as Web appl API ➡ Webアプリケーションのような新しい表現に対 API を提供する。 HTML5 differences from HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
- 10. ◎HTML5の定義 This specificationevolves HTML and its related APIs to ease the authoring of Web-based applications. 「HTMLとその関連のAPIは、 Webアプリケーション開発を容易にします。」 Ian Hickson 2011-1-25
- 11. ◎HTML5と関連する仕様 TAKE CONTROL ̶— YOUR WEB, YOUR LOGO -‐‑‒ THE TECH−NOLOGY http://www.w3.org/html/logo/#the-‐‑‒technology-‐‑‒overview
- 12. ◎HTML5と関連する仕様 Markup, Form, Microdata, RDFa, WAI-‐‑‒AREA
- 13. ◎HTML5と関連する仕様 Selector, Effects, CSS Animation, Web Font
- 14. ◎HTML5と関連する仕様 Video, Audio
- 15. ◎HTML5と関連する仕様 Canvas, Web GL, SVG, CSS3 3D Effects
- 16. ◎HTML5と関連する仕様 Geolocation API, Orientation Event, Web RTC(Camera, Audio)
- 17. ◎HTML5と関連する仕様 Web Workers, XMLHttpRequest 2
- 18. ◎HTML5と関連する仕様 App Cache, Local Storage, Indexed DB, File API
- 19. ◎HTML5と関連する仕様 Web Sockets, Server-‐‑‒Sent Events
- 20. ◎HTML5と関連する仕様 現段階で実⾏行行環境が整ってきている仕様
- 21. ◎Webブラウザの対応状況 約2年年前には主要なブラウザでは実⾏行行環境が整ってきている To HTML5, or not to HTML5. That is the question. http://www.webenertia.com/blog/2011/05/to-‐‑‒html5-‐‑‒or-‐‑‒not-‐‑‒to-‐‑‒html5-‐‑‒that-‐‑‒is-‐‑‒the-‐‑‒question/
- 22.
- 23.
- 24. スマホで使える営業ツール⽤用の業務 アプリを作りたいのだけど、、、 営業担当 アンドロイド向けとiOS向けの2種類 を開発する必要がありますね。 じゃぁ、とりあえずiPhoneだけで。 Web担当 インストールはどうすればいい？ 営業担当 AppStoreで公開するか、企業向け のライセンスを購⼊入して下さい。 ？ えっ！ 業務⽤用なのに公開したり、お⾦金金払っ Web担当 たりしなきゃならないの！.... 営業担当
- 25. 株主総会のビデオをWebで公開した いんだけど... じ ゃ ぁ 、 F l a s h を 作 れ る ⼈人 に 頼 ん 総務担当 で、ビデオの変換とプログラム作っ てもらうよう依頼しますね。 スマホとかタブレットでも⾒見見られる Web担当 ようにしたいんだけど... 総務担当 Flashじゃだめだから、スマホとタブ レ ッ ト ⽤用 ペ ー ジ も 発 注 し ま す ね 。 ？ お⾦金金かかりそうだね.... Web担当 総務担当
- 26. ショッピングカートの⼊入⼒力力欄の⼊入⼒力力 ミスが多いからなんとかなんない？ じゃぁ、システムエンジニアに依頼 販売担当 して、エラーチェックプログラムの 発注をします。 Web担当 すぐに何とかしたいんだけど？ 販売担当 テストも含めて2週間くらいはかかっ ちゃいますよ。 ？ .... Web担当 販売担当
- 27.
- 28.
- 29.
- 30.
- 31. ◎HTML5として、まず学ぶべき項⽬目 HTML Markup Selector Form Effects Microdata + RDFa CSS Animation Web Font Application Cash Canvas Web Strage WebGL Indexed DB SVG File API CSS 3D Effects Web Workers Video XMLHttpRequest 2 Audio Geolocation API Web Sockets Orientation Event Server-‐‑‒Sent Events WebRTC
- 32.
- 33.
- 34.
- 35. ◎学び⽅方は？ 現状では複数の書籍を参考にすることがおすすめです
- 36. ◎学び⽅方は？ 仕様や情報収集には下記サイトがおすすめです IBM developerWorks HTML5 の基礎 ➡ http://www.ibm.com/developerworks/jp/training/kp/wa-‐‑‒kp-‐‑‒html5/ ミツエーリンクス Web標準Blog ➡ http://www.ibm.com/developerworks/jp/training/kp/wa-‐‑‒kp-‐‑‒html5/ HTML5.JP 次世代 HTML 標準 HTML5 情報サイト ➡ http://html5.jp/ html5j.org ➡ http://www.html5j.org/
- 37.
- 38. ◎バスワードとしてのHTML5 次世代のHTML !? ➡ 新しいHTML? ➡ 書き⽅方が変わる? ➡ 使い⽅方が変わる? アプリが作れるらしい?? ➡ JavaScriptで作れる? ➡ FlashやSilverlightがいらない?
- 39. ◎なにができる？ THE WALL STREET JOURNAL -‐‑‒ インターネットの世界を変えるＨＴＭＬ5 http://jp.wsj.com/public/page/0_̲0_̲WJPP_̲7000-‐‑‒342068.html?mg=inert-‐‑‒wsj
- 40.
- 41. ◎HTML5の定義 Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines detailed processing models to foster interoperable implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves markup for documents. ➡ ⽂文書のマークアップを改善する。 Introduces markup and APIs for emerging idioms, such as Web applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと API を提供する。 HTML5 differences from HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
- 42. ◎HTML5の定義 Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines detailed processing models to foster interoperable implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves markup for documents. ➡ ⽂文書のマークアップを改善する。 Introduces markup and APIs for emerging idioms, such as Web applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと API を提供する。 HTML5 differences from HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
- 43. HTML5は、HTMLの書式で も、XHTMLの書式でも記述 T ML 準化 することができます。 H 標 × ML また、混在した書式でも記述 T XH することができます。 p im g H1 B st ro ng HTML5 SPECIFIC clipart by illpop.com AT ION
- 44. <br>または<br /> どちらでも記述可能。 class=”hoge” または class=hoge どちらでも記述可能。 <h1>または<H1> どちらでも記述可能。
- 45. <DIV id=recommended class="clearfix"> <H3><img src=top_̲ttl_̲recommend.jpg /></H3> <DIV class=recommendedMenuDetail> <H4><IMG SRC=top_̲recommend_̲img_̲01.jpg ></H4> <dl> <dt><strong>ハリウッド・バーガー</strong></dt> ・ ・ ・ 混在しても仕様上では問題なし
- 46.
- 47. <a href= " http://www.gtd.co.jp/curriculum/ " > <div> <h1>HTML5 講座</h1> <p>HTML5をオンラインで学ぶ！</p> <p>最新の技術をいち早く学ぼう！</p> </div> </a> div を a で括ることも問題なし
- 48. ◎コンテンツモデルの分類 ➡ メタデータ ：ドキュメントのメタ情報 ➡ フロー ：ドキュメント内のコンテンツ全般 ➡ セクショニング ：章や節などのコンテンツグループ ➡ ヘディング ：⾒見見出し ➡ フレージング ：ドキュメント内のテキスト情報全般 ➡ エンベディッド ：外部リソースの読み込み要素 ➡ インタラクティブ ：リンクなどのユーザーの操作対象
- 49. ◎コンテンツモデルの分類 フロー フレージング ヘッディング インタラクティブ エンベディッド セクショニング メタデータ 各要素は複数のコンテンツモデルに 所属している 複雑ですので無理理に覚える必要は無いと思います。
- 50. ◎HTML5の定義 Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines detailed processing models to foster interoperable implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves markup for documents. ➡ ⽂文書のマークアップを改善する。 Introduces markup and APIs for emerging idioms, such as Web applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと API を提供する。 HTML5 differences from HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
- 51. ◎処理理モデルの定義ってなに？ 仕様書にあるのにWeb標準ではNO！ ➡ HTML5には⾮非推奨要素や⾮非推奨属性はありません。 ざっくり⾔言うと仕様書に存在する要素や属性についてはどれでも利利⽤用が 可能ということ。ブラウザのレンダリング⽅方法も定義されています。 BOMやDOMはブラウザまかせ！？ ➡ HTML5ではBOMやDOMについての定義されています。 ブラウザ毎のJavaScript異異なる実装を解消し、アプリケーション作成を 容易易にします。
- 52.
- 53. ブラウザのレンダリング⽅方法や、 他の要素・属性・CSSによる代替 ⼿手段、JavaScriptによる扱われ⽅方 （DOM）についても定義されてい ます。 HTML Living Standard http://www.whatwg.org/specs/web-‐‑‒apps/current-‐‑‒work/multipage/obsolete.html
- 54.
- 55. ブラウザは必要ない記述を 無視してる
- 56. <!DOCTYPE HTML PUBLIC "-‐‑‒//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 無視！ <meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html; 無視！ charset=UTF-‐‑‒8"> <script type="text/javascript"></script> 無視！ <style type="text/css"></style> 無視！
- 57.
- 58.
- 59. HTML5の仕様 ⼿手厚い by Hitachi, Ltd.
- 60. ◎HTML5の定義 Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines detailed processing models to foster interoperable implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves markup for documents. ➡ ⽂文書のマークアップを改善する。 Introduces markup and APIs for emerging idioms, such as Web applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと API を提供する。 HTML5 differences from HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
- 61. ◎Webアプリケーションを想定した仕様 Canvas Form WebGL Application Cash Web Strage Video Indexed DB Audio File API Geolocation API Web Workers Orientation Event XMLHttpRequest 2 WebRTC Web Sockets Server-‐‑‒Sent Events
- 62.
- 63. Live coding Semantics -‐‑‒ Outline / Frame -‐‑‒
- 64. Live coding Multimedia -‐‑‒Video-‐‑‒
- 65. Live coding Graphics -‐‑‒Canvas-‐‑‒
- 66. HTML5講座 講座紹介
- 67.
- 72. JavaScriptスキルは 程度 ある 必要です
- 73. この位の レベル+α です <script type="text/javascript"> var country = 'Germany'; var weather; if(country){ if(country == 'France'){ weather = 'nice'; } アラートに表示される if(country == 'Germany'){ メッセージは？ weather = 'fine'; } var message = 'this is ' + country + ', the weather is ' + weather; alert(message); } </script>
- 74. <script type="text/javascript"> /* localStorageにkey=numberが無い場合の処理理 ※key=numberが無いということはlocalStorageに 何もデータが存在しないということ -‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒ */ if(!localStorage.getItem('number')){ // 変数iを初期化 i = 0; // ⼊入⼒力力欄を空にする すべてのスクリプトに memotitle.value = ''; 解説を付けています memo.value = ''; } /* localStorage上にデータが存在する場合 -‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒ */ else { // 変数iを前回保存された最後の値＋1に初期化 i = parseInt(localStorage.getItem('number'))+1; // localStorageに保存されているデータ数を条件として繰り返し処理理 for(var j=0; j<i; j++){ ..... </script>
- 75. スクラッチでコードを書くのではなく コピー＆ペーストや ブランク部分の書き込み 併⽤用しながら記述します
- 76. スクラッチでコードを書くのではなく コピー＆ペーストや ブランク部分の書き込み 併⽤用しながら記述します もちろん 受講後の質問もOKです
- 77. 皆様お待ちしています 本⽇日はありがとうございました ご質問・お問合せは a-‐‑‒miura@gtd.co.jp