•
「HTML
ファイル内」<p class="id">
・・・
</p>
CSSファイルの作成方法（２）
•
ホームページ改良版http://www.is.kyusan-u.ac.jp/~toshi/
lectures/il/2009/webpages/
•
さらに改変しを・・・
参考例（CSSファイルの使用）
• 漢字を表現する文字コードには大きく4種類
– JIS (ISO-2022-JP) – Shift JIS
– EUC (日本語EUC, EUC-JP) – Unicode (UTF-8)
• 詳細については、以下のページを参照
– Cyber Librarian 日本の文字コード
– 文字コードの話
文字コードについて
(HTML作成について補足）
文字化け
•
情報通信では、送信者が使う文字コードと受信 者が使う文字コードが一致することが必要•
一致しない場合、いわゆる「文字化け」が発生– 携帯会社が違う場合の絵文字化けも原因は同じ
• Web
でも、サーバから送られてくるデータの文字 コードが分からないと文字化けの原因HTMLでの対策
• JIS でファイルを作っておくと文字化け“しにくい”
– TeraPad で「文字/改行コード指定保存」で 「JIS」を指定
– Webサーバ管理者に最終確認を取るとよい
• head 要素中で、ファイルの文字コードを指定する方法も
<meta http-equiv=“Content-Type”
content="text/html; charset=ISO-2022-JP">
– 上の例は JIS の場合
– Shift JIS の場合、ISO-2022-JP ではなく Shift_JIS と記述 – EUC-JP の場合は EUC-JP と記述
Web Accessibility（a11y）
• a11y = accessibility : アクセシビリティ
• できるだけ多くの人に情報を提供するには？
– 視聴覚障害者もアクセスしてくるかも
– 画像表示できないブラウザを利用しているかも
• 障害者がWebを知覚、理解、ナビゲーション、インター ラクション可能
– 視覚障害、聴覚障害、肢体不自由、発話障害、認知 障害、脳機能障害
– 高齢者，一時的な障害、状況による障害
• ユーザビリティも向上
Web a11y の例
•
代替テキスト– イメージの代わりに表示されるテキスト
• ブラウザによる見栄えの違いの例での九産大ロゴ
•
オーディオキャプション•
デバイス非依存（キーボードだけでも操作可能）•
明確で一貫したデザインとナビゲーションWeb a11y は機会均等に不可欠
• Web
があらゆる場面（含 公的サービス）で利用 されている• Web
なら障害者もアクセスしやすいようにできる•
企業の社会的責任(CSR)
である• a11y
に対応したWeb
にすることで人々の暮らし が改善し、全体として社会に利益をもたらす•
高齢者（日本！）•
読み書きが不得手な人、その言語に堪能でない 人•
ネットワークが遅い人• Web
の初心者– 明確で一貫したデザイン、ナビゲーション、リンク
– サーバーサイド・イメージマップにテキストリンク追加 – 新しくブラウザを開く際の事前情報
障害者以外への利点
•
ウェブアクセシビリティチェックサイトHAREL
（
NTT
データ）– Webページのソースコードをチェックし、アクセシビリ
ティへの適合度を点数で表示
•
みんなのウェブ 情報バリアフリーのための情報 提供サイト （情報通信研究機構）参考サイト（Web ally）
•
必修科目「情報リテラシー」にて実施•
警察庁および都道府県警察のサイバー犯罪対 策部門のコンテンツの活用（協力依頼）•
利用コンテンツ– 県警講演（サイバー犯罪対策部門へ依頼）
– 警察庁監修 情報セキュリティ対策ビデオ
– ポリスチャンネル・ビデオライブラリ
ネットセキュリティ／モラルの教育
（１）
• ココロノスキマ
• アクセスの代償 ～あなたの知らないネット事情～
• 嘘～出会い系サイトによる犯罪被害に遭わないために～
• 仕掛けられた罠
– ネットオークション・ネットバンキングの危険性
• サイバー犯罪事件簿３ ～NET SPY ネット スパイ～
– 企業の情報セキュリティ
• サイバー犯罪事件簿２ ～危険なアクセス～
– ワンクリック詐欺・出会い系サイト 等
警察庁監修 情報セキュリティ対策ビデオ
参考：動的なWebページ
•
アクセスごとに変化のあるページ•
サーバ側でコンテンツを作り替えるページ– CGI: Common Gateway Interface – Java Servlet
– PHP
•
クライアント側でプログラムが動くページ– Java Applet – JavaScript
その他 参考webページ
• W3C
–
– 今回講義で紹介した HTML は、説明のため簡略 化
– W3C のページは正確な HTML を使用
• Getting started with HTML
–
•
同上日本語版（非公式）–
•
静止画像•
動画像•
音声・音楽マルチメディアコンテンツ
• GIF: Graphic Interchange Format
– アイコンのように色数が少ない画像向き
• JPEG: Joint Photographic Experts Group
– 写真やCGのように色数が多い画像向き
• BMP: BitMaP
– Windows標準の画像形式
– ファイルサイズが無駄に大きい
• PNG: Portable Network Graphics
– GIFにおける特許問題を解決するために開発
– W3C推奨
静止画像
開発元 名称 代表的な拡張子 Microsoft Video for Windows .avi
Windows Media .wmv, .asf, .asx Real Media Real Media .rm, .ram
Apple Quick Time .mov
Adobe Flash .swf
Flash Video .flv
動画像
• MPEG (.mpg)
– Moving Picture Experts Group が開発、業界標準
•
様々な会社により開発された独自規格音声・音楽
• MIDI (.midi, .midi)
– 音符データなのでサイズが小さい
• MP3: MPEG Layer-3 の略 (.mp3)
– 波形データだが非常にファイルサイズが小さい
• 様々な会社により開発された独自規格
開発元 名称 代表的な拡張子
Microsoft Wave .wav
Windows Media .asx, .asf, .wma Real Media Real Audio .ra, .ram, .rm
Apple AIFF .aiff, .aif
アップロード＆公開
作成した
Web
ページをWeb
サーバへ転送Webページの公開までの手順
1. Web
ページをデザイン2. Web
ページを構成するHTML
ファイルや画 像ファイル等を作成3. Web
ブラウザで表示・確認4.
問題があれば２へ戻る5.
公開用Web
サーバへ転送（アップロード）6.
サーバ上のWeb
ページを表示・確認7.
問題があれば２または５へ戻るWWWの仕組み
例）
学生用FTPサーバ : ftp-st.is.kyusan-u.ac.jp
学生用Webサーバ: www-st.is.kyusan-u.ac.jp
Webサーバ FTPサーバ
データ
クライアント コンテンツ作成PC
HTTPアクセス アクセス
本講習でのページの公開
• Z:¥WWW-KSUに公開したいHTMLファイルを保存
• http://www.kyusan-u.ac.jp/~ユーザ名/ファイル名 でア クセス可能
– ～ （破線符号）は、直接入力（半角英数字入力）で shift ＋ ^
– ～の代わりに 、%7E の3文字でも可
参考：FTPによるファイルのアップロード
•
基本的にWeb
サーバはファイルのアップロード 機能を持たない•
そこでFTP
サーバを併用•
ファイルをFTP
サーバに転送（アップロード）• FTP
サーバに転送したデータにはWeb
サーバを 通じてアクセスできる参考：FTPによるファイルのアップロード方法
•
ファイルをWeb
サーバーに送る– FFFTP（[すべてのプログラム]ー[リモートアクセス]）
1.
学内個人用Web
ページサーバに接続2.
転送するファイル(index.htm
、画像ファイル)
を 選択しアップロード（転送）参考： Web ページのアップロード＆公開
「作業内容」
1.
パスワードの変更（適宜）2.
公開用ディレクトリ（フォルダ）public_html
の 作成 最初の１度だけやれば良い
3. PC
で作成したHTML
ファイルをFTP
サーバに 転送4.
アップロードしたWeb
ページへアクセス5. HTML
ファイルの修正6. 3.
へ戻る（修正するたび転送する）•
条件 ：Web
サーバとしてApache
を使用•
制限方法（≠
ウェブブラウザでのフィルタ制限）1.
ドメイン（IP
アドレス）による制限– .htaccess ファイルのみ使用
2.
パスワードによる制限（Basic
認証）– .htaccess ファイル、.htpasswd ファイルを使用
• 1.
および2.
の制限を一緒に適用可– .htaccess ファイル、.htpasswd ファイルを使用
アクセス制限の設定方法（１）
•
条件 ：Web
サーバとしてApache
を使用•
作成した.htaccess
、.htpasswd
を、制限をかけ たいファイルと同じ場所（ディレクトリ）に保存– .htaccess 、.htpasswd の保存場所に存在するディ レクトリ（子ディレクトリ）も適用