レッスン１ Ｗｅｂサイト制作とは

1. レッスン１　Ｗｅｂサイト制作とは　 このレッスンでは次のことを学びます 1.Webページのオーサリングツール 2.Web ページのデザイン 3.マークアップ言語を管理する標準化団体 4.Webページのフロントエンドとアクセシビリティ 5.クリエイティブなデザインとブランド戦略に関する概念 6.Webページのバックエンド

2. 1．Webページを作成する ●マークアップ言語 HTML（HyperText Markup Language） XHTML（ExtensibleHyperText Markup Language） ●Webページを構成するそのほかの要素 ■データベースとWeb ページ ■WebページとCGI Perl、PHP、ASP、JSP・・・ ■携帯端末とマークアップ言語 Wireless Application Protocol （WAP）

3. 2．テキストエディタとマークアップ言語 ●テキストエディタとは 保存用拡張子・・・.htm 又は .html

4. 3．Webオーサリングツール ●GUIエディタとは マウス操作と追加テキスト入力で、HTMLを作成 ●マークアップ言語を学ぶ理由

5. 4．フロントエンドについて ●適切なユーザインタフェースを備えたWebページ ハンディキャップを持ったユーザでも利用できるページ 適切な画像の使用 ハイパーリンクやコンテンツの随時更新 適切なテーブルの使用 十分に配慮して設計されたフォームの使用 データベースとの接続 ページに適した最新技術を使用 サイトマップが提供されている 代替のナビゲーションリンクを備えている

6. 4．フロントエンドについて ●Webページのアクセシビリティ フロントエンド 分かりやすく、使い勝手のよいレイアウト・操作性 バックエンド ユーザが自分のコンピュータへWebページを楽に ダウンロードできること、またWeb ページがデータベース に正しく接続されていること、など ●ガイドラインの例 ・The Americans with Disabilities Act (ADA) ・障害者関連法規 ・Web Content Accessibility Guidelines (WCAG)

7. 4．フロントエンドについて ●WCAG準拠要求事項 1. 代替手段の用意 2. 色に依存しない表現 3. 適切なマークアップ言語とスタイルシートの使用 4. 自然言語を明示 5. テーブルを正しい用途で使用する 6. 新技術を採用した場合は代替形式を提供する 7. 動きのある内容をユーザが自由に変更できる 8. 埋め込みユーザインタフェースへのダイレクトなアクセシビリティ 9. デバイスに依存しないデザイン 10. 暫定的な解決法を使用 11. W3C が推奨する技術とガイドラインの使用 12. コンテンツの背景や方向付けを明らかにする 13. 分かりやすいナビゲーションの仕組みを提供する 14. 分かりやすく簡潔なドキュメントとする

8. 優先度1 優先度1と2 優先度1と2と3 4．フロントエンドについて ●チェックポイント－優先度レベル Webアクセス上の基本条件設定 達成は必須。 優先度1 Webアクセス上の障害を軽減するポイント 達成が強く推奨される。 優先度2 Webアクセス上の障害を改善するポイント 達成が望ましい。 優先度3 ●適合ポイント－準拠度レベル A Double-A Triple-A

9. 4．フロントエンドについて ■Rehabilitation Act（リハビリテーション法）第508条 ■COPA（児童オンライン保護法） ■アクセシビリティ・ガイドラインの検証ツール ●Webページのアクセシビリティで考慮すべき点 ■視覚障害者への対応 ■聴覚障害者への対応 ■認知障害、あるいは技術的な制約がある場合の対応

10. 4．フロントエンドについて ここで、テキスト中の演習を行うことができます。 演習1.1　アクセシビリティの検証テストを行う ■演習を行うための注意 1. テキストの付属ＣＤが必要になることがあります。 2. テキスト中に書かれている手順に沿って行いましょう。 ここで演習を行わない場合、このまま学習を続けましょう

11. 4．フロントエンドについて ●サイトマップ セクションの階層表示 サイトの構成を階層構造で 分かりやすく 具体例 インフォメーション イベント キャンペーン 適切なセクション名 わかりやすく適切な名前を 商品サービス サーバＡ サーバＢ 教育サービス 検索機能 企業・IR情報 検索 会社概要 ・ ・ ・

12. 4．フロントエンドについて ●クリエイティブなデザインとブランド戦略 企業のWebページ→重要なマーケティングツール ブランド・名称の認知確立→マインドシェアの概念 企業や組織が、社会的認知を 得るために、キャッチコピーなど を駆使し、印象を強める。 Webでは、 ブランドの認知化を 側面から支援する。 <マインドシェア> CIW Official Site ●デザインとブランド戦略に関するミーティング ●アクセスを増やすテクニック

13. 4．フロントエンドについて ●ポータル 特定の話題や分野に特化したポータル 特定のトピックに焦点を絞ったコンテンツ 垂直ポータル 特定のトピックに限定せず、あらゆるWeb サイトやコンテンツを集約したポータル 水平ポータル ●Wikiサイト ●ファイル形式とアクティブコンテンツ Web サーバがWeb ブラウザにコンテンツを送信する際に使用。コンテンツのファイル形式を表現する。 →テキスト中「表1-4：一般的なファイル形式」を参照

14. 5．Webサイトのバックエンド ●データベース接続 ■データベースの種類 ・フラットファイルデータベース 　・リレーショナルデータベース 　・オブジェクト指向データベース ■データベース、Web サーバー、SQL 　・クエリー実行で使用する「SQL」 ■リレーショナルデータベース操作のための用語 　・テーブルの結合 　・内部結合（inner join）・・・AND集合 　・外部結合（outer join）・・・OR集合

15. 5．Webサイトのバックエンド ●ダウンロードにかかる時間と帯域幅の関係 HTMLファイルの容量は小さい、各ファイルごとに ダウンロード 画像や映像といった大容量ファイルの多用は避ける →ダウンロード時間がかかる 一般的に、 ページ全体のサイズが100KBを越えない程度

16. 5．Webサイトのバックエンド ●Web ページのダウンロード所要時間を求める Web ページのファイルサイズ「84 KB」 56 Kbps の回線で接続するユーザが、ダウンロードに 　要する時間の求め方 1.ファイルサイズの単位を変換 84 KB = 84 × 1,024 = 86,016 B 86,016 B × 8 = 688,128 b 1KB=1,024B （バイト） 1B=8b（ビット） 2. 帯域幅の単位を変換 56 Kbps = 56 × 1,000 = 56,000 bps 1Kbps=1,000b ファイルサイズ（b）÷帯域幅（bps） 688,128 b ÷ 56,000 bps = 12.288秒

17. 5．Webサイトのバックエンド ●HTMLファイル名の付け方 ファイル名の長さ制限や、コンテンツに対応した名前を 商品販売用のフォームのページ例 salesform.htm等 拡張子・・・.htm 又は .html 高度な技術を採用したページでは拡張子が異なる場合も Active Server Pagesファイルでは・・・ .asp Java Server Pagesファイルでは・・・ .jsp

18. 5．Webサイトのバックエンド ●デフォルトページとは Webサーバが、デフォルトで表示するように設定された Webページ 1．アドレスにhttp://www.company.com/を入力し、アクセス 2. index.htmlが表示される ■デフォルトページ・ファイル名の例

19. 5．Webサイトのバックエンド ●HTTP 404 – File Not Found エラー 指定したファイルがWebサーバ上に存在しない場合に 表示される。 File Not Foundエラーの例

20. レッスン１　Ｗｅｂサイト制作とは　 このレッスンでは次のことを学びました 1.Webページのオーサリングツール 2.Web ページのデザイン 3.マークアップ言語を管理する標準化団体 4.Webページのフロントエンドとアクセシビリティ 5.クリエイティブなデザインとブランド戦略に関する概念 6.Webページのバックエンド

21. レッスン２　マークアップ言語と 　サイト制作の基礎 このレッスンでは次のことを学びます 1.マークアップ言語の歴史 2.HTMLとXHTMLの違い 3.HTMLとXHTMLそれぞれのバリエーション 4.Webサイト制作のプロジェクト管理 5.知的財産権

22. 1．マークアップ言語の歴史

23. 1．マークアップ言語の歴史 ●SGML（Standard Generalized MarkupLanguage） 文書の構造を記述するためのマークアップ言語 GML（Generalized Markup Language）を標準化 メタ言語（meta language）の機能を備えた言語 ●メタ言語 他の言語を定義するために使用される言語 ドキュメント内の個々の情報の論理的な関係を記述 HTMLは、SGMLによって定義されている ●DTD（DocumentType Definition ／文書型定義） 言語の定義に用いるSGMLの構文→HTMLでも使用

24. 1．マークアップ言語の歴史 ●HTML（HyperText MarkupLanguage） インターネットでハイパーテキストを配信するための言語 ハイパーリンクによって各ドキュメントを関連付ける ●ハイパーテキストとハイパーメディア ハイパーテキストとハイパーメディア テッド・ネルソン氏とビル・アトキンソン氏 ●マークアップ言語 プログラミング言語との違い 文書やデータの論理的構造や表示形式の記述に用いる SGML・・・文書の論理構造を記述 HTML・・・論理構造とともに表示形式も記述 タグ（tag）

25. 1．マークアップ言語の歴史 ●インタプリタ 言語による指示を解釈し情報を表示するプログラム HTML文書中のタグを解釈、その指示に沿いページ表示 ●HTML 3.2 とHTML 4.01 HTMLの標準規格 ●HTML 4.01のバリエーション Transitional（移行型）　下位互換性を備えた仕様 Strict（厳密型）HTML4.01を厳格に用いる仕様 Frameset（フレームセット型）　拡張仕様、フレーム

26. 1．マークアップ言語の歴史 ●XML （Extensible Markup Language） メタ言語→命名規則に従えば自由にタグを定義できる データの要素を構造化して記述するための言語 Webページの書式設定に使用するものではない 　・XSL（Extensible Sytlesheet Language）→レイアウト　 　・XSLT（XSL Transformations）　→書式変換 ●XMLの目的 <h１>タイガーウッズ</h１> HTML 「大きな太字フォントで見出しとして表示する」指示 <golfer>タイガーウッズ</golfer> XML コンテンツに、コンピュータ側で処理可能な意味を定義

27. 1．マークアップ言語の歴史 ●整形式のXML文書のツリー構造 XML仕様に準拠した文書の要件 整形式であること　　　　　　　正しく記述されていること 妥当なXML文書であることDTDを定義していること ●整形式のXML文書 タグが正しい順番でネスティング（入れ子化）されている コンテンツの意味的関係が、ツリー構造となっている 　　　　　　　　　　（論理関係が正しく階層化されている）

28. 1．マークアップ言語の歴史 ●妥当なXML文書とDTD DTDに従って記述された文書であること タグの規則（文法）を定義するために使用 　　　（全てのタグを事前に定義しておく必要があるため） ●XMLとスタイルシート XML文書の表示形式を指定する手段→スタイルシート CSS・・・レイアウト設定のための言語 XSL・・・XML文書を他の形式に変換する機能を備える →スタイルシート ●HTMLからXHTMLへ 従来のブラウザでもWebページとして表示でき、かつXML にも準拠した新しい言語　→XHTML

29. 1．マークアップ言語の歴史 ●XHTML（Extensible Hypertext MarkupLanguage） XML仕様に沿った形でHTMLページを記述する言語 ～XML1.0に基づいてHTML4を再定義したものであり、 　HTML4で定義されている3つのDTDから構成される～ 　　・コンテンツを整理して機械処理しやすくする→XML 　　・ページのレイアウトを表示する→HTML ●XHTMLのバリエーション Transitional（移行型）　文書内での書式記述も容認 Strict（厳密型）　　厳格な仕様。書式設定はCSSのみ Frameset（フレームセット型）　フレームを用いる仕様

30. 1．マークアップ言語の歴史 ●W3C標準に準拠したWebページの作成 良いWeb ページのコーディングとは、どんなブラウザで見ても、そのコンテンツが適切に表示されるコードを書くこと。W3C標準に従ってコードを書くことが重要 ほとんどのブラウザで一貫したWebページが表示される 高い拡張性を持ったWeb ページを作成できる 障害のある人にも利用しやすいWebページを作成できる

31. 2．Webサイト制作にあたっての基本方針 ●プロジェクト管理とWebサイト制作プロジェクトの流れ • Webサイト制作の初期プランの立案と文書化 • 関係者からの関連情報の入手 • Webサイト制作プランの周知 • 技術面・非技術面での検討 • サイトの制作 • サイトの公開 • サイトの運用

32. 2．Webサイト制作にあたっての基本方針 ●Webサイト制作の初期プランの立案と文書化 ラフデザイン・ページ遷移図・仕様書などを作成 • Webサイトを制作目的と、対象ユーザについて •必要なページの概略 •デザインの確認 ●関係者からの関連情報の入手 • Webサイトの目的 • サイトの外見やイメージ • ユーザはWebサイトにどんなサービスを求めているか • サイト制作に必要な資金の確保 • スケジュールの調整

33. 2．Webサイト制作にあたっての基本方針 ここで、テキスト中の演習を行うことができます。 演習2.1　文化的多様性に対応しているWebサイトを調査する ■演習を行うための注意 1. テキストの付属ＣＤが必要になることがあります。 2. テキスト中に書かれている手順に沿って行いましょう。 ここで演習を行わない場合、このまま学習を続けましょう

34. 2．Webサイト制作にあたっての基本方針 ●Webサイト制作プランの周知 口頭や文書で計画のプレゼンテーションを行う • プレゼンテーションソフトウェアの使用 • OHP（オーバーヘッドプロジェクタ）の使用 • ホワイトボードの使用 • 配布資料 ●会議の進め方 ●技術面・非技術面での検討 あまり技術的な知識のないチームメンバーの意見や要望を聞き、それが十分検討されるようにするのもプロジェクトマネージャの役割

35. 2．Webサイト制作にあたっての基本方針 ●サイトの制作 • マークアップ言語によるコーディング • 機能テスト • サイトの承認 • サイトの公開 ●複数のWebブラウザでページをテストする 同じWeb ブラウザでもバージョンが異なれば、HTMLの解釈に違いがある場合がある→レンダリングエンジン 一般に公開されるサイトを制作するのであれば、最も幅広くサポートされている標準に従ってコーディングするのがよい

36. 2．Webサイト制作にあたっての基本方針 ●Webブラウザの種類とバージョン

37. 2．Webサイト制作にあたっての基本方針 ●ブラウザの互換性テストのポイント • テーブルの表示 • HTML仕様との互換性のレベル • 色のサポート • 画像 • スクリプト言語 • XHTML／HTMLのバージョン

38. 2．Webサイト制作にあたっての基本方針 ●サイトの公開 • サイトのIPアドレスとドメイン名 • 公開用Webサーバにアクセスするユーザ名と認証情報 • Webサーバ上の配置ディレクトリ（フォルダ） • 容量 • サイトをアップロードするために使用するプロトコル ●サービスプロバイダと契約する インターネットサービスプロバイダ（ISP） アプリケーションサービスプロバイダ（ASP）

39. 2．Webサイト制作にあたっての基本方針 ●サイトの運用 • 新たなコンテンツを作成する • リンク切れを改善 • 古いサイトを削除する • 使われていないページを削除する • 接続状態を確認する • アクセス障害を報告する • 顧客や関係者からのフィードバックを反映する ●フィードバックを受ける ●良質なフィードバックを受けるには

40. 2．Webサイト制作にあたっての基本方針 ●知的財産権 広く利用可能となっているアイデア、成果、画像に関する法律上の問題を検討する必要がある ●アウトソーシング 業務を外部の専門業者などに発注する形態 秘密保持契約（NDA） 相手方の企業機密などを漏洩しないための契約（覚）書

41. 2．Webサイト制作にあたっての基本方針 ここで、テキスト中の演習を行うことができます。 演習2.2　知的財産権の概念と法律を調べる ■演習を行うための注意 1. テキストの付属ＣＤが必要になることがあります。 2. テキスト中に書かれている手順に沿って行いましょう。 ここで演習を行わない場合、このまま学習を続けましょう

42. レッスン２　マークアップ言語と 　サイト制作の基礎 このレッスンでは次のことを学びました 1.マークアップ言語の歴史 2.HTMLとXHTMLの違い 3.HTMLとXHTMLそれぞれのバリエーション 4.Webサイト制作のプロジェクト管理 5.知的財産権

43. レッスン３XHTMLのコーディング このレッスンでは次のことを学びます 1.XHTML文書の基本的な構造 2.XHTML文書を構成する要素 3.規格に準拠したXHTML文書 4.XHTMLタグを使った段落や書式の設定 5.コーディングの技法

44. 1．XHTMLの利用について

45. 2．XHTMLのタグと要素 タグを用いて「要素」を記述する タグ・・・山形括弧（"<" と">"）で囲まれた文字列 ●要素の書き方 ・開始タグと終了タグの２つを対にして記述 ・終了タグにはスラッシュ（/）が含まれる ・囲む内容が空である場合は、空要素の記述でも可

46. 2．XHTMLのタグと要素 ●タグの構成 要素 タグによって記述する要素の名称 属性 それぞれの要素に応じた特定の指示 属性に、具体的な数値や単語を指定 属性に続き「＝” “」の形で記入 値(属性値) < divalign =“center"> 指令 形状 = 特定

47. 3．文章構造を記述する要素 DOCTYPE 宣言　文書の冒頭に記述して、文書の種類を指定する html 要素　XHTML 文書全体を表す要素 xmlns 属性　必ず記述する属性 lang 属性　言語を指定する属性 head 要素 meta 要素　XHTML文書についてのさまざまな付加情報を指定 link 要素　スタイルシートを参照するための要素 title 要素　文書のタイトルを指定するための要素 body 要素　文書の本文

48. 3．文章構造を記述する要素

49. 3．文章構造を記述する要素 例　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> DOCTYPE宣言 <html>例　<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta>　例　<meta name=“keywords" content="CIW,ファンデーション"/> 例　<meta name=“description" content="CIWファンデーション・コース向け"/> <title>例<title>Habitat for Humanity International Campus Chapter</title> </head> <body> （本文内容） ・・・ ・・・ ・・・ </body> </html>

50. 3．文章構造を記述する要素 ●XHTMLにおける大文字と小文字の区別 タグは小文字表記→XHTMLでは小文字と大文字を区別、 ■例 <HTML> <head> <title> これはHTML 文書です</title> </head> <body> <h1> XHTML 文書の作成</h1> <p> XHTML の要件を学習します。 <list> <li> 整形式にする <li> 既存のHTML 要素の使用 </list> </BODY> </html> XHTMLとして無効 HTMLとして有効 DOCTYPE宣言 も正しく追加