WEB班第1回

WEB班第1回

2023年度
WEB班第1回

WEB班の目的

WEB技術を中心に、実際のアプリケーション開発に必要な技術を一通り、楽しく学ぼう。

2023年度
WEB班第1回

WEB技術の全体像

2023年度
WEB班第1回

クライアントとサーバー

2023年度
WEB班第1回

クライアント側

2023年度
WEB班第1回

各々のスマホ上で、プログラムコード(HTML,CSS,Javascript)を、処理すると

alt text

2023年度
WEB班第1回

例) Youtube

alt text

2023年度
WEB班第1回

このようなWEBの画面が出てくる。

スマホ上で、プログラムコードがWEBの画面に変換される。

このプログラムコードの書き方を学ぶ

2023年度
WEB班第1回

サーバー側

サーバー(でっかいパソコン)で、データを保存したり、処理したりして、クライアント(みんなのスマホ上)にデータを送る。

2023年度
WEB班第1回

例)Youtubeでは、動画のタイトルやサムネイルや動画がサーバーで処理され、送信される。
スマホ上で、データを受け取り、それを表示している。

alt text

2023年度
WEB班第1回

今回、次回でやること

クライアント側のコードの書き方を勉強します。

2023年度
WEB班第1回

具体的には、
右のようなWEBを作るために、
どのように左側のプログラムコードを書けばよいのかを勉強します。

alt text

2023年度
WEB班第1回

フロントエンド:クライアント側で動くプログラムの技術

これからは、まずフロントエンドについて学んでいきます。

2023年度
WEB班第1回

見通し

  1. HTMLの基礎
  2. CSSの基礎
  3. 発展HTML
  4. 発展CSS
  5. CSSレイアウト
  6. Javascriptの基本文法
  7. javascriptのEventListener, DOM操作

これ以降はサーバー側(Python,Database),サーバとクライアントの連携について

2023年度
WEB班第1回

活動の進め方

各グループごとに、ミッションを一つずつ解いていってもらいます。

ミッションでは、「このWEBページを再現せよ!」というような課題を出します。

2023年度
WEB班第1回

もちろん、私が配布する資料を参考にしてもらってもよいです。

ですが、それよりは自分たちで調べる力の方が重要です。(私見)

2023年度
WEB班第1回

例えば、インターネットで検索してみてください。良質なページ、悪質なページもあります。そこを自分たちで見分ける力を身に着けてほしいです。

また、今の時代、 AI(ChatGPT) を使えば、より簡単に必要な知識にアクセスできます。

2023年度