CEC 公開授業 Web サイト制作の流れ ~テーマ決定からサイト公開まで~ 2007 年 9 月 14 日 於:京都すばる高校 学校インターネット教育推進協会.

Slides:



Advertisements
Similar presentations
著作物の利用と使用 開 始開 始 再生時間:3分50秒. 著 作 権 法著 作 権 法著 作 権 法著 作 権 法 利用するには 皆さん、著作物の利用 と使用には区別がある ことを知っています か? 使用するには 作った人の許諾が必要 『著作物の利用と使用』 使うときのルールを 守る必要がある.
Advertisements

情報発信 について ブログ について みなさんに聞きます。 ブログ を知っていますか? みなさんに聞きます。 ブログ をしたことが ありますか?
コンピュータ基礎実習上級 #4 拡張子、 URL 、ファイル名 一般教育研究センター 安田豊. ファイル名と拡張子 ファイルには名前が付けられている 区別のため。整理などに便利に利用するとよい。 abc.html ピリオドによってファイル名を前後に分ける習慣がある。 ピリオドの左は整理のために自由な名前を選べる.
1 ブログ操作マニュアル 2008 年 2 月 15 日作成:株式会社ちらし屋ドットコ ム. 2 ■ ログイン ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi へアクセスし、 ユーザー名、パスワードを入力し、サインインをクリックする。
簡単動画制作 使用するアプリケーション  iMovie  特別教室の Mac にインストールされています  使用方法の動画解説( apple ) 
事前アンケートの結果 調査日:平成23年 ○ 月 ○ 日 対 象: ○○○○○○ 中学校 ○ 年 ○ 組 ○ 名.
Web パブリッシング 1. この授業について. この授業の目標 Web サイトの構築とその維持管理の技 能を身につける –HTML 、 CSS 、( JavaScript ) Web サイトの構築とは –HTML 文書をインターネットに公開するこ と= Web パブリッシング.
~卒業記念文集 CD-ROM の製作~ 題材の長所 ・ Web ページの作り方の基礎が学べる ・ LANの機能を生かし、実体験として ネット ワークを生かした学習 ( 製作 ) が進められ る。 ・ 生徒一人一人が意欲をもてる。課題が もてる。 ・ 費用が少々。フロント・ページ・エク スプレス! 題材の短所.
DTM を使った楽曲制作 DTM を扱う職業などの調査 北海道情報大学 情報メディア学 部 情報メディア学科 新井山ゼミ 宮本 拓美.
ケータイは友達!? 情報モラル学習(5年- 2). ケータイのすばらしさ どこでも電話やメールができる。 必要な情報をさがすことができる。 写真が撮れる。
見る人に優しいホームページ作 り NTCommittee2 関東勉強会 ブルーミング 花井貴久子 2002 年 11 月 30 日.
動画を使った 学校紹介をつくろう! 情報C課題 ⑫.
「家族」 モバイル部門 企画書 テーマ タイトル 校名 グループ名 [文書のタイトルを入力してください] [学校名] モバイル部門の概要
アナログとディジタル実習 パラパラ動画を作ろう!
知的財産権を考えよう! 社会と情報 ⑪.
6 校務の情報化 6.学校に関する情報の発信.
情報基礎A 情報科学研究科 徳山 豪.
本日のスケジュール 14:45~15:30 テキストの講義 15:30~16:15 設計レビュー 16:15~16:30 休憩
T2V技術 Web製作ラボ 4/25, 2011 hayashiLabo 9.
検索エンジン最適化.
イメージCMを作ろう! 選択情報 課題⑦.
情報技術演習Ⅰ 人文学研究のための情報技術入門 2015/07/02
「携帯待ち受けギャラリー」 環境情報学部3年 深澤 洋介.
情報技術演習Ⅰ 人文学研究のための情報技術入門 2013/06/26
CEC公開授業 Webサイト制作にチャレンジ! 2007年11月20日 於:東京都立板橋有徳高校 学校インターネット教育推進協会.
情報技術と著作権.
CG作品展示サイト”Fragments” ~ 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン~
 授業を設計する(その4) 情報科教育法 後期5回 2004/11/6 太田 剛.
e ポートフォリオ(Mahara)の使い方
クイズ 「インターネットを使う前に」 ネチケット(情報モラル)について学ぼう.
講 義 ガ イ ダ ン ス 情報社会と情報倫理 第1回.
Webページを制作しよう! 応用編 高校1年⑩「社会と情報」.
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
第3章 第2節 ネットワークを活用した 情報の収集・発信 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開
Webサイト運営 09fi118 橋倉伶奈 09fi131 本間昂 09fi137 三上早紀.
高専間教育素材共有システム (教育素材の登録)
Webサイト制作の流れ CEC公開授業 ~テーマ決定からサイト公開まで~ 2007年11月20日 於:東京都立板橋有徳高校
さあ、楽しみながらホームページ作成に挑戦しましょう
WebCluster スライドショーで見る操作ガイド
クラシック音楽普及プロジェクト KG:mao B3 wakutin.
イメージポスターを作ろう! 高校2年 情報選択②.
中間発表 アリの王国更新 金華山の写真整理 柏崎 奈々 中間発表を始めます。
コンピュータ基礎実習上級 #1 概要説明と基礎体力テスト
アナログとディジタル実習 パラパラ動画を作ろう!
基幹理工学研究科 情報理工学専攻 後藤研究室 修士1年 魏 元
ICT機器の種類と特性の理解 愛媛県総合教育センター 情報教育室.
情報技術演習Ⅰ 人文学研究のための情報技術入門 2017/07/06
ケータイの使い道に関心を 子どもがケータイをどのように使っているかご存知ですか?
プログラミング 設計資料 メンバー:.
情報科教育法 課題4 「情報科学習指導案」 2003/07/09 千葉佑介 野田誠遼平井亮自
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
ICT活用指導力チェックシート(小学校版)
スマホ追従バナー スクロールしてもついてくる! スマートフォンでの回遊性アーップ★.
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
「元気な社会」 モバイル部門 企画書 テーマ タイトル 校名 グループ名 [文書のタイトルを入力してください] [学校名]
「友と学ぶ」 モバイル部門 企画書 テーマ タイトル 校名 グループ名 [文書のタイトルを入力してください] [学校名] モバイル部門の概要
1.Webサイトの情報を活用しよう プレゼンテーション資料
“SFC SUBWAY Maniacs” プロジェクト計画書
SFC鴨池スタイル 企画・設計 環境情報学部1年 t12472ms 杉浦 学.
一人暮らしの男性のための料理検索システムの設計
HP作成 そろそろまとめ編 担当:TAの人.
情報を持つ人が直接発信する FreeStyleWikiを 使った学校Webサイト
発表32 レポート評価支援について (剽窃部分と指導箇所の検出)
? このテンプレートの使用方法 各スライドの手順に従ってプレゼンテーションを作成します。
モバイル部門 企画書 「旅~旅のおもてなし」 テーマ タイトル 校名 グループ名 [文書のタイトルを入力してください] [学校名]
情報モラル標語 行動宣言を考えよう! 高校2年 情報選択⑤.
情報ネットワークと コミュニケーション 数学領域3回 山本・野地.
Name:○○○○○ Job category: web designer
Name:○○○○○ Job category: ○○ designer
著作権とライセンス.
Presentation transcript:

CEC 公開授業 Web サイト制作の流れ ~テーマ決定からサイト公開まで~ 2007 年 9 月 14 日 於:京都すばる高校 学校インターネット教育推進協会

2 CEC 公開授業: Web サイト制作の流 れ 本日のお話 ■ テーマを考える ■ 制作スケジュールを考える ■ サイト構成を考える ■ コンテンツの素材を集める・作る ■ 著作権についての注意点 ■ コンテンツの見せ方を考える ■ パソコンの中に Web サイトを作る ■ いろいろなブラウザでチェック ■ 作成したコンテンツをサーバーにアップロード ■ たくさんの人にアクセスしてもらうために ■ 最後にもう一度確認 ■ 実際に Web 作品を見てみよう この授業は、競輪の補助金を受けて実施しま す。 財団法人コンピュータ教育開発セン ター

3 ■ テーマを考える ● 自分達が興味のあるテーマ ● 自分達がみんなに伝えたいテーマ ● 教材として必要だと思われるテーマ 世界遺産にすごい 興味がある! 絶滅危惧動物に ついて伝えたい! 化学がおもしろく なる教材を作りたい!

4 ■ 制作スケジュールを考える ● 締め切りはいつ? ● 締め切りまでにやらなければならないことを書き出す ● 作業分担を考える 内容 デザイン HTML 化 例えば、スケジュールは、、、 作品提出締切 : 2007 年 11 月 21 日 9月9月 10 月 11 月 12 月 サイト企 画 素材収集・作成 デザイン HTML 化 例えば、作業分担は、、、

5 ■ サイト構成を考える ● 決まったテーマに基づき、骨組み(章立て)を考える ● サイトの中心となるコンテンツ ● すべてのサイトに共通の項目 (サイトマップ、メンバー紹介、利用・引用情報、など)

6 ■ コンテンツの素材を集める・作る ● 情報の収集(テキスト文や写真など) ● 集めた情報を噛み砕いて理解する ● 情報の選択 ● 情報の再構築(自分達は何を伝えたいのか?)

7 ■ 著作権についての注意点 ● 素材情報は誰が作ったものか? ★自分達のオリジナル → そのまま使って OK ★他の人が作った著作物 → 著作権処理が必要 ● 著作権とは ● 他の人が作った著作物を使う場合は許可が必要 ● 条件付きで自由に使って良い著作物もある 私の著作物を勝手に使ってはダメ! 必ず私の許可をとるように! 私の著作物は自由に使って OK よ! ただし、必ず私のクレジットを入れてね!

8 ■ コンテンツの見せ方を考える ● 文字中心のページ vs. 文字、絵、図を組み合わせたページ ● サイトの章ごとにページのレイアウトを紙に書いてみる ★サイト全体を通じて共通のデザインは? ★章ごとの見せ方の工夫は? トップページ 第 2 階層ページ 共通の デザイン

9 ■ パソコンの中に Web サイトを作る ● ページ全体のレイアウトやデザインを作成 ● テキストを HTML 化 ● 挿絵や解説のための図を作成

10 ■ いろいろなブラウザでチェック ● 中心はインターネットエクスプローラーとファイアフォックス ●Mac ユーザーも考慮にいるとサファリ インターネットエクスプローラー ファイアフォックス

11 ■ 作成したコンテンツをサーバーにアップ ロード ● サーバーとは何か? ●FTP (オーサリングソフトの FTP 機能を含む)でアップロード ● ブラウザでサーバーにアクセスし、全ページをチェック インターネット パソコン サーバー

12 ■ たくさんの人にアクセスしてもらうために ● サイトの名前をたくさんの人に伝える ★ contest.thinkquest.jp/tqj2008/xxxxx/ vs. 独自ドメイン名 ● またアクセスしたいと思わせる工夫 ★遊び心があるコンテンツ ★新しいコンテンツを定期的に追加

13 ■ 最後にもう一度確認 ● コンテンツに誤字脱字はないか ● 他の人が作った著作物について著作権処理を行ったか ★著作者の許可が必要なものについてきちんと許可をとったか ★著作者の許可が不要なものについて条件を守っているか ★利用・引用・参考文献のページが正しく書かれているか ● サイトマップは正しいか

14 ■ 実際に Web 作品を見てみよう 幸せを運ぶ鳥~コウノトリ~ (兵庫県美方郡新温泉町立浜坂中学校) 幸せを運ぶコウノトリ.jp/

15 ■ 実際に Web 作品を見てみよう 「おてもと」~実は知らないお箸の事~ (京都すばる高等学校) 箸の端を掴む.jp/

16 ■ 実際に Web 作品を見てみよう Let's enjoy food (芝浦工業大学柏高等学校) 楽しいごはん.jp/

17 ■ 実際に Web 作品を見てみよう 食 -Dietetics and Improvement of Health- (芝浦工業大学柏高等学校) 食生活.jp/

18 ■ 実際に Web 作品を見てみよう 「世界遺産の奇跡」 (芝浦工大柏中高等学校) 世界遺産めぐり.jp/

19 ■ 実際に Web 作品を見てみよう 「 Glory Hole 」 (芦屋大学付属高等学校 / 関西大学第一高等学校 / 兵庫県立西宮北高校)