Web技術 （World-wide Web -> www）

snsの活用  PCかスマホの基本操作 + 表現力 人間のネット
↑
↓
システム構築技術 管理技術 <= 当ゼミの狙い

Web ⁼ HTTP（通信プロトコル） + HTML（情報表現）

サーバー    （大容量記憶装置 + データ） サーバ機+サーバソフト
　↑　　　　　　　　　　　　　             ↓レスポンス（データ）
　↓　　　　　↑要求（リクエスト）
クライアント（Webブラウザ）

Web2.0 の動向

1. サーバサイドプログラム

   要求に対して その都度 動作するプログラム

   Webサーバ（apache, nginxなど）
       + アプリケーションサーバ + データベース

2. クライアントサイドプログラム

   ブラウザの中でプログラムが動く

   Javascript言語 ～ AltJS(代替言語)
   ～ ライブラリ（部品集積）
   ～ フレームワーク（省力化キット）

3. HTML周辺の技術

   HTMLは コンテンツ（内容）を記述する

   + CSS JSを載せるコンテナ
   a CSS    （表示のスタイル指定 デザイン上重要）
   b JavaScript　（動作を記述）
   c HTMLを生成させる枠組み
      軽量マークアップ言語 ex. markdown
      テンプレート ex. pug
      => HTMLの直打ちはほぼしないで暮らせる

4. Ajax

   昔： リンク（アンカー）をクリックすると
        ページ遷移（ジャンプ）← サーバから新たなページのデータを得る
   今： ページ内で何か変化
       （サーバとの間で通信をしながら　ページの一部書き換え）
           （「DOM操作」と呼ぶ） 

実習

1. Javascript の実行

   • a 開発ツールでの動作

     ブラウザで F12 を押す => コンソール（Colsole）

   • b codepen など オンライン実行サイト

   • c IDE（Eclipseなど）

   • d コマンドプロンプト

2. 準備

   • a node.js 独立したJavascript実行環境（処理系）

     オフィシャルサイトから 64bit（たぶん）のwindows用インストーラ

     または （chocoユーザは） cinst nodejs -y

     （を 管理者権限のコマンドプロンプトで実行）

     コマンドプロンプトで node -v が動くと成功

   • b pug は node.js のライブラリの１つ

     node.js でのライブラリ管理は
       　　 npm（というコマンド）を使うのが一般的

     普通のコマンドプロンプトで

     npm install pug-cli 

   • c エディタとして いいものを使いましょう

     Atom Sublime あたりがおすすめ
     Terapad メモ帳 などの
        デフォルトの文字コードがUTF-8でないものは
        ちょっと苦労するかも