Webページの 作 成 Webページの 公 開 平 成 22 年 度 第 9 回 高 等 学 校 教 師 を 対 象 とした 情 報 教 育 講 習 会 ~ 情 報 教 育 コース ~ 情 報 科 学 部 仲 隆 naka@is.kyusan-u.ac.jp http://www.is.kyusan-u.ac.jp/~naka/
2 講 習 会 の 目 的 情 報 教 育 コース 高 等 学 校 の 情 報 教 育 担 当 教 師 を 対 象 に 情 報 教 育 の 方 法 について 講 習 し 高 等 学 校 における 情 報 教 育 の 質 的 向 上 を 図 る ネットワーク サーバ 管 理 コース 高 等 学 校 における 日 常 的 な 業 務 及 び 教 育 に 情 報 技 術 を 活 用 したい 教 師 を 対 象 に 実 務 的 な 内 容 の 講 習 会 を 通 して 教 育 の 情 報 化 に 貢 献 を 図 る
3 本 講 習 の 内 容 について 九 州 産 業 大 学 情 報 科 学 部 1 年 次 生 配 当 科 目 情 報 リテラシー ( 講 義 )および 情 報 リテラシー 演 習 にて 使 用 した 教 材 の 内 容 を 本 講 習 向 けに 再 構 成 + 加 筆 修 正 ベースとなったオリジナル 教 材 2009 / 2010 年 度 情 報 リテラシー 2コマ 分 2009 / 2010 年 度 情 報 リテラシー 演 習 2コマ 分
情 報 リテラシー シラバス(1) 4
情 報 リテラシー シラバス(2) 5
情 報 リテラシー 演 習 シラバス(1) 6
情 報 リテラシー 演 習 シラバス(2) 7
Webページの 作 成 WWWとHTML Webページの 作 り 方 Web アクセシビリティ
9 WWW(World Wide Web) いろいろな 情 報 資 源 を 統 合 的 に 扱 う 情 報 資 源 のネットワーク (on Internet) 様 々な 技 術 の 集 合 HTML (HyperText Markup Language) URI (Universal Resource Identifier) URL(Universal Resource Locator)はURIの 一 部 ページの アドレス HTTP (HyperText Transfer Protocol)
HTML (Hyper Text Markup Language) 10 Webページ 記 述 用 に 開 発 された ハイパーテキ スト 記 述 用 言 語 http://www.w3.org/markup/ SGML(Standard Generalized Markup Language)のサブセット
11 SGML HTML SGML 文 章 にマーク 付 けするための 言 語 HTML SGML を 元 にWebページを 記 述 するために 開 発 HTMLは 便 利 他 の 目 的 にも 使 いたい! しかしWebページ 記 述 に 特 化 されている!! SGMLは 複 雑 すぎる!!
12 XML XHTML XML (extensible Markup Language) SGMLを 元 にした 汎 用 のデータ 記 述 言 語 現 在 さまざまなところで 使 われている XHTML HTMLはXMLではないので 不 便 XMLの 一 部 としてHTMLを 再 設 計 今 後 は 主 流 になると 思 われる
13 SGML XHTML SGML: 元 々の 元 祖 ( 複 雑 汎 用 性 あり) HTML: Webページ 記 述 用 ( 単 純 汎 用 性 無 し) XML: 汎 用 データ 記 述 用 ( 単 純 汎 用 性 あり) XHTML: Webページ 記 述 用 (XML 用 システムを 利 用 可 能 ) HTML SGML XML XHTML
14 HTML の 今 後 HTMLは1999 年 公 開 の 4.01 が 最 新 XHTML に 切 り 替 わることが 期 待 されていた XHTML の 普 及 は 必 ずしも 進 んでいない 新 しいHTML 仕 様 の 策 定 がスタート HTML5 2008 年 1 月 に 最 初 の 草 稿 が 公 開 2010 年 9 月 に 正 式 勧 告 予 定
15 HTML5 参 考 サイト HTML5.JP - 次 世 代 HTML 標 準 HTML5 情 報 サ イト http://www.html5.jp/ HTML5とは? 変 わるWebと 注 目 の 新 要 素 HTML5.0の 情 報 サイト http://www.html5-guide.com/
Webページの 例 16
17 このWebページの 実 体 <html> <head> <title>webページサンプル</title> </head> <body> <h1>world Wide Web</h1> <p>world Wide Web は WWW や Web とも 呼 ばれる インターネットの 爆 発 的 普 及 の 原 動 力 と なったアプリケーションである これは 以 下 の3つの 要 素 技 術 から 構 成 される </p> <ul> <li>html: HyperText Markup Language</li> <li>uri: Universal Resource Identifier</li> <li>http: HpyerText Transfer Protocol</li> </ul> <p> 情 報 リテラシーでは これらのうち<strong>HTML</strong>について 詳 しく 解 説 する なお <a href="http://www.w3.org/markup">html の 正 式 な 仕 様 </a>も 参 考 になる </p> <p><img src="http://www.w3.org/icons/valid-html401" alt="valid HTML 4.01 Strict" height="31" width="88"></p> </body> </html>
18 HTMLの 書 き 方 文 書 の 構 造 の 例 タイトル 作 者 段 落 列 挙 ( 箇 条 書 き) 引 用 文 書 の 構 造 ( 構 成 要 素 ) を HTMLの 要 素 として マークアップ( 印 付 け) していく ブラウザが その 構 造 を 見 やすく 表 示
19 HTML 文 書 の 構 成 要 素 の 例 タイトル 見 出 し 段 落 画 像 リンク 箇 条 書 き 強 調
20 文 書 の 構 成 要 素 とHTML 要 素 との 対 応 例 文 書 の 構 成 要 素 タイトル 見 出 し 段 落 箇 条 書 き 強 調 引 用 画 像 リンク HTMLの 要 素 title h1 h2 h3 h4 h5 h6 p ul em strong blockquote img a
21 HTMLの 要 素 要 素 は 開 始 タグ 内 容 終 了 タグ で 構 成 < 要 素 > が 開 始 タグ </ 要 素 > が 終 了 タグ <title>, </title>, <p>, <ul> など 終 了 タグを 省 略 できるものもある p 要 素 li 要 素 など XHTMLや 新 HTML では 終 了 タグは 省 略 不 可 能 終 了 タグがないもの( 空 要 素 )もある img 要 素 hr 要 素 など タグは 半 角 文 字 XHTMLや 新 HTML では 空 要 素 は <img /> のように 開 始 タグを /> で 終 わらせる
22 HTML 文 書 の 基 本 構 成 HTML 文 書 はヘッダと 本 体 で 構 成 ヘッダはhead 要 素 に 書 く 本 体 はbody 要 素 に 書 く 全 体 がhtml 要 素 ヘッダに 文 書 の 説 明 を 記 述 タイトルはヘッダの 中 本 体 は 文 書 本 文 を 記 述 <html> <head> </head> <body> </body> </html> ここがヘッダ (head 要 素 ) ここが 全 体 (html 要 素 ) ここが 本 体 (body 要 素 )
23 このWebページの 実 体 ( 再 掲 ) <html> <head> <title>webページサンプル</title> </head> <body> <h1>world Wide Web</h1> <p>world Wide Web は WWW や Web とも 呼 ばれる インターネットの 爆 発 的 普 及 の 原 動 力 と なったアプリケーションである これは 以 下 の3つの 要 素 技 術 から 構 成 される </p> <ul> <li>html: HyperText Markup Language</li> <li>uri: Universal Resource Identifier</li> <li>http: HpyerText Transfer Protocol</li> </ul> <p> 情 報 リテラシーでは これらのうち<strong>HTML</strong>について 詳 しく 解 説 する なお <a href="http://www.w3.org/markup">html の 正 式 な 仕 様 </a>も 参 考 になる </p> <p><img src="http://www.w3.org/icons/valid-html401" alt="valid HTML 4.01 Strict" height="31" width="88"></p> </body> </html>
24 HTML 要 素 の 構 成 の 注 意 点 開 始 タグと 終 了 タグの 関 係 は 数 学 の 開 きカッコと 閉 じカッコと 同 じ 良 い 例 : <p> 一 部 <em> 強 調 </em>する</p> 悪 い 例 : <p> 一 部 <em> 強 調 </p>したつもり</em> タグは 半 角 文 字 で 記 述 タグは 大 文 字 小 文 字 ともに 可 XHTMLや 新 HTMLでは 小 文 字 のみ
25 文 書 をマークアップする 見 出 し 部 分 を h1 要 素 で マークアップ 見 出 しのレベルで h2, h3, 開 始 部 分 に 開 始 タグ <h1>を 追 加 終 了 部 分 に 終 了 タグ </h1>を 追 加 (1) 見 出 し <h1> World Wide Web </h1>
26 文 書 をマークアップする 段 落 部 分 ( 一 つの 段 落 )を p 要 素 (Paragraph)でマークアップ 開 始 部 分 に 開 始 タグ<p>を 追 加 終 了 部 分 に 終 了 タグ</p>を 追 加 HTML 中 の 改 行 位 置 は 気 にしな くて 良 い (2) 段 落 <p> World Wide Web は WWW や Web とも 呼 ばれる インターネッ トの 爆 発 的 普 及 の 原 動 力 となったアプリケーションである これは 以 下 の3つの 要 素 技 術 から 構 成 される </p>
27 文 書 をマークアップする 箇 条 書 き 部 分 全 体 を ul 要 素 (Unordered List) でマークアップ 各 箇 条 書 き 項 目 を li 要 素 (List Item)でマーク アップ (3) 箇 条 書 き <ul> <li> <li> <li> </ul> HTML: HyperText Markup Language URI: Universal Resource Identifier HTTP: HpyerText Transfer Protocol </li> </li> </li>
28 文 書 をマークアップする 強 調 部 分 を strong 要 素 でマークアップ (4) 強 調 <p> 情 報 リテラシーでは これらのうちHTMLについて リテラシーでは これらのうち<strong>HTML</strong>に 詳 しく 解 説 する なお HTMLの 正 式 な 仕 様 も 参 考 になる ついて 詳 しく 解 説 する なおHTMLの 正 式 な 仕 様 も 参 考 になる </p> </p>
29 文 書 をマークアップする (5)リンク <p> 情 報 リテラシーでは これらのうち<strong>HTML<strong>について 詳 し く 解 説 する なおHTMLの する なお<a>HTMLの 正 式 正 な 式 仕 な 様 仕 も 様 参 </a>も 考 になる 参 考 になる </p> <a href= http://www.w3c.org/markup >HTMLの 正 式 な 仕 様 </a>も 参 考 になる </p> リンク 部 分 を a 要 素 で マークアップ(Anchor) リンク 先 を href 属 性 で 指 定 する (Hyper REFerence)
30 文 書 をマークアップする の 正 式 な 仕 様 </a>も 参 考 になる</p> 画 像 を 入 れる 部 分 に img 要 素 をマーク (IMaGe) 画 像 のURIを src 属 性 で 指 定 (SouRCe) 代 替 テキストや 画 像 サイズ も 属 性 で 指 定 画 像 を 段 落 にする (6) 画 像 の 正 式 な 仕 様 </a>も 参 考 になる</p> <p> <img src= http://www.w3.org/icons/valid-html401 alt= Valid HTML 4.01 Strict height= 31 width= 88 > </p> <img> src= http://www.w3.org/icons/valid-html401 > src=http://www.w3.org/icons/valid-html401 alt= Valid HTML 4.01 Strict height= 31 width= 88 >
31 様 々な 要 素 :テキスト(1) 見 出 し h1 要 素 h2 要 素 h6 要 素 (Heading) <h1> </h1>, <h2> </h2>, 1が 大 見 出 し( 章 ) 順 に 小 見 出 し( 節 小 節 ) 段 落 ( 一 般 の 文 章 ) p 要 素 (Paragraph) <p> </p>
32 様 々な 要 素 :テキスト(2) 事 例 <h1> 情 報 リテラシー</h1> <h2>htmlの 説 明 </h2> <p>htmlの 規 格 はW3Cが 規 定 </p>
33 様 々な 要 素 :リスト(1) 箇 条 書 き ul 要 素 (Unordered List) <ul> </ul> 番 号 つき 箇 条 書 き ol 要 素 (Ordered List) <ol> </ol> リスト 要 素 ( 箇 条 書 きの 各 項 目 ) li 要 素 (List Item) <li> </li>
34 事 例 様 々な 要 素 :リスト(2) <ul> <li>webページ 記 述 用 言 語 </li> <li>sgmlのサブセット</li> </ul>
35 様 々な 要 素 : 画 像 (1) img 要 素 (IMaGe) 属 性 で 情 報 を 指 定 src 属 性 (SouRCe) 画 像 ファイルの 場 所 をURIで 指 定 alt 属 性 (ALTernative text) 画 像 が 表 示 できないときのための 代 替 文 字 列 を 指 定 width 属 性 画 像 の 幅 を 指 定 表 示 を 高 速 化 するため 利 用 height 属 性 画 像 の 高 さを 指 定 表 示 を 高 速 化 するため 利 用 <img src= alt= width= height= >
36 事 例 様 々な 要 素 : 画 像 (2) <img src="topadd.gif" width="73" height="52" alt=" 九 州 産 業 大 学 ">! 大 文 字 小 文 字 をファイル 名 と 同 じにする Windowsでは 区 別 しないが UNIXでは 大 文 字 小 文 字 を 区 別 する
37 様 々な 要 素 :リンク(1) a 要 素 (Anchor) href 属 性 でリンク 先 の URI を 指 示 (Hyper REFerence) <a href= > </a>
38 様 々な 要 素 :リンク(2) 事 例 <p>htmlの 規 格 は <a href="http://www.w3.org">w3c</a>が 規 定 </p>
39 様 々な 要 素 :その 他 文 字 の 強 調 em 要 素 (EMphasise) strong 要 素 横 罫 線 hr 要 素 (Horizontal Rule) HTML 要 素 の 種 類 の 数 が 多 いため 必 要 に 応 じ てリファレンスブックやウェブページを 適 宜 参 照 さ れたい
40 Webページ 作 成 の 過 程 1. HTMLファイルの 作 成 1 テキストエディタ(TeraPad,メモ 帳 )でHTMLファイ ルを 作 成 / 修 正 2 作 成 したHTMLファイルをWebブラウザ(Firefox, Internet Explorer)で 確 認 2. HTMLファイルのアップロード& 公 開 1 作 成 したHTMLファイルをWebサーバへ 転 送 2 転 送 したHTMLファイルをWebブラウザで 確 認 3. HTMLファイルの 追 加 修 正 1 追 加 修 正 分 のHTMLファイルに 対 して 手 順 1と2
Webページの 作 成 テキストエディタを 使 った 基 本 的 なWebページの 作 成 ~ 自 己 紹 介 /お 気 に 入 り 集 のページを 作 ろう ~
42 補 足 :ページ 内 容 の 選 択 個 人 情 報 を 世 界 中 に 公 開 することの 是 非 調 査 結 果 ( 勉 強 した 成 果 )の 公 開 学 校 行 事 や 生 徒 の 各 種 活 動 の 公 開 校 内 の 日 常 風 景 ( 部 活 動 授 業 等 ) 体 育 祭 や 文 化 祭 地 域 との 交 流 先 生 方 と 生 徒 さんの 共 同 制 作 で 学 校 をPR?
作 成 例 43
44 Webページ(HTMLファイル)の 作 り 方 手 動 でHTMLを 書 く エディタ(メモ 帳 TeraPadなど)を 利 用 HTMLに 関 する 知 識 が 必 要 自 動 でHTMLを 生 成 する Webページ 作 成 支 援 ソフトを 利 用 Blog, Wiki, CMS(Contents Management System) などの 利 用 HTMLに 関 する 知 識 は 不 要
45 Webページ 作 成 支 援 ソフト Webオーサリングツール (Web Authoring Tool) とも 呼 ばれる 専 用 ツール IBM ホームページビルダー Adobe DreamWeaver KompoZer (フリーソフト) 汎 用 ツール Word, Excel
46 KompoZer Netscape Composer を 元 に 開 発 した NVU を 改 良 オープンソースのWebオーサリングツール WYSIWYG (What You See Is What You Get) Webエディタ 内 蔵
47 Word/ExcelによるWebページの 作 成 既 存 文 書 のWebページ 化 の 一 つ [ 名 前 を 付 けて 保 存 (A)] ファイルの 種 類 (T) を Webページ(*.htm;*.html) に 変 更 ファイル 名 +.files フォルダに 画 像 などが 含 まれる
PDFファイルの 作 成 Word/Excel 等 からのPDF 化
49 PDFファイルの 広 がりと 重 要 性 PDF(Portable Document Format) Adobe Systems 社 によって 開 発 電 子 文 書 のためのフォーマット 電 子 的 に 配 布 可 能 相 手 のコンピュータの 機 種 や 環 境 に 依 存 しない PDFファイルを 作 成 できソフトが 数 多 く 存 在 Adobe Acrobat Primo PDF (フリーソフト) 瞬 簡 PDF ZERO (フリーソフト)
50 印 刷 を 選 択 デスクトップの 教 材 フォ ルダ IT 講 習 会 情 報 教 育 仲 サンプルWordファ イル.doc
プリンタとしてPrimoPDFを 選 択 51
プリンタとしてPrimoPDFを 選 択 52
53 プリンタとしてPrimoPDFを 選 択 作 成 修 正 したPDFファイルを Z: WWW-KSU フォルダに 保 存 ファイル 名 は sample.pdf 保 存 後 開 いて 内 容 を 確 認
54 Blog(Weblog) 元 々は 個 人 運 営 で 日 々 更 新 される 日 記 的 な Webサイトの 総 称 Blogを 作 成 するためのツールやサービスが 充 実 HTMLを 知 らなくてもBlogを 書 くことができる 特 別 なツール 不 要 Webブラウザで 利 用 可 能 Webページの 発 行 編 集 などが 行 なえる
Blogの 例 55
56 Wiki Webブラウザから 簡 単 にWebページの 発 行 編 集 などが 行 なえる 独 自 の 整 形 ルール で 文 章 を 記 述 複 数 人 が 共 同 でWebサイトを 構 築 していく 利 用 法 を 想 定 語 源 はハワイ 語 の Wikiwiki ( 速 い 急 ぐ 形 式 張 らないといった 意 味 )
Wikiの 例 57
58 Webページ 作 成 の 手 順 1. テキストエディタを 起 動 2. HTMLファイルを 作 成 修 正 3. 作 成 修 正 したHTMLファイルを Z: WWW- KSU に 保 存 4. Webブラウザで 表 示 確 認
59 テキストエディタ 起 動 テキストエディタ メモ 帳 秀 丸 エディタ TeraPad HTML 要 素 のタグを 見 た 目 で 区 別 できるよう 自 動 的 に 色 付 けする 機 能 が 付 いているほうが 便 利
60 HTMLファイルの 作 成 修 正 テキストエディタでHTMLタグを 含 むWebページ の 内 容 を 入 力 下 記 の 作 成 例 を 参 考 に 自 分 なりの 工 夫 をして 作 成 すること HTMLファイルの 作 成 例 を 参 照 作 成 するHTMLファイルの 種 類 ホームページ(index.htm) お 気 に 入 りのページ(links.htm)
index.htm 61
参 考 :links.htm 62
63 参 考 : 作 成 例 のソース 前 述 のサンプルページは 情 報 リテラシーのペー ジにリンクあり http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ Webブラウザでページのソースを 参 照 同 じところにリンクあり
64 Webページの 中 身 (ソース)の 見 方 ソース ソースコード source code の 略 称 Webブラウザから 見 ることが 可 能 Internet Explorerでは [ページ] [ソースの 表 示 ] Firefox では [ 表 示 ] [ページのソース]
65 HTMLファイルの 保 存 作 成 修 正 したHTMLファイルを Z: WWW-KSU フォルダに 保 存 ファイル 名 は 半 角 英 数 字 で! ホームページの 名 前 index.htm お 気 に 入 りのページの 名 前 links.htm
66 Webブラウザで 表 示 確 認 HTMLファイルをダブルクリック 表 示 されたページ 内 容 と 自 分 の 想 像 したものと が 異 なる 場 合 HTMLファイルをテキストエディタで 修 正 & Webブラウザで 再 確 認
67 Webブラウザで 表 示 確 認 ( 続 き) 場 合 によっては 表 示 ( 見 え 方 )が 異 なることもあ るので 注 意! Webブラウザの 種 類 文 字 サイズ フォント( 書 体 ) ウィンドウサイズ Firefox と IE の 両 方 で 見 てみると 良 い HTML ファイルを 右 クリック プログラムから 開 く Firefox もしくは Internet Explorer
68 ブラウザによる 見 栄 えの 違 い w3m Firefox 携 帯 (iモード)
69 HTML-lint HTMLの 文 法 的 な 正 しさのチェックツール http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 文 法 が 正 しければ 良 いというものではない しかし それなりの 根 拠 ( 例 えば WAI)はあるの で 正 しいほうが 望 ましい Wordが 生 成 するHTMLの 採 点 結 果 は 悲 惨 例
70 参 考 例 (HTML-lint 向 け 改 良 版 ) ホームページ 改 良 版 http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ 下 川 のホームページその2
参 考 :Webページ チェックリスト(1) 71
参 考 :Webページ チェックリスト(2) 72
73 STYLE 要 素 の 追 加 HTML 要 素 ごとに 文 字 色 や 背 景 色 フォント サイズなどの 指 定 HEAD 要 素 に STYLE 要 素 を 追 加 追 加 例 <style type="text/css"> <!-- body { color: #602727; background: #D1EEEE; } h2 { margin: 0em 2em 0em 0em; font-size: 1.6em; font-weight: 600; border-style: solid; border-width: 0.2em 0em 0em 1em; border-color: blue; } --> </style>
74 参 考 例 (STYLE 要 素 の 追 加 ) ホームページ 改 良 版 http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ 下 川 のホームページその3
75 外 部 スタイルシート CSS 前 述 の STYLE 要 素 を ( 別 ファイルとして) 外 部 スタイルシート(CSSファイル)として 用 意 CSS(Cascading Style Sheets)ファイル *.css CSSファイルもテキストエディタで 作 成 HTMLファイルのHEAD 要 素 内 で 使 用 する CSSファイルを 指 定 使 用 例 : <link rel="stylesheet" type="text/css href="hoo.css">
76 CSSファイルの 作 成 方 法 (1) CSSファイルには 1つ 以 上 の 規 則 集 合 が 含 まれる 規 則 集 合 :セレクタ( 選 択 子 )と 宣 言 ブロックから 構 成 p.id { color : #ff3300 } セレクタ: スタイルが 適 用 される 対 象 を 示 す( 上 例 では p.id の 部 分 ) 宣 言 ブロック: { から } までの 部 分 1つ 以 上 の 宣 言 を 含 む 宣 言 : color : #ff3300 の 部 分 プロパティ( 特 性 ): 宣 言 の 内 : より 前 ( 上 例 では color ) 値 : 宣 言 の 内 : より 後 ( 上 例 では #ff3300 )
77 CSSファイルの 作 成 方 法 (2) CSSファイルで 指 定 した 規 則 集 合 を HTMLファ イルのHTML 要 素 に 適 用 する 際 の 記 述 例 CSSファイル 内 p.id { color : #ff3300 } HTMLファイル 内 <p class="id"> </p>
78 参 考 例 (CSSファイルの 使 用 ) ホームページ 改 良 版 http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ 下 川 のホームページその4 さらに 改 変 して 外 部 スタイルシートを
80 漢 字 を 表 現 する 文 字 コードには 大 きく4 種 類 JIS (ISO-2022-JP) Shift JIS 文 字 コードについて (HTML 作 成 について 補 足 ) EUC ( 日 本 語 EUC, EUC-JP) Unicode (UTF-8) 詳 細 については 以 下 のページを 参 照 Cyber Librarian 日 本 の 文 字 コード http://www.asahi-net.or.jp/~ax2s-kmtn/character.html 文 字 コードの 話 http://euc.jp/i18n/charcode.ja.html
81 文 字 化 け 情 報 通 信 では 送 信 者 が 使 う 文 字 コードと 受 信 者 が 使 う 文 字 コードが 一 致 することが 必 要 一 致 しない 場 合 いわゆる 文 字 化 け が 発 生 携 帯 会 社 が 違 う 場 合 の 絵 文 字 化 けも 原 因 は 同 じ Webでも サーバから 送 られてくるデータの 文 字 コードが 分 からないと 文 字 化 けの 原 因
82 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 と 記 述
84 Web Accessibility(a11y) a11y = accessibility : アクセシビリティ できるだけ 多 くの 人 に 情 報 を 提 供 するには? 視 聴 覚 障 害 者 もアクセスしてくるかも 画 像 表 示 できないブラウザを 利 用 しているかも 障 害 者 がWebを 知 覚 理 解 ナビゲーション インター ラクション 可 能 視 覚 障 害 聴 覚 障 害 肢 体 不 自 由 発 話 障 害 認 知 障 害 脳 機 能 障 害 高 齢 者, 一 時 的 な 障 害 状 況 による 障 害 ユーザビリティも 向 上
85 Web a11y の 例 代 替 テキスト イメージの 代 わりに 表 示 されるテキスト ブラウザによる 見 栄 えの 違 いの 例 での 九 産 大 ロゴ オーディオキャプション デバイス 非 依 存 (キーボードだけでも 操 作 可 能 ) 明 確 で 一 貫 したデザインとナビゲーション
86 Web a11y は 機 会 均 等 に 不 可 欠 Webがあらゆる 場 面 ( 含 公 的 サービス)で 利 用 されている Webなら 障 害 者 もアクセスしやすいようにできる 企 業 の 社 会 的 責 任 (CSR)である a11y に 対 応 したWebにすることで 人 々の 暮 らし が 改 善 し 全 体 として 社 会 に 利 益 をもたらす
87 障 害 者 以 外 への 利 点 高 齢 者 ( 日 本!) 読 み 書 きが 不 得 手 な 人 その 言 語 に 堪 能 でない 人 ネットワークが 遅 い 人 Webの 初 心 者 明 確 で 一 貫 したデザイン ナビゲーション リンク サーバーサイド イメージマップにテキストリンク 追 加 新 しくブラウザを 開 く 際 の 事 前 情 報
89 参 考 サイト(Web ally) ウェブアクセシビリティチェックサイトHAREL (NTTデータ) http://feed.designlinkdatabase.net/feed/outsit e_182390.aspx Webページのソースコードをチェックし アクセシビリ ティへの 適 合 度 を 点 数 で 表 示 みんなのウェブ 情 報 バリアフリーのための 情 報 提 供 サイト ( 情 報 通 信 研 究 機 構 ) http://www2.nict.go.jp/v/v413/103/accessibility/
ネットセキュリティ/モラルの 教 育 (1) 90 必 修 科 目 情 報 リテラシー にて 実 施 警 察 庁 および 都 道 府 県 警 察 のサイバー 犯 罪 対 策 部 門 のコンテンツの 活 用 ( 協 力 依 頼 ) 利 用 コンテンツ 県 警 講 演 (サイバー 犯 罪 対 策 部 門 へ 依 頼 ) 警 察 庁 監 修 情 報 セキュリティ 対 策 ビデオ http://www.npa.go.jp/cyber/video/ ポリスチャンネル ビデオライブラリ http://www.police-ch.jp/video/
91 警 察 庁 監 修 情 報 セキュリティ 対 策 ビデオ http://www.npa.go.jp/cyber/video/ ココロノスキマ アクセスの 代 償 ~あなたの 知 らないネット 事 情 ~ 嘘 ~ 出 会 い 系 サイトによる 犯 罪 被 害 に 遭 わないために~ 仕 掛 けられた 罠 ネットオークション ネットバンキングの 危 険 性 サイバー 犯 罪 事 件 簿 3 ~NET SPY ネット スパイ~ 企 業 の 情 報 セキュリティ サイバー 犯 罪 事 件 簿 2 ~ 危 険 なアクセス~ ワンクリック 詐 欺 出 会 い 系 サイト 等
92 参 考 : 動 的 なWebページ アクセスごとに 変 化 のあるページ サーバ 側 でコンテンツを 作 り 替 えるページ CGI: Common Gateway Interface Java Servlet PHP クライアント 側 でプログラムが 動 くページ Java Applet JavaScript
93 その 他 参 考 webページ W3C http://www.w3.org 今 回 講 義 で 紹 介 した HTML は 説 明 のため 簡 略 化 W3C のページは 正 確 な HTML を 使 用 Getting started with HTML http://www.w3.org/markup/guide/ 同 上 日 本 語 版 ( 非 公 式 ) http://bewaad.com/archives/getstart.html
94 マルチメディアコンテンツ 静 止 画 像 動 画 像 音 声 音 楽
95 静 止 画 像 GIF: Graphic Interchange Format アイコンのように 色 数 が 少 ない 画 像 向 き JPEG: Joint Photographic Experts Group 写 真 やCGのように 色 数 が 多 い 画 像 向 き BMP: BitMaP Windows 標 準 の 画 像 形 式 ファイルサイズが 無 駄 に 大 きい PNG: Portable Network Graphics GIFにおける 特 許 問 題 を 解 決 するために 開 発 W3C 推 奨
96 動 画 像 MPEG (.mpg) Moving Picture Experts Group が 開 発 業 界 標 準 様 々な 会 社 により 開 発 された 独 自 規 格 開 発 元 名 称 代 表 的 な 拡 張 子 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
97 音 声 音 楽 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サーバへ 転 送
99 Webページの 公 開 までの 手 順 1. Webページをデザイン 2. Webページを 構 成 するHTMLファイルや 画 像 ファイル 等 を 作 成 3. Webブラウザで 表 示 確 認 4. 問 題 があれば2へ 戻 る 5. 公 開 用 Webサーバへ 転 送 (アップロード) 6. サーバ 上 のWebページを 表 示 確 認 7. 問 題 があれば2または5へ 戻 る
100 WWWの 仕 組 み HTTPアクセス アクセス クライアント Webサーバ FTPサーバ コンテンツ 作 成 PC データ 例 ) 学 生 用 FTPサーバ : ftp-st.is.kyusan-u.ac.jp 学 生 用 Webサーバ: www-st.is.kyusan-u.ac.jp
101 本 講 習 でのページの 公 開 Z: WWW-KSUに 公 開 したいHTMLファイルを 保 存 http://www.kyusan-u.ac.jp/ ~ ユーザ 名 /ファイル 名 でア クセス 可 能 ~ ( 破 線 符 号 )は 直 接 入 力 ( 半 角 英 数 字 入 力 )で shift + ^ ~ の 代 わりに %7E の3 文 字 でも 可
102 参 考 :FTPによるファイルのアップロード 基 本 的 にWebサーバはファイルのアップロード 機 能 を 持 たない そこでFTPサーバを 併 用 ファイルをFTPサーバに 転 送 (アップロード) FTPサーバに 転 送 したデータにはWebサーバを 通 じてアクセスできる
103 参 考 :FTPによるファイルのアップロード 方 法 ファイルをWebサーバーに 送 る FFFTP([すべてのプログラム]ー[リモートアクセス]) 1. 学 内 個 人 用 Webページサーバに 接 続 2. 転 送 するファイル(index.htm 画 像 ファイル)を 選 択 しアップロード( 転 送 )
104 参 考 :Webページのアップロード& 公 開 作 業 内 容 1. パスワードの 変 更 ( 適 宜 ) 2. 公 開 用 ディレクトリ(フォルダ) public_html の 作 成 最 初 の1 度 だけやれば 良 い 3. PCで 作 成 したHTMLファイルをFTPサーバに 転 送 4. アップロードしたWebページへアクセス 5. HTMLファイルの 修 正 6. 3. へ 戻 る( 修 正 するたび 転 送 する)
105 アクセス 制 限 の 設 定 方 法 (1) 条 件 : Webサーバとして Apache を 使 用 制 限 方 法 ( ウェブブラウザでのフィルタ 制 限 ) 1.ドメイン(IPアドレス)による 制 限.htaccess ファイルのみ 使 用 2.パスワードによる 制 限 (Basic 認 証 ).htaccess ファイル.htpasswd ファイルを 使 用 1.および2.の 制 限 を 一 緒 に 適 用 可.htaccess ファイル.htpasswd ファイルを 使 用
106 アクセス 制 限 の 設 定 方 法 (2) 条 件 : Webサーバとして Apache を 使 用 作 成 した.htaccess.htpasswd を 制 限 をかけ たいファイルと 同 じ 場 所 (ディレクトリ)に 保 存.htaccess.htpasswd の 保 存 場 所 に 存 在 するディ レクトリ( 子 ディレクトリ)も 適 用
107 ドメイン(IPアドレス)による 制 限.htaccess ファイルの 例 <Limit GET POST> 特 定 のホスト(コンピュータ)からの アクセスのみを 許 可 する 場 合 Satisfy any Order Deny,Allow Deny from all Allow from as.kyusan-u.ac.jp Allow from 123.17.144.0/22 </Limit> ネットマスクを 利 用 したホスト 指 定
108 参 考 :ネットマスク IPアドレスをネットワークID 部 分 とホストID 部 分 と に 分 離 する 際 の 指 定 方 法 例 :123.17.144.0/24 IPアドレス 123.17.144.0 の 各 数 値 (10 進 数 )を8 桁 の2 進 数 に 変 換 そのうち 上 位 ( 左 から)24 桁 はネッ トワークID 部 分 01111011.00010001.10010000.00000000 よって 123.17.144.0( 下 位 8 桁 が 00000000) ~ 123.17.144.254( 下 位 8 桁 が11111111)からのアク セス 可
109 パスワードによる 制 限 (Basic 認 証 ).htaccess ファイルの 例 AuthType Basic Basic 認 証 の 宣 言 AuthName members AuthUserFile /home/foo/public_html/.htpasswd <Limit GET POST> Require valid-user </Limit>.htpasswd ファイルの 例 Webサーバで htpasswd コマンドを 使 って 作 成 or.htpasswd ファイルをウェブサイトで 作 成 student:cfu7fksyacvfx
110 ドメイン/パスワードによる 制 限.htaccess ファイルの 例 AuthType Basic AuthName members AuthUserFile /home/foo/public_html/.htpasswd <Limit GET POST> Require valid-user Satisfy any Order Deny,Allow Deny from all Allow from as.kyusan-u.ac.jp Allow from 123.17.144.0/24 </Limit> any 指 定 は ドメイン 認 証 or パスワード 認 証 いずれかを 通 過 すればO.K.の 意 味
111 参 考 ページ:アクセス 制 限 All About [ホームページ 作 成 ] 基 本 認 証 でアク セス 制 限 をかける 方 法 http://allabout.co.jp/internet/hpcre ate/closeup/cu20020910a/.htaccess ファイルを 簡 単 作 成.htaccess Editor http://www.htaccesseditor.com/
112 モバイル 用 ウェブページの 作 成 主 に 緊 急 連 絡 用 で 使 用 される 事 例 が 多 い 学 校 のリスク 管 理 の 顔 となることも 必 要 最 小 限 の 内 容 (コンテンツ)を 掲 載 文 字 を 中 心 に 内 容 情 報 の 更 新 タイミングも 重 要 使 用 タグも 最 小 限 に 主 要 なキャリアで 閲 覧 確 認 を NTT docomo / au (KDDI) / softbank キャリアによって 使 えないタグも
113 作 業 :QRコードの 作 成 URLを 入 れたQRコードを 作 成 例 : 九 産 大 情 報 科 学 部 モバイル 向 けサイト http://www.is.kyusan-u.ac.jp/m/ QRのススメ http://qr.quel.jp/ さっそく 作 る URL(http://~) の 作 る タイトル URL を 入 力 し OKボタン 作 成 したQRコードを 携 帯 電 話 で 読 み 取 りアクセ ス (2 次 元 )バーコードリーダ 機 能 を 使 用
お 疲 れ 様 でした 講 習 内 容 についてのお 問 い 合 わせは 下 記 電 子 メールアドレスまで naka@is.kyusan-u.ac.jp
115 情 報 教 育 講 習 会 リンク 集 http://www.kyusan-u.ac.jp/j/cnc/itkoushu/