「つまみ食いWebサイト開発」講座
講義概要/Course outline
近年、社会の様々な情報インフラとしてインターネット技術が用いられるようになっている。現代社会における情報の流通、コミュニケーションのあり方などへの理解を深める上でインターネットに関する技術的な理解を深めることは必須である。将来企業その他で仕事をしていく際にも、情報戦略の基盤としてのインターネットの基本的な仕組みを理解していることには大きな意義がある。
本実習ではインターネット技術のうち、ユーザにとっての「窓口」として幅広い役割を担っているWebサイトに関する理解を深めることを目的とする。Webサイトがいかなる技術の組み合わせで作られているかを理解し、サイトを利用するユーザサイドとサイト開設者サイド、各々のWebサイトの「見え方」にまで踏み込んで理解を深める。それを通じてどういうサイトが使いやすいのか、Webサイトを評価をする眼を養う。
Web構築技術として本実習が扱う内容は以下の通り。
- HTML(本実習はHTML5に準拠)
- スタイルシートを用いたサイトデザイン
- サーバサイドウェブプログラム(使用言語はPHP)
- クライアントサイドウェブプログラム(使用言語はJavaScript)
本実習はウェブページ作成に関して全くの未経験者を対象とする。HTMLの基本的なタグの学習から始める。
プログラミング言語も扱うが、難しくはない。トライしてみて、自身の向き不向きを把握していくことは卒業後の進路選択を考える上でも重要である。仮に「自分には向かない」ということを知ることも有意義なことである。学生の間に経験しておくことを強くお勧めする。
到達目標/Attainment objectives
Webサイトの基本構造を理解し、ユーザビリティを中心にWebサイトを適切に評価する視点を持てるようになることが目標である。そのために最低限の技術的知識を学習する。
- HTMLの構造を理解し、基本的なタグを書けるようになる
- CSS(スタイルシート)を用いた統一的なサイトデザインの方法を理解する
- ユーザが入力したデータをサーバ側で処理して表示画面に戻す流れを理解する
- プログラミングを経験し、簡単なサイトを構築する
開発環境・ツール類
- テキストエディタ
- Webブラウザ(Chrome)
- 個人作業スペース(PHPサーバ)
- Markup Validation Service(htmlの文法チェック)
- WEB色見本 原色大辞典 - HTMLカラーコード
- フリー写真素材ぱくたそ
実習内容
オリエンテーション(04/16)
- 背景
- 目的
-
上記ページで
判定はローカルに行われ、パスワードはサーバーには送信されない
と書かれている。- 何を言っているのか?
- ここで言われていることは事実なのか?
それを理解し、自身で確認できる技術を修得する。
- 本実習最終課題
-
- 架空の店紹介サイトを作成
-
- 要件詳細
-
Cafe Restaurantサイトと同等の構成
※トップページ・店紹介ページ・商品紹介ページ・フォーム設置ページの四ページ構成とする。
- 初回作業指示
-
店の概要と「店名」を定めよ
HTML入門2~基本書式1(04/23)
HTML入門4~画像とリンク(04/30)
HTML入門5~総合実習(05/07)
- リンク
-
- 外部ファイルへのリンク
- 絶対参照
- 相対参照
- 内部リンク(id属性)
- 外部ファイルへのリンク
- 作業指示
-
- トップページ・店紹介ページ・商品紹介ページを作成し、相互にリンクを貼れ。
スタイルシート(CSS)による表示の統御1(05/14)
- 指定方法
- 諸要素への装飾
スタイルシート(CSS)による表示の統御2(05/28)
- ボックス
- ボックス表示の切り替え
スタイルシート(CSS)による表示の統御3(06/04)
- レイアウト・配置
応用事例研究(06/11)
- 実践的な手法
- 作業指示
-
- トップページ・店紹介ページ・商品紹介ページを作成せよ。サイトデザインはスタイルシートを用いよ。
総合実習(06/18)
- サイトデザインを考える
-
- ユーザーインターフェイス
- 「大きさ」単位設定と多デバイス対応
- 画面レイアウトを設計する
- 作業指示
-
- トップページ・店紹介ページ・商品紹介ページを作成せよ。サイトデザインはスタイルシートを用いよ。
- 課題
-
- ユーザーインターフェイス1:問1 各サイトの特徴
- ユーザーインターフェイス1:問2 3つのサイトの比較
フォーム1(06/25)
フォーム2(07/02)
webシステムとプログラミング言語1-サーバーとのデータ授受(07/09)
webシステムとプログラミング言語2-画面操作(07/16)
- レビュー
- JavaScript基本
- 課題
- DOM(Document Object Model)・イベント・フォーム
- クライアントとサーバーの協調
- 課題
まとめ1(07/23)
- 本実習最終課題
-
- 架空の店紹介サイトを作成
-
- 要件詳細
-
Cafe Restaurantサイトと同等の構成
※トップページ・店紹介ページ・商品紹介ページ・フォーム設置ページの四ページ構成とする。
まとめ2(03/31)
- 本実習最終課題(再掲)
-
- 架空の店紹介サイトを作成
-
- 要件詳細
-
Cafe Restaurantサイトと同等の構成
※トップページ・店紹介ページ・商品紹介ページ・フォーム設置ページの四ページ構成とする。