fc2ブログ

職業訓練WEBクリエーター科41日目

  1. トップ
  2. WEB制作の勉強
  3. 職業訓練WEBクリエーター科41日目

職業訓練WEBクリエーター科41日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書

ゼロからはじめるJavaScript ホームページ辞典 WEBクリエータのためのベーシックデザイン

授業の内容

FTPの役割

WEBページを自分のパソコンで作成して、そのWEBページをサーバーに転送する。

この転送するために使用するプロトコルがFTPである。

自分PC

どのフォルダのどのファイルを送るのがを把握

サーバー

どのフォルダ(ディレクトリ)に転送(アップロード)するのか?

サーバーに転送するためには

ユーザー名・パスワードが必要

ログインしたら、自分専用のディレクトリ(フォルダ)が使用可能になる。

それ以外のサーバーフォルダーは使用ができない。

画面上で表示されるディレクトリ(フォルダ)は/と表示されるが、実際はログインした個別のディレクトリである。

URLについて

http://www.jc-21.co.jp/web/pk19007

http://・・・定型分HTTPプロトコルの指定

www.jc-21.co.jp・・・はコンピューター名(サーバー名)

/web/pk19007・・・以下コンピュータのディレクトリ(フォルダ)名

サーバーにアクセス(FTPを使う)場合・・・ftp.jc-21.co.jp

このコンピューター名は同一のコンピュータ

FTPのアカウントでアクセスした場合

/で表示されるが、WEBで閲覧する場合は/web/pk19007で表示される。

URLが/で終了した場合index.htmlが自動的に付け加えられる。

CGIファイルを使用するにあたって

CGIファイルをアップロードするだけだと、CGIが実行(起動)できないので、

ファイルの属性を変更しなければならない。

ファイル属性には

呼び出し・・・ページを読み取る(WEBページブラウザで表示)させることができる。

書き込み・・・ページに直接書き込むことができるように許可を与える。

実行・・・プログラムを実行する許可を与える。

の属性がある。

最初は実行を許可しない設定になっているので、これをCGIファイルの場合実行を許可するように変更する。

今後の日程

文書 Power Point 7月26日(木)~27(金)

担当先生・・・小山先生

総合演習(個人) 7月30日(月)~8月7日(火)

制作のロールプレイング

要求使用にしたがってWEBページを作成する。

競合プレゼンテーションをする。

担当先生・・・島崎先生 何日か山田先生

要求使用は何か?を必ず島崎先生に確認する。

発表会 8月7日(火)

実際に企業の方が来ていただける可能性もある。

制作実践(グループ) 8月8日(水)~8月29日(水)

グループ演習

結構大変!!

グループ分け・・・今回まったくのランダム

4名グループ6チーム

追加注文の可能性もある。

チームメイト発表

発表会 8月29日(水)

実際に企業の方が来ていただける可能性もある。

オリエンテーション ビジネスマナー 8月30日(木)

WEBクリエーターのためのベーシックデザイン

第6章 ユーザビリティ(使いやすさ)

P93~P103

ユーザビリティとは?

認知性

それが何であるか瞬時にわかる。

操作性

それを簡単に操作することができる。

快適性

それを使うことで楽しさや満足感が伴う。

リンク

テキストリンクは初心者でも認識しやすい

画像リンクはボタン状の加工をするとリンクしやすい。

ピクトグラム/アイコン

道路の標識のように、直感的にイメージしやすい画像をアクセントとして入れてあげると、認識しやすい。

注意

オリジナルのイメージはユーザーによって解釈が異なる。

アイコンのポイント

誰が見てもわかること

繰り返し利用すること

ロールオーバー

使いやすさとゆう意味では積極的に使う

ロールオーバーは、画像データが2倍になるので、データ量を大きくしないように注意する。

注意

マウスオーバー状態で文字が現れるよなロールオーバーは避けること

CSSによるロールオーバーも可能

画像をロールオーバーをさせたい場合、透過GIFを使用して、a hoverに背景色を設定すると画像の色が変更されるような効果が得られる。

ナビゲーション

WEBサイトの各サイトにどのような手法でたどりつけるのか

ナビゲーションの種類

左メニュー型

ヘッダー・フッダー型

複合型

まとめ

一般的に作る。

アフォーダンス・・・P98

見ただけで直感的にすぐわかるサイトを目指す。

ユーザビリティの10原則

サイトの目的を明確にする

1・ワンセンテンスのタグラインを入れる。

2・ウィンドウタイトルを付ける

3・企業情報は1つエリアにまとめる。

ユーザーが求めるものを見つけやすくする

4・サイトの主要なタスクを強調する。

※トップページのリンクは4つに絞り込む

5・検索入力ボックスを付けておく。

※25文字分のテキストボックスは確保する。

サイトのコンテンツを紹介する。

6・実際のコンテンツの例を提示する。

リンクをクリックするとどのような内容が提示されるか明確にする。

7・リンク名は最も重要なキーワードから始める。

8・最新フィーチャー(情報)にアクセスしやすくしておく

※できるだけ短い更新リストにする。

ビジュアルデザインはインタラクションを強化するもので、定義するものではない

9・重要なコンテンツをフォーマットしすぎない

あまり飾り過ぎない

10・意味のあるグラフィックを使う

余計なグラフィックを使わない

弟7章 WEBページのタブー(禁じ手)

テキストのタブー

文字化け

機種依存文字は使用しない

文字コードの指定

文字のコードを必ず記述する。

CSSによる文字と行間の指定

一行をやたらと長くしない

20文字~25文字

行間を空ける

だいたい150%~120%で指定する。

文字サイズ指定

相対単位を使用する。

ページタイトル

必ず付ける。

ページの見出しタイトルになる。

HTML文書中の改行

HTMLで改行されると、ブラウザによって半角スペースが入ってしまう。

イメージのタブー

イメージサイズの指定

イメージのサイズと同じように指定する。

大きいものを小さくしたり

小さいものを大きいものに変更するのはタブー

<img>タグの中でwidth・heightを指定すると早くなる。

ALT属性を必ず設定してあげる。

画像が表示できなかった場合に画像の中身がわかるように付ける。

音声読み上げソフトを使った場合も画像のALT属性を読み上げる。

テーブルのタブー

不要なテーブルは使わない

テーブルを使うと表示が遅くなる。

テーブルの単純化

罫線が入り組んでいないようにする。

テーブルのテクニック

伸縮する角丸の枠

丸まっている画像を4つの角に作成して、

伸縮する縦・横の画像を1pxの画像として作成する。

空白のセル

ブラウザによっては、空白のセルが歯抜け状態で表示されることがあるので、必ず&nbspを空白セルに挿入する。

リンクのタブー

リンク切れ

サイト内リンクのリンク切れは、WEBページ制作者として評価が下がるので、注意すること。

注意ポイント

1・ファイル名は小文字で統一する。

2・拡張子を統一する。

三文字拡張子を使うのか4文字拡張子を使うのか決める。

3・ファイル名を付ける際にスペルミスや省略をしない。

多少長くなってもフルネームで記述する。

4・WEBページ作成ソフトを使用する。

自動チェック機能を有効に使う

行き止まりページは作らない

初心者が戻り方を知らない場合戻れない。

リンクを新しいウィンドウで開く

スクロールバーは必ず表示させてあげる。

あまり新しいウィンドウで表示させるのは避ける。

フレームの利用

フレームは古い技術なので、使わない。

トップページへアクセスするためのリンクを作る。

 

 

スポンサーサイト



このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

06 | 2007/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ