ウェブデザイン演習 第一回 オリエンテーション.

Presentation on theme: "ウェブデザイン演習 第一回 オリエンテーション."— Presentation transcript:

1 ウェブデザイン演習 第一回 オリエンテーション

2 授業の目標 HTML, CSS, JavaScript(APIを含む)を用いてWebサービスをデザインす ることができるようになる
サーバサイドプログラミング（Node.js）を用いたWebサービスをデザ インすることができるようになる

3 前提知識 基礎プログラミング演習を履修している（HTML, JavaScriptの基礎に ついて理解している）ことを前提とするが、復習を多めに行う

4 Webサービスをデザインするとは？ 見た目・UI だけでなく、機能・仕組み

5 生活の中のWebサービス 昨日の「起床から就寝までの１日の行動」を振り返り、その中でどの ようなWebサービスを利用したか思い出してみましょう

6 授業計画 前半 後半 基礎プログラミング演習1（旧：基礎プログラミング演習）の復習＋CSS
HTML CSS JavaScript 後半 Node.jsを用いてサーバサイドプログラミングについて学ぶ

7 授業資料等 まで

8 評価 毎回の授業の課題（50%） 最終課題（50%） の予定ですが、中間課題があるかもです。

9 授業の進め方 講義と演習 グループワークがあるかも

10 早速、復習 Webページを作成する流れ テキストエディタ ブラウザ
テキストエディタでHTML, CSS, JavaScriptファイルを編集し、保存する 保存したHTMLファイルをブラウザで開いて、表示/実行結果を確認する テキストエディタで適宜ファイルを修正・編集したらその都度保存し、ブラウ ザを更新して確認する テキストエディタ Mac -> ATOM/mi など Windows -> TeraPad など ブラウザ Firefox/Google Chrome

11 課題の提出方法 Ycreportフォルダに「ウェブデザイン演習（秋山）」というフォルダがあ るので、そこに自分の名前と学籍番号を記したフォルダを作る 作成したフォルダの中に、web_design01のように授業毎にフォルダ を作り、各回の課題で作成したファイルを置く 他の人のフォルダに間違えてファイルを置かないよう注意！

12 現時点での理解度を測るための演習 Lv1 Lv2 Lv3 Lv4
好きな食べ物について見出しと箇条書きを使ったHTMLファイルを作り、Webブラウ ザで表示せよ（myfavorite.htmlとして提出） Lv2 ファイルを読み込むと「こんにちは！」とアラート表示するJavaScriptファイル（以下js ファイル）とHTMLファイルを作成し、動作を確認せよ（hello.htmlとhello.jsを提出。も しくは、JavaScriptはHTMLファイルに含めても良い。以下同様） Lv3 ボタンを押すと「こんにちは！」とアラート表示するjsファイルとHTMLファイルを作成、 動作を確認せよ（hello2.htmlとhello2.jsを提出） Lv4 テキストボックスに名前を入力させ、「こんにちは、○○さん！」とアラート表示するjs ファイルとHTMLファイルを作成し、動作を確認せよ（hello3.htmlとhello3.jsを提出）

13 来週までのお願い .install（オンライン学習環境）でHTMLについて復習してきて下さい

14 おわり