情報処理B(長嶋)
お知らせ(2/13)「課題」の提出期限となりましたので、皆さんの作品を評価して、成績付けを行いました。 作業が終了し、JohoB.htmlおよび関連データについては消去するも残すも自由となりましたので、お知らせします。
- シラバス
- 履修登録に関する告知 (2010.09.09)
- 受講者確定 (2010.09.28)
0821010 0822024 0922002 0922031 1021001 1021003 1021005 1021007 1021009 1021018 1021020 1021021 1021025 1021026 1021028 1021032 1021033 1021034 1021038 1021041 1022001 1022002 1022003 1022004 1022005 1022006 1022007 1022008 1022009 1022010 1022011 1022012 1022013 1022014 1022015 1022016 1022017 1022018 1022019 1022020 1022021 1022022 1022023 1022024 1022025 1022026 1022027 1022028 1022029 1022031 1022032 1022033 1022034 1022036 1022037 1023004 1023008 1023009 1023015- 話題メモ
- 1週目(9/28)
- 履修登録に関する告知 (2010.09.09)
- ぎりぎり定員内の履修希望者が集まったので、11年目にして初めて、抽選ナシ(^o^)
- 本日のメディアアート SUAC先輩の活躍
- 竹田悠子「ごちそうリレー」「こねこね寿司」「←そのデジスタ」「ヤマハ壁画コンペ」
- 山口翔「Around the Clock」「風見屏風」「Paper Play」「trip」「プロになってからの仕事から」
- 「情報処理B」について
- 11/28のCGクリエイター検定に挑戦する人は来週までに申込んで下さい
- 講義の準備 : デスクトップの3点セットを用意
- マイコンピュータ(詳細表示)
- ブラウザ(Firefox)
- メモ帳
- 次回以降、遅刻の無いように (10分遅刻だと身体は出席でも扱いは欠席(^_^;))
- 2週目(10/5)
- 本日のメディアアート
- AniMusicから "Pipe Dream"
- AniMusicから ・ そのメイキング(3D CG)
- 4期生・平野高康 作品 "R&T2" (3回生時)
- 11/28のCGクリエイター検定に挑戦する人は早めに申込んで下さい
- 講義の準備(続)
- エクスプローラ(IEに非ず)の設定
- IEなどは絶対に開かないこと
- 隠し事は災いの元(^_^;)
- 全ての拡張子を表示する
- 大事なお話
- インターネットには「匿名」は無い
- イケナイ事をしてはいけない、というお話
- 今後の講義の進め方、質問について
- コンピュータの内部構造について・コンピュータとネットワークの関係について
- 「SUAC内」(www.is.suac.ac.jp)と「SUAC外」(www.suac.ac.jp)の区別
- 「ホームページ(ブラウザ上のコンテンツ)の基本はHTMLである」
- HTMLとは(背景にある思想を理解しよう)
- 「情報処理B」におけるHTMLと世間一般のHTMLとの関係について
(参考)HTML要素(Wikipedia)- 共通「読み替え」ルール(1) : "Netscape" → "Firefox" として下さい
- 共通「読み替え」ルール(2) : "Qドライブ" → "Rドライブ" として下さい
- このテキストは1994年頃に作ったものです。
↓15年間以上「上位互換」が続くHTMLの意義(文化)を考えてみよう- ホームページの作り方 Part1
- 目標は「HTMLソースを読める」こと! (ツールで作るのは猿でも出来る)
- 「HTMLのソースを読む」ということ
- デフォルトのHTMLファイル名「index.html」「index.htm」
- 上手いHPテクニックは「ページのソース」でイタダキ(^_^)
- 「文字(コード)」に注意すること
- 全角文字と半角文字、半角カタカナは常に厳禁 !!
- ファイル名のピリオド以降を「拡張子」と言う
- HPのHTMLソースはブラウザの「ページのソース」で必ず見える(秘密にできない)
- デフォルトのHTMLファイル名「index.html」「index.htm」
- タイトルは単なる題名でなく、ブックマークのリストとなるので重要
- タイトルは「半角英数字」だけを使う、という習慣がお薦め
- ファイル名には日本語厳禁(自分では見えてもサーバに置いたら見えなくなる)
- ファイル名には「スペース」も厳禁(全角も半角も)
- (半角英字で)大文字と小文字を区別する場合(Unixのファイル名/Java)と、しない場合(タグ、パソコンのみ)がある
- 使用できる文字、使用してはイケナイ文字(Web自動翻訳の時代に向けて)
- 全てにおいて 半角スペースは厳禁(スラッシュも)
- 全てにおいて 「半角英数字」として使える記号は「-」と「_」だけ、と考えよう
- ファイル名 半角英数字のみ 大文字小文字も区別する
- ディレクトリ(フォルダ)名 半角英数字のみ 大文字小文字も区別する
- URL 半角英数字のみ 大文字小文字も区別する
- メイルアドレス 半角英数字のみ 大文字小文字は区別されない ハイフンで始まるのは禁止
- BODYタグのオプション(1) 背景色とテキスト色、光の3原色、「色」と「光」
- BODYタグのオプション(2) 背景色の16進数表現
- 翌週までの宿題は以下です。
- ここまでの内容を自分なりに理解して使えるように「復習」しておくこと
- 自分なりの「背景色」「文字色」(16進表現)を捜してくること
- 3週目(10/12)
- 本日のメディアアート (先輩の足跡から何を学ぶのか)
- 3期生・斉藤真理子 作品 "POOR CLOWN" (卒制)
- 7期生・石川幸 アニメ初作品(1回生の夏休み)
- 1期生・伊藤裕三郎 作品 (卒制) + 職場レポート
- 11/28のCGクリエイター検定に挑戦する人は本日が申し込み期限です
- 情報リテラシに関する話題 - 「体調不良のため本日欠席します」というメイルを出す行為は学生として失格である、という話
- HTMLとその後に発展した技術との関係(この講義における扱い)
- CGI
- Java
- Shockwave(Director)
- Javascript
- CSS
- Flash
- XML
- 携帯モードHTML
- ・・・
- 「URL」について - この科目の最大の眼目である !!
- ホームページの作り方 Part1 の続き
- BODYタグのオプション(3) 「Webセーフカラー」
- BODYタグのオプション(4) 背景画像
- 画像データについて ※CGクリエイター検定受験者は完全に理解します
- タテとヨコの比(アスペスト比)
- 画面の解像度(VGA,SVGA,XGA,SXGA,...)
- ホームページ上に見える画像は全てイタダキ可能。ただし著作権と肖像権を十分に考えること。
- スクリーンショットは画素ごとにカラー値を持つ。BMP,PICT,RGB。
- これをインターネットでは圧縮されたJPG(JPEG)かGIFに変換して利用する。(PNG)
- 静止画データの使い分け : JPG
- 静止画データの使い分け : GIF
- 静止画データの使い分け : PNG
- 背景画像は配色、コントラストなどに注意
- 透明色指定により画像の後ろの背景色が見える
- 背景をアニメーション画像にすれば騒然とした画面もできる(^_^;)
- 「ルーブルのモナリザ」と「SUACのモナリザ」
- 画像データ関係のお話 ※CGクリエイター検定受験者は完全に理解します
- ローカルHTMLファイルからネット上の背景画像をURL指定するのはOK
- デジカメの解像度設定に注意。ポスターやカレンダーでもないのに巨大なデータにするのは、 どうせ後で縮小するのでまったく無意味。
- 賢いデジカメの選び方
- ケータイからの画像利用
- 「著作権フリー素材集」の活用
- 焦点距離・絞り・被写界深度・シャッタースピード
- 長嶋サイトの写真の素材集としての活用法
- 翌週までの宿題は以下です。
- ここまでの内容を自分なりに理解して使えるように「復習」しておくこと
- 自分なりの「背景画像」+「文字色」を作る (タテヨコに繰り返し敷き詰めることを考慮する)
- 4週目(10/19)
- 本日のメディアアート SUAC先輩のアニメーション作品より
- 川野弘道 手書きアニメーション作品
- 小出悠美香 "もちつもたれつ"
- ↑そのメイキング
- ある先輩のお話(就職活動にWebテクニックが生きた(^_^))
- 東堂のぞみ Web作品
- 白坂愛 Web作品
- 権平雄一 Flash作品
- HTMLの考え方について(再考)
- HTML 構造(中身)
- CSS 見た目
- Javascript スクリプティング(プログラミング) - インタラクティブ性
- ホームページの作り方 Part1 の続き
- 水平線について
- 水平線の長さを絶対値ドット数として指定することとパーセント指定することの意味
- センタリング
- 強制改行
- 段落
- 「強制改行」の連打
- 「段落」の連打
- HTMLの発想を強制停止させる「PRE」タグの使用には注意を
- フォントサイズ
- フォントカラー
- 「見出し」は「フォントサイズ」+「段落」+「強調」
- 強調(ボールド)
- 「ブリンク」: HTMLに最初から備わっている「動的な表示」
- いろいろな文字表現属性タグ
- 翌週までの宿題は以下です。
- ここまでの内容を自分なりに理解して使えるように「復習」しておくこと
- 5週目(10/26)
- 本日のメディアアート 先輩の仕事より
- クラゼミ英語学習アニメーション集
- 市川喜美子 Flash(サイト)作品
- ホームページの作り方 Part2
- ターゲットウインドウの話
- 翌週までの宿題は以下です。
- ここまでの内容を自分なりに理解して使えるように「復習」しておくこと
- 今後の教材として必要になるので、著作権/肖像権などの問題のない、「500*350ドット」程度の大きさのGIF画像またはJPG画像をRドライブに用意しておくこと(当日に携帯から送るのは禁止)
- 6週目(11/2)
- 本日のOpening Movie 「碧風祭の一日」
- 本日のメディアアート SUAC4期生の作品より
- 伴野舞 作品(3回生時)
- 戸田達矢 映像作品 ★要注意
- 鈴木 絢 映像作品 → 大学院での制作に発展
- 横山 早葉 (映像)インスタレーション作品
- 河原崎 徹 (サウンド)インスタレーション作品
- 岡山 文香 インスタレーション作品
- 板垣 真美子 FLASH作品 → 1106 Webにあります
- 権平 雄一 FLASH作品 → 1106 Webにあります
- クリッカブルマップの実現手法のいろいろ(登場した歴史順)
- CGIによる方法
- Javaによる方法
- Shockwaveによる方法
- JavaScriptによる方法
- クライアントサイド・イメージマップによる方法
- Flashによる方法
- ホームページの作り方 Part3
- クライアントサイド・イメージマップを作ろう
- 画像を用意する
- マップに使う座標をメモする
- マップの定義
- マップ画像の配置
- 翌週までの宿題は以下です
- 「クライアントサイド・イメージマップ」の手法による、オリジナルのイメージマップのあるホームページを作成して下さい
- ここまでの内容を自分なりに理解して使えるように「復習」しておいて下さい
- 7週目(11/9)
- 本日のOpening Movie - AniMusicから ドラム特集
- 活躍する先輩の紹介 - 3期生・藤田クン 「Webデザインの会社」
- 本日のメディアアート 1期生の作品より「創作」について考える
- 内田涼子
- 鈴木未来
- 先週の宿題「クライアントサイド・イメージマップ」のバグ(不具合)の理由について考察しよう
- HTMLの思想の根幹は「人間は知的な中身に専念して」である
- なので「タグのペア矛盾」など、初歩的なミスは大目に見て(ロバストに解釈して)くれる
- 従来の「プログラミング」ではピリオド1つ抜けたミスで開発費10億円のミサイルが爆発した事もある
- そんなHTMLでも対応できないミスが存在する !!
- 「おかしい」と思ったらPCやHTMLやブラウザを疑うよりも自分のミスを疑うこと(確度99.95%)
- 「クライアントサイド・イメージマップ」のバグの焦点は何か?? ※ ヒント「URL」
- 「占い」サイトの自動生成のお話
- クリッカブルマップの実例 : 「今日の運勢」1106版 ←メイキング
- ホームページの作り方 Part3 (続き)
- コメント
- 強制非改行
- 半角不等号を表示する特殊な方法
- 上付き文字・下付き文字
- ホームページの作り方 Part4
- テーブル(作表)
- フォーム(ユーザの入力を送信してもらう機能)
- フレーム
- 翌週までの宿題は以下です
- 「クライアントサイド・イメージマップ」による、オリジナルのイメージマップのあるホームページは完成させておいて下さい
- フレーム分割のあるホームページを作成して下さい
- 分割された複数のフレームの中身が切り替わるようなリンク構造として下さい
- ここまでの内容を自分なりに理解して使えるように「復習」しておいて下さい
- 8週目(11/16)
- 本日のOpening Movie - AniMusicから
- 本日のメディアアート ある1期生の変遷
- 鈴木飛鳥
- 来週以降の流れについて少々・・・
- 本日 CGI、CSS、Javascript(1)
- (11/23 祝日)
- 11/30 9週目 Javascript(2) → 課題(1)を出します(12/2までにこのページに)
- 12/7 10週目 ★課題演習日 407開放、長嶋は不在ですがTAは来ます
- 12/14 11週目 課題(1)を皆んなで見よう(^_^)
- 12/21 12週目 ・・・(以下略)
- 課題提出のためのFTP確認
- アクセスカウンタとサーバ統計
- アクセスカウンタ/サーバ統計のメカニズムとCGI
- 愚鈍なアクセスカウンタ
- 賢いアクセスカウンタ
- CGI(サーバ連携)を使わない、いろいろなコンテンツ (HTMLの拡張の歴史) のお話
- テキスト PREタグ、PDF
- 静止画 IMAGEタグ
- Java APPLETタグ
- OBJECTタグ
- EMBEDタグ
- サウンド
- ミュージック(標準MIDIファイル)
- ムービー(ダウンロード)
- ムービー(ストリーミング)
- FLASH(ダウンロード)
- FLASH(ストリーミング)
- Javaスクリプト
- Web(HTML)の「構造」と「見栄え」の分離 → CSS
- スタイルシート(CSS)の話 → CSSリファレンス
- JavaScriptのお話
- JavaScriptとFlashの活用例
- JavaScriptとCGIの連携例 : 日本標準時
- 翌週までの宿題は以下です
- 「クライアントサイド・イメージマップ」による、オリジナルのイメージマップのあるホームページは完成させておいて下さい
- フレーム分割のあるオリジナルのホームページを完成させておいて下さい
- ここまでの内容を自分なりに理解して使えるように「復習」しておいて下さい
- 9週目(11/30)
- 「何かをする」→「何かに繋がる」 というお話
- 自主制作、個展、コンペ・デジスタ
- インカレ
- ロシアのお話
- MAF/MASのお話↓
- MAS2010「物理コンピューティング」ワークショップ 参加者(スタッフ)募集
- 課題提出のためのFTPの設定の確認
- JavaScript講座 Part1
- JavaScriptリファレンス
- 翌週12/7は課題(1)演習日です。長嶋は不在ですがTAの先生は来ます
- 10週目(12/7)
- 本日は課題(1)演習日です。長嶋は不在ですがTAの先生は来ます
- JavaScript講座 Part1
- JavaScriptリファレンス
- 課題1
- 以下の要素/条件を持つオリジナルのホームページを完成させ、SUAC内の自分のエリアに置いて下さい
- 簡単な自己紹介がある
- 他サイト等へのリンクがあっても良いが、このページが消えてその中身が切り替わるのは禁止(リンクは別ウインドウを開くか、フレーム内に)
- 「クライアントサイド・イメージマップ」による、オリジナルのイメージマップがある(リンクポイントは3カ所以上。背景のリンクは禁止)
- フレーム分割がある
- JavaScriptによる「マウスオーバで変化する画像」がある
- 学内からだけアクセスできるそれぞれのリンクは以下となるようにして下さい。FTPするファイル名は「kadai1.html」です。Not Foundなどで見えなければ「未提出」となります
- 11週目(12/14)
- 本日のメディアアート "Dots"とそのメイキング
- ロシアのお話
- 課題(1)の合評(^_^)
- JavaScriptリファレンス
- 次回以降、イアホン(パソコンに挿さるもの)を持参して下さい
- 12週目(12/21)
- 本日のメディアアート - AniMusicから
- JavaScript講座 Part2
- JavaScriptリファレンス
- サウンドとミュージックについて
- メディア造形学科の学生は来年前期の必修専門科目「サウンドデザイン」でみっちりやります
- 「コンピュータと音楽の世界」(長嶋他編著) → 図書館にあります(^_^)
- 「コンピュータサウンドの世界」(長嶋洋一) → 図書館にあります(^_^)
- コンピュータサウンド/コンピュータミュージック
- MIDIの歴史
- サウンドファイル *.wav/*.aiff/*.mp3
- サウンドファイルの再生
- 標準MIDIファイル *.mid
- 標準MIDIファイルの再生
- Cherryのマニュアルですが、このページに隠れている"cherry.zip"のURLを"cherry_m.zip"とするとゲットできます。判らなかったら聞いてください
- Cherryによる打ち込み
- チャンネル : 楽器ごとのパート
- 音色も設定できる
- ドラム(パーカッション)チャンネルだけは特別ルール
- 「標準MIDIファイル(****.mid)形式」で保存 → Webで使える(^_^)
- 次回までの宿題はありません。音楽関係のネタは最終課題でも出ません。イアホン持参も今週で終了です。なお、課題(1)でJavaScriptの部分とかがキチンと完成していなかった人は、最終課題で必須とされる可能性が高いですので、きっちり復習して自分のモノにしておいて下さい
- 13週目(1/18)
- 竹田悠子 YouTube JapanAward2010 Winnerに !
- 大学1回生の「春休み」について ★重要★
- 残りの「情報処理B」について
- 1/25(火) 休講
- 2/1(火) 最終日(最後に授業アンケートあり)・最終課題を提示
- 試験はありません
- 2/8(火) 課題についての質問対応日(出席は取りません)
- Director(Shockwave)からFlashへの歴史
- 本日のメディアアート
- メッセージ性の強いFLASH
- インタラクティブFLASH
- サウンド系FLASH
- 次回までの宿題はありません。なお、課題(1)でJavaScriptの部分とかがキチンと完成していなかった人は、最終課題で必須とされる可能性が高いですので、きっちり復習して自分のモノにしておいて下さい
- 14週目(2/1)
- 本日は「授業アンケート」があるので早めに終わります
- 来週2/8(火)は課題についての質問対応日で出席は取りません
- 「FLASHそのもの」をゲットする方法/ゲットさせない対策について
- Flashコンテンツの見せ方の確認
- 直接にSWFファイルを置かない理由
- 方法(1) HTMLソースで「swf」を検索する
- 対策(1) フレーム分割してソースに「swf」を載せない
- 対策(2) Flashの参照を外部JavaScriptから行う
- 方法(2) jsソースを参照して「swf」を検索する
- 対策(3) Flashファイル名の文字列を分割して結合指定する("swf"が無い)
- 方法(3) ブラウザの「このページのコンテンツ情報」を活用する
- 方法(4) ブラウザのキャッシュを活用する
- 対策(4) ストリーミングにする
- 方法(5) FLVをダウンロードして希望のムービーに変換する
- Webサイトの階層構造について理解しよう
- URLを活用するために必須の知識
- ディレクトリ(フォルダ)の階層構造
- 階層構造を下にたどる指定の方法
- 階層構造を上にたどる指定の方法
- 階層構造を上とか下とかずんずんたどる方法
- コンテンツのまとめ方(1) ファイルの種類別にまとめる
- コンテンツのまとめ方(2) テーマ別にまとめる
- メンテナンス性も考えよう
- 情報処理Bのもう一つのテーマ「情報セキュリティ」「プライバシー保護」「著作権」について
- 「特定のユーザだけに見せる」仕組み - パスワード制限
- Webサイトに関するセキュリティのお話とデモ
- 「古典的セキュリティ攻撃」デモ 6連発
- Web閲覧で外部に出ている情報について
- IPとタイムスタンプ→違法行為は必ず追跡される
- プロキシサーバ(串)について
- ユーザの環境
- 直前にアクセスしたサイトの情報
- ブラクラ(Brouser Crasher)
- ウイルス感染型
- ハングアップ(無限ループ)型
- ソシアル型(精神的被害)
- 有料請求型(精神的被害+ 詐欺)
- スパイウェア
- 感染しても特には悪さをしない
- 個人情報をこっそり流出させる
- フィッシング
- URL欄の詐称(ブラウザのバグを利用)
- 個人の信用情報を入力させる
- クッキー抜き
- IPの詐称(ブラウザのバグを利用)
- クッキー情報を取得
- →成り済まし詐欺に利用
- →プライバシーの流出
- Webサイトのハッキング
- ポートスキャン
- システム侵入(サーバHTTPDのバグを利用)
- アカウント情報を取得
- →rootを取れれば何でもできる
- 「プロファイリング」の危険性(犯罪ではない)
- YAHOOの例
- アマゾンの例
- Google(Gmail)の例
- mixiの例
- 参考資料 : マルウェア (Wikipedia)
- 参考資料 : ボットネット (Wikipedia)
- このサイトで勉強してみよう
- 課題について
※ 成績評価は出席を重視しますので、これまで欠席の多かった人はいくら課題で頑張っても無駄です (過去の出席状況についての問い合わせにはお答えできません。出席データはたいてい講義開始時刻の3-5分後あたりに集計しています。自分の胸に手を当てて思い出して下さい)- 授業アンケート (早めに終わります)
- 講義テキスト/資料
- 「メモ帳(NotePad)」でHTMLを編集する場合の注意点
- ホームページの作り方 Part1
- ホームページの作り方 Part2
- ホームページの作り方 Part3
- ホームページの作り方 Part4
- HTMLの自動生成について
- ターゲットウインドウの話
- Java入門(1) Javaとは何ジャワ(^_^;)
- Java入門(2) 初めてのJavaプログラミング
- Java入門(3) プログラミングしないJava活用
- JavaScriptについて
- JavaScript講座 Part1
- JavaScript講座 Part2
- JavaScriptリファレンス
- JavaScriptとFlashの活用例
- Director(Shockwave)の実験室
- リンク
