情報処理実習3B

2020年度 前期 木04 15:15-16:45 online

「つまみ食いWebサイト開発」講座

講義概要／Course outline

近年、社会の様々な情報インフラとしてインターネット技術が用いられるようになっている。現代社会における情報の流通、コミュニケーションのあり方などへの理解を深める上でインターネットに関する技術的な理解を深めることは必須である。将来企業その他で仕事をしていく際にも、情報戦略の基盤としてのインターネットの基本的な仕組みを理解していることには大きな意義がある。

本実習ではインターネット技術のうち、ユーザにとっての「窓口」として幅広い役割を担っているWebサイトに関する理解を深めることを目的とする。Webサイトがいかなる技術の組み合わせで作られているかを理解し、サイトを利用するユーザサイドとサイト開設者サイド、各々のWebサイトの「見え方」にまで踏み込んで理解を深める。それを通じてどういうサイトが使いやすいのか、Webサイトを評価をする眼を養う。

Web構築技術として本実習が扱う内容は以下の通り。

  • HTML(本実習はHTML5に準拠）
  • スタイルシートを用いたサイトデザイン
  • サーバサイドウェブプログラム（使用言語はPHP)
  • クライアントサイドウェブプログラム（使用言語はJavaScript)

本実習はウェブページ作成に関して全くの未経験者を対象とする。HTMLの基本的なタグの学習から始める。

プログラミング言語も扱うが、難しくはない。トライしてみて、自身の向き不向きを把握していくことは卒業後の進路選択を考える上でも重要である。仮に「自分には向かない」ということを知ることも有意義なことである。学生の間に経験しておくことを強くお勧めする。

到達目標／Attainment objectives

Webサイトの基本構造を理解し、ユーザビリティを中心にWebサイトを適切に評価する視点を持てるようになることが目標である。そのために最低限の技術的知識を学習する。

  • HTMLの構造を理解し、基本的なタグを書けるようになる
  • CSS（スタイルシート）を用いた統一的なサイトデザインの方法を理解する
  • ユーザが入力したデータをサーバ側で処理して表示画面に戻す流れを理解する
  • プログラミングを経験し、簡単なサイトを構築する

開発環境・ツール類

実習内容

順次公開

オリエンテーション(04/16)

背景
目的

上記ページで判定はローカルに行われ、パスワードはサーバーには送信されないと書かれている。

  1. 何を言っているのか？
  2. ここで言われていることは事実なのか？

それを理解し、自身で確認できる技術を修得する。

本実習最終課題
架空の店紹介サイトを作成
要件詳細

Cafe Restaurantサイトと同等の構成

※トップページ・店紹介ページ・商品紹介ページ・フォーム設置ページの四ページ構成とする。

初回作業指示

店の概要と「店名」を定めよ

HTML入門2～基本書式1(04/23)

課題

「ホームページ」黎明期によくあった自己紹介ページのようなページを作成

HTMLの記述
周辺環境
基本的なタグ1
リスト
  • 順番のないリスト
  • 順番のあるリスト
  • 定義リスト
表
  • 表
  • セルの結合

HTML入門4～画像とリンク(04/30)

画像
  • 画像の貼り付け
図示領域
  • 図示領域の確保
課題
リンク
  • 外部ファイルへのリンク
    • 絶対参照
    • 相対参照
  • 内部リンク(id属性)

HTML入門5～総合実習(05/07)

リンク
  • 外部ファイルへのリンク
    • 絶対参照
    • 相対参照
  • 内部リンク(id属性)
作業指示
  • トップページ・店紹介ページ・商品紹介ページを作成し、相互にリンクを貼れ。

    参考:Cafe Restaurant

スタイルシート（CSS）による表示の統御1(05/14)

指定方法
諸要素への装飾

スタイルシート（CSS）による表示の統御2(05/28)

ボックス
ボックス表示の切り替え

スタイルシート（CSS）による表示の統御3(06/04)

レイアウト・配置

応用事例研究(06/11)

実践的な手法
作業指示
  • トップページ・店紹介ページ・商品紹介ページを作成せよ。サイトデザインはスタイルシートを用いよ。

    参考:Cafe Restaurant

総合実習(06/18)

サイトデザインを考える
作業指示
  • トップページ・店紹介ページ・商品紹介ページを作成せよ。サイトデザインはスタイルシートを用いよ。

    参考:Cafe Restaurant

課題
  • ユーザーインターフェイス1:問1 各サイトの特徴
  • ユーザーインターフェイス1:問2 3つのサイトの比較

    • フォーム1(06/25)

    フォームタグによる入力画面設計

    フォーム2(07/02)

    フォームタグによる入力画面設計
    課題

    webシステムとプログラミング言語1-サーバーとのデータ授受(07/09)

    レビュー
    PHP基本
    課題
    入力データの受け取りと処理
    課題

    webシステムとプログラミング言語2-画面操作(07/16)

    レビュー
    JavaScript基本
    課題
    DOM(Document Object Model)・イベント・フォーム
    クライアントとサーバーの協調
    課題

    まとめ1(07/23)

    本実習最終課題
    架空の店紹介サイトを作成
    要件詳細

    Cafe Restaurantサイトと同等の構成

    ※トップページ・店紹介ページ・商品紹介ページ・フォーム設置ページの四ページ構成とする。

    まとめ2(03/31)

    本実習最終課題(再掲)
    架空の店紹介サイトを作成
    要件詳細

    Cafe Restaurantサイトと同等の構成

    ※トップページ・店紹介ページ・商品紹介ページ・フォーム設置ページの四ページ構成とする。