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

Slides:



Advertisements
Similar presentations
1 実技演習1 2008/01/28,29 JaLTER Morpho 講習会. 2 起動・接続 各自、コンピュータを起動してネットワーク に接続してください。 各自、コンピュータを起動してネットワーク に接続してください。 IP アドレス自動取得 IP アドレス自動取得 無線 LAN 使用可 無線.
Advertisements

XML ゼミ 独習 XML ~ 第 6 章 XHTML~ 6.1 XHTML の概要 6.2 XHTML の構造 谷津 哲平.
コンピュータ基礎実習 ( 上級 ) 第三回 ウェブページの作成について2 清水淳紀. 前回までの内容  ページの簡単な作り方。  ページの編集・アップロード・確認 方法について。  ページはメモ帳や Kompozer 等で編集できる。 ウェブサー バーにアップロード  ページを公開するには、必要ファイル群をウェブサー.
データベースの基礎知識 ACEESS の基本操作. データベースの基礎知識 データベース  特定のテーマや目的に毎のデータの集合体 データベースソフトウェア  データベースを作成、管理するソフトウェアの総 称 Oracle(Oracle) IBM(DB2) Microsoft(SQL Server)
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
ウェブページビルダーマニュアル 株式会社 SOIYAA.
ASP入門 - Windows 2000 Server 活用 -.
4.ユーザー登録マニュアル              Version 年6月10日 国立情報学研究所.
情報基礎A 情報科学研究科 徳山 豪.
2017/3/2 情報処理 第8回.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
WordPressの基礎.
2017/3/7 情報処理 第8回.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
CMSとは?.
HTMLの記述と WWWにおける情報公開 遠藤
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔.
早稲田大学大学院理工学研究科 情報科学専攻修士2年 後藤滋樹研究室 坂本義裕
ホームページの作り方.
e ポートフォリオ(Mahara)の使い方
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
Webサイト運営 09fi118 橋倉伶奈 09fi131 本間昂 09fi137 三上早紀.
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
研究基盤総合センター 応用加速器部門 木村博美
文献管理ソフトRefWorksの利用.
アプリケーション共有機能 〈参考〉 (図1) (図2)
HTTPプロトコルとJSP (1) データベース論 第3回.
Webを利用した授業支援システムの開発 北海道工業大学 電気電子工学科 H 渋谷 俊彦.
HTTPプロトコル J2EE I 第7回 /
Web上で管理・利用できる 面接予約データベースシステムの構築
サイト運営者へむけて、CMS管理画面をつかって サイト運営していく方法を紹介します。
情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
※お使いの機種により画面イメージは異なります
SGMLについて 2年8組  原口 文晃.
パートナー様向け 仕事のご説明資料 関係者外秘 (他の方に絶対に開示しないでください).
データベース設計 第9回 Webインタフェースの作成(1)
基幹理工学研究科 情報理工学専攻 後藤研究室 修士1年 魏 元
基礎プログラミング演習 第1回.
プログラミング 設計資料 メンバー:.
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
管理画面操作マニュアル <サイト管理(1)> 基本設定 第9版 改訂 株式会社アクア 1.
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
ネットショップデザイン入門Ⅰ・ⅡSEO 2013/12/18 Webデザイン入門 SEOの基本.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
3.1 PowerPoint の概要 PowerPointを使ってできること
情報スキル活用 第3週 基礎技術ー3 : 学部・学科紹介のページ作成.
コンピュータ プレゼンテーション.
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
コンピュータ プレゼンテーション.
ウェッブページ書法の復習 ネットワーク論以前のお話.
情報コミュニケーション入門b 第11回 Web入門(2)
コンピュータ プレゼンテーション.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
情報処理 第13回の教材 プレゼンテーションソフト PowerPoint 高知大学 共通教育 理学部 対象 担当教員 : 塩田
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
Microsoft SharePoint Online の Web サイトを カスタマイズする方法
第14回放送授業.
Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

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

ウェブページ 聖学院大学 表示⇒ソース HTMLが正確かどうかチェックする。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ランキングhttp://www.aland.to/~lintrank/table.html 正確でないと何が問題か?→表示できない機械

XMLとXHTML XMLとは SGML SGMLを簡略化した→HTML、XML XMLをウェブ用に→XHTML http://e-words.jp/w/XML.html 教科書 50ページ SGML http://www.sophia-it.com/content/SGML SGMLを簡略化した→HTML、XML XMLをウェブ用に→XHTML http://e-words.jp/w/XHTML.html

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

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

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

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

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

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

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

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

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

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

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

RSS ( RDF Site Summary ) ヴァージョンによって何の略か違う http://www.atmarkit.co.jp/fnetwork/rensai/5minrss/01.html http://www.google.com/reader/

無料のcms NetCommons XOOPS Drupal Joomla!

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