「つまみ食い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/12)
- 背景
- 目的
-
上記ページで
判定はローカルに行われ、パスワードはサーバーには送信されない
と書かれている。- 何を言っているのか?
- ここで言われていることは事実なのか?
それを理解し、自身で確認できる技術を修得する。解答はmanaba
- 課題
HTML入門1~基本書式1(04/19)
- HTMLの記述
- 周辺環境
- 基本的なタグ1
- 課題
HTML入門2~基本書式2(04/26)
HTML入門3~リストと表(05/10)
HTML入門4~画像とリンク(05/17,05/24)
スタイルシート(CSS)による表示の統御1(05/31)
- 指定方法
- 諸要素への装飾
- 課題
スタイルシート(CSS)による表示の統御2(06/07)
スタイルシート(CSS)による表示の統御3(06/14)
- レイアウト・配置
- 実践的な手法
- 課題
応用事例研究(06/21)
- 実践的な手法
- サイトデザインを考える
-
- ユーザーインターフェイス1(再掲)
- 「大きさ」単位設定と多デバイス対応
- 画面レイアウトを設計する
- 課題
フォーム(06/28)
プログラミング事始め1(07/05)
- レビュー
- JavaScript基本1
- PHP基本1
- 課題
プログラミング事始め2(07/12)
PHP実践~サーバーとのデータ授受(07/19)
- 入力データの受け取りと処理
- 課題
JavaScript実践~画面操作(07/26)
- レビュー
- DOM(Document Object Model)・イベント・フォーム
- クライアントとサーバーの協調
- 課題
まとめ(07/26)
- 課題
-
- カフェレストラン
- 各ページで用いられている技術を出来るだけたくさん指摘せよ。
- アルゴリズムの基本
-
- JavaScriptで変数signalが"red"なら"止まれ"、そうでなければ"進め"と出力されるプログラムを書け。
- PHPで1から10までの数値が出力されるプログラムを書け。
- 運賃計算
- 運賃計算ページはクライアントサイドプログラミングで作られているか、サーバサイドプログラミングで作られているか、そのように判断した根拠を含めて答えよ。
- 郵便番号住所検索
- 郵便番号住所検索システムはクライアントサイドプログラミングとサーバサイドプログラミングを併用して作られている。各々の言語のどういう特徴がこのシステムに生かされているか。
解答はmanabaに(解答期限:7/31)