• Save
Web design #12
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web design #12

on

  • 1,004 views

 

Statistics

Views

Total Views
1,004
Views on SlideShare
1,001
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 3

http://mar.lar.jp 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web design #12 Presentation Transcript

  • 1. Webデザイン第12回 ⁃JavaScriptの利用(3) ⁃課題制作:著作権について ⁃課題制作:配色と画面設計 資料配布URL:http://mar.lar.jp/kait/webdesign/
  • 2. 日程 1 4/12 オリエンテーション/Web制作の工程とデザインの位置付け 2 4/19 Webサイトの役割と目的 3 4/26 Webサイトの仕組みと制作に必要な技術 4 5/10 文書の構造とHTMLでのマークアップ/様々なタグ/HTMLの練習 5 5/17 正しいHTMLのために/表組み/領域の区切り設定 6 5/24 レイアウト設計とCSS(1) 7 5/31 レイアウト設計とCSS(2) 8 6/7 リンクとページ遷移の設計/Webページの表示時間 9 6/14 プラットフォームと仕様/小テスト 10 6/21 JavaScriptの利用/課題制作:概要とグループ編成 11 6/28 JavaScriptの利用(2)/課題制作:企画・構成の作成 12 7/5 JavaScriptの利用(3)/課題制作:著作権について、配色と画面設計 13 7/12 情報の更新とCMSの利用/UI/課題制作:コーディング 14 7/19 課題制作:発表 15 7/26 まとめと講評/発展的学習のためのリソース2012年度前期 Webデザイン 第12回
  • 3. JavaScriptの利用(3) 前回の演習 – 「押して下さい」のdiv領域にマウスを乗せたときだけ、文字色が 「#ff0000」となるよう、mylib.jsに変更を加えて下さい ヒント) – マウスを乗せたとき(onMouseOver)で呼び出す関数とマウスが外れたとき (onMouseOut)に呼び出す関数を追加する – document.getElementById(Idname).style.color=“#ff0000” ・・・ <div id="btn1" onClick="pushButton1()“ onMouseOver=“overButton1()” onMouseOut=“outButton1()”>押して下さい</div> <div id="area1"></div> ・・・ タグが長くなりすぎて読みにくい ビューとコントローラ(コード)は分離したいなぁ~2012年度前期 Webデザイン 第12回
  • 4. JavaScriptの利用(3) 前回の演習 var flg = 0 ; var str_hello = “Hello, JavaScript!!“ ; function pushButton1( ) { if ( flg == 0 ) { document.getElementById("area1").innerHTML = str_hello ; flg = 1 ; } else { 決まりきった処理をするだけなのに document.getElementById("area1").innerHTML = "“ ; flg = 0 ; コード量がこんなに・・・ } } function overButton1(){ document.getElementById(“btn1").style.color=“#ff0000”; } function outButton1(){ document.getElementById(“btn1").style.color=“#000000”; }2012年度前期 Webデザイン 第12回
  • 5. JavaScriptの利用(3) 問題点 – HTMLが汚くなる • MVCがうまく分離できない • イベントハンドラではなく、イベントリスナーを作成することも可能だ が、そうするとJSコードが益々長くなる – JSコードの記述が長い • ゼロからエフェクトを作るのはしんどい • CSSの記述と微妙に違ったりするとイラっとくる – AJAXコードが複雑 • ブラウザの差異を考慮するのが面倒 ※授業では扱ってませんが・・・ →生産性が上がらない2012年度前期 Webデザイン 第12回
  • 6. JavaScriptの利用(3) ライブラリ/フレームワークの利用1 – よく使われるパターンは短く書けるよう予め用意されている • DOM操作が容易 • ブラウザの差異を吸収 • AJAXコーディングがラク(簡単にXMLデータ等を非同期にページに組み 込むことができる) • GUIツールの提供 – 主なライブラリ/フレームワーク • Prototype JavaScript Framework – http://prototypejs.org/ – JSライブラリの先駆け的存在 – Ruby on Railsのプロジェクト起源 – ライブラリscript.aculo.us、Ricoのベースとして採用 – document.getElementById(IDname)を$(IDname)で置き換えて拡張 » JSでは、変数名に「$」を使える – クラスベースのオブジェクト指向プログラミングをサポート – ブラウザの差異を吸収するAJAXライブラリ2012年度前期 Webデザイン 第12回
  • 7. JavaScriptの利用(3) ライブラリ/フレームワークの利用2 – 主なライブラリ/フレームワーク • jQuery – http://jquery.com/ – たぶん最も使われているJSライブラリ » kait.jpも首相官邸も採用 » MS Visual Studioも採用 » Ruby on Rails 3.1↑も採用 – prototype.js以上に工夫された「$」 » CSSのセレクタと同じ記述でDOM操作が可能 » 返り値の統一によるメソッドチェイン » ほとんど全てを「$」に入れたため、名前空間を汚さない;他のライブ ラリとの親和性がよい(他のライブラリと同時に使うかどうかは別と して・・・) – 大きくないライブラリ、必要ならプラグインで拡張 » jQueryUI:UIライブラリ(本体には含まれない) » jQuery Mobile:スマフォ向けフレームワーク » サードパーティのプラグインも充実;自分で実装する前にググること 今日はコレを実習します2012年度前期 Webデザイン 第12回
  • 8. JavaScriptの利用(3) ライブラリ/フレームワークの利用3 – 主なライブラリ/フレームワーク • The Yahoo! User Interface Library (YUI) – http://yuilibrary.com/ – (名前の通り)Yahoo!製 » Yahoo!JAPANは使っているような使ってないような・・・ – かなりの規模のライブラリ » ウィジェット、テキストエディタ、テストツール、何から何まで揃う » 全てを一度にロードするわけではないので重くはない – 最初から採用すれば開発はラクかも? » HTMLを書く段階から考慮しないと使いこなせないかも? » すでに構築されているサイトに後付けは難しそうな印象 – WebデザインというよりはWebアプリ制作向け2012年度前期 Webデザイン 第12回
  • 9. JavaScriptの利用(3) ライブラリ/フレームワークの利用4 – 主なライブラリ/フレームワーク • Dojo Toolkit – http://dojotoolkit.org/ – ↑を見ると何を目指しているのか理解できるかも • Google Closure Tools – https://developers.google.com/closure/?hl=ja – Google製 – Gmail, Maps, Docs, …で使われているライブラリ(というか、そのために 開発されたものを整備して公開している雰囲気) – Closure Compiler(最適化ツール)が付属 – Google Web Toolkitは別のプロジェクト • ・・・2012年度前期 Webデザイン 第12回
  • 10. JavaScriptの利用(3) jQueryの利用1 – HTML(前回のファイルを変更) ・・・ <head> ・・・ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src=“hello2.js"></script> ・・・ </head> <div id="btn1" >押して下さい</div> <div id="area1"></div> ・・・2012年度前期 Webデザイン 第12回
  • 11. JavaScriptの利用(3) jQueryの利用2 – HTML(前回のファイルに追加) ・・・ <head> ・・・ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src=“hello2.js"></script> ・・・ </head> <div id="btn1" >押して下さい</div> <div id="area1"></div> ・・・ Google Libraries APIにホスティングされているライブ ラリを利用 イベントハンドラはとりあえず削除2012年度前期 Webデザイン 第12回
  • 12. JavaScriptの利用(3) jQueryの利用3 – hello2.js var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello); }, function(){ $("#area1").text(""); } ); });2012年度前期 Webデザイン 第12回
  • 13. JavaScriptの利用(3) jQueryの利用4 – hello2.js var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello); }, function(){ $("#area1").text(""); } ); }); $(document).ready( ・・・ ); HTMLが読み込まれた(DOMツリーがアクセス可能になった)後、実行 されるブロック。JSでは無名関数を引数に書くことができる。(内 部のブロックに変数を隠蔽でき、名前空間を汚さない。)2012年度前期 Webデザイン 第12回
  • 14. JavaScriptの利用(3) jQueryの利用5 – hello2.js var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello); }, function(){ $("#area1").text(""); } ); }); 「$("セレクタ")」でCSSと同じセレクタの記述でHTML要素を取 り出すことができる。document.getElementByIdから解放され るだけでなく、いろいろ便利なメソッドが追加されている。 $("セレクタ").toggle( F1 , F2 ); クリックされる度にF1、F2と順番に実行される。引数は2つ以 上あってもOK。フラグなんて要らない!2012年度前期 Webデザイン 第12回
  • 15. JavaScriptの利用(3) jQueryの利用6 – hello2.js var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello); }, function(){ $("#area1").text(""); } ); }); $("セレクタ").text (S); 該当の要素の内部テキストを文字列Sにする。2012年度前期 Webデザイン 第12回
  • 16. JavaScriptの利用(3) jQueryの利用7 – hello2.js(前回の演習部分も実装) var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello); }, function(){ $("#area1").text(""); } ); $("#btn1").hover( function(){ $("#btn1").css("background-color","#ff0000"); }, function(){ $("#btn1").css("background-color","transparent"); } ); });2012年度前期 Webデザイン 第12回
  • 17. JavaScriptの利用(3) jQueryの利用8 – hello2.js(前回の演習部分も実装) var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello); }, function(){ $("#area1").text(""); } ); $("#btn1").hover( function(){ $("#btn1").css("background-color","#ff0000"); }, function(){ $("#btn1").css("background-color","transparent"); } ); }); $("セレクタ").hover( F1 , F2 ); 要素にマウスが乗ったとき(onMouseOver)F1、マウスが外れた とき(onMouseOut)F2が実行される。2012年度前期 Webデザイン 第12回
  • 18. JavaScriptの利用(3) jQueryの利用9 – hello2.js(もう少し遊んでみる) var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello).css("background-color","#dddddd"); }, function(){ $("#area1").animate({height:"200px",opacity:"0.5"}); }, function(){ $("#area1").animate({"font-size":"50pt",opacity:"1.0"}); }, function(){ $("#area1").slideUp(500); }, function(){ $("#area1").slideDown(500); }, function(){ $("#area1").text(""); } ); $("#btn1").hover( function(){ $("#btn1").css("background-color","#ff0000"); }, function(){ $("#btn1").css("background-color","transparent"); } ); });2012年度前期 Webデザイン 第12回
  • 19. JavaScriptの利用(3) jQueryの利用10 – hello2.js(もう少し遊んでみる) var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello).css("background-color","#dddddd"); }, function(){ $("#area1").animate({height:"200px",opacity:"0.5"}); }, function(){ $("#area1").animate({"font-size":"50pt",opacity:"1.0"}); }, $("セレクタ").text(…).css(…); function(){ $("#area1").slideUp(500); }, ほとんどのメソッドは自分自身のオブジェクトを返す。 function(){ $("#area1").slideDown(500); }, 「$(“セレクタ”).text(…)」が評価されて「$(“セレクタ”)」 function(){ $("#area1").text(""); } ); が返ってくるので、次に「 $("セレクタ").css(…)」 が評価される。いくつでもメソッドを繋げて書くことができる $("#btn1").hover( (メソッドチェイン)が、あまり繋ぐと読みにくいのでほどほど function(){ $("#btn1").css("background-color","#ff0000"); }, に。 function(){ $("#btn1").css("background-color","transparent"); } ); });2012年度前期 Webデザイン 第12回
  • 20. JavaScriptの利用(3) jQueryの利用11 – hello2.js(もう少し遊んでみる) var str_hello=“Hello, JavaScript!!”; // ここは前回と同じ $(document).ready(function(){ $("#btn1").toggle( function(){ $("#area1").text(str_hello).css("background-color","#dddddd"); }, function(){ $("#area1").animate({height:"200px",opacity:"0.5"}); }, function(){ $("#area1").animate({"font-size":"50pt",opacity:"1.0"}); }, function(){ $("#area1").slideUp(500); }, $("セレクタ").animate (スタイル); function(){ $("#area1").slideDown(500); }, スタイルに書いたCSSになるようにアニメーションする。スタイル function(){ $("#area1").text(""); } ); に書けるのはオブジェクト(JSON); $("#btn1").hover( : “値1”, プロパティ2 : “値2”,…} { プロパティ1 「opacity」は透過度。CSSでの透過度はブラウザ毎に記述が異な function(){ $("#btn1").css("background-color","#ff0000"); }, り煩雑だが、jQuery内でブラウザ毎に処理を変えてくれる。 function(){ $("#btn1").css("background-color","transparent"); } ); });2012年度前期 Webデザイン 第12回
  • 21. JavaScriptの利用(3) jQueryの利用12 – イベントリスナーの設定がラク onMouseOverのようなイベントハンドラと違いHTMLを汚さない • $(…).click(F); クリックしたときのイベントを設定。押す度に動作が変わる場合は、 toggle()を使用。 • $(…).toggle(F1, F2, …); • $(…).hover(F1, F2); – スタイルの変更がラク – DOM操作がラク(CSSセレクタと同じ記述で指定できる) – エフェクトが簡単につけられる – AJAX利用がラク – リファレンス • http://jquery.com/ (本家) • http://semooh.jp/jquery/ (日本語リファレンス)2012年度前期 Webデザイン 第12回
  • 22. Webデザイン第12回 ⁃JavaScriptの利用(3) ⁃課題制作:著作権について ⁃課題制作:配色と画面設計 資料配布URL:http://mar.lar.jp/kait/webdesign/
  • 23. 課題制作:これまでのまとめ web_design_project.pptxの内容 – サイトのテーマ • サイト名 • サイトの目的 • サイトがターゲットとするユーザ – リサーチ • 競合サイト(2~5サイト) • 参考サイト(2~5サイト) – ページ構成(サイトマップ) – サイトイメージ(3語で) – 素材著作権リスト – 画面設計 • 配色設計 • 画面イメージ(モックアップ)2012年度前期 Webデザイン 第12回
  • 24. 課題制作:著作権について Webサイトで利用する素材の注意 – 全てをゼロから作ることはとてもたいへん – 画像、文章、データ、コード、他のサイトや文献等からコピペして はダメ?2012年度前期 Webデザイン 第12回
  • 25. 課題制作:著作権について 原則 – インターネットに公開する=誰でもアクセス可能な状態になる – 誰かが作り出したものには全て作った人に著作権がある • 絵 → 描いた人 • 写真 → 撮った人 • 動画・音声 → 制作者 • 文章・記事 → 書いた人 • データ → データを取った人、資料を作った人 • コード → 書いた人 著作権(Copyright, ©)表示がなくても著作権は存在する – Webサイトに載せるには著作権者の許可が必要 • 著作権者が認めていない掲載は著作権の侵害 – 刑事罰の対象 – 損害賠償請求(民法) – 著作権の認められないもの • 創作的でないもの(オリジナリティーがない、どこにでもあるもの) cf.) 著作権法、知的財産基本法2012年度前期 Webデザイン 第12回
  • 26. 課題制作:著作権について 使用許可の表示 – 公開されていて使用許可が表示されている場合は従う • 「ダウンロード禁止」 • 「転載を禁ずる」 • 「商用利用禁止」 – クリエイティブ・コモンズ(CC)表記 • http://creativecommons.jp/licenses/ • 権利記述の簡素化、アイコンで表示 著作権者を表示 非営利目的に限り使用許可 改変した際のCCライセン 使用の際の改変禁止 ス変更不可2012年度前期 Webデザイン 第12回
  • 27. 課題制作:著作権について 写真の場合1 – 自分で撮った写真を掲載する場合 • 著作権は自分 • 被写体 – 風景写真(人が写っていない、写っていても誰か判断できない) → 掲載OK – 個人が判別できる場合 » プライバシー侵害の可能性 → 写っている人の許可が必要 (許可が得られない人は加工してわからなくする方法もある) – 有名人が写っている場合 » パブリシティ権(肖像権)、プライバシー侵害の可能性 → 掲載NG (所属、関係団体の許可が得られる場合のみ掲載可) – (商用)キャラクターがメインとして写っている場合 → 掲載NG (メインでなければ掲載可)2012年度前期 Webデザイン 第12回
  • 28. 課題制作:著作権について 写真の場合2 – Webで公開されている写真を掲載する場合 • 直リンク(imgタグに相手サイトの画像URLを直接書くこと)はNG • 素材配布サイトからダウンロードする場合 – 公開条件をよく読んで、DL元のURL、著作権者を記録しておく • それ以外のサイトからダウンロードする場合 → 掲載NG 例外:商品紹介等の販売促進目的での掲載(販売を妨げる要素があるとNG) – 書籍・雑誌等の紙媒体をスキャン・写真に撮った場合 → 掲載NG2012年度前期 Webデザイン 第12回
  • 29. 課題制作:著作権について 写真以外の画像の場合 – 表やグラフ等の資料 • 自サイトの記事で必要な場合、次の条件で引用することは可能 – 引用したもの自体を記事のメインとしない – データの出所、調査元を記事内に明記し、引用であることを明確に記述する • 他人が採ったデータから自分でグラフ等を作成した場合も↑に準ずる – 絵、イラスト等の芸術性のあるもの • 自分で描いた場合 – 全てオリジナル → 掲載OK – オリジナルでないものが描かれている » 自分以外の著作物からキャラクターを拝借 » 実在の人物がモデル → NG • 自分以外の著作物 → (写真と同じ扱い)2012年度前期 Webデザイン 第12回
  • 30. 課題制作:著作権について 記事・文章の場合 – 自サイトの記事で必要な場合、次の条件で引用することは可能 • 引用したもの自体を記事のメインとしない • 文章の引用元を記事内に明記し、引用であることを明確に記述する 音楽・楽曲、動画の場合 – 写真と同じように考える – 楽譜は(文章と同じように)表示の同一性ではなく、内容の同一性 をもって複製とされる – リンクとして掲載する場合は、リンク先も合法であることが必要 コードの場合 – オープンソースなライブラリは、通常ライセンスが記述されている のでそれに従う • BSD / MIT / GPL / LGPL / …2012年度前期 Webデザイン 第12回
  • 31. 課題制作:著作権について まとめ – 課題制作で自分以外の著作物を載せるときは • ライセンス、掲載条件を確認する • 著作権者、入手元(URL等)を記録する(記録がない場合で、ライセン ス確認ができない場合、単位を認定できないことがあります) 載せていいか判断が難しい場合は、相談して下さい2012年度前期 Webデザイン 第12回
  • 32. Webデザイン第12回 ⁃JavaScriptの利用(3) ⁃課題制作:著作権について ⁃課題制作:配色と画面設計 資料配布URL:http://mar.lar.jp/kait/webdesign/
  • 33. 課題制作:配色と画面設計 色について1 – RGB色空間 • PCやTVのモニタ等で用いられる色の表現 • 光の三原色:Red (赤)、Green(緑)、Blue(青)の成分で色を分解 • 加法混色 http://ja.wikipedia.org/wiki/RGB2012年度前期 Webデザイン 第12回
  • 34. 課題制作:配色と画面設計 色について2 – HSV色空間 • Hue(色相):色の種類 • Saturation(彩度):鮮やかさ • Value/Brightness/Lightness(輝度):明るさ • RGBより人間の感覚に近いため、通常はHSVで色を考える http://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%932012年度前期 Webデザイン 第12回
  • 35. 課題制作:配色と画面設計 色について3 – HSV色空間 低← Saturation(彩度):鮮やかさ →高2012年度前期 Webデザイン 第12回
  • 36. 課題制作:配色と画面設計 配色設計 – 色はデザイナーが勝手に決められるものではない – クライアントが求めるイメージに基いて決められる • デザイナーは何故その色を選んだのか説明を求められる • コーポレートカラー/ブランドカラーがある場合、配色も制約を受ける – http://www.mizuhobank.co.jp/index.html – http://www.bk.mufg.jp/ – http://www.odakyu.jp/ – http://www.benetton.jp/ – http://www.kanagawa-u.ac.jp/ – Semantic Differential(SD)法で分析する手法もある – 色覚障害者への配慮も必要 ・・・授業内では時間がないのでミニマムな形で実験します 配色についてわかりやすい資料:色彩センスのいらない配色講座2012年度前期 Webデザイン 第12回
  • 37. 課題制作:配色と画面設計 3色ベースの設計 – サイトイメージで決めた3語から連想される色を3色決める • 1語につき1色という対応でなくてもよい • できれば、HSVで調整してRGB値をすぐに確認できるツールが好ましい – PAINT.NET や GIMP , pixlrのパレットも悪くない 例)「大人っぽい」「高級」「都会的」 ↓ #5a2f21 #2c3258 #cccccc • 決められない場合 – kulerで配色を探してみるのも手(kulerは5色)2012年度前期 Webデザイン 第12回
  • 38. 課題制作:配色と画面設計 色の役割りを決める – ベースカラー • 全体の背景色 • 画面の60~70%ほどを占める • 彩度の低い色が無難 – メインカラー • 一番目を引く色 • 画面の20~30%ほどを占める • 画像を使用する場合もメインカラーを考慮する • ブランドカラー/コーポレートカラーを使用する場合はメインカラーと して使う – アクセントカラー • 見出し等で目印として使う色 • 画面の5~10%ほどを占める ※3色以上使う場合はメインカラー・アクセントカラーのバリエーションを作る2012年度前期 Webデザイン 第12回
  • 39. 課題制作:配色と画面設計 色の役割りを決める 例)「大人っぽい」「高級」「都会的」 ↓ #5a2f21 #2c3258 #cccccc アクセント メイン ベース プレゼンファイルに載せること2012年度前期 Webデザイン 第12回
  • 40. 課題制作:配色と画面設計 画面のレイアウトを決める – PowerPoint上でラフなレイアウトを作成 • テーマのコンテンツを考慮して配置する • 主なレイアウトについて眺めたいときは「 Webデザイン レイアウト パターン」とかで検索 – 色の選択を含めて、何パターンか試す • 試したものは捨てずに残しておく • (授業のプレゼンでも使用可) – クライアントにプレゼンする場合は、この中から3パターンくらいを 調整してモックアップの形にする2012年度前期 Webデザイン 第12回
  • 41. ロゴ例 ナビゲーションメニュー メインニュース&トピックス キャンペーン1 キャンペーン2 フッター
  • 42. 課題制作:ここまでのまとめ web_design_project.pptxの内容 – サイトのテーマ • サイト名 • サイトの目的 • サイトがターゲットとするユーザ – リサーチ • 競合サイト(2~5サイト) • 参考サイト(2~5サイト) – ページ構成(サイトマップ) – サイトイメージ(3語で) – 素材著作権リスト – 画面設計 • 配色設計 • 画面イメージ(モックアップ)2012年度前期 Webデザイン 第12回
  • 43. 課題制作:今後の予定 – 7/5 画面設計 (コーディング、ライティング等) – 7/12 プレゼンの順番をくじ引き – 7/17 23:59 公開ファイル(HTML/CSS/JS)提出締切り – 7/19 プレゼン – 7/26 プレゼン • 時間:5分(1人)、8分(2人) • 2人のチームは誰が何を担当したか明確にすること – 7/30 23:59 修正及びプレゼンファイル提出締切り2012年度前期 Webデザイン 第12回