メディアデザイン演習3β
05 HTMLの基本を知ろう4

HTMLを書きながら要素を知る

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

本日は、宿題であった工事中のページを「サーバ」に「アップロード」します。
引き続き、HTMLの学習およびウェブマガジンの企画作成に入ります。

この間のふりかえり

準備:
デスクトップに、アルファベットで自分の名字を名付けたフォルダを出して下さい。
中にはindex.htmlやimageフォルダが入っているはずです。

[前回やったこと]
・ウェブ用に画像を書き出す JPG GIF PNG
・リンク文字の色変更
・工事中ページのブラッシュアップ


ウェブサーバへのアップロード

登録されたアカウントを確認する

まずは、自分のウェブページがアップロードされるウェブサーバにログインするためのアカウントを確認しましょう。 アカウントとパスワードは絶対なくさない様に管理してください。 携帯のメモに登録しておく、手帳に書き込んでおくなどしておくと良いでしょう。

アップロードの方法

CyberDuckを起動する

ホスト www3.seian.ac.jp
ユーザーID あなたのアカウント
パスワード 発行されたパスワード

OKをクリック

工事中のページ「index.html」と、imageフォルダを、あなたのアカウントの「public_html」ディレクトリにドラッグ&ドロップする
もしくは、フォルダとファイルをPutを選択し、index.html、imageフォルダを選択してOKする。
 

確認する

ブラウザに
http://www3.seian.ac.jp/~自分のアカウント
と入力し、
・アップロードしたデータが無事に表示されているか
・画像は表示できているか
・リンクボタンは指定した先にリンクできているか
を確認して下さい。


結局URLって何?

URL Uniform Resource Locator
インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述方式。
インターネットにおける情報の「住所」にあたる。
情報の種類やサーバ名、ポート番号、フォルダ名、ファイル名などで構成される。

http://

http:// は、アクセスしているファイルの種類を示している。
ウェブでは、ほとんど例外無く、httpが最初に来ているが、
これは「HyperText Transfer Protocol」の略で、このプロトコルでウェブページが転送される。

その他には、
ftp(「File Transfer Protocol」の略で、通常はソフトなどの大規模ファイルの転送に使う)
telnet(遠隔コンピューターへのログインに使う、ほとんどが「チャット」のため)
file(ブラウザが遠隔サーバでなくて自分のコンピューターのファイルを読んでいることを示している)
が最初に表示される。

基本的なURLの次の部分は、インターネットという世界中のコンピューターのネットワークのどこに、探しているサイトがあるのかの「道案内」。
これには、Domain Name System (DNS) を使用する。

DNSについて:http://e-words.jp/w/DNS.html

DNSは、人間にわかりやすいwww.google.comなどのようなアドレスを、数字の204.62.130.25のようなIPアドレスに変換して、インターネット上でコンピューターがこれを使ってお互いを認識するためのもの。

自分のマシンで自分のサイトを始めようと考えているのではなければ、DNSのことは知っている程度でいいです。
参考:ドメイン登録サービス 「お名前.com」http://www.onamae.com/
とにかく、.com、.gov、.orgなど色々なドメイン名があるんだということさえわかればまずは大丈夫。

 


スタイルシート 発展編

[準備]サイト内リンクをつくってみる

新規書類を作成し、index.htmlの中身をすべてコピー&ペーストして、study.htmlという名前で自分の名前のついたフォルダに保存する。
study.htmlの好きな位置に、以下を書き加えましょう。

<a href="index.html">トップページへのリンク</a>
※相対指定



CSS(Cascading Style Sheet)の復習

本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表現に一貫性を持たせる手段です。
一番簡単にスタイルシートを書くと、、、

<span style="color:red;">成安造形大学</span>
<div style="color:red;">成安造形大学</div>

タグ解説:どちらも範囲を表す要素です。
 <span> はインライン要素(前後で改行されない)
  ここから・ーーーーーー・ここまで /直線的な範囲

 <div> はブロック要素(前後で改行される)
  ここから「     」ここまで /面積を持った範囲

ほかにも、<h1> や <p> など、
ほとんどのタグで style 属性を指定できます。

 

スタイル定義の場所

スタイルシートをどこに記述するかは、大きく分けて3つあります。

1 インラインstyle属性
個々のタグに style属性としてスタイル情報を埋め込むことで、
そのタグの範囲にスタイルを設定します。

<p style="color: red;">これは赤い文字の段落。</p>

2 head要素内のstyle要素で指定

head要素の中に style要素を加えてスタイルを記述すると、
そのHTML文書の 全体を通して共通のスタイルを設定することができる。

 <head>
  <style type="text/css">
   <!--
   p {color: red;}
   h2 {color: blue; font-size: 120%;}
     -->
  </style>
  ...

3 外部ファイルによるスタイル設定 [今後はこの方法を使っていきます]

<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>

--------
basic.css(別ファイル 保存時には相対的な位置に注意)
h1 { color:red; }

より詳しく見て行きましょう

同時にいくつかの要素の値を決める事が出来ます。

その際は、以下のように中かっこの中に複数行にわたって書きます

h1 {
font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: red;
font-size: 16pt;
}

 

一つのHTMLファイルに、複数のCSSをリンクさせることも可能ですので、全体通じてつかうデザイン設定CSS、そのページ独自のデザイン設定用のCSSなどと分けて管理するといいでしょう。

 

クラス

クラスはスタイルの集合につける名前で、
複数のタグに同じクラス名を指定することが可能です。

<style type="text/css">
<!--

p.red {color:red;}
p.green {color:green}
.blue{color:blue;}
.bold{font-weight:bold;}

-->
</style>
</head>

<body>
<p class="red">これはredクラスです。</p>
<p class="green bold">これはgreenクラス+boldクラスです。</p>

<h1 class="blue">これはblueクラスです。</h1>
<p class="blue">これもblueクラスです。</p>

</body>
</html>

 

ID属性

クラスの代わりに ID を指定することもできます。
ID はそれぞれの要素につける名前でひとつのドキュメント中に、
複数の要素が同じ ID を持つことは許されません。

<html>
 <head>
  <title>sample</title>
  <style type="text/css">
  <!--
   #a001 { color: blue; }
  -->
  </style>
 </head>
 <body>
  <p id="a001">この中の色は青色です</p>
 </body>
</html>

どのような要素が設定できるのか、調べてみましょう。
参考ウェブ: とほほのスタイルシート入門
http://www.tohoho-web.com/css/index.htm

 

divタグはひとつのエリアとして情報をまとめて、幅や高さを決めたり、配置したり、背景に色をつけるなどの操作する場合に使用し、spanタグは文章中の一部を操作する場合に使用する、といった感じで使い分けると良いでしょう。

<p>ひとつの段落(パラグラフ)であることを表す
<p>タグはParagraphの略で、<p>~

</p>で囲まれた部分がひとつの段落であることを表します。
一般的なブラウザでは<p>~</p>の前後に1行分改行されますが、単に改行することが目的の場合には、<p>タグではなく<br />タグを使用してください。

次週以降、このルールを使ってこのようなレイアウト(▶️)ができるようにしていきますので、CSSの意味、書き方、そしてdivやspanというタグについて、しっかり復習しておいてください。


ウェブマガジンの企画をたてる

どんな順番でつくっていけばいいのか

ウェブサイト プロジェクトワークフロー[画像]
(via Webデザイン エンジニアリング - 第65回 [図解]Webサイト構築プロジェクト・ワークフロー:ITpro)
ひとつのウェブサイトをチームで作り上げるときにどのような順序でどのようなプロフェッショナルがかかわっていくのかが分かりやすく図示されているので紹介します。拡大して目を通してください。


誰のため?何のため?Webサイトを作り始める前に。
ウェブデザイナーがまとめた、ウェブサイトを作るときに考えたり調査が必要なことが書かれたブログ記事です。
順を追ってみて行くと勉強になると思います。

 

0 企画を考える

何故つくるのか 自分が作らなければならない理由はどこにあるか
誰が見る/どう感じる/どのような関係を築きたい
そうするためにどんな内容をどのように見せるか

こんな感じにしたいという類似例をいろいろ集めて分析してみる(オンラインのソーシャルブックマークを活用すると良い)

 企画書を書く  
  ターゲット
  コンテンツ/掲載するもの
  構造/リンクなどの方法や見せ方
  視覚的要素/全体的なグラフィックの方向性をスケッチ

1 手書きのワイヤーフレームを書く

ワイヤーフレームとは、内容をどのように配置すれば見ている人に伝わりやすいかを考えて作った画面構成図です。

どんなものか  ⇨例1   ⇨例2

コツ
・大きさ、場所、順番などをしっかり決める
・色味(テーマカラー)なども検討する
・いくつかページレイアウトのバリエーションがある場合は、全ページの形ぶんつくる

 

[point]配置とサイズをしっかり決める
- 画面サイズについて
現状、横幅950px〜1024pxを使う事が多い。[資料1]いろんな画面サイズ
[資料2]Retima ディスプレイについて
スマートフォンやタブレット端末が普及するにつれて、Webデザイナーは様々な画面サイズや縦横比を考慮したユーザーインターフェースを設計する必要に迫られている。 画面サイズ・縦横比に対応して柔軟に表示を調整する「レスポンシブWebデザイン」も考えて行く必要がある。

- グリッドデザインをしよう [資料]
見えない補助線を使って整列させて行く

[todo] スケッチ用のノートをつくろう
これからつくるウェブサイトについての資料やスケッチをまとめるためのノートもしくはクリアファイル一冊を準備しましょう。
参考にしたいウェブサイトがあればプリントアウトして貼ったり、なにかアイデアを思いついたら書き込んだりします。
また、何か図形を書き込むときにはなるべく定規を使って書きましょう。




2 IllustratorやPhotoshop、もしくはFireworksで内容をデザインして行く

ウェブ画像作成専門アプリケーション、Adobe Fireworksについて
[リンク]Web素材、モバイルアプリデザイン、プロトタイピング | Adobe Fireworks CS6

Fireworksの使い方、チュートリアル、デザインアイディアを紹介するサイト
Fireworksマニア http://fw.v-colors.com/

IllustratorでWebデザインをするためのポイント まとめ
・ポイント [資料]
・気をつけておきたい設定あれこれ [資料]

ウェブ用画像のPOINT
・色はRGB
・単位はピクセル
・画像形式 GIF・JPEG・PNG [資料]



4 HTMLを使ってレイアウトコーディングしていく

いままで学んできたHTML+CSS そして、これから学ぶCSS応用を使ってレイアウトしていきます。

HTMLを使って、計画していた地図とおりに、集めた要素を配置していく。
この段階でデザインを大幅に変更しないことが重要です。

ブラウザでオフラインのチェック
作成したHTMLファイルをWEBブラウザのアイコンにドラッグ&ドロップする/
もし見られなかったら、もう一度テキストを見直して、打ち間違えた所がないか確認する。
特に、イメージのリンクはずれや、リンク先の指定に注意する。


5 アップロードする

CyberDuckを使い、必要なデータをアップロードして公開します。

ウェブには更新性という特徴があります。
つくったらそのまま手をつけない、のではなく、新しい情報があれば追加したり、古い情報を消したり、まちがった情報を訂正したりすることが大事です。
継続して閲覧してほしいサイトを考える場合、たまに大幅なデザイン変更なども必要でしょう。

企画書作成/ヒアリング

どんなウェブマガジンを作るのか フォーマットを参考に書いてみよう


まずは基本的なことを決めましょう

ターゲット
コンテンツ/掲載するもの
構造/リンクなどの方法や見せ方
視覚的要素/全体的なグラフィックの方向性をスケッチ

 

[ TODO ] [ 宿題 ] タイトルロゴを作ってこよう

ウェブマガジンの題名を決め、タイトルロゴ案を作ってきてください。

来週の内容

引き続き要素と属性の紹介
来週からはいよいよマガジン実製作編に入ります!
HTMLの辞書/参考書を手に入れておきましょう。
わからない事は早めに質問して下さい。