1 / 60

情報処理 II www による情報発信とサービス提供 I

情報処理 II www による情報発信とサービス提供 I. 第 2 回 2014 年 4 月 17 日 大塚 智宏. 本日の予定. この講義について （第 1 回の 抜粋） Web の歴史と仕組み Web とは インターネットと Web の歴史 Web による情報提供の仕組み 簡単な HTML を書いてみよう 文字コードについて. この講義について. 情報 処理 II （春学期）の内容. HTML と CSS による Web ページの作成 Web ページの構造や意味を理解する Web 作成ツールは使わず，テキストエディタで記述

vielka-lang
Download Presentation

情報処理 II www による情報発信とサービス提供 I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 情報処理IIwwwによる情報発信とサービス提供I 第2回 2014年4月17日 大塚 智宏

  2. 本日の予定 • この講義について （第1回の抜粋） • Webの歴史と仕組み • Webとは • インターネットとWebの歴史 • Webによる情報提供の仕組み • 簡単なHTMLを書いてみよう • 文字コードについて

  3. この講義について

  4. 情報処理II（春学期）の内容 • HTMLとCSSによるWebページの作成 • Webページの構造や意味を理解する • Web作成ツールは使わず，テキストエディタで記述 • CMS等のツールを使いこなすための基礎技術を習得する • HTML5 + CSS3 を基本として学習していく • と言っても，そんなに高度な内容には踏み込まない • Webサイトのトータルデザイン • 不特定多数が閲覧する，公共性の高いWebサイト • さまざまな環境，利用者への対応 • Webやネットワークに関する基礎知識 • TCP/IP，HTTPの基礎

  5. 授業内容に関する注意点 • Webの 「デザイン論」 を学ぶわけではない • Webクリエイターを養成するための授業ではない • 私自身そういう職種の人間ではないので • あくまで，Webに関する基礎知識・技術の習得が目的 • Webページの価値は，見た目だけで決まるものではない • Webオーサリング（作成）ツールは使わない • アプリケーションの使い方を学ぶ講義ではない • Dreamweaver，ホームページ・ビルダー，各種CMS等 • HTMLの構造や意味を理解することに重点を置く • 技術的な話が中心になるので，「Web」 という言葉のイメージだけで履修を決めると後で後悔するかも

  6. 受講前の準備 • 必要なアカウント • ITCアカウント • 「ua123456」 のような形式のID • ITCのパソコン室で実習をしたり課題をやるのに必要 • keio.jpのアカウント （慶應ID） • 「otsuka@x7.keio.jp」 のような形式のID • 講義資料をダウンロードしたり課題を提出するのに必要 • 授業資料は，keio.jpの 「授業支援」 上で配布 • 同じものを別サイトにも置く （後で説明） • 印刷の必要はない （資源節約に努めましょう） • 教科書はなし （参考書は紹介する）

  7. 授業の進め方 • まず，講義資料をもとに講義を行います • だいたい1時間前後～が目安 • ときどき途中で実習の時間を設けます • 質問はいつでもどうぞ • 講義後，課題を出す場合があります（秋はほぼ毎回） • 残った時間で課題をやって構いません • ただし，その場ですぐに終わるようなものばかりではない • 課題は 「授業支援」 上で期日までに提出 • 成績に反映します • 最終課題として，大きめの課題を出します • 大きく成績に反映します • 試験は行いません

  8. その他の注意事項 • 質問はいつでも可 • 手を挙げても気付かないことが多いので呼び止めて下さい • 講義中，作業等をしていても構いません • 課題を始めていてもOK • ただし，パソコン室のルールとして食事は禁止 • うるさくするのもダメです • 出席は取りません • が，あんまりサボるとついていけなくなると思います • 特に秋学期

  9. 成績評価方法 • 課題をもとに評価 • 各回の課題: 約6割 • 最終課題: 約4割 • 評点の付け方については様子を見て決めます • 最終回の講義時に目安を示します

  10. 授業計画 • 第1回（4/10） イントロダクション • 第2回（4/17）Webの歴史と仕組み／簡単なHTMLの書き方 • 第3回（4/24）HTMLの基本構造／基本的なHTML要素（１） • 第4回（5/1） 基本的なHTML要素（２）／HTML文書のメタ情報 • 第5回（5/8）URLとURI／Webページの公開／表の作成 • 第6回（5/15） 画像の利用／CSSの基礎／基本的なプロパティ（１） • 第7回（5/22）基本的なプロパティ（２）／クラスとID／セレクタ • 第8回（6/5）ボックスモデル／視覚整形モデル • 第9回（6/12）段組みレイアウト／様々なスタイル指定（１） • 第10回（6/19）様々なスタイル指定（２）／CSSに関するその他の話題 • 第11回（6/26）Webアクセシビリティ • 第12回（7/3）TCP/IPネットワーク入門／HTTPの基礎 • 第13回（7/10）HTTPの応用的な話題／その他の話題 • 第14回（7/17）課題の解説／復習とまとめ （内容や順番は多少変更する可能性がある）

  11. 講義資料など • 自作のスライドをもとに講義を行う • 教科書はなし • 参考書は随時紹介 （特に買う必要はない） • 講義資料置き場 • keio.jp 「授業支援」 のこの講義のページ • 履修確定前は 「教材（塾内公開）」 のところに置きます • 以下のページ （ブックマークしておくと良い） • http://user.keio.ac.jp/~aa202427/josho/ • 私の連絡先 • otsuka@itc.keio.ac.jp • 授業時以外に質問する場合は基本的にメールで • ただし，すぐに返事が来るとは思わないでください • 課題の締切直前などに質問されても，回答できるとは限りません

  12. Webとは

  13. Webとは何か？

  14. Webとは何か？

  15. Webとは何か？

  16. Webとは何か？ • イメージは沸くが，明確な定義はなかなか難しい • 「Webブラウザ」 を通して利用するもの？ • 「何を」 利用するのか？ • Webブラウザを通してでないと利用できないのか？ • 「インターネット」　「ネット」 ？ • 本来 「インターネット」 はWebが提供されているインフラを指す言葉だが，Webのことを 「インターネット」 と呼んでいる場合も多い • 現在ではインターネットの利用シーンの多くをWebが占めているのは事実であり，この誤用も当然と言えなくもない • その昔，MicrosoftはInternet Explorerへのショートカットのアイコンを 「インターネット」 と名付けた • 「ホームページ」 ？ • これも本来は 「Webブラウザを起動した際に表示されるページ」 のことであり，誤用が広まったものと考えられる • 現在では各Webサイトそのものの意味にも用いられる

  17. Webとは何か？ • 具体的な利用シーンと手順を思い浮かべてみる 例： 「STAP細胞」 について調べたい • 利用する端末 （PC，スマートフォン等） を準備（起動）する • ネットワーク （インターネット） に接続する • Webブラウザを起動する • 検索エンジン （Google，Yahoo!等） のサイトを開く • 検索語として 「STAP細胞」 を入力し，検索を開始する • 表示された検索結果の中から目的に合っていそうなサイトを選択し，リンクを辿ってそのサイトに移動する • サイト内で情報を探したり，サービスを利用したりする • 6，7を繰り返し行い，場合によっては5に戻って検索語を追加・変更して検索結果の絞り込み等を行う

  18. Webとは何か？ • キーとなる言葉・フレーズを赤字にしてみた 例： 「STAP細胞」 について調べたい • 利用する端末 （PC，スマートフォン等） を準備（起動）する • ネットワーク （インターネット） に接続する • Webブラウザを起動する • 検索エンジン （Google，Yahoo!等） のサイトを開く • 検索語として 「STAP細胞」 を入力し，検索を開始する • 表示された検索結果の中から目的に合っていそうなサイトを選択し，リンクを辿ってそのサイトに移動する • サイト内で情報を探したり，サービスを利用したりする • 6，7を繰り返し行い，場合によっては5に戻って検索語を追加・変更して検索結果の絞り込み等を行う

  19. Webとは何か？ • Webの特徴を理解するためのキーワード • インターネット • Webは，インターネットに接続することで初めて利用可能になる • Webブラウザ • Webにアクセスし，サイトの内容を閲覧するためのソフトウェア • 通常は，ブラウザなしで直接Webを利用するのは困難 • リンク • Webのもっとも大きな特徴の一つは，リンク（ハイパーリンク）によってサイトやページ間を相互に移動できるようになっていること • 情報の検索，サービスの利用 • Webの元々の機能は，インターネット上の情報（文書）の検索・参照 • 近年では，これに加えて様々な便利なサービスが利用可能に • 情報の取捨選択 • Webに存在するのは必ずしも必要・有益な情報ばかりではない

  20. Webとは何か？ • 以上をまとめてみる • インターネット上で提供されている様々な情報やサービスを，Webブラウザを介して検索・参照・利用するためのシステム • ハイパーリンクと呼ばれる仕組みによってサイトやページ間を相互に移動できるようになっているのが大きな特徴 • 必ずしも必要・有益な情報ばかり存在しているわけではなく，目的に応じて情報を取捨選択する必要がある

  21. Webとは何か？ • 足りないものは？ • Webサイトを 「作成」 「公開」 する側の視点がない • Webの世界では，誰もが情報やサービスの発信者になりうる • 発信した情報は，不特定多数の人によって取得・閲覧される • サイトを作成・公開する上で考えなくてはならないこと • 「情報」 や 「サービス」 をどのように表現するか • それらをどうやって公開するか • 本講義では，主にこれらのことについて学ぶ • あくまで技術的な話を中心に • なお，「サービス」 の表現方法については秋学期の講義で扱う

  22. Webとは何か？ • 改めて，Webとは何か？ • これまで説明したようなものをWebと呼んでもよさそうだが，言及できていない側面も多々存在する • 社会インフラとしてのWeb，日常生活の一部としてのWeb，等々 • 変化の激しい分野なので，何年か後にはこれらの説明の一部は通用しなくなっているかも • とは言え，根本的な仕組みは登場した頃からあまり変わっていない • 万能のツールというわけではない • Webにできないこともたくさんある • 逆に害になってしまうようなケースもある

  23. インターネットとWebの歴史

  24. 「インターネット」 とは？ • "internet" と "the Internet" は違う • internet • 複数のネットワークを相互接続するためのネットワークのこと • the Internet • "internet" のうち，地球規模で接続・運用されている世界最大のネットワークの呼称 （固有名詞的に使われる） • 日本語の 「インターネット」 は通常こちらを指す • 1990年代のWebの普及によって爆発的に利用が増加，規模拡大 • 接続している組織がそれぞれのネットワークを管理している （ことになっている） • IPアドレス，ドメイン名等の共用リソースの一部はICANN等の国際機関が管理している • 通信方式として 「TCP/IPプロトコルスイート」 が使われる

  25. インターネットができるまでの話（１） • 昔のネットワーク （1980年代以前） • 大型計算機用ネットワーク，パソコン通信のネットワーク • 各ネットワークは独立しており，互いに通信できなかった • 物理的に接続する機能がない • 通信の方式が違う • 通信相手を特定することができない 大型計算機 パソコン通信 ホストサーバ 独自の ネットワーク 電話回線 端末 端末 端末 PC PC PC

  26. インターネットができるまでの話（２） • 異なったネットワーク同士を接続するには？ • 共通の通信方式，および通信相手の指定方法が必要 • TCP，IPをはじめとする各種プロトコルの誕生 • 複数のネットワークを物理的に接続する装置が必要 • IPの 「パケット交換」 を行う装置 （ルータ） の登場 ？ 大型計算機 パソコン通信 ホストサーバ 独自の ネットワーク 電話回線 端末 端末 端末 PC PC PC

  27. インターネットの誕生 • ネットワークのネットワーク （the Internet） • 特定メーカの機器や接続方式に依存しないネットワーク • 「IPアドレス」 による通信先の指定方法の統一 • TCP，IPやその上位プロトコルによる通信方式の統一 • やがて，世界中の端末が互いに通信を行うことが可能に インターネット ルータ ルータ TCP/IP A社 ネットワーク B社 ネットワーク サーバ PC PC サーバ PC PC 192.168.1.2 172.16.3.4

  28. インターネットの普及 • インターネットの誕生による需要喚起 • 接続機器・方式に依存しない汎用ネットワーク • 国境を越えて成長する大規模ネットワーク • 各種アプリケーションの誕生 • 電子ニュース，電子メール，ファイル共有，情報検索 • Web （World Wide Web，WWW） の誕生 （1991年） • 誰もが世界中に情報を発信することが可能に • 1990年代の爆発的なWebの普及 • インターネット＝Webのような誤用が広まるまでになった • 2000年代以降のさらなる発展 • 各種Webサービスの普及，Web利用端末の多様化 • 誰もが双方向に情報をやり取りする時代へ

  29. Webによる情報提供の仕組み

  30. インターネット上の情報提供サービス • 電子ニュース • 掲示板と似ているが，記事のデータは電子メールに近い • メーリングリスト • 電子メールによる情報の一斉送信 • ファイル共有 （FTP等） • 今でもファイルの配布やアップロードなどに利用される • 情報検索システム （Gopher，WAIS等） • Webの普及と共に衰退し，使われなくなった • Web （World Wide Web，WWW） • 現在では情報提供サービスとして最も一般的なだけでなく，インターネット上で最も利用されているシステムである

  31. Webのよいところ • ユニバーサル （誰でも使える・普遍的） である • HTMLという共通言語をサポートしていれば，どんな機器や環境からでもアクセスすることができる • 誰でも情報を世界中に公開することができる • コンテンツの内部構造を表現できる • HTMLをサポートしていれば，例え人間でなくても文書の論理構造を理解することができる • さまざまなメディアをサポートしている • 文章だけでなく，画像，音声，動画などのメディアを扱うことができる

  32. さまざまな環境（１） • 機器・機種の違い • PC，携帯電話，スマートフォン，TV，ゲーム機等 • OSの違い • Windows，Mac OS，Linux，iOS，Android等 • ブラウザの違い • Internet Explorer （IE），Firefox，Safari，Opera，Google Chrome等

  33. さまざまな環境（２） • テキストブラウザ • 画像を表示できない端末などで利用される • RSSリーダ • Webサイトを巡回して更新情報等をチェック • Blogやニュースサイト等で利用される • 視覚障害者用の音声ブラウザ • サイトの構造を読み取り，音声で内容を読み上げる • 弱視用ブラウザ • 大きな字で表示したり，画像のコントラストを強くしたりする • 検索エンジン用巡回ロボット （クローラ，Bot） • サイトを周期的に巡回し，検索用にデータベース化する • 印刷用ブラウザ • 印刷範囲指定や縮小印刷などに利用

  34. 「悪しき慣習」 • 実際には，様々な 「悪しき慣習」 が，これらの多様な利用を妨げているケースがよくある • 初期のHTMLの設計の甘さも原因の一つ • 「悪しき慣習」 の例 • 「Internet Explorer 6.0 でご覧ください」 • 「Flashプラグインが必要です」 • 「フルカラー，1024x768ピクセルの環境でご覧ください」 • 利用者側の環境を指定することが一概に良くないとは言えないが，最適な環境でなくても情報を取得できるようにしておくことが大切

  35. Webの基本的な構造 • Webの3要素 • URI： 情報の 「場所」 を表現 • HTML： 情報の 「中身」 を表現 • HTTP： 情報の 「交換方式」 を定義 ユーザエージェント （Webブラウザなど） HTMLファイル sample.html URI （URL） http://www.hoge.com/sample.html Hello! <html> <head> <title>Sample</title> </head> <body> <p>Hello!</p> </body> </html> HTTP (HyperText Transfer Protocol) Web サーバ www.hoge.com Web クライアント インターネット PC，携帯電話など

  36. Webを支えるHTML • HTML （Hyper Text Markup Language） • Webページの内容 （＋論理構造） を記述するための言語 • 文章に 「タグ」（後述） を付加 （マークアップ） することにより，構造を定義したり意味を与えたりすることができる <li class="info_notification"><span class="importancename">[一般]</span> <a href="/ja/hc_news_TA_advertise_3.html" class="newstitle"> 【募集期間延長】日吉ITCヘルプデスク担当TAの募集 </a>&nbsp; (2012年4月16日) <div class="newshead"> 日吉ITCヘルプデスク担当TAの募集期間を4月27日(金)まで延長しました。奮ってご応募ください。 日吉ITCでは、日吉キャンパス内の設置PCエリアにおける学生利用環境の維持、障害発生対応、学生等か ... <a href="/ja/hc_news_TA_advertise_3.html">全て読む</a></div> </li> <li class="info_notification"><span class="importancename">[一般]</span> <a href="/ja/news_20120411_hc.html" class="newstitle"> 日吉ITC情報ネットワークアカウントのメール転送の障害について </a> &nbsp; (2012年4月11日) <div class="newshead"> 3月まで日吉ITC情報ネットワークアカウントをご利用だった教員向けに提供しておりますメール転送設定におきまして、システムに不備があり下記のとおり転送されておりませんでした。 現在は復旧しています。 ... <a href="/ja/news_20120411_hc.html">全て読む</a></div>

  37. HTMLの仕様 • W3C （World Wide WebConsortium） によって作られている • http://www.w3.org/ • HTMLのほか，CSS，XML，SOAPなどのWebに関わるさまざまな仕様を策定している • 各仕様は，「勧告」 という形で公開される • 現在は，HTML5の策定が進行中 • 2014年内の正式勧告を目指しているようだが，どうなるか…

  38. 簡単なHTMLを書いてみよう

  39. 単純なHTML文書 • 要素 （エレメント） • 開始タグ＋内容＋終了タグで構成される • HTML文書は，複数の要素が入れ子になっている • タグ • 開始タグ： <要素名> • 終了タグ： </要素名> • 内容・終了タグのない要素（空要素） もある • 要素名に大文字・小文字の区別はないが，読みやすさや互換性を考えて小文字を強く推奨 <html> <head> <title>テストHTMLファイル</title> </head> <body> <p>これはテストで作ったHTMLファイルです。 試しに、<a href="http://www.keio.ac.jp/"> 慶應のページへのリンク</a>を作ってみます。 </p> </body> </html>

  40. HTML文書を書いてみよう • HTMLファイルは，「テキストファイル」 として作成する • 画面に表示できる文字のみで構成されるファイル • どんな環境でも処理できるため，汎用性が高いファイル形式 • テキストファイルでないファイルは 「バイナリファイル」 と呼ぶ • 編集には 「テキストエディタ」 を使う • 日吉ITCのWindowsで利用可能なテキストエディタ • メモ帳 （Windows標準） • 慣れてくると機能に物足りなさを感じるかも • TeraPad • メモ帳より高機能で，初心者から上級者まで使える • NTEmacs • Emacsという有名なエディタのWindows版 • プログラマなどに愛用者が多いが，やや上級者向け

  41. その前に… • このスライドを画面上で見られるようにしておくとよい • 以下のページから 「2014-1-02.pptx」 をダウンロード • http://user.keio.ac.jp/~aa202427/josho/

  42. HTML文書の作成（１） • TeraPadを起動 • スタートメニュー ⇒ 「すべてのプログラム」 ⇒ 「TeraPad」 ⇒ 「TeraPad」 • ※画面写真はWindows XPのものなので若干異なります

  43. HTML文書の作成（２） • HTML文書の内容を入力する • ここでは，以下の内容を入力 • TeraPadではHTMLタグ等を色付きで表示してくれる

  44. HTML文書の作成（３） • 入力終了後，「文字/改行コード指定保存」 を選択し，「UTF-8N」 を指定して 「OK」

  45. HTML文書の作成（４） • 新規作成の場合，ファイル名を付ける必要がある • ‘.’の後ろ（拡張子）は 「html」 とする • ‘.’の前は任意だが，日本語（全角文字）は使わない • 記号やスペースも基本的に使わない （‘-’くらいは平気） • また，大文字もあまり使わない方がよい

  46. HTML文書の表示（１） • 保存したHTMLファイルをダブルクリック • 「マイ ドキュメント」 内にあるはず

  47. HTML文書の表示（２） • Internet Explorerが起動し，内容が表示される • ブラウザによって整形されて表示される

  48. HTML文書の再編集 • ダブルクリックするとブラウザが起動してしまうので，以下のいずれかの方法で開く • TeraPadを起動し，「ファイル」 ⇒ 「開く」 でファイルを選択 • ファイルのアイコンを右クリック ⇒ 「プログラムから開く」 でTeraPadを選択

  49. 他のブラウザで表示する • 例として，Firefoxで表示してみる • Firefoxを起動し，「ファイル」 ⇒ 「開く」 でファイルを選択 • ファイルのアイコンを右クリック ⇒ 「プログラムから開く」 でFirefoxを選択してもOK

  50. 自分のPCでTeraPadを使いたい場合 • 公式サイトからダウンロードしてインストールする http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html • Vectorや窓の杜にもあります • "TeraPad" で検索すればすぐ出てきます

More Related