Ver.08.06　　 Ⓒ 2008 　E.Moriya Ｗｅｂページを活用する 　　 　　 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ.

Presentation on theme: "　　　　　　　　　　　Ver.08.06　　 Ⓒ 2008 　E.Moriya Ｗｅｂページを活用する 　　 　　 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ."— Presentation transcript:

1 　　　　　　　　　　　Ver.08.06　　 Ⓒ 2008 　E.Moriya Ｗｅｂページを活用する 　　 　　 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

2 何のために・・・ 原理 ＆ 基本から応用まで・・・ 課題の提出 他人からも教えてもらう 他人の目も気にしよう、・・・ 歴史 原理
インターネット　　　　－　　ブラウザ　　　　　－　　ＵＲＬ アクセシビリティ Ｗｅｂページ作成のガイドライン 作成ツール ＨＴＭＬ言語　　　　　　－　　ウェブページ作成支援ソフト マルティメディア対応（音声・ビデオ他）　　　　－　　ＣＧＩ 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

3 ＷＷＷの歴史(1) 1960’s ARPANET 米国防総省軍事的目的実験的ﾈｯﾄﾜｰｸ
1970’s USENET 　　　　　　 UNIX系計算機を結ぶﾈｯﾄﾜｰｸ 1975’s TCP/IP 　　　　　　 通信ﾌﾟﾛﾄｺﾙ 1980’s初 CSNET, BITNET 組織化されたﾈｯﾄﾜｰｸ 1990 商用ｲﾝﾀｰﾈｯﾄ会社設立 1991 WWWの原理開発 1993 最初のウェブブラウザ Mosaic 1992日本最初のホームページ 文部省高エネルギー加速器研究機構 計算科学センター 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

4 ＷＷＷの歴史(2) 1994.7 日本のISPはわずか4社 2003.2 日本のインターネット人口5,645万
日本のインターネット人口6,284万 日本のインターネット人口7,007万 日本のインターネット人口7,362万 　 家庭からのブロードバンド利用者数　3,757万人 ブロードバンド世帯普及率 36.2% 日本のブロードバンド世帯普及率 50.9％ 家庭からのブロードバンド利用者数 4,627万人 インターネット白書 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

5 Webページをつくる 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

6 Webページをつくる 何のために 目的 心構え 注意 ツール ソフト 記述言語 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

7 見てくれる人の立場になって 目的 見てくれる人の立場になって 作成指南のページ 誰に何を伝えたいのか テーマを絞り、シンプルに
対象者によって内容もイメージも変わる 作成指南のページ (ＩＢＭ社ホームページビルダー利用) 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

8 Webページ 作る側と見る側 ブラウザ 画像が多いと重たいことも 表情豊かにすると、閲覧にプラグインが必要
ブラウザの種類やバージョン、ＯＳが違えば見え方が違う ブラウザ　→　拡張タグの有無、タグの実装法の違い OS　→　ＵＮＩＸ系、Windows系、Mac系 ディスプレーの解像度 画像が多いと重たいことも ときには、サイズ、解像度を下げることも必要 画像形式にもよる　　BMP > JPEG, GIF, PNG 表情豊かにすると、閲覧にプラグインが必要 Java, JavaScript Flash　→　アニメーション QuickTime, Realplayer, Windows Media Player　→　動画 RealAudio　→　サウンド Acrobat Reader　→　PDF文書の表示 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

9 用語の補足（１） 画像の形式（１） BMP (ビットマップ） bit map
Windows標準の画像形式 白黒画像からフルカラー(1677万7216色)までサポート 画像をドットの集合として表わす 単純で簡単だが、容量が大きくなる JPEG （ジェーペグ）　Joint Photographic Experts Group （ＩＳＯ規格化グループ名） フルカラー静止画像用 ファイル容量小さく、画像劣化少ない JPEG2000（新規格）、モーションJPEG（動画用） GIF （ジフ）　Graphic Interchange Format 静止画 扱える色数が少ない（最大256色）ので、イラスト等に向く インターレースGIF　→　モザイク上から徐々に通常の画像に アニメーションGIF　→　一連の画像ファイルを順次表示してアニメーション化 透過GIF →　任意の１色を透明に出来る（背景が見えるようになる） 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

10 用語の補足（２） 画像の形式（２） PNG (ピング) Portable Network Graphics
特許料が必要なJPEGやGIFに代わるものとして開発された。最近はほとんどのブラウザが対応している Ｗ３Ｃが画像の標準ファイル形式として提唱している PNG-8（256色）、PNG-24（フルカラー）、PNG-32（フルカラー＋αチャンネル256階調） WMF (ダブリュエムエフ)　Windows Meta File Windowsで使用される画像形式（単に、メタファイルとも言う） ＴＩＦＦ　（ティフ）　Tagged Image File Format Aldus社とMicrosoft社によって開発された画像形式 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

11 用語の補足（３） タグ tag プラグイン plug-in
ウェブページのコンテンツをｈｔｍｌと呼ばれる形式で記述するときに使う命令の書き方　（後述） プラグイン plug-in アプリケーションに後から組み込んで機能補充をするための比較的小さなプログラム もとから搭載されている機能だけでは実現できない、動画や高品質の音声の 再生など、様々な機能がプラグインを追加することによって実現することができる 多くのプラグインは無料で提供されていて、インターネットで簡単に入手することができる プラグインの例： Flash（アニメーション）、QuickTime,Realplayer, Windows Media Player（動画）、RealAudio（サウンド）、Acrobat Reader（文書） 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

12 心構え（１） ネチケット/ウェブエチケット 自分を守ることも忘れずに 個人情報／著作権 Network Etiquette
社会常識を守ること 虚偽・誹謗中傷は禁物 匿名・顔が見えない　→　×つい・・・ 自分を守ることも忘れずに ×電話番号・住所　　×△メールアドレス・顔写真（女性） 自分でウェブサーバーを立てるときにはセキュリティも！ 個人情報／著作権 見えるからといって自由に使って良いわけではない 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

13 心構え（２） 画像が重くなりすぎないように 特殊なソフトに依存しないこと １ページは、スクロールしない程度の量に
どのブラウザでも正しく表示されるような配慮も必要 機種依存文字を使わない ①②ⅠⅡ㍉㊤㈱㎡∴⊆≒ﾊﾝｶｸｶﾀｶﾅ　 画像が重くなりすぎないように ○JPEG, ○GIF, ○PNG, ×BMP, ×TIFF 圧縮する、サイズを小さくする、画像形式を変換する 特殊なソフトに依存しないこと ファイル形式：　PS < WORD・PPT < PDF < テキスト（html） １ページは、スクロールしない程度の量に 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

14 用語の補足（４） 画像 音声 JPEG （デジカメでは標準）, GIF, PNG, BMP, TIFF 画像変換ソフト カラー動画圧縮の規格
GraphicConverter, BMAP to JPEG Converter (いずれもフリーソフト) Windowsのアクセサリにあるペイントでも可 デジカメやスキャナーに付いてくるフリーの画像ソフト等 もちろん、PaintShop 等の有料ソフトは画像変化に関しても多機能 カラー動画圧縮の規格 MPEG (MPEG1 ～ MPEG4) Moving Picture Experts Group （ＩＳＯの規格化グループの名前） 音声 wav (Windows標準), mid (MIDI), mp3 (MPEG-1 Audio Layer), aif (AIFF: アップル), au (UNIX), ra (リアル再生、Real Player), mov (Quick Time:マック標準), asf (マイクロソフト) 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

15 用語の補足（５） 文書ファイルの形式 テキストファイル(plain text) .txt
文書のレイアウトの情報や、文字の大きさの情報などが入っていず、どの文字を並べているかだけ．ﾌｧｲﾙサイズは最小 リッチテキスト (rich text format) .rtf .doc ＭＳ社が開発．文字のフォントの大きさや色や、下線が引かれているかなどの付加的な情報も入っている Microsoft Ｗｏｒｄ等のワープロソフトが利用 PDF　(portable document format) .pdf Adobe 社が開発した形式 ．インターネット上で広く使われている． 文字や図形の情報を点の集まりとしてではなく、 ここにこういう大きさの円を書くとか、 ここにこういうフォントで こういう大きさのこういう字を書く、といった形で記述．ﾌｧｲﾙサイズは大きくなる． PS　 (PostScript形式) .ps Ａｄｏｂｅ社が開発．ページ記述言語の一種（PDFと類似の形式）．ある意味、ＰＤＦの前身と言える． プリンタの解像度に依存しないような、文字や図形の記述が可能 →Postscriptを解釈実行できるプリンタが必要 hｔｍｌ 　(hypertext markup language)　.html .htm ウェブページを記述するための書式 dvi, ppt, xls, jwt, 123, … 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

16 アクセシビリティ ガイドライン Accessibility アクセシビリティ ガイドライン アクセシビリティに関するチェッカー
バリヤフリーの度合い 　　　障害者や高齢者などいわゆる情報弱者からの利用も考慮し、Web の情報を誰もが理解でき、使い易いものにするWebサイト構築のルール アクセシビリティ ガイドライン Ｗ３Ｃホームページ　 ＷＡＩ　（Web Accessibility Initiative）ホームページ　 アクセシビリティに関するチェッカー 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

17 用語の補足（６） W3C JISX8341-3 WWW consortium 1994年設立、米MIT/仏INRIAなどが中心
ウェブページの標準化作業を進める非営利団体 1994年設立、米MIT/仏INRIAなどが中心 JISX8341-3 2004年6月20日、Webアクセシビリティの日本工業規格（JIS）が発効 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

18 ☆JISコード（サーバーがUNIXの場合はEUCコード）を使う
☆HTML4.01(1999)に準拠する ☆JISコード（サーバーがUNIXの場合はEUCコード）を使う ☆フォントサイズ・色・表示位置・画像・オブジェクト制御にはスタイルシートを使う ☆背景色・文字色等は、色覚障害のユーザにもコントラストがはっきり分かるようにする ☆1ページは適切な長さにする。やむを得ず長くなるときは、アンカーをつける ☆HEADに付ける<TITLE>は内容にあった適切なものをつける ☆画像は減色等でなるべく軽くする ☆音声データや画像等に対しては、文字でも情報を提供する 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

19 ☆色によって伝えられる情報も、色がなくても情報が伝わるようにする ☆日本語のページで外国語の乱用はしない
☆点滅したりスクロールしたりするテキストの使用は極力避ける ☆色によって伝えられる情報も、色がなくても情報が伝わるようにする ☆日本語のページで外国語の乱用はしない ☆略語や一般的でない言葉には、理解しやすいように説明を付ける ☆リンク部分の文字は、文章の前後関係を見なくても意味がわかり冗長でないものにする ☆必要以上にフレームを使用しない ☆ ビデオデータに対しては、それと同期した音声や文字による説明をつける 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ

20 作成ツール ホームページ作成ソフト 画像加工ソフト 素材集 ・・・著作権に注意！ ホームページビルダー（IBM社）
FrontPage(マイクロソフト社） Netscape Composor（ネットスケープ社） WORD等のワープロソフト、GoLive（アドビ社) 画像加工ソフト PaintShop（アドビ社） ペイント（Windows付属アクセサリ） デジカメ付属の画像ソフト 素材集　　・・・著作権に注意！ 2018/9/18 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ