Ver.08.06 Ⓒ 2008 E.Moriya Webページを活用する 2018/9/18 Inf.Math.III
何のために・・・ 原理 & 基本から応用まで・・・ 課題の提出 他人からも教えてもらう 他人の目も気にしよう、・・・ 歴史 原理 インターネット - ブラウザ - URL アクセシビリティ Webページ作成のガイドライン 作成ツール HTML言語 - ウェブページ作成支援ソフト マルティメディア対応(音声・ビデオ他) - CGI 2018/9/18 Inf.Math.III
WWWの歴史(1) 1960’s ARPANET 米国防総省軍事的目的実験的ネットワーク 1970’s USENET UNIX系計算機を結ぶネットワーク 1975’s TCP/IP 通信プロトコル 1980’s初 CSNET, BITNET 組織化されたネットワーク 1990 商用インターネット会社設立 1991 WWWの原理開発 1993 最初のウェブブラウザ Mosaic 1992日本最初のホームページ 文部省高エネルギー加速器研究機構 計算科学センター http://www.ibarakiken.gr.jp/www/ 2018/9/18 Inf.Math.III
WWWの歴史(2) 1994.7 日本のISPはわずか4社 2003.2 日本のインターネット人口5,645万 2004.2 日本のインターネット人口6,284万 2005.2 日本のインターネット人口7,007万 2006.2 日本のインターネット人口7,362万 家庭からのブロードバンド利用者数 3,757万人 ブロードバンド世帯普及率 36.2% 2007.3 日本のブロードバンド世帯普及率 50.9% 家庭からのブロードバンド利用者数 4,627万人 インターネット白書 http://www.iajapan.org/iwp/ 2018/9/18 Inf.Math.III
Webページをつくる 2018/9/18 Inf.Math.III
Webページをつくる 何のために 目的 心構え 注意 ツール ソフト 記述言語 2018/9/18 Inf.Math.III
見てくれる人の立場になって 目的 見てくれる人の立場になって 作成指南のページ 誰に何を伝えたいのか テーマを絞り、シンプルに 対象者によって内容もイメージも変わる 作成指南のページ http://www.hajimeteno.ne.jp/ http://homepage2.nifty.com/shokyusha/ http://www12.plala.or.jp/hpmaster/ (IBM社ホームページビルダー利用) 2018/9/18 Inf.Math.III
Webページ 作る側と見る側 ブラウザ 画像が多いと重たいことも 表情豊かにすると、閲覧にプラグインが必要 ブラウザの種類やバージョン、OSが違えば見え方が違う ブラウザ → 拡張タグの有無、タグの実装法の違い OS → UNIX系、Windows系、Mac系 ディスプレーの解像度 画像が多いと重たいことも ときには、サイズ、解像度を下げることも必要 画像形式にもよる BMP > JPEG, GIF, PNG 表情豊かにすると、閲覧にプラグインが必要 Java, JavaScript Flash → アニメーション QuickTime, Realplayer, Windows Media Player → 動画 RealAudio → サウンド Acrobat Reader → PDF文書の表示 2018/9/18 Inf.Math.III
用語の補足(1) 画像の形式(1) BMP (ビットマップ) bit map Windows標準の画像形式 白黒画像からフルカラー(1677万7216色)までサポート 画像をドットの集合として表わす 単純で簡単だが、容量が大きくなる JPEG (ジェーペグ) Joint Photographic Experts Group (ISO規格化グループ名) フルカラー静止画像用 ファイル容量小さく、画像劣化少ない JPEG2000(新規格)、モーションJPEG(動画用) GIF (ジフ) Graphic Interchange Format 静止画 扱える色数が少ない(最大256色)ので、イラスト等に向く インターレースGIF → モザイク上から徐々に通常の画像に アニメーションGIF → 一連の画像ファイルを順次表示してアニメーション化 透過GIF → 任意の1色を透明に出来る(背景が見えるようになる) 2018/9/18 Inf.Math.III
用語の補足(2) 画像の形式(2) PNG (ピング) Portable Network Graphics 特許料が必要なJPEGやGIFに代わるものとして開発された。最近はほとんどのブラウザが対応している W3Cが画像の標準ファイル形式として提唱している PNG-8(256色)、PNG-24(フルカラー)、PNG-32(フルカラー+αチャンネル256階調) WMF (ダブリュエムエフ) Windows Meta File Windowsで使用される画像形式(単に、メタファイルとも言う) TIFF (ティフ) Tagged Image File Format Aldus社とMicrosoft社によって開発された画像形式 2018/9/18 Inf.Math.III
用語の補足(3) タグ tag プラグイン plug-in ウェブページのコンテンツをhtmlと呼ばれる形式で記述するときに使う命令の書き方 (後述) プラグイン plug-in アプリケーションに後から組み込んで機能補充をするための比較的小さなプログラム もとから搭載されている機能だけでは実現できない、動画や高品質の音声の 再生など、様々な機能がプラグインを追加することによって実現することができる 多くのプラグインは無料で提供されていて、インターネットで簡単に入手することができる プラグインの例: Flash(アニメーション)、QuickTime,Realplayer, Windows Media Player(動画)、RealAudio(サウンド)、Acrobat Reader(文書) 2018/9/18 Inf.Math.III
心構え(1) ネチケット/ウェブエチケット 自分を守ることも忘れずに 個人情報/著作権 Network Etiquette 社会常識を守ること 虚偽・誹謗中傷は禁物 匿名・顔が見えない → ×つい・・・ 自分を守ることも忘れずに ×電話番号・住所 ×△メールアドレス・顔写真(女性) 自分でウェブサーバーを立てるときにはセキュリティも! 個人情報/著作権 見えるからといって自由に使って良いわけではない 2018/9/18 Inf.Math.III
心構え(2) 画像が重くなりすぎないように 特殊なソフトに依存しないこと 1ページは、スクロールしない程度の量に どのブラウザでも正しく表示されるような配慮も必要 機種依存文字を使わない ①②ⅠⅡ㍉㊤㈱㎡∴⊆≒ハンカクカタカナ 画像が重くなりすぎないように ○JPEG, ○GIF, ○PNG, ×BMP, ×TIFF 圧縮する、サイズを小さくする、画像形式を変換する 特殊なソフトに依存しないこと ファイル形式: PS < WORD・PPT < PDF < テキスト(html) 1ページは、スクロールしない程度の量に 2018/9/18 Inf.Math.III
用語の補足(4) 画像 音声 JPEG (デジカメでは標準), GIF, PNG, BMP, TIFF 画像変換ソフト カラー動画圧縮の規格 GraphicConverter, BMAP to JPEG Converter (いずれもフリーソフト) Windowsのアクセサリにあるペイントでも可 デジカメやスキャナーに付いてくるフリーの画像ソフト等 もちろん、PaintShop 等の有料ソフトは画像変化に関しても多機能 カラー動画圧縮の規格 MPEG (MPEG1 ~ MPEG4) Moving Picture Experts Group (ISOの規格化グループの名前) 音声 wav (Windows標準), mid (MIDI), mp3 (MPEG-1 Audio Layer), aif (AIFF: アップル), au (UNIX), ra (リアル再生、Real Player), mov (Quick Time:マック標準), asf (マイクロソフト) 2018/9/18 Inf.Math.III
用語の補足(5) 文書ファイルの形式 テキストファイル(plain text) .txt 文書のレイアウトの情報や、文字の大きさの情報などが入っていず、どの文字を並べているかだけ.ファイルサイズは最小 リッチテキスト (rich text format) .rtf .doc MS社が開発.文字のフォントの大きさや色や、下線が引かれているかなどの付加的な情報も入っている Microsoft Word等のワープロソフトが利用 PDF (portable document format) .pdf Adobe 社が開発した形式 .インターネット上で広く使われている. 文字や図形の情報を点の集まりとしてではなく、 ここにこういう大きさの円を書くとか、 ここにこういうフォントで こういう大きさのこういう字を書く、といった形で記述.ファイルサイズは大きくなる. PS (PostScript形式) .ps Adobe社が開発.ページ記述言語の一種(PDFと類似の形式).ある意味、PDFの前身と言える. プリンタの解像度に依存しないような、文字や図形の記述が可能 →Postscriptを解釈実行できるプリンタが必要 html (hypertext markup language) .html .htm ウェブページを記述するための書式 dvi, ppt, xls, jwt, 123, … 2018/9/18 Inf.Math.III
アクセシビリティ ガイドライン Accessibility アクセシビリティ ガイドライン アクセシビリティに関するチェッカー バリヤフリーの度合い 障害者や高齢者などいわゆる情報弱者からの利用も考慮し、Web の情報を誰もが理解でき、使い易いものにするWebサイト構築のルール アクセシビリティ ガイドライン W3Cホームページ http://www.w3.org/ WAI (Web Accessibility Initiative)ホームページ http://www.w3.org/WAI/ http://www.zspc.com/documents/wcag10/ http://www-6.ibm.com/jp/accessibility/guideline/accessweb.html アクセシビリティに関するチェッカー http://www.cast.org/bobby/ 2018/9/18 Inf.Math.III
用語の補足(6) W3C JISX8341-3 WWW consortium 1994年設立、米MIT/仏INRIAなどが中心 ウェブページの標準化作業を進める非営利団体 1994年設立、米MIT/仏INRIAなどが中心 JISX8341-3 2004年6月20日、Webアクセシビリティの日本工業規格(JIS)が発効 2018/9/18 Inf.Math.III
☆JISコード(サーバーがUNIXの場合はEUCコード)を使う ☆HTML4.01(1999)に準拠する ☆JISコード(サーバーがUNIXの場合はEUCコード)を使う ☆フォントサイズ・色・表示位置・画像・オブジェクト制御にはスタイルシートを使う ☆背景色・文字色等は、色覚障害のユーザにもコントラストがはっきり分かるようにする ☆1ページは適切な長さにする。やむを得ず長くなるときは、アンカーをつける ☆HEADに付ける<TITLE>は内容にあった適切なものをつける ☆画像は減色等でなるべく軽くする ☆音声データや画像等に対しては、文字でも情報を提供する 2018/9/18 Inf.Math.III
☆色によって伝えられる情報も、色がなくても情報が伝わるようにする ☆日本語のページで外国語の乱用はしない ☆点滅したりスクロールしたりするテキストの使用は極力避ける ☆色によって伝えられる情報も、色がなくても情報が伝わるようにする ☆日本語のページで外国語の乱用はしない ☆略語や一般的でない言葉には、理解しやすいように説明を付ける ☆リンク部分の文字は、文章の前後関係を見なくても意味がわかり冗長でないものにする ☆必要以上にフレームを使用しない ☆ ビデオデータに対しては、それと同期した音声や文字による説明をつける 2018/9/18 Inf.Math.III
作成ツール ホームページ作成ソフト 画像加工ソフト 素材集 ・・・著作権に注意! ホームページビルダー(IBM社) FrontPage(マイクロソフト社) Netscape Composor(ネットスケープ社) WORD等のワープロソフト、GoLive(アドビ社) 画像加工ソフト PaintShop(アドビ社) ペイント(Windows付属アクセサリ) デジカメ付属の画像ソフト 素材集 ・・・著作権に注意! http://www.shonan-inet.or.jp/~sugu/ http://www2.edu.ipa.go.jp/gz/ http://eyes-art.com/pic/ http://www.sozainomori.com/ 2018/9/18 Inf.Math.III