情報デザイン演習II
授業の狙い
デジタル化社会における情報発信スキル・制作技術について学ぶ。
- 情報を分析・整理し、構造化することができる。
- ホームページ・CMSに関する制作フローを理解できる。
- ホームページ・CMSに関する基本技術を理解し、制作できる。
学修内容・方法
ホームページの制作を通じ、情報の分析・整理・構造化、HTML・CSS・JavaScript、サーバ環境、CMSといった基本技術について学ぶ。Wordpressによるサイトの制作・発表を通じて、情報発信スキルの基本を習得する。
使用テキスト
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 ISBN：978-4-7973-9889-2
演習内容
-
オリエンテーション 授業の目的と内容、授業の進め方について説明する。
-
HTML基本 HTMLの基本文法・見出しと段落・画像タグについて学修する。
-
HTML実践 HTMLによるリンク・表・フォームの実装について学修する。
-
CSSの基本 CSSの基本文法・クラス/ID・継承・ボックスモデルについて学修する。
-
CSS実践 リセット/ノーマライズCSSについて学修する。
-
Webの構造化 構造化言語としてのHTML、セマンティックコーディングについて学修する。
-
Webレイアウト基本 float, Flexbox, CSS Gridによるレイアウトについて学修する。
-
Webレイアウト応用 レスポンシブデザイン・CSSフレームワークについて学修する。
-
プロトタイプの作成 HTMLを利用したプロトタイプを作成する。
-
プロトタイプの作成実践 XDを利用したプロトタイプを作成する。
-
Wordpress入門 Wordpressの導入、及び投稿・固定ページについて学修する。
-
WordPress基礎 WordPressのテーマ・メニュー・プラグインについて学修する。
-
WordPressによるサイトの制作1-企画立案 WordPressを用いた実践的なサイトの企画立案をする。
-
Wordpressによるサイトの制作2-コンテンツ制作 Wordpressを用いた実践的なサイトを構築する。
-
[講評] 各自の制作したWordPressサイトについて講評する。
注意事項：毎回ノートパソコンを持参すること。 ※１授業につき、2限連続
スクリーンキャスト
「1冊で全て身につくHTML&CSSとWebデザイン入門講座」第2版の 4-7章までをスクリーンキャスト化しました。
テキストだけでよくわからない人は参考にしてください。
wordpress簡単な使い方
wordpressの機能を一通り触って、簡単なページを作ってみます。
最終課題 I WCBCafe
テキスト4-7章を作成したファイルをStudentVolumeの「2025演習」「情報デザイン演習II」「WCBCafe(chapter4-7)」に学籍番号フォルダを作成してアップしてください。
- カスタマイズ(4-12, 5-7, 6-6,7-10)はしなくて構いません。
- Xプラグイン(7-6)は失敗するのでしなくて構いません
最終課題 II Wordpress
Wordpress を使って自由にホームページを作成してみよう。
条件
- 子テーマを作成すること
- 固定ページと投稿ページがあること
テーマに関する注意
FSE対応のテーマはお勧めしません。(まだ情報もあまりないし…混乱してそう…)
テーマを有効化した時に、外観-メニューがなければFSE対応テーマとなります。
提出方法
QuickTime Playerの画面収録機能を使って、説明音声入りで録画してNASに提出
nas1-mc.thu.ac.jp - 2025演習 - 情報デザイン演習II - 15回最終課題WordPress
に学籍番号.mp4として提出
録画方法がよくわからない人は以下を参考にしてください。(Winの人も)
最終課題III Let’s Coding(できる人だけ)
手がけた人は、提出しましょう。
nas1-mc.thu.ac.jp - 2025演習 - 情報デザイン演習II - 10回目LetsCoding
最終課題 締め切り
1/6 13:00