第7章 Webサイトの公開
Download
Report
Transcript 第7章 Webサイトの公開
第７章 Webサイトの公開
7.1 ファイルのアップロード
7.2 検索されやすいWebサイト
7.3 Webサイトの運営
7.4 アクセスビリティ
7.1 ファイルのアップロード
7.1.1 FTPとFTPソフト
7.1.2 FFFTPの操作例
7.1.1 FTPとFTPソフト
（１） FTPの仕組み
■FTP（File Transfer Protocol）
ファイル転送のための約束事
最初，FTP制御コマンドやファイルアクセスコマンド，
ファイル転送コマンド等の交換を行い，ファイル転送
コマンドによりデータ転送が行われる。
（２） FTPソフト
■コマンドを知らなくてもサーバとファイルの
データを交換できるソフト
ホスト名
端末側
FTP
ソフト
ログイン名
パスワード
ファイルデータ
の送受信
FTP
サーバ
（３） FTPソフトの例
フリーソフトで用意されている
■FFFTP （Windows用）
http://www2.biglobe.ne.jp/~sota
■Cyberduck （Mac OS X用）
http://cyberduck.ch/
7.1.2 FFFTPの操作例
（１/３）
①起動
② 新規ホストを選択して
ホストを登録する。
FFFTPの操作例（２/３）
③ホストの登録
④ ホスト一覧から選択して
「接続（S）」ボタンをクリック
FFFTPの操作例（３/３）
⑤ ドラッギングしてファイルを移動または，
メニューから「コマンド」「ミラーリングアップロード」を選択する・
7.2 検索されやすいWebサイト
7.2.1 検索エンジンの種類
7.2.2 キーワードの記述
7.2.3 ページ説明文
7.2.4 ロボット検索用メタ情報
7.2.1 検索エンジンの種類
■ディレクトリ検索（例：Yahoo! Japan）
検索エンジン運営団体所属のサーファーま
たは編集者が採用基準によって手作業で
分類・登録を行う。
■ロボット検索（例：Google, Yahoo! Japan）
検索ロボットプログラムがインターネットを
巡回してWebページを収集。
7.2.2 キーワードの記述
<head>
<meta http-equiv=“Content-Type” content=“text/html;
charset=Shift_JIS">
<title>パーソナル</title>
<meta name=“keywords” content=“Excel,VBA,力学,シミュレーション,
アニメ,ゲーム,運動力学,物理,基礎,入門,質点,流体力学,
分子動力学,力,動画,ブラウン運動,波動,多重,振り子,二重,
バネ,テクニック">
</head>
7.2.3 ページ説明文
<head>
<meta http-equiv=“Content-Type” content=“text/html;
charset=Shift_JIS">
<title>パーソナル</title>
<meta name=“keywords” content=“Excel,VBA,力学,シミュレーション,
アニメ,ゲーム,運動力学,物理,基礎,入門,質点,流体力学,
分子動力学,力,動画,ブラウン運動,波動,多重,振り子,二重,
バネ,テクニック“>
<meta name=“description”
content=“ExcelとVBAで運動力学のシミュレーションをやろう">
</head>
7.2.4 ロボット検索用メタ情報
<head>
<meta http-equiv=“Content-Type” content=“text/html;
charset=Shift_JIS">
<title>パーソナル</title>
<meta name=“keywords” content=“Excel,VBA,力学,シミュレーション,
アニメ,ゲーム,運動力学,物理,基礎,入門,質点,流体力学,
分子動力学,力,動画,ブラウン運動,波動,多重,振り子,二重,
バネ,テクニック“>
<meta name=“description”
content=“ExcelとVBAで運動力学のシミュレーションをやろう">
<meta name="robots" content="index,follow">
</head>
7.3 Webサイトの運営
7.3.1 Webサイト運営の留意点
7.3.2 リンク集
7.3.3 検索エンジンへの登録
7.3.1 Webサイト運営上の留意点
(1) ユーザの意見を聞く（友人等にURLを教えて実
際に使ってもらうなど）
(2) 自分にとって更新しやすいコンテンツを選ぶ。
(3) メールアドレス，本名，性別など，個人情報の
取り扱いに注意する。自分の情報についても
オープンな開示は控える。
(4) 内容の責任は管理者である自分にあることを
自覚する。
7.3.2 リンク集
(1) 自分のサイトとの関連性でリンクを選定する。
(2) リンクをテーマ別に分類する。
(3) リンクが多すぎるのは逆効果。自信をもって推
薦できるリンクを選ぶ。
(4) リンク集に加える際は，そのサイトの管理人に
お願いメール等を入れる。リンクフリーの場合も
一言挨拶するのがマナー。
(5) リンク切れとなるのも多いことに注意。リンク先
をチェックしよう。
7.3.3 検索エンジンへの登録
(1) カテゴリに登録する際，審査が必要な場合があ
る。
(2) 審査料が高価な場合があり，審査料を払っても
希望するカテゴリに登録されるとは限らない。
(3) 登録料が無料から高額なサイトまで色々ある。
(4) 登録代行を引き受けている会社もある（通常，
有料だが，低額のところもある）。
7.4 アクセスビリティ
7.4.1 Webアクセスビリティ
7.4.2 アクセスビリティのチェック
7.4.3 アクセスビリティをチェックするソフト
7.4.1 アクセスビリティ
(accessibility：受け入れられやすさ)
高齢者や障害者にとってどの程度利用しやすいか
【JISにおけるWebアクセシビリティの基本的要件】
（W3CのWCAG 1.0にほぼ対応）
①視覚が不自由でも操作・利用できる。
②聴覚が不自由でも操作・利用できる。
③多様な身体部位を使って操作・利用できる。
（特定の身体部位だけを想定した入力方法に限定しない）
④身体の安全を害することなく操作・利用できる。
7.4.2 アクセスビリティのチェック
（その１／３）
①ページタイトル
<title>タグを使って，ページ内容を明確に表すタイ
トルをつけているか？
②フォントサイズ
フォントサイズは小さすぎないか？
適度に行間を空けているか？
③リンク
リンク色と訪問済みリンク色を一緒にしていない
か？
アンダーラインは付いているか？
アクセスビリティのチェック
（その２／３）
④画像
画像にalt属性が付いているか？
情報として意味のない画像のaｌｔの属性値は空に
なっているか？
⑤マルチメディア
重要なオーディオ／ビデオ根タンツにキャプション
や内容，音声による説明が用意されているか？や
内容，音声による説明が用意されているか？
⑥プラグイン
実行するのにプラグインやアプリケーションを用意
する必要がある場合，代わりのコンテンツが用意さ
れているか。
アクセスビリティのチェック
（その３／３）
⑦表
表の見出しにth要素を使っている？
⑧スタイルシート
スタイルシートがなくても読めるようになっている
か？
⑨JavaScript
JavaScriptがなくても読めるようになっているか？
⑩色・コントラスト
色なしでも問題なく伝えられるようになっている
か？
（以下は条件付）
7.4.3 アクセスビリティを
チェックするソフト
Web Accessibility Toolbar
http://www.infoaxia.com/tools/wat/
Web Inspector
http://jp.fujitsu.com/about/design/ud/assistance/
webinspector/
（Ｗｅｂデザイナーの現実）
①誰でもWebサイトが作れると思われているのでデ
ザインが正当に評価されない。
②誰でも作れると思われているのでクライアントが予
算をつけない。
③ぎりぎりの予算で製作しなければならないので，現
場教育を行うことができない。
④上記のような現状だから，本当の意味での経験豊
富なディレクタが増えない。
⑤Ｗｅｂ製作は専門学校でも教えているので，セミプ
ロ的な人材が増え，誰でも作れると思われている。
書籍や広告等の紙の上でのデザイナーと
同程度の評価が欲しい!!