ver.15.06　　　　 　　 Ｗｅｂページを活用する 　　 　　 Inf. Math. 5

原理 ＆ 基本から応用まで・・・ 歴史 原理 アクセシビリティ 作成ツール インターネット ブラウザ ＵＲＬ Ｗｅｂページ作成のガイドライン 　　　原理 ＆ 基本から応用まで・・・ 歴史 原理 インターネット ブラウザ ＵＲＬ アクセシビリティ Ｗｅｂページ作成のガイドライン 作成ツール ＨＴＭＬ言語 ウェブページ作成支援ソフト マルティメディア対応（音声・ビデオ他） ＣＧＩ Inf. Math. 5

ＷＷＷの歴史(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/ (文部省高エネルギー加速器研究機構 計算科学センター) Inf. Math. 5

ＷＷＷの歴史(2) Inf. Math. 5 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万人 2008 日本のブロードバンド世帯普及率 57.1％（推定） 　　ウェブアプリの上位は「地図」68.7％、「乗換案内」63.2％、「ウェブメール」51.1％ 　　　パソコン以外のインターネット接続機器の１位は携帯、２位はWiiで全体の7.7% 2011 Twitterなどのマイクロブログ利用率16.2％、SNS利用率32.1％、スマートフォン所有率14.8％ 2012 ソーシャルメディア人口5060万人（前年比143％）、スマートフォン所有者はネット利用者の3割 インターネット白書 http://www.iajapan.org/iwp/ 　　2008年版要約　http://www.impressrd.jp/news/080611/hakusyo_08 　　2009年版要約　http://www.impressrd.jp/news/0900610/hakusyo_09 　　2010年版要約　http://www.iajapan.org/iwp/2010.html 　　2011年版要約　http://www.iajapan.org/iwp/2011.html 　　2012年版要約　http://www.iajapan.org/iwp/2012.html 2013-2014年版要約　http://iwparchives.jp/iwp2014 Inf. Math. 5

Webページをつくる Inf. Math. 5

Webページをつくる Webページをつくる 何のために 目的 心構え 注意 ツール ソフト 記述言語 Inf. Math. 5

見てくれる人の立場にたって 目的 見てくれる人の立場になって 作成指南のページ(参考サイト。推奨するわけではない) 誰に何を伝えたいのか テーマを絞り、シンプルに 見てくれる人の立場になって 対象者によって内容もイメージも変わる 作成指南のページ(参考サイト。推奨するわけではない) http://www.hajimeteno.ne.jp/ http://copicopi.com/ (素材集へのリンクあり) http://homepage2.nifty.com/shokyusha/ http://park16.wakwak.com/~html-css/ http://www.sennbei.com/HP/ Inf. Math. 5

Webページ 作る側と見る側 ブラウザ ブラウザの種類やバージョン、ＯＳが違えば見え方が違う 画像が多いと重たいことも 　　ブラウザの種類やバージョン、ＯＳが違えば見え方が違う ブラウザ　→　拡張タグの有無、タグの実装法の違い OS　→　ＵＮＩＸ系、Windows系、Mac系 ディスプレイの解像度 画像が多いと重たいことも ときには、サイズ、解像度を下げることも必要 画像形式にもよる　mpeg(動画) > bmp > jpg, gif, png 表情豊かにすると、閲覧にプラグインが必要 Java, JavaScript Flash　→　アニメーション QuickTime, Realplayer, Windows Media Player　→　動画 RealAudio　→　サウンド Acrobat Reader　→　PDF文書の表示 Inf. Math. 5

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

用語の補足（２） 画像の形式（２） 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社によって開発された画像形式 MPEG （エムペグ）　 ISO/IEC のMoving Picture Experts Groupによって決められた映像データ圧縮の標準規格 MPEG1 から MPEG4 まである　（MPEG5(マルチメディア), MPEG21(将来の基準)） Inf. Math. 5

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

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

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

用語の補足（４） 画像 音声 JPEG （デジカメでは標準）, GIF, PNG, BMP, TIFF 画像変換ソフト カラー動画圧縮の規格 GraphicConverter, BMAP to JPEG Converter, EPSconv 　 (いずれもフリーソフト) 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 (マイクロソフト) Inf. Math. 5

用語の補足（５） 文書ファイルの形式 テキストファイル(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, … Inf. Math. 5

アクセシビリティ ガイドライン Accessibility アクセシビリティ ガイドライン アクセシビリティに関するチェッカー バリヤフリーの度合い 　　障害者や高齢者などいわゆる情報弱者からの利用も考慮し、 Web の情報を誰もが理解でき、使い易いものにするWebサイト 構築のルール アクセシビリティ ガイドライン Ｗ３Ｃホームページ　http://www.w3.org/ ＷＡＩ　（Web Accessibility Initiative）ホームページ　 http://www.w3.org/WAI/ http://www.w3.org/WAI/intro/wcag.php (2012 ISO/IEC国際標準に) アクセシビリティに関するチェッカー http://www.jwas.gr.jp/helper/post_5.html Inf. Math. 5

用語の補足（６） W3C JISX8341-3 ウェブページの標準化作業を進める非営利団体 WWW consortium 1994年設立、米MIT/仏INRIAなどが中心 JISX8341-3 2004年6月20日：Webアクセシビリティの日本工業規格（JIS）が発効 2010年：JIS X 8341-3 Inf. Math. 5

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

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

作成ツール ホームページ作成ソフト 画像加工ソフト 素材集 ・・・著作権に注意！ 自分で html 言語を習得する ホームページビルダー（ジャストシステム社）、ホームページV3 (ソースネクスト社）、 　　 デジタルステージ社、Adobe社、など有料ソフト WORD 等のワープロソフト 画像加工ソフト Photoshop　（Adobe社） ペイント（Windows付属アクセサリ） デジカメ付属の画像ソフト 素材集　　・・・著作権に注意！ http://www.shonan-inet.or.jp/~sugu/ http://hp-sozai.net/ http://copicopi.com/ http://www2.edu.ipa.go.jp/gz/ http://www.sozainomori.com/ http://www.sozailink.com/　（素材サイトへのリンク集） Inf. Math. 5