月: 2025年7月

学科 サーバーサイドプログラム基礎【オンライン】

-本日のアジェンダ-

1限目
学科 サーバーサイドプログラム基礎
PHP について

2限目
学科 サーバーサイドプログラム基礎
WordPressのPHPでの役割について

3限目
学科 サーバーサイドプログラム基礎
FTPについて

4限目
学科 サーバーサイドプログラム基礎
課題作成

5限目
学科 サーバーサイドプログラム基礎
課題作成

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：サーバアップする方法
内容1：サーバーサイドプログラムについて(WordPressの説明)
内容2：FTPについて
内容3：
課題：なし

【注釈】
・新カリキュラム用に更新（2024/11/7：大浜）
・FTPについては、対面授業での対応が必要なため、前日の対面授業でパスワード収集を行い、後日の対面授業でFTP訓練を行うように設定しています。

・次回「WEBページ制作実習①」では以下を実践予定です。（2024/12/13：中野）
・もしボリュームが多すぎるようであれば、LPのコーディング開始は「WEBページ制作実習②」以降に見送りも可能です。
1. XD基本操作（Photoshopからのデータ取り込み）
2. LPのコーディング開始とサーバーアップ

・以下の変更を実施（2024/12/23：大浜）
・XD基本操作は「実技 マルチデザイン②」で実施します。
・FTP操作については「実技 WEBページ制作実習①」で実施しますので本日分から削除しました。

本日のテーマ

WordPressはphpで出来ています。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「WordPress活用法の教科書⑤.pdf」　
「WordPress活用法の教科書⑥.pdf」

【動画】「WordPress活用法の教科書⑤.pdf」　

【動画】「WordPress活用法の教科書⑥.pdf」

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト（プログラミング）にはサーバー側で動くものとクライアント側（PC側）で動くものがあります。違いについて理解しましょう。

参考サイト

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

PHP入門

PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

ワンポイントアドバイス

PHPはHTMLの延長と考えて、WordPressの利用でよく見かける技術として今後に備えておきましょう。まずは、しっかりとHTML・CSSを理解しましょう。
PHPのファイルにHTMLを記述できるわけですから 必要性と使いどころをまずは理解して、一つ一つ理解してい くのが良いでしょう。

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

学科 HTML/CSS基礎⑥

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

3限目
学科 HTML/CSS基礎⑥
Webページ制作実践

4限目
学科 HTML/CSS基礎⑥
Webページ制作実践

5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：★FTPパスワード回収
課題：練習問題提出
【注記】
・新カリキュラム用に修正（2024/11/7：大浜）
・「WEBページ制作実習①」でFTPツールの使用方法を説明しますので生徒からFTPパスワードを聞いて大浜まで連絡してください。

本日のテーマ

CSSの記述をしましょう

セレクタの得点について【復習】

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

CSS：レイアウト系プロパティ【復習】

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

FTPについて

FTP（File Transfer Protocol）とは、サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つです。

WEBサイトを公開するためには、作成したデータ（HTMLファイルやCSSファイル、画像など）をWEBサーバーに転送する必要があります。FTPソフトを使ってFTPサーバに接続することでファイルを転送することができます。

FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。

【サーバー名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。

【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。

【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。

訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。

パスワードは個人のものを設定します。以下のルールでパスワードを設定してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。

Webページ制作実践③

実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。

  • バックグランド系プロパティ
  • テキスト系プロパティ
  • フォント系プロパティ
  • リスト系プロパティ
  • レイアウト系プロパティ
  • パディング系プロパティ
  • マージン系プロパティ

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「chapter3.zip」　

  1. CSSファイル（style.css）にセレクタの書出し
  2. 文字の大きさや色の設定
  3. header部分のレイアウト作成

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）

FTPパスワードについて

コーディングに向けての準備として、FTPパスワードを決めましょう(以下再掲)

パスワードは個人のものを設定します。
以下のルールでパスワードを設定し、講師に申告してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。