メディアデザイン演習3β
01 オリエンテーション  授業の進め方について

はじめまして

この授業は、通年で行われます。
一年を通じて"ウェブサイト"をデザインする方法と技術と学んで行きましょう。
 
前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長のウェブマガジンをつくることです。

自己紹介

はじめまして、こんにちは。この授業を担当する岡澤 理奈 [おかざわりな]です。
私は、大学でグラフィックデザインを、大学院ではインタフェースデザインとインタラクティブ・メディアアートを学びました。
「情報デザイン」というキーワードを、様々なメディアを使った実践を伴って考察・研究しています。
特別にどこかに雇用されている訳ではなく、フリーランスで活動しています。
職種は「インタフェース・デザイナー」と名乗っています。
まわりからは、「オカリナ」と呼ばれています。みなさんもどうぞオカリナ先生と呼んで下さい。
一年間よろしくお願いします。

目標

この授業の目標はこのページ(ABOUT)を読んで下さい。

進行方法

講義形式によるウェブサイトの製作における基礎的な知識の習得、実技形式によるHTMLの学習、そしてそれらを統合した「自分が編集長のウェブマガジン」を作成する課題で進めていきます。
また、様々なウェブサイトの解説・ディスカッションによる情報デザインについての講義も行います。

HTMLとは何か?

HTMLという単語を、聞いた事がありますか?
「ウェブページ」「ウェブサイト」「ホームページ」の違いを説明できますか?

ウェブページ
WWWシステムを使ってインターネット上で公開されている文書。Webブラウザに一度に表示されるデータのまとまりで、テキストデータやHTMLによるレイアウト情報、文書中に埋め込まれた画像や音声、動画などから構成される。インターネット上では本のように複数のWebページをひとまとめに公開するのが普通で、そのようなWebページのまとまりをWebサイトという。Webサイトは、本の表紙や目次に当たるトップページとそこからリンクされた他のWebページで構成される。


ウェブサイト
1冊の本のように、ひとまとまりに公開されているWebページ群。また、そのWebページ群が置いてあるインターネット上での場所。Webサイト内のページはリンクで連結され、互いに行き来できるようになっている。Webサイトの入り口であるトップページと、Webサイトを構成する一連のWebページ、画像ファイルなどから成る。
IT用語辞典e-Wordsより http://e-words.jp/w/WebE382B5E382A4E38388.html


ホームページ
Webブラウザを起動したときに最初に表示されるページのこと。本来「Webページ」「Webサイト」と呼ぶべきところをすべて「ホームページ」と使ってしまう現象が発生し、それが定着してしまい、今ではWebサイトの入り口であるトップページを「ホームページ」と間違って呼ぶようになっています。
この授業では、作成するサイトのことを「ウェブサイト」や「ウェブページ」と呼びます。
IT用語辞典e-Wordsより http://e-words.jp/w/E3839BE383BCE383A0E3839AE383BCE382B8.html 


HTMLとは何の略か?

HyperText Markup Language
ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束

HyperText: ハイパーテキストとは、「超テキスト」というような意味
リンク機能を使って静止画や動画、音声、音楽など、様々な情報を一つの文書の中に埋めこむことができる仕組み。

Markup: マークアップとは、普通の文書に目印を付ける(マークアップする)というような意味
その部分が文書中でどんな働きをしているか(見出しなのか、段落なのかなど)をはっきりさせること。

Language: 言語、という意味
このマークアップをどんなルールで行うかを決めた文法のようなもの。


その歴史と最新状況:基礎知識

HTMLとは、WWW (World Wide Web)で利用される文書のために開発された言語で、HTML 1.0 の開発から HTML5.1 の公表まで、約25年の歴史を持っています。
 
HTMLを使うと、リンクによって文章を相互に結びつけ、関連する情報をつなげて引き出していけるような仕組みを実現することができます。これを、ハイパーテキストと言います。
 
HTMLはもともと、文書の構造や論理関係を記述するための汎用言語として、SGML (Standard Generalized Markup Language)という言語をベースに作成されました。


構造記述
文章には、「タイトル」「見出し」「段落」「リスト」などの要素があります。
それらをマークアップ(目印をつける)し、その要素がどのような属性(大きさや数など)を持つかを定義することによって、その構造を記述すること。


世界初の HTML、HTML1.0は、ジュネーブの CERN(欧州原子核研究機構)のティム・バーナーズ=リー(Tim Berners-Lee)らが開発しました。
CERN内の科学者同士で研究論文を閲覧・交換するために、ハイパーテキストシステムをネットワーク化すべく、1989年にCERN内に「World Wide Web Project」が設置されました。
 

▼ 読みもの・詳細
その後、Mosaicという無料のブラウザ(HTML 文書を閲覧/出力するためのソフトウェア)が公開されたことによって一般に使用され始めたインターネットは、さらにNetscape NavigaterやInternet Explorerなどのブラウザの登場により、爆発的な広がりを見せていきました。1990年代後半は、まさにブラウザ戦争とも呼べる開発の競争が行わ れ、各ブラウザメーカーが独自の機能拡張を続けた事によって、一時はブラウザごとに違うHTMLを書かなければならないほど互換性が失われている事態にも なりました。
 
またそれと同時期に、レイアウトを思い通りに行うために、『テーブル(表)を作るための要素や属性を使う』という裏技が発見され、それはウェブサイトのデザイナーの間で広く使用されるようになりました。
もともと、文章の構造を示すために作られたシンプルな言語であったHTMLは、見栄えについての意味まで担わなければならない事態になっていったのです。
 
しかし、それらの問題は、ウェブサイトの製作や管理をする/閲覧するにあたって、複雑でわかりにくくなるだけの状況を生み出しました。
 
 
その状況を解消するために、W3C(World Wide Web Consortium)という団体において、Web標準(Web関連の技術仕様やガイドラインの標準規格)が策定され、各ブラウザに共通で採用されるようになり、現在では以前のような問題は少なくなってきました。
 
HTMLは改良を重ねられ、現在のところ使われていることの多いバージョンであるHTML4.01では、標準仕様のうちの「スタイルシート」という技術で、HTMLとは別に見栄えを定義することによって、HTMLは以前のように文章構造を定義するためのシンプルな言語に戻りました。

また、Webにおける文章構造のマークアップの技術は、現在HTML4.01からHTML5への移行期間にあります。しかし、まだ各ブラウザが完全に対応しているわけではありません。



HTMLについてのメモ

W3C
Web全体の技術に関して、仕様やガイドラインなどの策定と勧告を行う中立的な国際的なコンソーシアム。前述のティム・バーナーズ=リーがディレクターをつとめる。
http://www.w3.org/
http://www.w3.org/TR/html5/

HTML5.JP
HTML5.JP では、HTML5 の仕様に関するトピックを紹介しています。
http://www.html5.jp/
http://www.html5.jp/tag/index.html

具体的な課題の内容

前期にすること 紹介

大きく四つの柱があります
・HTMLを書いてみよう
・企画書を作成しよう
・製作 授業中に作業
・プレゼンテーション
 


ウェブマガジンをつくる
前期では、HTMLを入力して自分が編集長のウェブマガジンサイトを作成して、最後にプレゼンテーションをしてもらいます。
実際に製作をはじめる前に、デザインのイメージや掲載する情報の整理などの作業が必要です。
前半に行われる技術の習得の講義と平行して、ウェブサイトの企画、スケッチ、及び掲載したい情報の整理整頓をしておいて下さい。  


心掛けてほしいこと

この授業に取り組む時に是非心がけてほしい事を数点お話しします。

わからないことはすぐに聞く
それぞれ進度が違うのは当たり前です。しかし、わからないからといってそのままにしておくと、どんどん授業は先に進みます。そうなると追いつくのは大変です。わからない事はその場で聞きましょう。  

スケジュール管理をしっかりする
締め切りぎりぎりではなく、前もって完成しておくこと リニューアルが容易なウェブサイトだからこそ、早めに仕上げてどんどん改良して行きましょう。  


アンケート/ヒアリング

ひとりひとりと少しづつ話して、みなさんの興味や感心、技術力を知りたいと思っています。

アンケート
アンケートを実施しますので書き込んで提出して下さい。
それを参考にしながら、一人一人に話を聞きたいと思いますので、難しく考えずに、キーワードとなるようなものを簡単に書き込んでもらって構いません。
 

ヒアリング
この授業では、随時ヒアリングというのを行っていきます。
製作というのは、個人個人で希望や進度が違うものです。なるべく自分のやりたい事を実現できる様になってほしいという思いから、一人一人に話を聞く様にしています。
自分の希望や質問はどんどん伝える様にして下さい。

ヒアリングのときにこの授業の進め方についての質問などがあれば、気軽に聞いて下さい。
 
これから一年、いろいろ発見・チャレンジしていきましょう!