12．Webデザイン技術
目標 Ｗｅｂサイトのデザインと技法を習得する。
(1)表現力・アイデア
① インターネットの３大機能
ア． WWW World Wide Web
イ． FTP File Transfer Protocol
ウ． Mail 電子メール hirose@bungu.co.jp
② インターネットはTCP/IPで世界中がつながっている
ア． Transmission Control Protocol データをパケットにして送る
イ． Internet Protocol IPアドレスでルーターが振分けルーティング
③ IPアドレスは32bitの2進数を、8bitに区切り10進数に変換して表示
例： 202.230.39.45 ダブルとネットワークがダウン
④ ドメイン名 IPアドレスを文字に置換え憶えやすくした DNSで変換
例：アサヒ商会 bungu.co.jp 会社
ポリテク群馬 gunma-pc.ac.jp 学校
厚生労働省 mhlw.go.jp 政府
群馬インターネットwind.ne.jp プロバイダー
汎用ドメイン 英文表記 bank.jp
汎用ドメイン 日本語表記 オフィスエキスプレス.jp
国際ドメイン .com .net .org 等たくさんある
⑤ DNS
Domain Name Systemドメイン名をIPアドレスに変換する
インターネットの基本中の基本がDNSサーバー
⑥ WWWサービス
ア． WebサーバーはHTMLで書かれた文書を提供する
イ． Webブラウザはそれを表示する Internet Explorer 、Netscape等
⑦ HTTP Hyper Text Transfer Protocol で上記両者の通信が行われる
⑧ URL Uniform Resource Locatorでサーバー内のアドレスとサービスを
指定する
ftp://ftp.wind.ne.jp/xxx/
⑨ ハイパーリンク 文書の中にハイパーリンクを指定するとそこから他の文書に
移動する。プログラムや画像にへも移動ができる。
⑩ HTML Hyper Text Markup Languageという言語でWWWの各文書の
ページを書きます。
ア． タグでページの構造や内容や表現を決めます.
イ． スタイルシートでさらにデザインをよくしていく。
⑪ ｃHTML compact HTML ｉモード用のＨＴＭＬ
ｉモード以外はWAP Wireless Application Protocolを使用している。WAPはWML Wireless Markup Languageで書かれているが
HTMLと互換性がないため使いにくい。しかも回線交換方式。
⑫ BML Broadcasting Markup Languageデジタルテレビ放送用ML
HTMLと互換性がないため使いにくい。TV,PCが一体化できない
⑬ SGML Standard Generalized Markup Language
標準一般化マークアップ(マーク付け)言語
JIS規格では、文書記述言語としている
⑭ XML eXtensible Markup Language: 拡張可能なマーク付け言語
コンピュータによる出版を効率的に行うためにSGMLができ、
インターネットを通じて情報を見るためにHTMLが考え出され
HTMLで情報発信が急速に発展してきた。そこで、もうSGMLじゃ
時代に合わないからと、SGMLをインターネットの時代の合うように
変更したものがXML。
⑮ XHTML XHTMLは「HTML」を「XML」形式で再定義した言語仕様で、
固定インターネットや携帯電話などによらず、あらゆるコンテンツの制作に用いることができる
⑯ HTMLによる表現
ア. 実際に書いてみよう
HTML入門 ver1.3
ホームページのホントの姿「HTMLタグ」を使ったホームページ制作を
やさしく解説。
http://www01.u-page.so-net.ne.jp/ta2/nori/tetori/html/index.htm
イ. 既存WWWから取込もう
ウ. WEB画像を取込もう
.jpg
.bmp
フラッシュ
ムービー
音声
重さ － 3秒、15秒
エ. スキャナー、カメラから画像取り込み
⑰ PDF Portable Document Format
世界中で利用され、配信用電子文書として標準のフォーマット。汎用性のあるファイルフォーマットであるPDFは、ファイル作成時に使用したアプリケーションやプラットフォームに関わりなく、あらゆるソースドキュメントについて元のフォント、レイアウト、カラー、グラフィックスをすべて保持します
⑱ ワード、エクセル、パワーポイントからHTML
⑲ CGI Common Gateway Interface
http://www.kasahara.elec.waseda.ac.jp/~takahisa/tohoho/wwwcgi.htm
⑳ PERL スクリプト言語の一種。 既存のシステムやコマンドと組み合わせて簡単なプログラムを記述したものをスクリプトと呼び，スクリプト記述に適した言語をスクリプト言語と呼ぶ。その目的から，スクリプト言語の処理系はインタープリター方式であることが多い。
http://www.kasahara.elec.waseda.ac.jp/~takahisa/tohoho/wwwperl.htm
21 WWWページ作成ツール
FrontPage 2000
Visual Page 2.0
DreamWeaver 2
ホームページ・ビルダー 2000
HOTALL Ver5.0
Adobe PageMill 3.0
等
(2)プレゼンテーション技法
FrontPageを利用した作成法
FrontPage
Expressで作るホームページ ver1.0
ウィンドウズ版 Internet Explorer に付属のホームページ制作ソフト
「FrontPage Express」を使ったホームページ教室。
http://www01.u-page.so-net.ne.jp/ta2/nori/tetori/fpe/index.htm
http://www2.ttcn.ne.jp/~inn/fp2k/
(3)コンセプトデザイン技法
① 徹底的な掘下げ
② 網羅的なリンク
③ お客とのコミュニケーション
(4)インターフェース設計
① Webサイトコンテスト
② ECサイト入選作品
③ オークションサイト
④ 楽天市場
ア、6,000店の世界一出店社
⑤ 3分割画面
(5)各種素材作成
① 素材集の利用法
② 素材の作り方