Presentation is loading. Please wait.

Presentation is loading. Please wait.

ウェブページの仕組みとCMS 田村貴紀.

Similar presentations


Presentation on theme: "ウェブページの仕組みとCMS 田村貴紀."— Presentation transcript:

1 ウェブページの仕組みとCMS 田村貴紀

2 今日の要点 クライアントサーバーシステム HTMLとXHTMLというものがある CMSというウェブサイト構築方法

3 ホームページ(Home Page) ホームページ(Home Page) :ウェブブラウザでどこかのサイトを訪れたとき、最初に表示される画面のこと ウェブページ、ウェブサイト

4 クライアントサーバーシステム クライアント側のコンピューターとサーバーが、互いに処理を分担しながら連携して動作するシステムのこと。C/Sと略記する場合もある。サーバー側にデータベースを置いてクライアントから利用するケースが多い。 ピアツーピア P2P サーバーとクライアントといった主従関係があるネットワークではなく、互いに対等の立場になっているネットワーク環境のこと。音声通話ソフトSkype、 Winnyなどのファイル交換ソフト

5 クライアント・サーバーシステム 次に、「ホームページを開設するまで」、つまり、自分が契約しているISPにホームページのコンテンツを渡すまでの手順を解説しましょう。ユーザー(クライアント)からサーバにコンテンツを渡すことをアップロード(Upload)と言い、反対に、サーバからコンテンツをもって来ることをダウンロード(Download)と言います. あらかじめ、この章の後半で解説するような手順で自分のホームページ(HTML文書)を作成していて、パソコンのハードディスクなどに保管しているものとします。 まず、ISP(Internet Service Provider)に接続します。これに対してISPは、手持ちのIPアドレスのうち、空いているものを接続してきた個人ユーザーに割り振ります。これで、ISPとの間でIP接続が完了しました。次に、作成しておいたホームページの内容(HTML文書)を、ISPに転送します。このとき、FTP(FileTransferProtocol、ファイル転送プロトコル)という専用のプロトコルを利用します。

6 ウェブページとHTML,XHTML ウェブページは、テキストファイル。
ウェブページは、HTML(Hyper Text Markup Language、ハイパーテキスト・マークアップ言語)で書かれている。 または、XHTML(eXtensible HyperText Markup Language)で書かれている。

7 何故テキストファイルが良いのか 共通性、汎用性がある 違うOSでも読める テキストファイル 文字だけ
テキストファイル 文字だけ バイナリファイル 特定のアプリケーションソフトが利用するファイル MS Wordのファイルとテキストファイルの比較 テキストエディターを起動してみる。 テキストファイルの方が便利なこともある。

8 HTMLの構成 1つのHTML文書(ファイル)は次の2つの部分から構成されます。 そのHTMLファイル自身に関する情報
読者に読んでもらう本文

9 HTMLの要素 1番目の部分をHTMLのhead要素 2番目の部分をbody要素
タグは要素の名前を山括弧( < と > )で囲んだものです。つまりhead要素を示すタグは<head>となります。 通常タグは2つをペアで使う。:開始タグ、終了タグ 終了タグ→最初の山括弧を</。 <head> </head>

10 HTMLの骨格 <html ...> <head> ヘッド要素の内容 </head>
<body> ボディ要素の内容 </body> </html> これがHTMLの骨格です。あとはこれにいろいろな内容を肉付けしていけばよいのです

11 その他の要素01 タイトル:title要素 段落:p要素(Paragraph)。 見出し:heading要素
見出しを示すのは、h1~h6の6つのheading要素です。h1が大見出し、h2が中見出しと、数字が大きくなるにつれて下位レベルの見出しになっていきます。通常、大見出しの次にいきなり小見出しがこないように、h1の次に突然h4を使ったりせず、h1, h2...と順番に使っていってください。

12 その他の要素02 リンク:a要素 → <a> 画像を掲載:img要素
リンク先は、このa要素の開始タグに、属性という付加情報を加えて示します。ここではhrefという属性を使います(要素名と属性は半角のスペースで区切ります)。 <a ref=“ ”>聖学院大学</a> 画像を掲載:img要素 画像を表示しない利用者のためにalt <img src="me.jpg" alt=”写真”/> srcが画像ファイルの在処(URL)、altが代替文です。 画像ファイルの名前を変えてみましょう。

13 HTML文書や画像ファイルのファイ ル名は、以下の点に注意。
基本的に 半角英数字 のみを用いる。 使用可能な記号はドット(.)、ハイフン(-)、アンダーバー(_) スペース文字を含んだファイル名は使用しない。 大文字・小文字をちゃんと使い分ける。 ○ test.html ○ test-page.html × test&page.html × テスト.html

14 ウェブページ 聖学院大学 表示⇒ソース HTMLが正確かどうかチェックする。
ランキング 正確でないと何が問題か?→表示できない機械

15 XMLとXHTML XMLとは SGML SGMLを簡略化した→HTML、XML XMLをウェブ用に→XHTML
教科書 50ページ SGML SGMLを簡略化した→HTML、XML XMLをウェブ用に→XHTML

16 XML(XHTML)の良いところ XHTMLは、何がいいのか→コンピューターで処理できる部分が増える ブログ検索
日付で分類されている。→コンピューターでわかるような目印がウェブページについているから。 RDF(Resource Description Frame) p.50 教科書 50ページ

17 CMSとは  Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェアのこと。広義には、デジタルコンテンツの管理を行なうシステムの総称。

18 CMSの一般的な仕組み サーバー データベースソフト 入力機能 出力機能 HTML自動生成 データをデータベースソフトで管理 入力 アクセス

19 簡単更新  Webサイトを構築: テキストや画像を作成 HTMLやCSSなどの言語でレイアウトや装飾を行ない、 ページ間にハイパーリンクを設定する とっても大変。これらの要素を分離してデータベースに保存し、サイト構築をソフトウェアで自動的に行なうようにしたものがCMSである。

20 CMSを導入すれば HTMLなどの知識を習得する必要はなく また、サイト内のナビゲーション要素なども自動生成する
ページが追加されるたびに関連するページにリンクを追加するといった煩わしい作業からも解放される。

21 CMSには  CMSには、作成できるサイトの自由度の高い汎用的なソフトのほかに、WikiやWeblog(Blog、ブログ)など、コンテンツの管理の仕方やサイトのコンセプトに特徴のあるソフトもある。 また、それぞれについて、企業のサイト構築に利用するための商用ソフトウェアや、無償で公開されているフリーソフトウェアがある。Webサイトのホスティングの形でCMSが利用できるサービスもある。

22 共同作業ができる                                                                  図の「担当者A」は、デザイナーではない。Webコンテンツとなる文字などを、あらかじめ決められたフォーマットのボックスに入力しているだけである。WordやExcelなどからのコピー&ペーストもこの画面上で行える。  中心の「担当者B」は、Aの上位の管理者である。Bは、内容の確認をしたり、自分で追加の入力などを行い、これを配信してよいかどうかの決定(承認)を行っている。このとき図では、「プレビュー」を参照している。これは実際のWebページとしてどう表示されるかを確認しているのである。  つまり、Web CMSにおいては、コンテンツそれぞれの内容と、デザインは別個になっているのである。それを付き合わせて初めてWebページができあがる。もちろん、コンテンツの入力項目と、デザインの表示項目とは一致していなければならない。そうした内容項目の設定やデザインそのものは「テンプレート」と呼ばれる。  Bによって承認されたコンテンツは、今度はWebマスターの元に届けられ、最終的に公開するか否かの決定が行われ、公開する場合には、公開開始の日時などを指定する。あとは公開用のWebサーバーにコンテンツが上げられ、設定したスケジュールにのっとって公開されることになる。公開終了も同様にコントロールできる。

23 内容とデザインの分離 CMSにおいては、コンテンツそれぞれの内容と、デザインは別個になっている
それらを付き合わせて初めてWebページができあがる。 コンテンツの入力項目と、デザインの表示項目とは一致していなければならない。そうした内容項目の設定やデザイン⇒「テンプレート」と呼ばれる。

24 管理機能:【自動インデキシングと ナビゲーション生成】
管理機能:【自動インデキシングと ナビゲーション生成】  コンテンツの追加や更新により、コンテンツの関連性が変更されると、ナビゲーション部分のインデキシングが自動的に変更され、コンテンツ間のリンクが適切に更新される機能。

25 【公開のスケジューリングや公開 サーバーへの自動配信】
【公開のスケジューリングや公開 サーバーへの自動配信】  コンテンツごとに、公開サーバーで公開する日時、公開終了する日時をあらかじめ予約でき、スケジュール管理が行える。また、公開サーバーの内容を確認し、完全な形で公開(更新)を自動的に行う機能がある。

26 【ページの履歴管理】  過去のある時点で公開されていたページの情報を蓄積し、履歴を管理(バージョン管理)することができる。通常はファイル単位の履歴管理であるが、製品によってはサイト単位での履歴を残す事ができ、任意の時点のサイトにロールバック(復旧)することができるものもある。

27 RSS ( RDF Site Summary ) ヴァージョンによって何の略か違う

28 無料のcms NetCommons XOOPS Drupal Joomla!

29 ナビゲーション メニュー 副次的メニュー


Download ppt "ウェブページの仕組みとCMS 田村貴紀."

Similar presentations


Ads by Google