メディア・ソフト研究会 報告書 ～ネットワーク流 …1 はじめに メディア・ソフト研究会は2004 年に発足し、以来、市場に流通するメディア･ソフトの
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
60
メディアリテラシー メディア芸術基礎 I HTML5とは何か? HTML5、はじめの一歩 2011年10月3日 (Aクラス)、10月17日(Bクラス) 多摩美術大学 情報デザイン学科 情報芸術コース 担当：田所淳
-
Upload
atsushi-tadokoro -
Category
Education
-
view
120 -
download
2
description
Transcript of HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
メディアリテラシー メディア芸術基礎 IHTML5とは何か?HTML5、はじめの一歩2011年10月3日 (Aクラス)、10月17日(Bクラス)多摩美術大学 情報デザイン学科 情報芸術コース担当：田所淳
今日の内容‣ 前半‣ この授業でとりあげるHTML5に至る歴史的な経緯の整理‣ HTML5とは何なのか?‣ 実例の紹介
‣ 後半‣ HTML5最初の一歩‣ HTML5で導入されたの新しい要素でWebページを作成‣ HTML5のページをCSSでレイアウト‣ CSS3を使用して、様々なデザイン効果を加える
「HTML5」とは何か?
HTML5とは何か?‣ HTMLの新バージョン、HTML5とは何なのか?
HTML5とは何か?‣ HTMLのテクノロジの変遷
‣ 1991 - HTML‣ 1994 - HTML2‣ 1996 - CSS1 + JavaScript‣ 1997 - HTML4‣ 1998 - CSS2‣ 2000 - XHTML1 ‣ 2005 - Ajax (Asynchronous JavaScript + XML)‣ 2009 - HTML5
HTML5とは何か?‣ 参考：HTML5までに至るバージョンの変遷
‣ 最大の変化をひとことで言うと…‣ Web「文書」から「アプリケーションへ」
HTML5とは何か?
文書メーラー、地図、ムービープレーヤー、スケジューラー など
HTML5とは何か?‣ 例：Google+
HTML5とは何か?‣ 例：ブラウザやウェブについて知っておきたい20のこと‣ http://www.20thingsilearned.com/ja-JP
HTML5とは何か?‣ 厳密に定義は、いろいろな意見が…
‣ 参考：どこまでがHTML5なの？‣ http://www.publickey1.jp/blog/10/html5_9.html
広義のHTML5と狭義のHTML5
‣ この授業では「広義のHTML5」をHTML5として解説します‣ Webアプリケーションを実現するための技術全般として
広義のHTML5
狭義のHTML5
HTML5の主な機能‣ (広義の) HTML5の主な機能‣ http://www.w3.org/html/logo/#the-technology
‣ セマンティクス‣ オフラン、ストレージ‣ デバイスアクセス‣ コネクティビティー‣ マルチメディア‣ グラフィクス、エフェクト‣ パフォーマンス、インテグレーション‣ CSS3
‣ セマンティクス(意味)によるマークアップ
‣ 様々な新要素の追加‣ <section>, <header>, <footer>, <nav>, <article>, <aside>, <figure>, <mark>, <time>, <video>, <audio> etc...
セマンティクス
セマンティクス‣ 意味構造の記述の変化
body
div id="header"
div id="footer"
divid="sidebar"
div id="content"
div class="article"
div class="article"
bodyheader
footer
nav sectionarticle
article
HTML4 HTML5
オフライン & ストレージ‣ PCだけでなくタブレットやモバイル端末が重要となった今、常にネットワークに接続されているとは限らない
‣ ネットワークがオフラインでもページを閲覧できる仕組み‣ ブラウザ側にデータを蓄積する‣ オフラインでも使用可能なWebアプリを構築可能
‣ デモ：WebStorageタイマー - 最初に開いた時間を記憶
オフライン & ストレージ
デバイスアクセス‣ 様々なデバイスが活用可能に
‣ Geolocation：希望すれば自身の場所を web アプリケーションに通知することができるように
‣ カメラ入力 / 音声入力‣ 映像や音声によるコントロール
‣ Geolocationデモ (iPadからアクセスした状態)‣ http://html5demos.com/geo
デバイスアクセス
コネクティビティー‣ サーバーとのより効率的な接続‣ リアルタイムに双方向通信を実現
‣ チャット‣ オンラインゲーム‣ ...etc.
リクエスト
プッシュ!
クライアント サーバー
プッシュ!プッシュ!
‣ WebGL水族館‣ WebSocketを利用して、複数台のマシンのブラウザを同期‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr
コネクティビティー
マルチメディア‣ オーディオやビデオの取り扱いが容易に!!‣ Webアプリの中に映像や音楽を盛り込める‣ 細かなカスタマイズも
‣ ビデオ映像にリアルタイムにマスク処理‣ http://www.apple.com/html5/showcase/video/
マルチメディア
3D、グラフィクス、エフェクト‣ 2D、3D、ベクターデータなど様々な形式の画像を表示
‣ Canvas：2Dグラフィクス、アニメーション‣ WebGL：ブラウザ上で、3Dグラフィクスを表示‣ SVG：ベクターデータ
‣ Canvas 2Dによるアニメーションのデモ‣ http://yoppa.org/blog/2683.html
3D、グラフィクス、エフェクト
‣ Fractal Lab. : 3次元フラクタル図形をリアルタイム描画‣ http://fractal.io/
3D、グラフィクス、エフェクト
‣ Chrome Experiments : HTML5の実験場‣ http://www.chromeexperiments.com/
3D、グラフィクス、エフェクト
‣ CSSの表現力が、より豊かに
‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロップシャドウ、反射、トランジション(アニメーション)、回転・移動、
‣ HTML Rocks - CSS3
CSS3、スタイリング
‣ CSS3 Playgound - CSS3の実験場‣ http://css3.mikeplate.com/
CSS3、スタイリング
パフォーマンス、インテグレーション‣ Webアプリを高速化する様々な技術
‣ Web Workers：ブラウザ上で並列処理‣ CSSのセレクタの進化‣ ブラウザのヒストリ情報を操作 ...etc
‣ Webアプリをより高速に、快適にするための基礎技術の発展
まとめ‣ HTML5の普及によってWebのユーザ体験は大きく変化する‣ Webブラウザ自体がアプリケーションのプラットフォームへ‣ ブラウザがOSに - Chrome OS‣ 「Web表現」に求められるスキルも時代とともに変化‣ この授業では、新たな技術を積極的に活用して、表現する手法について学んでいきたい
HTML5 はじめの一歩
HTML5 はじめの一歩‣ HTML5から導入された新しい要素を使用して、HTML5のページを作成してみる
‣ CSSで作成したHTML5のページを構造に即してレイアウト‣ CSS3に導入された様々な表現手法を試してみる
HTML5 はじめの一歩‣ 作成するページのイメージ‣ 上下にヘッダーとフッター、左にナビゲーション右に複数記事からなるメインコンテンツ
HTML5 はじめの一歩‣ HTML5以前 (HTML4、XHTML1) でのやりかた
‣ div要素を使用して、ページを構造の単位ごとに分割‣ それぞれのdiv要素にid属性、またはclass属性を付与‣ 属性の名前から、CSSからそれぞれの要素へアクセス‣ CSSでレイアウトや個別のデザインを記述
HTML5 はじめの一歩‣ HTML5以降では、意味(セマンティクス)によるマークアップが可能となる
‣ HTML5のページの構造を指定する要素‣ section: 本の一部あるいは章、章のセクション、あるいは基本的に HTML 4 で独自の見出しを持つすべてのもの
‣ header: ページに表示されるページ・ヘッダー、head 要素とは全く意味合いが違うので注意
‣ footer: 細かい文字での説明が入るページ・フッター、Email・メッセージの署名などが入る
‣ nav: 他のページへのリンクの集まり‣ article: ブログや Web マガジン、一覧記事などに掲載されている個々のエントリー
HTML5 はじめの一歩‣ HTML4、XHTML1でのマークアップ
HTML5 はじめの一歩‣ HTML5ではこうなる!
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>
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>
HTML5 はじめの一歩‣ このページの構造
‣ ヘッダー‣ 大見出し h1‣ 中見出し h2‣ ヘッダーメニュー ul, li
‣ セクション‣ 記事
‣ 大見出し h1‣ 段落 p‣ 中見出し h2‣ 段落 p
‣ 記事‣ 大見出し h1‣ 段落 p
‣ ナビゲーション‣ 大見出し h1‣ ナビゲーションメニュー ul, li
‣ フッター‣ 段落
HTML5 はじめの一歩‣ ブラウザで表示
HTML5 はじめの一歩‣ このページをHTML5に書き換えていく‣ 意味の構造(セマンティクス)をHTML5でマークアップ
‣ ヘッダー → header要素‣ 見出しのまとまり → hgroup要素‣ 個別の記事 → article要素‣ ナビゲーション → nav要素‣ フッター → footer要素
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>
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>
HTML5 はじめの一歩‣ HTML5で構造化したページをブラウザで開いてみる‣ …見た目には変化なし → 何故か?‣ HTML5の構造化要素は文章の区分をマークアップするだけ‣ 意味構造を受けて、どのようにレイアウトするのかは、いままでのHTMLと同様にスタイルシートを使用
HTML5 はじめの一歩‣ CSSを適用するためhead要素に追加‣ CSSへのリンクを記述：style.css
‣ Internet Explorer対策‣ IEのHTML5対応はあまり良くない…‣ IE対策のために、html5shimというIEをHTML 5に対応させるためのJavaScript (html5.js) を利用
‣ http://code.google.com/p/html5shim/
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>
! <!-- 以下省略 -->
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; }
HTML5 はじめの一歩‣ ページのレイアウトをCSSで記述 (つづき)
#main { float:right; width:620px;}
footer { clear:both !important; text-align: center;}
HTML5 はじめの一歩‣ ブラウザで確認してみる!
HTML5 はじめの一歩‣ CSS3の視覚効果を利用する
‣ CSS3では、以前のバージョンに比べて大幅に機能が強化‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロップシャドウ、反射、トランジション(アニメーション)、回転・移動、
‣ HTML Rocks - CSS3
‣ CSS3 Playgound - CSS3の実験場‣ http://css3.mikeplate.com/
HTML5 はじめの一歩
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;
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;}
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;}
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;}
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;}
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;}
HTML5 はじめの一歩‣ CSS3を適用した結果!!
HTML5 はじめの一歩‣ まとめ
‣ 今回の授業、HTML5とCSS3の導入‣ 構造化のための新要素を利用‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウトやデザインを行う方法
‣ しかし、HTML5 で可能となったことはより広範囲に渡る‣ 次回はより動的な表現についてとりあげいきたい
