86332
Webプログラミング演習
田中 里花
大学名 清泉女学院短期大学
学部・学科 国際コミュニケーション科 専門教育科目
開講キャンバス 上野 授業形態 演習
履修区分 選択 単位数 2単位
配当年次 2年 開講期
授業の概要

近年のWEBサイトの傾向を意識しながら、テキストエディター、画像処理ソフト(Photoshop)の使い方を学ぶ。操作方法が身についた後は、各自の短大生活で思い出に残った出来事等についての紹介ページを作る。効果的な写真の使い方、知ってほしい情報は何か、などを創意工夫しながら楽しく作り上げる。到達目標は、国際コミュニケーション科独自のWEBサイトへの掲載です。2年間の短大生活の中での体験談をWebサイトにまとめますので、日頃から、写真素材やネタを集めておくように心がけてください。ホームページの作成と公開までの一連の作業を通じて、Webサイトの仕組みを理解し、目的にあわせたページを制作する力をつけることを目指す。ページが正しく表示されない場合などにコードのどこに間違いがあるのかを自分で発見し、正しいコードに直すという作業を経ていくことで、エラーを自分で解決する力と達成感を得ることができます。

学習到着目標

この科目は、国際コミュニケーション科の学習成果 Ⅲ.各分野の応用力・専門性の習得、Ⅳ.②考える力・思考力の向上、Ⅳ.③工夫する力の向上を目標とする。具体的には、それぞれ1)Webに関する基礎知識の定着 2)実践的な演習課題に取り組む応用力 3)Webを使って伝えたいことを企画する力 4)見出しのまとめ方、訴求力のある画像の作成方法 5)相互発表のためのコミュニケーション力の向上 を目標とする。

成績評価方法

課題提出状況と小テストの結果(30%)、最終課題の制作物(40%)で評価する。また、Webデザインという仕事に取り組むことが目的の授業であることから、授業への主体的な取り組み姿勢(30%)を含めて評価。

課題に対する
フィードバック方法

課題については、次の回の授業内において総評をし、希望により口頭による個別フィードバックを行う。期末課題については、発表時に個々にコメントを付す。

アクティブ
ラーニング要素
□外部連携の課題解決型学習(協定あり) □ディスカッション・ディベート □グループワーク ■プレゼンテーション(発表) ■実習・実技・実験 □フィールドワーク □リアクションペーパー
授業計画
授業項目・内容 / 各回の準備学修(予習・復習)について / 担当
1 内容

基本演習1・・HTMLの基本、ウェブページとは 1章、2章

予復習

授業内で進んだところまで教科書の復習および次章の予習(教科書に目を通しておく)

担当
2 内容

基本演習2・・ウェブページを作ろう(グリーン専門店のサンプルサイト) 3章

予復習

授業内で進んだところまで教科書の復習および次章の予習(教科書に目を通しておく)

担当
3 内容

基本演習3・・サブページを作ろう 4章

予復習

授業内で進んだところまで教科書の復習および次章の予習、1〜3章までの章末問題小テスト

担当
4 内容

基本演習4・・CSSの基本 5章

予復習

授業内で進んだところまで教科書の復習および次章の予習(教科書に目を通しておく)

担当
5 内容

基本演習5・・CSSでレイアウト 6章

予復習

授業内で進んだところまで教科書の復習および次章の予習(教科書に目を通しておく)

担当
6 内容

基本演習6・・ウェブフォントの利用、背景、影をつける 7章、8章

予復習

授業内で進んだところまで教科書の復習および次章の予習、5〜8章までの章末問題小テスト

担当
7 内容

基本演習7・・モバイル、SNS対応について 9章(レスポンシブ対応)

WEBクリエイター能力試験の概要について

予復習

オリジナルページの企画(内容、ページ構成)

担当
8 内容

オリジナルページ作成1・・内容の検討、読ませるための見出し、リード文、SEO対策を意識した本文の文章校正

予復習

オリジナルページで使用する写真の準備

担当
9 内容

オリジナルページ作成2・・画像処理練習1(Photoshopの使い方/雑誌の写真加工を参考に)

予復習

オリジナルページの企画(内容、ページ構成)

担当
10 内容

オリジナルページ作成3・・画像処理練習2(記事内使用写真の加工、レイヤーについて)

予復習

オリジナルページ用の文章準備

担当
11 内容

オリジナルページ作成4・・トップページ作成(メイン画像、メッセージ)

予復習

オリジナルページの文章作成(Wordで作成)、使用するカラーの指定

担当
12 内容

オリジナルページ作成5・・サブページの作成

予復習

ギャラリーに載せたい写真を6点ほど用意してくる

担当
13 内容

オリジナルページ作成6・・jQuery(lightbox)を用いた画像のギャラリー制作

予復習

トップページとサブページを仕上げてくる

担当
14 内容

オリジナルページ作成7・・CSSの調整とFTP転送後の調整作業、WEBクリエイター能力試験上級について

予復習

リンク集用の画像を指定されたサイズでPhotoshopで作成してくる

担当
15 内容

FTP転送、国際コムサイト内リンク集ページへの掲載用バナー作成、紹介文の作成

予復習

発表ができるよう最終的なページ調整をしてくる

担当
16 内容

制作物の相互発表と評価

予復習

発表ができるよう最終的なページ調整をしてくる

担当
準備学修
(予習・復習)時間

「各回の準備学修」項目を確認し、演習は4時間程度の予習・復習を奨励します。

教科書

『これからはじめるHTML&CSSの本』千貫りこ著/技術評論社

参考書・文献

『Webクリエイター能力認定試験 HTML5対応 スタンダード 公式テキスト』著作/制作:富士通エフ・オー・エム株式会社

履修条件

実践的な授業内容のため履修者数を20名程度に限定します。(日商PC検定取得者またはWEBクリエイター能力認定試験に興味のある者優先。)

ICT活用 ■双方向型授業【モニタリングシステムを用いて学生の進捗状況について把握し、口頭でアドバイスをする】
■自主学習支援【SJCマナバを介して課題の提出や模範ファイルの授受などを行う】
実務経験 ■実務経験の内容【WEB制作業務、長野商工会議所等での情報教育業務】
■所持している業務関連資格【Webクリエイター能力認定試験上級、情報活用試験(J検)1級、PhotoshopクリエイターEx】
備考

この科目は、(財)全国大学実務教育協会認定資格の関連科目です。詳細は学生便覧をご覧下さい。