メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 2,080 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,080
On Slideshare
1,714
From Embeds
366
Number of Embeds
4

Actions

Shares
Downloads
14
Comments
0
Likes
6

Embeds 366

http://yoppa.org 337
http://cloud.feedly.com 14
https://twitter.com 12
http://hebiken.tumblr.com 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩 2013年9月9日、9月16日 多摩美術大学情報デザイン学科メディア芸術コース 担当:田所淳
  • 2. 今日の内容 ‣ オンラインポートフォリオ、再講評 ‣ この授業でとりあげるHTML5に至る歴史的な経緯の整理 ‣ HTML5とは何なのか? ‣ 実例の紹介 ‣ HTML5最初の一歩 ‣ HTML5で導入されたの新しい要素でWebページを作成 ‣ HTML5のページをCSSでレイアウト ‣ CSS3を使用して、様々なデザイン効果を加える
  • 3. オンラインポートフォリオ再講評
  • 4. オンラインポートフォリオ再講評 ‣ 以下の項目を確認しながら、みなさんのオンラインポートフォ リオを順番に見ていきます! ‣ 授業で制作した作品は、全てオンライン・ポートフォリオで閲 覧できるように ‣ 大学の授業以外で作成した作品も積極的に掲載 ‣ 著作権的に問題のある素材(他人の写真、CDからリッピングし た音楽)などは全て削除 ‣ リンク切れのメニューなどはないように
  • 5. 「HTML5」とは何か?
  • 6. HTML5とは何か? ‣ HTMLの新バージョン、HTML5とは何なのか?
  • 7. HTML5とは何か? ‣ HTMLのテクノロジの変遷 ‣ 1991 - HTML ‣ 1994 - HTML2 ‣ 1996 - CSS1 + JavaScript ‣ 1997 - HTML4 ‣ 1998 - CSS2 ‣ 2000 - XHTML1 ‣ 2005 - Ajax (Asynchronous JavaScript + XML) ‣ 2009 - HTML5
  • 8. HTML5とは何か? ‣ 参考:HTML5までに至るバージョンの変遷
  • 9. ‣ 最大の変化をひとことで言うと… ‣ Web「文書」から「アプリケーションへ」 HTML5とは何か? 文書 メーラー、地図、 ムービープレーヤー、 スケジューラー など
  • 10. HTML5とは何か? ‣ 例:Google+
  • 11. HTML5とは何か? ‣ 例:ブラウザやウェブについて知っておきたい20のこと ‣ http://www.20thingsilearned.com/ja-JP
  • 12. HTML5とは何か? ‣ The Evolution of Web - Webの進化 ‣ http://www.evolutionoftheweb.com/
  • 13. HTML5とは何か? ‣ 厳密に定義は、いろいろな意見が… ‣ 参考:どこまでがHTML5なの? ‣ http://www.publickey1.jp/blog/10/html5_9.html
  • 14. 広義のHTML5と狭義のHTML5 ‣ この授業では「広義のHTML5」をHTML5として解説します ‣ Webアプリケーションを実現するための技術全般として 広義のHTML5 狭義のHTML5
  • 15. HTML5の主な機能 ‣ (広義の) HTML5の主な機能 ‣ http://www.w3.org/html/logo/#the-technology ‣ セマンティクス ‣ オフラン、ストレージ ‣ デバイスアクセス ‣ コネクティビティー ‣ マルチメディア ‣ グラフィクス、エフェクト ‣ パフォーマンス、インテグレーション ‣ CSS3
  • 16. ‣ セマンティクス(意味)によるマークアップ ‣ 様々な新要素の追加 ‣ <section>, <header>, <footer>, <nav>, <article>, <aside>, <figure>, <mark>, <time>, <video>, <audio> etc... セマンティクス
  • 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. オフライン & ストレージ ‣ PCだけでなくタブレットやモバイル端末が重要となった今、 常にネットワークに接続されているとは限らない ‣ ネットワークがオフラインでもページを閲覧できる仕組み ‣ ブラウザ側にデータを蓄積する ‣ オフラインでも使用可能なWebアプリを構築可能
  • 19. ‣ デモ:WebStorageタイマー - 最初に開いた時間を記憶 オフライン & ストレージ
  • 20. デバイスアクセス ‣ 様々なデバイスが活用可能に ‣ Geolocation:希望すれば自身の場所を web アプリケーション に通知することができるように ‣ カメラ入力 / 音声入力 ‣ 映像や音声によるコントロール
  • 21. ‣ Geolocationデモ (iPadからアクセスした状態) ‣ http://html5demos.com/geo デバイスアクセス
  • 22. ‣ ファイルアクセス - Drag & Dropでファイルを追加するなど ‣ http://studio.html5rocks.com/#Photos デバイスアクセス
  • 23. コネクティビティー ‣ サーバーとのより効率的な接続 ‣ リアルタイムに双方向通信を実現 ‣ チャット ‣ オンラインゲーム ‣ ...etc. リクエスト プッシュ! クライアント サーバー プッシュ! プッシュ!
  • 24. コネクティビティー ‣ scrumblr. http://scrumblr.ca/ ‣ ホワイトボードを共有しながら、みんなでブレスト
  • 25. ‣ WebGL水族館 ‣ WebSocketを利用して、複数台のマシンのブラウザを同期 ‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr コネクティビティー
  • 26. マルチメディア ‣ オーディオやビデオの取り扱いが容易に!! ‣ Webアプリの中に映像や音楽を盛り込める ‣ 細かなカスタマイズも
  • 27. ‣ ビデオ映像にリアルタイムにマスク処理 ‣ http://www.apple.com/html5/showcase/video/ マルチメディア
  • 28. マルチメディア ‣ The Conductor http://www.mta.me/ ‣ ブラウザで音を奏でる作品
  • 29. 3D、グラフィクス、エフェクト ‣ 2D、3D、ベクターデータなど様々な形式の画像を表示 ‣ Canvas:2Dグラフィクス、アニメーション ‣ WebGL:ブラウザ上で、3Dグラフィクスを表示 ‣ SVG:ベクターデータ
  • 30. ‣ Canvas 2Dによるアニメーションのデモ ‣ http://yoppa.org/blog/2683.html 3D、グラフィクス、エフェクト
  • 31. ‣ Magic dust http://mrdoob.com/144/magic_dust 3D、グラフィクス、エフェクト
  • 32. 3D、グラフィクス、エフェクト ‣ Chrysaora http://chrysaora.com/
  • 33. ‣ CSSの表現力が、より豊かに ‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ プシャドウ、反射、トランジション(アニメーション)、回転・ 移動、 ‣ HTML Rocks - CSS3 CSS3、スタイリング
  • 34. ‣ CSS3 Playgound - CSS3の実験場 ‣ http://css3.mikeplate.com/ CSS3、スタイリング
  • 35. パフォーマンス、インテグレーション ‣ Webアプリを高速化する様々な技術 ‣ Web Workers:ブラウザ上で並列処理 ‣ CSSのセレクタの進化 ‣ ブラウザのヒストリ情報を操作 ...etc ‣ Webアプリをより高速に、快適にするための基礎技術の発展
  • 36. Chrome Experiments #500 ‣ http://500.chromeexperiments.com/ ‣ Chrome Experimentsにピックアップされた500のサイト
  • 37. まとめ ‣ HTML5の普及によってWebのユーザ体験は大きく変化する ‣ Webブラウザ自体がアプリケーションのプラットフォームへ ‣ ブラウザがOSに - Chrome OS ‣ 「Web表現」に求められるスキルも時代とともに変化 ‣ この授業では、新たな技術を積極的に活用して、表現する手法 について学んでいきたい
  • 38. HTML5 はじめの一歩
  • 39. HTML5 はじめの一歩 ‣ HTML5から導入された新しい要素を使用して、HTML5のペー ジを作成してみる ‣ CSSで作成したHTML5のページを構造に即してレイアウト ‣ CSS3に導入された様々な表現手法を試してみる
  • 40. HTML5 はじめの一歩 ‣ 作成するページのイメージ ‣ 上下にヘッダーとフッター、左にナビゲーション右に複数記事 からなるメインコンテンツ
  • 41. HTML5 はじめの一歩 ‣ HTML5以前 (HTML4、XHTML1) でのやりかた ‣ div要素を使用して、ページを構造の単位ごとに分割 ‣ それぞれのdiv要素にid属性、またはclass属性を付与 ‣ 属性の名前から、CSSからそれぞれの要素へアクセス ‣ CSSでレイアウトや個別のデザインを記述
  • 42. HTML5 はじめの一歩 ‣ HTML5以降では、意味(セマンティクス)によるマークアップが 可能となる ‣ HTML5のページの構造を指定する要素 ‣ section: 本の一部あるいは章、章のセクション、あるいは 基本的に HTML 4 で独自の見出しを持つすべてのもの ‣ header: ページに表示されるページ・ヘッダー、head 要素 とは全く意味合いが違うので注意 ‣ footer: 細かい文字での説明が入るページ・フッター、 Email・メッセージの署名などが入る ‣ nav: 他のページへのリンクの集まり ‣ article: ブログや Web マガジン、一覧記事などに掲載され ている個々のエントリー
  • 43. HTML5 はじめの一歩 ‣ HTML4、XHTML1でのマークアップ
  • 44. HTML5 はじめの一歩 ‣ HTML5ではこうなる!
  • 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. 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. HTML5 はじめの一歩 ‣ このページの構造 ‣ ヘッダー ‣ 大見出し h1 ‣ 中見出し h2 ‣ ヘッダーメニュー ul, li ‣ セクション ‣ 記事 ‣ 大見出し h1 ‣ 段落 p ‣ 中見出し h2 ‣ 段落 p ‣ 記事 ‣ 大見出し h1 ‣ 段落 p ‣ ナビゲーション ‣ 大見出し h1 ‣ ナビゲーションメニュー ul, li ‣ フッター ‣ 段落
  • 48. HTML5 はじめの一歩 ‣ ブラウザで表示
  • 49. HTML5 はじめの一歩 ‣ このページをHTML5に書き換えていく ‣ 意味の構造(セマンティクス)をHTML5でマークアップ ‣ ヘッダー → header要素 ‣ 見出しのまとまり → hgroup要素 ‣ 個別の記事 → article要素 ‣ ナビゲーション → nav要素 ‣ フッター → footer要素
  • 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. 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. HTML5 はじめの一歩 ‣ HTML5で構造化したページをブラウザで開いてみる ‣ …見た目には変化なし → 何故か? ‣ HTML5の構造化要素は文章の区分をマークアップするだけ ‣ 意味構造を受けて、どのようにレイアウトするのかは、いまま でのHTMLと同様にスタイルシートを使用
  • 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. 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. 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. HTML5 はじめの一歩 ‣ ページのレイアウトをCSSで記述 (つづき) #main { float:right; width:620px; } footer { clear:both !important; text-align: center; }
  • 57. HTML5 はじめの一歩 ‣ ブラウザで確認してみる!
  • 58. HTML5 はじめの一歩 ‣ CSS3の視覚効果を利用する ‣ CSS3では、以前のバージョンに比べて大幅に機能が強化 ‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ プシャドウ、反射、トランジション(アニメーション)、回転・ 移動、 ‣ HTML Rocks - CSS3
  • 59. ‣ CSS3 Playgound - CSS3の実験場 ‣ http://css3.mikeplate.com/ HTML5 はじめの一歩 Text
  • 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. 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. 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. 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. 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. 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. HTML5 はじめの一歩 ‣ CSS3を適用した結果!!
  • 67. HTML5 はじめの一歩 ‣ まとめ ‣ 今回の授業、HTML5とCSS3の導入 ‣ 構造化のための新要素を利用 ‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウトや デザインを行う方法 ‣ しかし、HTML5 で可能となったことはより広範囲に渡る ‣ 次回はより動的な表現についてとりあげいきたい