メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩

2,368 views

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,368
On SlideShare
0
From Embeds
0
Number of Embeds
469
Actions
Shares
0
Downloads
21
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩

  1. 1. メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩 2013年9月9日、9月16日 多摩美術大学情報デザイン学科メディア芸術コース 担当:田所淳
  2. 2. 今日の内容 ‣ オンラインポートフォリオ、再講評 ‣ この授業でとりあげるHTML5に至る歴史的な経緯の整理 ‣ HTML5とは何なのか? ‣ 実例の紹介 ‣ HTML5最初の一歩 ‣ HTML5で導入されたの新しい要素でWebページを作成 ‣ HTML5のページをCSSでレイアウト ‣ CSS3を使用して、様々なデザイン効果を加える
  3. 3. オンラインポートフォリオ再講評
  4. 4. オンラインポートフォリオ再講評 ‣ 以下の項目を確認しながら、みなさんのオンラインポートフォ リオを順番に見ていきます! ‣ 授業で制作した作品は、全てオンライン・ポートフォリオで閲 覧できるように ‣ 大学の授業以外で作成した作品も積極的に掲載 ‣ 著作権的に問題のある素材(他人の写真、CDからリッピングし た音楽)などは全て削除 ‣ リンク切れのメニューなどはないように
  5. 5. 「HTML5」とは何か?
  6. 6. HTML5とは何か? ‣ HTMLの新バージョン、HTML5とは何なのか?
  7. 7. HTML5とは何か? ‣ HTMLのテクノロジの変遷 ‣ 1991 - HTML ‣ 1994 - HTML2 ‣ 1996 - CSS1 + JavaScript ‣ 1997 - HTML4 ‣ 1998 - CSS2 ‣ 2000 - XHTML1 ‣ 2005 - Ajax (Asynchronous JavaScript + XML) ‣ 2009 - HTML5
  8. 8. HTML5とは何か? ‣ 参考:HTML5までに至るバージョンの変遷
  9. 9. ‣ 最大の変化をひとことで言うと… ‣ Web「文書」から「アプリケーションへ」 HTML5とは何か? 文書 メーラー、地図、 ムービープレーヤー、 スケジューラー など
  10. 10. HTML5とは何か? ‣ 例:Google+
  11. 11. HTML5とは何か? ‣ 例:ブラウザやウェブについて知っておきたい20のこと ‣ http://www.20thingsilearned.com/ja-JP
  12. 12. HTML5とは何か? ‣ The Evolution of Web - Webの進化 ‣ http://www.evolutionoftheweb.com/
  13. 13. HTML5とは何か? ‣ 厳密に定義は、いろいろな意見が… ‣ 参考:どこまでがHTML5なの? ‣ http://www.publickey1.jp/blog/10/html5_9.html
  14. 14. 広義のHTML5と狭義のHTML5 ‣ この授業では「広義のHTML5」をHTML5として解説します ‣ Webアプリケーションを実現するための技術全般として 広義のHTML5 狭義のHTML5
  15. 15. HTML5の主な機能 ‣ (広義の) HTML5の主な機能 ‣ http://www.w3.org/html/logo/#the-technology ‣ セマンティクス ‣ オフラン、ストレージ ‣ デバイスアクセス ‣ コネクティビティー ‣ マルチメディア ‣ グラフィクス、エフェクト ‣ パフォーマンス、インテグレーション ‣ CSS3
  16. 16. ‣ セマンティクス(意味)によるマークアップ ‣ 様々な新要素の追加 ‣ <section>, <header>, <footer>, <nav>, <article>, <aside>, <figure>, <mark>, <time>, <video>, <audio> etc... セマンティクス
  17. 17. セマンティクス ‣ 意味構造の記述の変化 body div id="header" div id="footer" div id="sidebar" div id="content" div class="article" div class="article" body header footer nav section article article HTML4 HTML5
  18. 18. オフライン & ストレージ ‣ PCだけでなくタブレットやモバイル端末が重要となった今、 常にネットワークに接続されているとは限らない ‣ ネットワークがオフラインでもページを閲覧できる仕組み ‣ ブラウザ側にデータを蓄積する ‣ オフラインでも使用可能なWebアプリを構築可能
  19. 19. ‣ デモ:WebStorageタイマー - 最初に開いた時間を記憶 オフライン & ストレージ
  20. 20. デバイスアクセス ‣ 様々なデバイスが活用可能に ‣ Geolocation:希望すれば自身の場所を web アプリケーション に通知することができるように ‣ カメラ入力 / 音声入力 ‣ 映像や音声によるコントロール
  21. 21. ‣ Geolocationデモ (iPadからアクセスした状態) ‣ http://html5demos.com/geo デバイスアクセス
  22. 22. ‣ ファイルアクセス - Drag & Dropでファイルを追加するなど ‣ http://studio.html5rocks.com/#Photos デバイスアクセス
  23. 23. コネクティビティー ‣ サーバーとのより効率的な接続 ‣ リアルタイムに双方向通信を実現 ‣ チャット ‣ オンラインゲーム ‣ ...etc. リクエスト プッシュ! クライアント サーバー プッシュ! プッシュ!
  24. 24. コネクティビティー ‣ scrumblr. http://scrumblr.ca/ ‣ ホワイトボードを共有しながら、みんなでブレスト
  25. 25. ‣ WebGL水族館 ‣ WebSocketを利用して、複数台のマシンのブラウザを同期 ‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr コネクティビティー
  26. 26. マルチメディア ‣ オーディオやビデオの取り扱いが容易に!! ‣ Webアプリの中に映像や音楽を盛り込める ‣ 細かなカスタマイズも
  27. 27. ‣ ビデオ映像にリアルタイムにマスク処理 ‣ http://www.apple.com/html5/showcase/video/ マルチメディア
  28. 28. マルチメディア ‣ The Conductor http://www.mta.me/ ‣ ブラウザで音を奏でる作品
  29. 29. 3D、グラフィクス、エフェクト ‣ 2D、3D、ベクターデータなど様々な形式の画像を表示 ‣ Canvas:2Dグラフィクス、アニメーション ‣ WebGL:ブラウザ上で、3Dグラフィクスを表示 ‣ SVG:ベクターデータ
  30. 30. ‣ Canvas 2Dによるアニメーションのデモ ‣ http://yoppa.org/blog/2683.html 3D、グラフィクス、エフェクト
  31. 31. ‣ Magic dust http://mrdoob.com/144/magic_dust 3D、グラフィクス、エフェクト
  32. 32. 3D、グラフィクス、エフェクト ‣ Chrysaora http://chrysaora.com/
  33. 33. ‣ CSSの表現力が、より豊かに ‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ プシャドウ、反射、トランジション(アニメーション)、回転・ 移動、 ‣ HTML Rocks - CSS3 CSS3、スタイリング
  34. 34. ‣ CSS3 Playgound - CSS3の実験場 ‣ http://css3.mikeplate.com/ CSS3、スタイリング
  35. 35. パフォーマンス、インテグレーション ‣ Webアプリを高速化する様々な技術 ‣ Web Workers:ブラウザ上で並列処理 ‣ CSSのセレクタの進化 ‣ ブラウザのヒストリ情報を操作 ...etc ‣ Webアプリをより高速に、快適にするための基礎技術の発展
  36. 36. Chrome Experiments #500 ‣ http://500.chromeexperiments.com/ ‣ Chrome Experimentsにピックアップされた500のサイト
  37. 37. まとめ ‣ HTML5の普及によってWebのユーザ体験は大きく変化する ‣ Webブラウザ自体がアプリケーションのプラットフォームへ ‣ ブラウザがOSに - Chrome OS ‣ 「Web表現」に求められるスキルも時代とともに変化 ‣ この授業では、新たな技術を積極的に活用して、表現する手法 について学んでいきたい
  38. 38. HTML5 はじめの一歩
  39. 39. HTML5 はじめの一歩 ‣ HTML5から導入された新しい要素を使用して、HTML5のペー ジを作成してみる ‣ CSSで作成したHTML5のページを構造に即してレイアウト ‣ CSS3に導入された様々な表現手法を試してみる
  40. 40. HTML5 はじめの一歩 ‣ 作成するページのイメージ ‣ 上下にヘッダーとフッター、左にナビゲーション右に複数記事 からなるメインコンテンツ
  41. 41. HTML5 はじめの一歩 ‣ HTML5以前 (HTML4、XHTML1) でのやりかた ‣ div要素を使用して、ページを構造の単位ごとに分割 ‣ それぞれのdiv要素にid属性、またはclass属性を付与 ‣ 属性の名前から、CSSからそれぞれの要素へアクセス ‣ CSSでレイアウトや個別のデザインを記述
  42. 42. HTML5 はじめの一歩 ‣ HTML5以降では、意味(セマンティクス)によるマークアップが 可能となる ‣ HTML5のページの構造を指定する要素 ‣ section: 本の一部あるいは章、章のセクション、あるいは 基本的に HTML 4 で独自の見出しを持つすべてのもの ‣ header: ページに表示されるページ・ヘッダー、head 要素 とは全く意味合いが違うので注意 ‣ footer: 細かい文字での説明が入るページ・フッター、 Email・メッセージの署名などが入る ‣ nav: 他のページへのリンクの集まり ‣ article: ブログや Web マガジン、一覧記事などに掲載され ている個々のエントリー
  43. 43. HTML5 はじめの一歩 ‣ HTML4、XHTML1でのマークアップ
  44. 44. HTML5 はじめの一歩 ‣ HTML5ではこうなる!
  45. 45. HTML5 はじめの一歩 ‣ 実際にHTML5を記述するための雛形を用意する <!DOCTYPE html> <html lang="ja"> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>HTML5とCSS3によるページサンプル</title> ! </head> ! <body> ! ! <h1>HTML5 + CSS3, Layout Sample</h1> ! ! <h2>Media Literacy 2011, Tama Art University</h2> ! ! <ul> ! ! ! <li><a href="#">Home</a></li> ! ! ! <li><a href="#">Menu 1</a></li> ! ! ! <li><a href="#">Menu 2</a></li> ! ! ! <li><a href="#">Menu 3</a></li> ! ! </ul> ! ! <h2>このサイトについて</h2> ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p> ! ! <h3>HTML5とCSS3による豊かな表現</h3> ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p> ! ! <h2>さらに別の記事</h2> ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p>
  46. 46. HTML5 はじめの一歩 ‣ 実際にHTML5を記述するための雛形を用意する (つづき) ! ! <h2>Navigation</h2> ! ! <ul> ! ! ! <li><a href="#">example 1 </a></li> ! ! ! <li><a href="#">example 2 </a></li> ! ! ! <li><a href="#">example 3 </a></li> ! ! ! <li><a href="#">example 4 </a></li> ! ! ! <li><a href="#">example 5 </a></li> ! ! ! <li><a href="#">example 6 </a></li> ! ! ! <li><a href="#">example 7 </a></li> ! ! ! <li><a href="#">example 8 </a></li> ! ! </ul> ! ! <p>This site is licensed under a Creative Commons License.</p> ! </body> </html>
  47. 47. HTML5 はじめの一歩 ‣ このページの構造 ‣ ヘッダー ‣ 大見出し h1 ‣ 中見出し h2 ‣ ヘッダーメニュー ul, li ‣ セクション ‣ 記事 ‣ 大見出し h1 ‣ 段落 p ‣ 中見出し h2 ‣ 段落 p ‣ 記事 ‣ 大見出し h1 ‣ 段落 p ‣ ナビゲーション ‣ 大見出し h1 ‣ ナビゲーションメニュー ul, li ‣ フッター ‣ 段落
  48. 48. HTML5 はじめの一歩 ‣ ブラウザで表示
  49. 49. HTML5 はじめの一歩 ‣ このページをHTML5に書き換えていく ‣ 意味の構造(セマンティクス)をHTML5でマークアップ ‣ ヘッダー → header要素 ‣ 見出しのまとまり → hgroup要素 ‣ 個別の記事 → article要素 ‣ ナビゲーション → nav要素 ‣ フッター → footer要素
  50. 50. HTML5 はじめの一歩 ‣ HTML5で構造化したサンプル <!DOCTYPE html> <html lang="ja"> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>HTML5とCSS3によるページサンプル</title> ! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ! </head> ! <body> ! ! <header> ! ! ! <hgroup> ! ! ! ! <h1>HTML5 + CSS3, Layout Sample</h1> ! ! ! ! <h2>Media Literacy 2011, Tama Art University</h2> ! ! ! </hgroup> ! ! ! <ul> ! ! ! ! <li><a href="#">Home</a></li> ! ! ! ! <li><a href="#">Menu 1</a></li> ! ! ! ! <li><a href="#">Menu 2</a></li> ! ! ! ! <li><a href="#">Menu 3</a></li> ! ! ! </ul> ! ! </header> ! ! <div id="main"> ! ! ! <article> ! ! ! ! <h1>このサイトについて</h1> ! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p> ! ! ! ! <h2>HTML5とCSS3による豊かな表現</h2> ! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p>
  51. 51. HTML5 はじめの一歩 ‣ HTML5で構造化したサンプル (つづき) ! ! ! </article> ! ! ! <article> ! ! ! ! <h1>さらに別の記事</h1> ! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p> ! ! ! </article> ! ! </div> ! ! <nav> ! ! ! <h1>Navigation</h1> ! ! ! <ul> ! ! ! ! <li><a href="#">example 1 </a></li> ! ! ! ! <li><a href="#">example 2 </a></li> ! ! ! ! <li><a href="#">example 3 </a></li> ! ! ! ! <li><a href="#">example 4 </a></li> ! ! ! ! <li><a href="#">example 5 </a></li> ! ! ! ! <li><a href="#">example 6 </a></li> ! ! ! ! <li><a href="#">example 7 </a></li> ! ! ! ! <li><a href="#">example 8 </a></li> ! ! ! </ul> ! ! </nav> ! ! <footer> ! ! ! <p>This site is licensed under a Creative Commons License</p> ! ! </footer> ! </body> </html>
  52. 52. HTML5 はじめの一歩 ‣ HTML5で構造化したページをブラウザで開いてみる ‣ …見た目には変化なし → 何故か? ‣ HTML5の構造化要素は文章の区分をマークアップするだけ ‣ 意味構造を受けて、どのようにレイアウトするのかは、いまま でのHTMLと同様にスタイルシートを使用
  53. 53. HTML5 はじめの一歩 ‣ CSSを適用するためhead要素に追加 ‣ CSSへのリンクを記述:style.css ‣ Internet Explorer対策 ‣ IEのHTML5対応はあまり良くない… ‣ IE対策のために、html5shimというIEをHTML 5に対応させる ためのJavaScript (html5.js) を利用 ‣ http://code.google.com/p/html5shim/
  54. 54. HTML5 はじめの一歩 ‣ head要素は以下のようになる <!DOCTYPE html> <html lang="ja"> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>HTML5とCSS3によるページサンプル</title> ! ! <!--[if lt IE 9]> ! ! <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> ! ! <![endif]--> ! ! <link rel="stylesheet" href="style.css" /> ! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ! ! ! </head> ! <!-- 以下省略 -->
  55. 55. HTML5 はじめの一歩 ‣ ページのレイアウトをCSSで記述 body { width:960px; margin:20px auto; } header, nav, footer, #main { display:block; border:1px solid #ccc; margin:5px; padding:20px; } header { text-align:center; padding:30px; } header ul, header li { list-style-type:none; display:inline; } nav { float:right; width:236px; }
  56. 56. HTML5 はじめの一歩 ‣ ページのレイアウトをCSSで記述 (つづき) #main { float:right; width:620px; } footer { clear:both !important; text-align: center; }
  57. 57. HTML5 はじめの一歩 ‣ ブラウザで確認してみる!
  58. 58. HTML5 はじめの一歩 ‣ CSS3の視覚効果を利用する ‣ CSS3では、以前のバージョンに比べて大幅に機能が強化 ‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ プシャドウ、反射、トランジション(アニメーション)、回転・ 移動、 ‣ HTML Rocks - CSS3
  59. 59. ‣ CSS3 Playgound - CSS3の実験場 ‣ http://css3.mikeplate.com/ HTML5 はじめの一歩 Text
  60. 60. HTML5 はじめの一歩 ‣ CSS3を活用してみる (1 / 6) body { background:#aaa; font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif; color:#000; margin:20px auto; text-align:center; line-height:1.5em; width:960px; } h1, h2, h3, h4, h5, h6 { font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif; font-weight:lighter; } a:link, a:visited { color:#c00; text-decoration:none; } a:hover { color:#0cc; } header, nav, #main, footer { display:block; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 0px 4px #666;
  61. 61. HTML5 はじめの一歩 ‣ CSS3を活用してみる (2 / 6) -moz-box-shadow: 0px 0px 4px #666; box-shadow: 0px 0px 4px #666; border: 1px solid #d3d3d3; background-color: #fff; margin:5px; padding: 0 20px 10px 20px; font-size: 12pt; color: #000; text-align: left; } header { text-align:center; padding:30px; background-image: -moz-linear-gradient(top, #888, #333); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #888), color-stop(1.0, #333)); background-color: #444; border:none; color:#fff; text-shadow: 0px 0px 4px #000000; } header h1, header h2, header h3, header h4, header h5, header h6, header li, header p { font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif; }
  62. 62. HTML5 はじめの一歩 ‣ CSS3を活用してみる (3 / 6) header h1 { font-size:2.3em; text-transform:none; letter-spacing:0em; } header h2 { margin:-10px 0px 20px; font-size:1.3em; } header ul { padding:0px; list-style-type:none; display:inline; } header li { margin:0px 10px; padding:0px; list-style-type:none; display:inline; } header a:link, nav a:visited { font-weight:normal; }
  63. 63. HTML5 はじめの一歩 ‣ CSS3を活用してみる (4 / 6) nav { float:right; width:200px; } nav h1 { font-size:1.4em; } #main { float:right; width:656px; text-align:left; margin-bottom:10px; } #main h1, nav h1 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color:#444; color:#fff; padding:10px; margin:10px -10px; text-shadow:1px 1px 5px #000; }
  64. 64. HTML5 はじめの一歩 ‣ CSS3を活用してみる (5 / 6) #main ul { padding:0px; list-style:none; border-top:1px solid #e7e2d7; margin:14px 0px; } #main li { margin:0px; padding:0px; list-style:none; } #main li a:link, #main li a:visited { float:left; width:96%; padding:3px 1%; border-bottom:1px solid #e7e2d7; } #main li a:hover { background:#f2f1ec; } #main p { font-size:0.9em; } article { margin:0 0 30px 0; }
  65. 65. HTML5 はじめの一歩 ‣ CSS3を活用してみる (5 / 6) footer { clear:both !important; padding:10px; background-color: #444; border:none; color:#fff; font-size:0.8em; text-align:center; } footer a { margin:0px 5px; }
  66. 66. HTML5 はじめの一歩 ‣ CSS3を適用した結果!!
  67. 67. HTML5 はじめの一歩 ‣ まとめ ‣ 今回の授業、HTML5とCSS3の導入 ‣ 構造化のための新要素を利用 ‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウトや デザインを行う方法 ‣ しかし、HTML5 で可能となったことはより広範囲に渡る ‣ 次回はより動的な表現についてとりあげいきたい

×