Ver.08.06   Ⓒ 2008  E.Moriya Webページを活用する       2018/9/18 Inf.Math.III.

Slides:



Advertisements
Similar presentations
1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。
Advertisements

DTM を使った楽曲制作 DTM を扱う職業などの調査 北海道情報大学 情報メディア学 部 情報メディア学科 新井山ゼミ 宮本 拓美.
情報処理 A 第 5 回かな? ワードの使い方. 拡張子  ファイルの名前は, “ ファイル名. 拡張子 ” で付け る.  拡張子は,そのファイルを読み込むソフトに影 響される –txt テキストファイル –doc ワードのファイル –xls エクセルのファイル –pdf Acrobat Reader.
簡単動画制作 使用するアプリケーション  iMovie  特別教室の Mac にインストールされています  使用方法の動画解説( apple ) 
BWD06-01 ~ 1 ~ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 – ガイダンス – Webの歴史 –HTML 基礎 今週 について(出席と課題提出) –HTML 画像、ハイパーリンク、文字書式.
Web パブリッシング 1. この授業について. この授業の目標 Web サイトの構築とその維持管理の技 能を身につける –HTML 、 CSS 、( JavaScript ) Web サイトの構築とは –HTML 文書をインターネットに公開するこ と= Web パブリッシング.
DTM を使った楽曲制作 DTM を扱う職業などの調査 北海道情報大学 情報メディア学 部 情報メディア学科 新井山ゼミ 宮本 拓美.
プレゼンテーションからホームページ作成まで 情報システム入門 A 総合情報センター 非常勤講師 :中山 進.
静止画ファイル形式 小林 康三.
第2章 第2節 情報通信の効率的な方法 1 情報の容量と伝送の特性 2 データの圧縮 3 エラー検出とエラー訂正
最新コピーガード CPRM コピーや録画できる回数を制限するコピーコントロール信号である。コピーワンス放送などの映像データに入っている。
専門ゼミⅠ 南ゼミ 特別授業 2002年5月24日 金曜日 4限目 今泉 裕隆.
画像ファイルの形式とデータサイズ.
Web製作ラボ 5/30, 6/13, 2012 hayashiLabo 13.
第9回放送授業.
応用コース:ワープロを活用する WORD2000 1回目 基礎コースの復習(第1章と付録) 2回目 文字の入力(第2章と第4章)
ファイルの形式.
J107 マルチメディアとは② 動画と音声 マルチメディアとは② 動画と音声 J107 中3情報.
情報基礎A 情報科学研究科 徳山 豪.
プレゼンテーションからホームページ作成まで
ホームページづくりに挑戦しよう 常信伊佐夫 スペースバーを押して進めてください.
第6回 Flashによるゲームの作成 04A2029           古賀慎也.
HTMLの記述と WWWにおける情報公開 遠藤
アプレット (Applet)について.
早稲田大学大学院理工学研究科 情報科学専攻修士2年 後藤滋樹研究室 坂本義裕
ホームページの作り方.
ただで使えるソフトウェア ーインストールとお絵かきー
コンピュータ演習Ⅰ 8月7日(日) 1限目 ファイルの種類.
WWW (=World Wide Web)とは
ファイルシステムとコマンド.
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
第3章 第2節 ネットワークを活用した 情報の収集・発信 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開
第2章 ソフトウェアの基礎知識 電子制御設計製図Ⅰ    2010年5月11日 Ⅲ限目.
ファイルの形式.
コンピュータ基礎実習上級 #11画像ファイルと文字のフォーマット
第2章 ソフトウェアの基礎知識.
心理学情報処理法Ⅰ コンピュータにおけるデータ表現 マルチメディアとコンピュータ.
画像ファイルの形式とデータサイズ.
“Word 2007”を活用した Webページの制作 ~Webデザインコンテスト参加作品(2009/2010)~
インターネット活用法 ~ブラウザ編~ 09016 上野喬.
Webページで自己紹介をしよう! 出席番号の席に着席し ユーザ名~user○○ パスワード~pass でログオン
           ver.15.06        Webページを活用する       Inf. Math. 5.
           ver.15.06        Webページを活用する       Inf. Math. 5.
Rの図表の保存はメタファイルが便利です (Windows限定).
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
HTTPとHTML 技術領域専攻 3回 中川 晃.
2008年度 情報数理 ~ 様々なデジタル情報 ~.
情報数理 ~様々なデジタル情報~ 2007年度 担当教員:幸山直人.
画像ファイルの形式とデータサイズ.
情報スキル活用  第5週 基礎技術-5   その3 : 画像表示.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
[アクセシビリティはユニバーサルデザインと支援技術の共同作業である] 石川准
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
端末およびサービス透過的な 情報閲覧支援システムの構築
HTML の成り立ち 惑星物理学研究室 4年 安達 俊貴.
第2章 ソフトウェアの基礎知識 電子制御設計製図Ⅰ    2010年5月19日 Ⅱ限目.
2012年度 情報数理 ~ 様々なデジタル情報(1) ~.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
コンピュータ プレゼンテーション.
Flashを用いたゲーム制作 05A1304 鈴木 浩高.
コンピュータと情報 第4回 ワードの使い方.
コンピュータ リテラシー 担当教官  河中.
画像のディジタル化 Copyright(C)2003 Yoshihiro Sato All rights reserved.
動画配信捕捉のためのWEBサーバ構築 06A1058 古江 和栄.
2010年度 情報数理 ~ 様々なデジタル情報(1) ~.
基礎技術ー3 : Webページの標準規格について
CADシステムとソフトウェア 電子制御設計製図Ⅰ    2009年4月28日 Ⅲ限目.
2019年度 情報数理特論B ~ 様々なデジタル情報(1) ~.
Presentation transcript:

           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