情報編集(Web) HTML5とは何か? HTML5、はじめの一歩

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

情報編集(Web)
HTML5とは何か?
HTML5、はじめの一歩
2013年6月11日
東京藝術大学芸術情報センター(AMC)
担当：田所淳

今日の内容
‣ この講義の後半でとりあげるHTML5に至る歴史的な経緯
‣ HTML5とは何なのか?
‣ 実例の紹介
‣ 時間があれば…
‣ HTML5最初の一歩
‣ HTML5で導入されたの新しい要素でWebページを作成
‣ HTML5のペー...

「HTML5」とは何か?

HTML5とは何か?
‣ HTMLの新バージョン、HTML5とは何なのか?

HTML5とは何か?
‣ HTMLのテクノロジの変遷
‣ 1991 - HTML
‣ 1994 - HTML2
‣ 1996 - CSS1 + JavaScript
‣ 1997 - HTML4
‣ 1998 - CSS2
‣ 2000 - X...

HTML5とは何か?
‣ 参考：HTML5までに至るバージョンの変遷

‣ 最大の変化をひとことで言うと…
‣ Web「文書」から「アプリケーションへ」
HTML5とは何か?
文書
メーラー、地図、
ムービープレーヤー、
スケジューラーなど

HTML5とは何か?
‣ 例：Google+

HTML5とは何か?
‣ 例：ブラウザやウェブについて知っておきたい20のこと
‣ http://www.20thingsilearned.com/ja-JP

HTML5とは何か?
‣ The Evolution of Web - Webの進化
‣ http://www.evolutionoftheweb.com/

HTML5とは何か?
‣ 厳密に定義は、いろいろな意見が…
‣ 参考：どこまでがHTML5なの？
‣ http://www.publickey1.jp/blog/10/html5_9.html

広義のHTML5と狭義のHTML5
‣ この授業では「広義のHTML5」をHTML5として解説します
‣ Webアプリケーションを実現するための技術全般として
広義のHTML5
狭義のHTML5

‣ セマンティクス(意味)によるマークアップ
‣ 様々な新要素の追加
‣ <section>, <header>, <footer>, <nav>, <article>,
<aside>, <ﬁgure>, <mark>, <time>, <v...

セマンティクス
‣ 意味構造の記述の変化
body
div id="header"
div id="footer"
div
id="sidebar"
div id="content"
div class="article"
div class=...

オフライン & ストレージ
‣ PCだけでなくタブレットやモバイル端末が重要となった今、
常にネットワークに接続されているとは限らない
‣ ネットワークがオフラインでもページを閲覧できる仕組み
‣ ブラウザ側にデータを蓄積する
‣ オフラインで...

‣ デモ：WebStorageタイマー - 最初に開いた時間を記憶
オフライン & ストレージ

デバイスアクセス
‣ 様々なデバイスが活用可能に
‣ Geolocation：希望すれば自身の場所を web アプリケー
ションに通知することができるように
‣ カメラ入力 / 音声入力
‣ 映像や音声によるコントロール

‣ Geolocationデモ (iPadからアクセスした状態)
‣ http://html5demos.com/geo
デバイスアクセス

‣ ファイルアクセス - Drag & Dropでファイルを追加するなど
‣ http://studio.html5rocks.com/#Photos
デバイスアクセス

コネクティビティー
‣ サーバーとのより効率的な接続
‣ リアルタイムに双方向通信を実現
‣ チャット
‣ オンラインゲーム
‣ ...etc.
リクエスト
プッシュ!
クライアントサーバー
プッシュ!
プッシュ!

コネクティビティー
‣ scrumblr. http://scrumblr.ca/
‣ ホワイトボードを共有しながら、みんなでブレスト

‣ WebGL水族館
‣ WebSocketを利用して、複数台のマシンのブラウザを同期
‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr
コネクティビティー

マルチメディア
‣ オーディオやビデオの取り扱いが容易に!!
‣ Webアプリの中に映像や音楽を盛り込める
‣ 細かなカスタマイズも

‣ ビデオ映像にリアルタイムにマスク処理
‣ http://www.apple.com/html5/showcase/video/
マルチメディア

マルチメディア
‣ The Conductor http://www.mta.me/
‣ ブラウザで音を奏でる作品

3D、グラフィクス、エフェクト
‣ 2D、3D、ベクターデータなど様々な形式の画像を表示
‣ Canvas：2Dグラフィクス、アニメーション
‣ WebGL：ブラウザ上で、3Dグラフィクスを表示
‣ SVG：ベクターデータ

‣ Canvas 2Dによるアニメーションのデモ
‣ http://yoppa.org/blog/2683.html
3D、グラフィクス、エフェクト

‣ Magic dust http://mrdoob.com/144/magic_dust
3D、グラフィクス、エフェクト

3D、グラフィクス、エフェクト
‣ Chrysaora http://chrysaora.com/

‣ CSSの表現力が、より豊かに
‣ Webfonts、コラム、透明度、角丸、グラデーション、ド
ロップシャドウ、反射、トランジション(アニメーション)、回
転・移動、
‣ HTML Rocks - CSS3
CSS3、スタイリング

‣ CSS3 Playgound - CSS3の実験場
‣ http://css3.mikeplate.com/
CSS3、スタイリング

パフォーマンス、インテグレーション
‣ Webアプリを高速化する様々な技術
‣ Web Workers：ブラウザ上で並列処理
‣ CSSのセレクタの進化
‣ ブラウザのヒストリ情報を操作 ...etc
‣ Webアプリをより高速に、快適にするた...

Chrome Experiments #500
‣ http://500.chromeexperiments.com/
‣ Chrome Experimentsにピックアップされた500のサイト

まとめ
‣ HTML5の普及によってWebのユーザ体験は大きく変化する
‣ Webブラウザ自体がアプリケーションのプラットフォームへ
‣ ブラウザがOSに - Chrome OS
‣ 「Web表現」に求められるスキルも時代とともに変化
‣ この...

HTML5 はじめの一歩

HTML5 はじめの一歩
‣ HTML5から導入された新しい要素を使用して、HTML5の
ページを作成してみる
‣ CSSで作成したHTML5のページを構造に即してレイアウト
‣ CSS3に導入された様々な表現手法を試してみる

HTML5 はじめの一歩
‣ 作成するページのイメージ
‣ 上下にヘッダーとフッター、左にナビゲーション右に複数記事
からなるメインコンテンツ

HTML5 はじめの一歩
‣ HTML5以前 (HTML4、XHTML1) でのやりかた
‣ div要素を使用して、ページを構造の単位ごとに分割
‣ それぞれのdiv要素にid属性、またはclass属性を付与
‣ 属性の名前から、CSSからそれ...

HTML5 はじめの一歩
‣ HTML5以降では、意味(セマンティクス)によるマークアップ
が可能となる
‣ HTML5のページの構造を指定する要素
‣ section: 本の一部あるいは章、章のセクション、あるいは
基本的に HTML 4 で...

HTML5 はじめの一歩
‣ HTML4、XHTML1でのマークアップ

HTML5 はじめの一歩
‣ HTML5ではこうなる!

HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>H...

HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する (つづき)
! ! <h2>Navigation</h2>
! ! <ul>
! ! ! <li><a href="#">example 1 </a></li>
! ...

HTML5 はじめの一歩
‣ このページの構造
‣ ヘッダー
‣ 大見出し h1
‣ 中見出し h2
‣ ヘッダーメニュー ul, li
‣ セクション
‣ 記事
‣ 大見出し h1
‣ 段落 p
‣ 中見出し h2
‣ 段落 p
‣ 記事
‣...

HTML5 はじめの一歩
‣ ブラウザで表示

HTML5 はじめの一歩
‣ このページをHTML5に書き換えていく
‣ 意味の構造(セマンティクス)をHTML5でマークアップ
‣ ヘッダー → header要素
‣ 見出しのまとまり → hgroup要素
‣ 個別の記事 → article...

HTML5 はじめの一歩
‣ HTML5で構造化したサンプル
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS...

HTML5 はじめの一歩
‣ HTML5で構造化したサンプル (つづき)
! ! ! </article>
! ! ! <article>
! ! ! ! <h1>さらに別の記事</h1>
! ! ! ! <p>あのイーハトーヴォのすきとおった...

HTML5 はじめの一歩
‣ HTML5で構造化したページをブラウザで開いてみる
‣ …見た目には変化なし → 何故か?
‣ HTML5の構造化要素は文章の区分をマークアップするだけ
‣ 意味構造を受けて、どのようにレイアウトするのかは、いまま...

HTML5 はじめの一歩
‣ CSSを適用するためhead要素に追加
‣ CSSへのリンクを記述：style.css
‣ Internet Explorer対策
‣ IEのHTML5対応はあまり良くない…
‣ IE対策のために、html5shi...

HTML5 はじめの一歩
‣ head要素は以下のようになる
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS...

HTML5 はじめの一歩
‣ ページのレイアウトをCSSで記述
body {
width:960px;
margin:20px auto;
}
header, nav, footer, #main {
display:block;
border...

HTML5 はじめの一歩
‣ ページのレイアウトをCSSで記述 (つづき)
#main {
float:right;
width:620px;
}
footer {
clear:both !important;
text-align: cent...

HTML5 はじめの一歩
‣ ブラウザで確認してみる!

HTML5 はじめの一歩
‣ CSS3の視覚効果を利用する
‣ CSS3では、以前のバージョンに比べて大幅に機能が強化
‣ Webfonts、コラム、透明度、角丸、グラデーション、ド
ロップシャドウ、反射、トランジション(アニメーション)、回
...

‣ CSS3 Playgound - CSS3の実験場
‣ http://css3.mikeplate.com/
HTML5 はじめの一歩
Text

HTML5 はじめの一歩
‣ CSS3を活用してみる (1 / 6)
body {
background:#aaa;
font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
col...

HTML5 はじめの一歩
‣ CSS3を活用してみる (2 / 6)
-moz-box-shadow: 0px 0px 4px #666;
box-shadow: 0px 0px 4px #666;
border: 1px solid #d3d...

HTML5 はじめの一歩
‣ CSS3を活用してみる (3 / 6)
header h1 {
font-size:2.3em;
text-transform:none;
letter-spacing:0em;
}
header h2 {
mar...

HTML5 はじめの一歩
‣ CSS3を活用してみる (4 / 6)
nav {
float:right;
width:200px;
}
nav h1 {
font-size:1.4em;
}
#main {
float:right;
widt...

HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
#main ul {
padding:0px;
list-style:none;
border-top:1px solid #e7e2d7;
margin:14px 0px;...

HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
footer {
clear:both !important;
padding:10px;
background-color: #444;
border:none;
colo...

HTML5 はじめの一歩
‣ CSS3を適用した結果!!

HTML5 はじめの一歩
‣ まとめ
‣ 今回の授業、HTML5とCSS3の導入
‣ 構造化のための新要素を利用
‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウト
やデザインを行う方法
‣ しかし、HTML5 で可能となったこと...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

HTML5 のお話 by tomo_masakura 1257 views
HTML5, きちんと。 by Masataka Yakura 495245 views

View on Slideshare

1 of 65 Ad

View on Slideshare

1 of 65 Ad