スライド 1

Size: px

Start display at page:

Download "スライド 1"

れいなうるしはた
7 years ago
Views:

1 九州産業大学平成 22 年度教員免許状更新講習 8 月 2 日 ( 月 ) 選択領域工学情報系講座 (F) ホームページ作成技術の基礎と応用 Ⅰ ホームページ作成技術の基礎九州産業大学情報科学部稲永健太郎 inenaga@is.kyusan-u.ac.jp

2 2 講習会の概要ホームページの作成方法をわかりやすく学ぶ講座ですホームページを作る際の基本的な知識だけではなくユニバーサルデザインを考慮したホームページの作り方を学びますさらには基本的なモバイル向けホームページの作成も解説します上級者には入力フォームやスクリプト言語等の機能を使いユーザとの対話や反応でダイナミックに内容が変化する動的ホームページへの応用も可能にします

3 3 講習計画 Ⅰ ホームページ作成技術の基礎 (1) ホームページ作成の基礎知識 (60 分 ) (2) ホームページ作成と公開方法 (60 分 ) (3) モバイル向けホームページ作成の基礎 (60 分 ) Ⅱ 動的ホームページの作成 (1) JavaScriptプログラミングの基本 (60 分 ) (2) JavaScriptの動的ホームページへの応用 (60 分 ) Ⅲ 認定試験 - 筆記試験 (60 分 )

4 4 本講習 ( 前半 ) の内容について九州産業大学情報科学部 1 年次生配当科目情報リテラシー ( 講義 ) および情報リテラシー演習にて使用した教材の内容を本講習向けに再構成 + 加筆修正ベースとなったオリジナル教材 2009 / 2010 年度情報リテラシー 2 コマ分 2009 / 2010 年度情報リテラシー演習 2 コマ分

5 5 講習内で紹介する参考ページのリンク集 Web ブラウザで下記 URL にアクセス or 大手検索サイトで稲永健太郎で検索稲永健太郎研究室九州産業大学平成 22 年度教員免許状更新講習選択領域工学情報系講座 (F) ホームページ作成技術の基礎と応用 I. ホームページの作成技術の基礎

6 情報リテラシーシラバス (1) 6

7 情報リテラシーシラバス (2) 7

8 情報リテラシー演習シラバス (1) 8

9 情報リテラシー演習シラバス (2) 9

10 ホームページ作成の基礎知識 WWW と HTML ホームページの作り方 Web アクセシビリティ

11 11 WWW(World Wide Web) いろいろな情報資源を統合的に扱う情報資源のネットワーク (on Internet) 様々な技術の集合 HTML (HyperText Markup Language) URI (Universal Resource Identifier) URL(Universal Resource Locator) はURIの一部ページのアドレス HTTP (HyperText Transfer Protocol)

12 HTML (Hyper Text Markup Language) 12 Web ページ記述用に開発されたハイパーテキスト記述用言語 SGML(Standard Generalized Markup Language) のサブセット

13 13 SGML HTML SGML 文章にマーク付けするための言語 HTML SGML を元に Web ページを記述するために開発 HTML は便利他の目的にも使いたい! しかし Web ページ記述に特化されている!! SGML は複雑すぎる!!

14 14 XML XHTML XML (extensible Markup Language) SGMLを元にした汎用のデータ記述言語現在さまざまなところで使われている XHTML HTMLはXMLではないので不便 XMLの一部としてHTMLを再設計今後は主流になると思われる

15 15 SGML XHTML SGML: 元々の元祖 ( 複雑汎用性あり ) HTML: Web ページ記述用 ( 単純汎用性無し ) XML: 汎用データ記述用 ( 単純汎用性あり ) XHTML: Web ページ記述用 (XML 用システムを利用可能 ) HTML SGML XML XHTML

16 16 HTML の今後 HTML は 1999 年公開の 4.01 が最新 XHTML に切り替わることが期待されていた XHTML の普及は必ずしも進んでいない新しい HTML 仕様の策定がスタート HTML 年 1 月に最初の草稿が公開 2010 年 9 月に正式勧告予定

17 HTML5 参考サイト HTML5.JP - 次世代 HTML 標準 HTML5 情報サイト http://www.html5.

17 17 HTML5 参考サイト HTML5.JP - 次世代 HTML 標準 HTML5 情報サイト HTML5 とは? 変わる Web と注目の新要素 HTML5.0 の情報サイト

18 ホームページの例 18

19 19 このページの実体 <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=" の正式な仕様 </a> も参考になる </p> <p><img src=" alt="valid HTML 4.01 Strict" height="31" width="88"></p> </body> </html>

20 20 HTML の書き方文書の構造の例タイトル作者段落列挙 ( 箇条書き ) 引用文書の構造 ( 構成要素 ) を HTML の要素としてマークアップ ( 印付け ) していくブラウザがその構造を見やすく表示

21 21 HTML 文書の構成要素の例タイトル見出し段落画像リンク箇条書き強調

22 22 文書の構成要素と HTML 要素との対応例文書の構成要素 HTMLの要素タイトル title 見出し h1 h2 h3 h4 h5 h6 段落 p 箇条書き ul 強調 em strong 引用 blockquote 画像 img リンク a

23 23 HTML の要素要素は開始タグ内容終了タグで構成 < 要素 > が開始タグ </ 要素 > が終了タグ <title>, </title>, <p>, <ul> など終了タグを省略できるものもある p 要素 li 要素など XHTML や新 HTML では終了タグは省略不可能終了タグがないもの ( 空要素 ) もある img 要素 hr 要素などタグは半角文字 XHTML や新 HTML では空要素は <img /> のように開始タグを /> で終わらせる

24 24 HTML 文書の基本構成 HTML 文書はヘッダと本体で構成ヘッダは head 要素に書く本体は body 要素に書く全体が html 要素ヘッダに文書の説明を記述タイトルはヘッダの中本体は文書本文を記述 <html> <head> </head> <body> </body> </html> ここがヘッダ (head 要素 ) ここが全体 (html 要素 ) ここが本体 (body 要素 )

25 25 この 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=" の正式な仕様 </a> も参考になる </p> <p><img src=" alt="valid HTML 4.01 Strict" height="31" width="88"></p> </body> </html>

26 26 HTML 要素の構成の注意点開始タグと終了タグの関係は数学の開きカッコと閉じカッコと同じ良い例 : <p> 一部 <em> 強調 </em> する </p> 悪い例 : <p> 一部 <em> 強調 </p> したつもり </em> タグは半角文字で記述タグは大文字小文字ともに可 XHTML や新 HTML では小文字のみ

27 文書をマークアップする (1) 見出し 27 見出し部分を h1 要素でマークアップ見出しのレベルで h2, h3, 開始部分に開始タグ <h1> を追加終了部分に終了タグ </h1> を追加 <h1> World Wide Web </h1>

28 文書をマークアップする段落部分 ( 一つの段落 ) を p 要素 (Paragraph) でマークアップ開始部分に開始タグ <p> を追加終了部分に終了タグ </p> を追加 HTML 中の改行位置は気にしなくて良い (2) 段落 28 <p> World Wide Web は WWW や Web とも呼ばれるインターネットの爆発的普及の原動力となったアプリケーションであるこれは以下の3つの要素技術から構成される </p>

29 文書をマークアップする 29 箇条書き部分全体を 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>

30 文書をマークアップする強調部分を strong 要素でマークアップ (4) 強調 30 <p> 情報リテラシーではこれらのうちHTMLについて詳しく解説するなおついて詳しく解説するなおHTMLの正式な仕様も参考になる </p> </p> 情報リテラシーではこれらのうち <strong>html</strong> に

31 文書をマークアップする (5) リンク 31 <p> 情報リテラシーではこれらのうち <strong>html<strong> について詳しく解説するなお <a>html の正式な仕様も参考になる </a> も参考になる </p> <a href= >HTMLの正式な仕様 </a> も参考になる </p> リンク部分を a 要素でマークアップ (Anchor) リンク先を href 属性で指定する (Hyper REFerence)

32 文書をマークアップするの正式な仕様 </a> も参考になる </p> (6) 画像の正式な仕様 </a> も参考になる </p> <p> <img src= alt= Valid HTML 4.01 Strict height= 31 width= 88 > </p> <img> src= > src= alt= Valid HTML 4.01 Strict height= 31 width= 88 > 32 画像を入れる部分に img 要素をマーク (IMaGe) 画像の URI を src 属性で指定 (SouRCe) 代替テキストや画像サイズも属性で指定画像を段落にする

33 33 様々な要素 : テキスト (1) 見出し h1 要素 h2 要素 h6 要素 (Heading) <h1> </h1>, <h2> </h2>, 1が大見出し ( 章 ) 順に小見出し( 節小節 ) 段落 ( 一般の文章 ) p 要素 (Paragraph) <p> </p>

34 34 様々な要素 : テキスト (2) 事例 <h1> 情報リテラシー </h1> <h2>html の説明 </h2> <p>html の規格は W3C が規定 </p>

35 35 様々な要素 : リスト (1) 箇条書き ul 要素 (Unordered List) <ul> </ul> 番号つき箇条書き ol 要素 (Ordered List) <ol> </ol> リスト要素 ( 箇条書きの各項目 ) li 要素 (List Item) <li> </li>

36 36 事例様々な要素 : リスト (2) <ul> <li>web ページ記述用言語 </li> <li>sgml のサブセット </li> </ul>

37 37 様々な要素 : 画像 (1) img 要素 (IMaGe) 属性で情報を指定 src 属性 (SouRCe) 画像ファイルの場所を URI で指定 alt 属性 (ALTernative text) 画像が表示できないときのための代替文字列を指定 width 属性画像の幅を指定表示を高速化するため利用 height 属性画像の高さを指定表示を高速化するため利用 <img src= alt= width= height= >

38 38 事例様々な要素 : 画像 (2) <img src="topadd.gif" width="73" height="52" alt=" 九州産業大学 ">! 大文字小文字をファイル名と同じにする Windows では区別しないが UNIX では大文字小文字を区別する

39 39 様々な要素 : リンク (1) a 要素 (Anchor) href 属性でリンク先の URI を指示 (Hyper REFerence) <a href= > </a>

40 40 様々な要素 : リンク (2) 事例 <p>html の規格は <a href=" が規定 </p>

41 41 様々な要素 : その他文字の強調 em 要素 (EMphasise) strong 要素横罫線 hr 要素 (Horizontal Rule) HTML 要素の種類の数が多いため必要に応じてリファレンスブックやウェブページを適宜参照されたい

42 文字コードについて (HTML 作成について補足 ) 42 漢字を表現する文字コードには大きく 4 種類 JIS (ISO-2022-JP) Shift JIS EUC ( 日本語 EUC, EUC-JP) Unicode (UTF-8) 詳細については以下のページを参照 Cyber Librarian 日本の文字コード文字コードの話

43 43 文字化け情報通信では送信者が使う文字コードと受信者が使う文字コードが一致することが必要一致しない場合いわゆる文字化けが発生携帯会社が違う場合の絵文字化けも原因は同じ Web でもサーバから送られてくるデータの文字コードが分からないと文字化けの原因

44 44 ホームページでの文字化けの例 ( 出所 ) 教えて君.net ページが文字化けしたり真っ白のページがたまにある

45 45 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 と記述

46 47 Web Accessibility(a11y) a11y = accessibility : アクセシビリティできるだけ多くの人に情報を提供するには? 視聴覚障害者もアクセスしてくるかも画像表示できないブラウザを利用しているかも障害者が Web を知覚理解ナビゲーションインターラクション可能視覚障害聴覚障害肢体不自由発話障害認知障害脳機能障害高齢者, 一時的な障害状況による障害ユーザビリティも向上

47 48 Web a11y の例代替テキストイメージの代わりに表示されるテキストオーディオキャプション音声での字幕効果デバイス非依存 ( キーボードだけでも操作可能 ) 明確で一貫したデザインとナビゲーション

48 49 Web a11y は機会均等に不可欠 Web があらゆる場面 ( 含公的サービス ) で利用されている Web なら障害者もアクセスしやすいようにできる企業の社会的責任 (CSR) である a11y に対応した Web にすることで人々の暮らしが改善し全体として社会に利益をもたらす

49 50 障害者以外への利点高齢者 ( 日本!) 読み書きが不得手な人その言語に堪能でない人ネットワークが遅い人 Web の初心者明確で一貫したデザインナビゲーションリンクサーバーサイドイメージマップにテキストリンク追加新しくブラウザを開く際の事前情報

50 51 参考サイト (Web a11y) ウェブアクセシビリティチェックサイト HAREL (NTT データ ) e_ aspx Web ページのソースコードをチェックしアクセシビリティへの適合度を点数で表示みんなのウェブ情報バリアフリーのための情報提供サイト ( 情報通信研究機構 )

51 52 ネットセキュリティ / モラルの教育必修科目情報リテラシーにて実施警察庁および都道府県警察のサイバー犯罪対策部門のコンテンツの活用 ( 協力依頼 ) 利用コンテンツ県警講演 ( サイバー犯罪対策部門へ依頼 ) 警察庁監修情報セキュリティ対策ビデオポリスチャンネルビデオライブラリ

52 53 警察庁監修情報セキュリティ対策ビデオココロノスキマアクセスの代償 ~あなたの知らないネット事情 ~ 嘘 ~ 出会い系サイトによる犯罪被害に遭わないために~ 仕掛けられた罠ネットオークションネットバンキングの危険性サイバー犯罪事件簿 3 ~NET SPY ネットスパイ ~ 企業の情報セキュリティサイバー犯罪事件簿 2 ~ 危険なアクセス ~ ワンクリック詐欺出会い系サイト等

53 54 参考 : 動的なページアクセスごとに変化のあるページサーバ側でコンテンツを作り替えるページ CGI: Common Gateway Interface Java Servlet PHP クライアント側でプログラムが動くページ Java Applet JavaScript

54 55 その他参考ページ W3C 今回講義で紹介した HTML は説明のため簡略化 W3C のページは正確な HTML を使用 Getting started with HTML 同上日本語版 ( 非公式 )

55 56 マルチメディアコンテンツ静止画像動画像音声音楽

56 57 静止画像 GIF: Graphic Interchange Format アイコンのように色数が少ない画像向き JPEG: Joint Photographic Experts Group 写真や CG のように色数が多い画像向き BMP: BitMaP Windows 標準の画像形式ファイルサイズが無駄に大きい PNG: Portable Network Graphics GIFにおける特許問題を解決するために開発 W3C 推奨

57 58 動画像 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

58 59 音声音楽 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

59 60 ホームページの作成公開手順 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

60 ホームページの作成テキストエディタを使った基本的なホームページの作成 ~ 自己紹介 / お気に入り集のページを作ろう ~

61 62 補足 : ページ内容の選択個人情報を世界中に公開することの是非調査結果 ( 勉強した成果 ) の公開学校行事や生徒の各種活動の公開校内の日常風景 ( 部活動授業等 ) 体育祭や文化祭地域との交流先生方と生徒さんの共同制作で学校を PR?

62 作成例 63

63 64 ホームページ (HTML ファイル ) の作り方手動で HTML を書くテキストエディタ ( メモ帳 TeraPad など ) を利用 HTML に関する知識が必要自動で HTML を生成するホームページ作成支援ソフトを利用 Blog, Wiki, CMS(Contents Management System) などの利用 HTML に関する知識は不要

64 65 ホームページ作成支援ソフト Web オーサリングツール (Web Authoring Tool) とも呼ばれる専用ツール IBM ホームページビルダー Adobe DreamWeaver KompoZer ( フリーソフト ) 汎用ツール Word, Excel

65 66 KompoZer Netscape Composer を元に開発した NVU を改良オープンソースの Web オーサリングツール WYSIWYG (What You See Is What You Get) Web エディタ内蔵

ホームページ作成の手順 ( 自 PC 内作業 ) 67 1. テキストエディタを起動 2.

66 ホームページ作成の手順 ( 自 PC 内作業 ) テキストエディタを起動 2. HTML ファイルを作成修正 3. 作成修正した HTML ファイルをデスクトップに保存 4. Web ブラウザで表示確認

67 68 テキストエディタ起動テキストエディタメモ帳秀丸エディタ TeraPad HTML 要素のタグを見た目で区別できるよう自動的に色付けする機能が付いているほうが便利

68 69 HTML ファイルの作成修正テキストエディタで HTML タグを含む Web ページの内容を入力下記の作成例を参考に自分なりの工夫をして作成すること HTML ファイルの作成例を参照作成する HTML ファイルの種類ホームページ (index.htm) お気に入りのページ (links.htm)

69 index.htm 70

70 参考 :links.htm 71

71 72 参考 : 作成例のソース前述のサンプルページは情報リテラシーのページにリンクあり lectures/il/2009/webpages/ Web ブラウザでページのソースを参照同じところにリンクあり

72 73 Web ページの中身 ( ソース ) の見方ソースソースコード source code の略称 Web ブラウザから見ることが可能 Internet Explorerでは [ ページ ] [ ソースの表示 ] Firefox では [ 表示 ] [ ページのソース ]

73 74 HTML ファイルの保存作成修正した HTML ファイルをデスクトップに保存ファイル名は半角英数字で! TeraPad で文字 / 改行コード指定保存で JIS を指定ファイル名 index.htm お気に入りのページのファイル名 links.htm

74 75 Web ブラウザで表示確認 HTML ファイルをダブルクリック表示されたページ内容と自分の想像したものとが異なる場合 HTML ファイルをテキストエディタで修正 & Web ブラウザで再確認

75 76 Web ブラウザで表示確認 ( 続き ) 場合によっては表示 ( 見え方 ) が異なることもあるので注意! Web ブラウザの種類文字サイズフォント ( 書体 ) ウィンドウサイズ Firefox と IE の両方で見てみると良い HTML ファイルを右クリックプログラムから開く Firefox もしくは Internet Explorer

76 77 ブラウザによる見栄えの違い w3m Firefox 携帯 (i モード )

77 78 HTML-lint HTML の文法的な正しさのチェックツール文法が正しければ良いというものではないしかしそれなりの根拠 ( 例えば WAI) はあるので正しいほうが望ましい Word が生成する HTML の採点結果は悲惨例

79 参考例 (HTML-lint 向け改良版 ) ホームページ改良版 http://www.is.

78 79 参考例 (HTML-lint 向け改良版 ) ホームページ改良版 lectures/il/2009/webpages/ 下川のホームページその 2

79 PDF ファイルの作成 Word/Excel 等からの PDF 化

80 81 PDF ファイルの広がりと重要性 PDF(Portable Document Format) Adobe Systems 社によって開発電子文書のためのフォーマット電子的に配布可能相手のコンピュータの機種や環境に依存しない PDFファイルを作成できソフトが数多く存在 Adobe Acrobat Primo PDF ( フリーソフト ) 瞬簡 PDF ZERO ( フリーソフト )

81 82 印刷を選択講座ページからダウンロードファイル名 : サンプル Word ファイル.docx 印刷印刷を選択

82 プリンタとして PrimoPDF を選択 83

83 プリンタとして PrimoPDF を選択 84

84 85 プリンタとして PrimoPDF を選択作成修正した HTML ファイルをデスクトップに保存ファイル名は sample.pdf 保存後開いて内容を確認

85 86 Word/Excel から PDF 化 ( その他 ) 名前をつけて保存 Adobe PDF Office2007 以降のバージョンで

86 87 Blog(Weblog) 元々は個人運営で日々更新される日記的な Web サイトの総称 Blog を作成するためのツールやサービスが充実 HTML を知らなくても Blog を書くことができる特別なツール不要 Web ブラウザで利用可能 Web ページの発行編集などが行なえる

87 Blog の例 88

88 89 Wiki Web ブラウザから簡単に Web ページの発行編集などが行なえる独自の整形ルールで文章を記述複数人が共同で Web サイトを構築していく利用法を想定語源はハワイ語の Wikiwiki ( 速い急ぐ形式張らないといった意味 )

89 Wiki の例 90

90 参考 :Web ページチェックリスト (1) 91

91 参考 :Web ページチェックリスト (2) 92

92 93 STYLE 要素の追加 HTML 要素ごとに文字色や背景色フォントサイズなどの指定 HEAD 要素に STYLE 要素を追加追加例 <style type="text/css">  </style>

94 参考例 (STYLE 要素の追加 ) ホームページ改良版 http://www.is.kyusan-u.

93 94 参考例 (STYLE 要素の追加 ) ホームページ改良版 lectures/il/2009/webpages/ 下川のホームページその 3

94 95 外部スタイルシート CSS 前述の STYLE 要素を ( 別ファイルとして ) 外部スタイルシート (CSS ファイル ) として用意 CSS(Cascading Style Sheets) ファイル *.css CSS ファイルもテキストエディタで作成 HTML ファイルの HEAD 要素内で使用する CSS ファイルを指定使用例 : <link rel="stylesheet" type="text/css href="hoo.css">

95 96 CSS ファイルの作成方法 (1) CSS ファイルには 1 つ以上の規則集合が含まれる規則集合 : セレクタ ( 選択子 ) と宣言ブロックから構成 p.id { color : #ff3300 } セレクタ : スタイルが適用される対象を示す ( 上例では p.id の部分 ) 宣言ブロック : { から } までの部分 1 つ以上の宣言を含む宣言 : color : #ff3300 の部分プロパティ ( 特性 ): 宣言の内 : より前 ( 上例では color ) 値 : 宣言の内 : より後 ( 上例では #ff3300 )

96 97 CSS ファイルの作成方法 (2) CSS ファイルで指定した規則集合を HTML ファイルの HTML 要素に適用する際の記述例 CSS ファイル内 p.id { color : #ff3300 } HTML ファイル内 <p class="id"> </p>

97 98 参考例 (CSS ファイルの使用 ) ホームページ改良版 lectures/il/2009/webpages/ 下川のホームページその 4 さらに改変して外部スタイルシートを

98 ホームページのアップロード & 公開作成したホームページを Web サーバへ転送

99 100 ホームページの公開までの手順 1. ホームページをデザイン 2. ホームページを構成する HTML ファイルや画像ファイル等を作成 3. Web ブラウザで表示確認 4. 問題があれば 2 へ戻る 5. 公開用 Web サーバへ転送 ( アップロード ) 6. サーバ上のホームページを表示確認 7. 問題があれば 2 または 5 へ戻る

100 101 WWW の仕組み HTTP アクセスアクセスクライアント Web サーバ FTP サーバコンテンツ作成 PC データ基本的に Web サーバはファイルのアップロード機能を持たないそこで FTP サーバを併用ファイルを FTP サーバに転送 ( アップロード ) FTP サーバに転送したデータには Web サーバを通じてアクセスできる

101 102 本講習でのページの公開 FTP サーバ ftp.ip.kyusan-u.ac.jp にあるホームディレクトリ内 WWW-KSU フォルダに公開したい HTML ファイルを保存 ~ ユーザ名 / ファイル名でアクセス可能 ~ ( 破線符号 ) は直接入力 ( 半角英数字入力 ) で shift + ^ ~ の代わりに %7E の 3 文字でも可

102 103 作業 : ホームページのアップロード & 公開作業内容 1. PC で作成した HTML ファイルを FTP サーバに転送 2. アップロードした Web ページへアクセス 3. HTML ファイルの修正へ戻る ( 修正するたび転送する )

103 104 アクセス制限の設定方法 (1) 条件 : Webサーバとして Apache を使用制限方法 ( ウェブブラウザでのフィルタ制限) 1. ドメイン (IPアドレス) による制限.htaccess ファイルのみ使用 2. パスワードによる制限 (Basic 認証 ).htaccess ファイル.htpasswd ファイルを使用 1. および 2. の制限を一緒に適用可.htaccess ファイル.htpasswd ファイルを使用

104 105 アクセス制限の設定方法 (2) 作成した.htaccess.htpasswd を制限をかけたいファイルと同じ場所 ( ディレクトリ ) に保存.htaccess.htpasswd の保存場所に存在するディレクトリ ( 子ディレクトリ ) も適用

105 106 ドメイン (IP アドレス ) による制限.htaccess ファイルの例 <Limit GET POST> 特定のホスト ( コンピュータ ) からのアクセスのみを許可する場合 Satisfy any Order Deny,Allow Deny from all Allow from as.kyusan-u.ac.jp Allow from /22 </Limit> ネットマスクを利用したホスト指定

106 107 参考 : ネットマスク IP アドレスをネットワーク ID 部分とホスト ID 部分とに分離する際の指定方法例 : /24 IP アドレスの各数値 (10 進数 ) を 8 桁の 2 進数に変換そのうち上位 ( 左から )24 桁はネットワーク ID 部分よって ( 下位 8 桁が ) ~ ( 下位 8 桁が ) からのアクセス可

107 108 パスワードによる制限 (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

108 109 ドメイン / パスワードによる制限.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 /24 </Limit> any 指定はドメイン認証 or パスワード認証いずれかを通過すれば O.K. の意味

109 110 参考ページ : アクセス制限 All About [ ホームページ作成 ] 基本認証でアクセス制限をかける方法 ate/closeup/cu a/.htaccess ファイルを簡単作成.htaccess Editor

110 111 モバイル用ウェブページの作成主に緊急連絡用で使用される事例が多い学校のリスク管理の顔となることも必要最小限の内容 ( コンテンツ ) を掲載文字を中心に内容情報の更新タイミングも重要使用タグも最小限に主要なキャリアで閲覧確認を NTT docomo / au (KDDI) / softbank キャリアによって使えないタグも

111 112 作業 : 所属校のモバイル向けページ制作 TeraPad を使って HTML ファイル ( ホームページ ) を作成ページタイトル (title 要素 ) には所属校名 + モバイル向けページ例 : 松香台高校モバイル向けページページコンテンツとして以下の内容を記述緊急時のお知らせ所在地 / 代表電話番号交通アクセス

113 作業 :QR コードの作成 URL を入れた QR コードを作成例 : 九産大情報科学部モバイル向けサイト http://www.is.kyusan-u.ac.

112 113 作業 :QR コードの作成 URL を入れた QR コードを作成例 : 九産大情報科学部モバイル向けサイト QR のススメさっそく作る URL( の作るタイトル URL を入力し OK ボタン作成した QR コードを携帯電話で読み取りアクセス (2 次元 ) バーコードリーダ機能を使用

113 お疲れ様でした講習内容についてのお問い合わせは下記電子メールアドレスまで

数のディジタル化

数のディジタル化第 3 章コミュニケーションとネットワークを探索する 4 節コミュニケーションとネットワークの活用 4 節コミュニケーションとネットワークの活用 3 コミュニケーションツールの活用第 3 章 4 節コミュニケーションとネットワークの活用コミュニケーションツールの活用本日の内容第 3 章コミュニケーションとネットワークを探索する 4 節コミュニケーションとネットワークの活用 3. コミュニケーションツールの活用