HOME 教育状況公表 令和2年11月1日
情報処理概論 戻る 進む 講義スライド
情報処理概論 WebClass files syllabus 52210 C1 情報機器の準備 ウェブ講義の接続
伊藤智博(ITO Tomohiro) 、神保雄次(JINBO Yuji)

ホームページの仕組みと応用 -受講成果を公開しよう-

講義スライド

ウェブページで代用できるものは代用しよう

対面教育 vs. サイバー大学(放送大学)

対面教育の価値は、何か?サイバー大学と放送大学の違いは? 大学と高校までの違いはなにか?

E-ラーニングでできる教育は、ネット配信に任せればよい。 対面教育の価値、サイバー大学の価値、放送大学の価値を見直そう

ウェブサービスの準備とレンタルサーバ

組織内にサーバを使うかそれともレンタルサーバを借りるか? 転送量(通信料)や電気代がかかる。 レンタルサーバの費用は主に転送量に依存する。 ファイルの移動はftpを使うことが多い。

そっくりさんの偽サイトを作ってクレジット番号やパスワードを盗みとるようなことは犯罪行為、 技術者倫理違反! 使うときはそのサイトはホンモノか疑おう。 また自分で偽サイトを作ることは絶対にやめましょう!

ECサイトやネットショッピングのサイトはレンタルサーバを借りても作れる。 しかし、消費者からのアクセスが殺到するとサーバを守るために、下記に示すような「HTTP Error 503」を表示することがある。 レンタルサーバは、他の利用者と回線やサーバリソースを共有していることが多いため、利用者の公平性の観点からレンタルサーバ1台あたりのアクセス数に制限が設けているからである。 利用料金の高いサーバは、レンタルサーバのアクセス数や通信帯域を高めに設定されている。 しかし、数量限定の商品やコンサートチケットなど希少価値の高い商品の発売時刻前後では、利用者のアクセス数が一時的に増大することがある。 ビジネスとして、利用料金の高いレンタルサーバを契約することでランニングコストが増大し、利益を損なう可能性もある。 また、希少価値の高い商品にアクセスが殺到した場合、アクセスの成功率は、1%以下であることもしばし見うけられる。

Service Unavailable
HTTP Error 503. The service is unavailable.

関連情報

マルチメディア表現

情報量

情報量の最小単位をビット(bit)といいます。1byte(バイト)=8bit(ビット)です。

静止画像

特許の出願の 画像形式も指定されています。

HTMLでホームページを作るとき、画像を使うと表現力が高まります。 論文でも を使うのはそのためです。

星型の座標は、座標(0.1)を144度5回座標回転した数列ですね。 表計算ソフトで計算するとあっと言う間です。 座標や回転、三角関数を忘れたときは、数学を思い出してください。

100 0 158 180 4 69 195 69 41 180

これで図形をイメージできる人はそれでいいのですが、 機械の助けを借りましょう。 機械が読み取れる、マシンリーダブルな形式にするのです。

星型

色彩は 色度座標で表現されます。 ディスプレイ(エネルギー化学)によるカラー表現は光の3原色(RGB)による加法混色です(無機工業化学)。

加法混色

山形大学のスクールカラーときわ色は、色素の3原色による減法混色で表現されます(プロセスカラー3色を使用し,C(シアン)=100%,M(マゼンタ)=60%及びY(イエロー)=70%を割合とする色)です。

ラスター形式とベクター形式

画像は大きくラスター形式とベクター形式に分類されます。 ラスター形式は、座標の明るさや色彩を指定する方法で、htmlではjpg形式やpng形式が使われます。一時期gif形式も使われましたが、パテントの問題で今はあまり使われていません。 画像は一般に情報量が多くなりがちなので、情報を圧縮します。 jpg形式は不可逆圧縮で、写真などの自然画像に、pngは可逆圧縮でイラストなどによく使います。

ラスターファイルの例

山形大学のロゴマークはaiファイル(illustrator CS2)、JPEGファイル、PNGファイルなどで提供されています。 ロゴマークの使用には申請などが必要なことがあります。

山形大学
VIDM ロゴマーク取扱規程 商標登録 ロゴマークについて
11月のプレミアムフライデーのロゴ

ラスター形式とベクター形式を組み合わせた場合

下の図は、ラスター形式(jpg)のライブカメラの映像にデータベース上のアノテーションデータを ベクター形式(svg)で組み合わせ、objectタグでhtmlに埋め込んだものです。

Fig. 3301の南東側から見たライブ映像

下の図は、手書きの画像をラスター形式(jpg)で読み込み、それに目盛りをベクター形式(svg)で組み合わせ、objectタグでhtmlに埋め込んだものです。

https://edu.yz.yamagata-u.ac.jp/Public/54299/Common/Chart/borutamo.asp

音楽・音声

音楽表現ファイル, wave, midi, mp3形式などがある.

米沢高等工業学校校歌
正弦波(サイン波)
矩形波
のこぎり波(鋸歯状波)
https://www.bearaudiotool.com/jp/midi-to-mp3
https://noike.info/~kenzi/cgi-bin/smf2mp3/

テキストを音声に変換したり、音声を表現するXMLが生まれた。

音声合成マークアップ言語 (SSML)

ワイヤレス画像通信とインターネットラジオ

ワイヤレスメルチメディアとしてMiracast, Widi, Chromecastがある.

動画配信などインターネットラジオ,Youtube

HTML5になって、video要素が追加されて、Youtubeなどのサービスを使わなくても,mp4形式やmov形式のビデオファイルをウェブサーバのみで動作配信ができるようになった。

電池の内部抵抗と電圧降下

SNSとブログ

インターネットサービスとマルチメディア

ウェブサービスとWWW

ブラウザーとURL

HTML言語とHTTP

HTMLとハイパーリンク

HTMLの歴史

1990年に文書記述言語SGMLから派生したHTMLによって文章と一緒に画像を表できるようになる.

1994年にはW3Cが発足されWWWに関するコンソーシアムが発足する. 2008年には,スマートフォンに対応したHTML5が間隔された.

HTTPとHTTPS

数式表現 MathML

実際にHTMLをメモ帳で書いてみよう

下記の例を参考に書いてみよう↓

演習:受講成果のホームページへの公開

本学の教育用公開ウェブサービスを使用して,受講成果をホームページとしてまとめます.

課題へのエントリー

新型コロナウィルスの影響のため、オンライン授業のため、課題エントリーは不要です。

https://a.yamagata-u.ac.jp/amenity/Syllabus/LectureHistoryEntryQR.aspx

にアクセス

課題提出フォルダ

\\yzdn\dfs\share6\www\Public\52210\2018\(ユーザー名)です.

例)\\yzdn\dfs\share6\www\Public\52210\2018\tab12345

ファイルエクスプローラ(エクスプローラ)を起動して,\\yzdn\dfs\share6\www\Public\52210\2016\ にアクセスしてください.(参考

前半の授業での成果をまとめ公開してください.公開ウェブサイトの画像をGoogle+に投稿してください.

新型コロナウィルスのため、自宅からFTPSを使ってファイルをHTMLファイルを更新してください。詳細は 自宅からFTPSを使ってアップロードする場合 をご覧ください。

また、WindowsでのFTPSに対応したソフトのインストール方法は、こちらをご覧ください。 Mac版は、Googleなどの検索エンジンで検索して、インストールしてください。

相互リンク

全体の完成度を高めるために,ご近所さんとリンクを貼ろう

ご近所さんの作成したホームページにリンクを貼ってください.

学生の受講成果の公開ページ一覧

2019年 受講生

2020年 受講生

関連

安全なウェブサイトの作り方, IPA, https://www.ipa.go.jp/security/vuln/websecurity.html

HTMLの文字化けの対処方法は,検索エンジンで調べてみよう. 漢字コードをhtmlファイルの <head>要素内にmetaタグを使って記述しましょう.

<head>
   <meta charset="utf-8"/>
</head>
    

QRコード
https://edu.yz.yamagata-u.ac.jp/Public/52210/52210_05.asp

SSLの仕組み

このマークはこのページで 著作権が明示されない部分について付けられたものです。

山形大学 データベースアメニティ研究所
〒992-8510 山形県米沢市城南4丁目3-16
3号館(物質化学工学科棟) 3-3301
仁科・立花・伊藤研究室 准教授 伊藤智博
0238-26-3573
http://amenity.yz.yamagata-u.ac.jp/

Copyright ©1996- 2020 Databese Amenity Laboratory of Virtual Research Institute,  Yamagata University All Rights Reserved.