LogoMark.png

Webデザイン実習/2020/0428

第1回 ガイダンス + 最初のサンプル公開

Webデザイン実習/20202020.04.28

第1回目の展開と要件

本日の完成イメージ

以下、JohnSmith さん(架空の受講生)の1回目の授業終了イメージです。ダミーデータのため、リンクは無効になっていますが、みなさんの完成ページでは、それぞれのリンク先で、HTMLのサンプルが確認できるようになっている必要があります。



では以下、まずは目次を見て、本日の作業の全体像を把握してから、順に説明を読み進めて下さい。



第1回 目次


はじめに

Webデザイン実習|前期の演習の進め方


以上が、前期の授業で行う主な内容となります。

Webデザイン実習|学習のキーワード




1. 学習環境の整備

はじめに、あなたのPC上に、Web制作の環境を準備していただきます。以下の2種類のツールを使います。いずれもOpenSourceです。無料でダウンロードして使えるので、自宅の学習環境に準備しておいてください。

テキストエディタ

ブラウザ

FTPクライアントは?

1年次後期の情報デザイン演習1では、FileZilla という FTPクライアントを使って、Webサイトの構成ファイルを大学のサーバーにアップロードする・・という作業を行いましたが、本授業では、GitHub という通常のレンタルサーバーとは異なる仕様のリポジトリ(データの溜池)を使ってWebサイトを公開するので、FTPクライアントソフトは不要です。



2. 基本サンプルをつくる

では、基本中の基本、最初のHTMLサンプルをつくります。
みなさんは去年、一回経験しています。

はじめの1ページ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
  </head>
  <body>
    <h1>見出し</h1>
    <P>
      本文|適当に文章を書いて下さい。
    </P>
  </body>
</html>


はじめの1ページを自分用にカスタマイズ





以上、ここまでは、前年度に1回は経験済みの内容です。
ここで、一旦休憩して下さい。





3. GitHub を用いたWebサンプルの公開

そもそも、GitHubとは?


3.1. アカウントの作成

GitHub の無料アカウントを作成します。


3.2. リポジトリの作成

リポジトリとは、Webサイトやファイルセットなどを GitHub 上で管理するためのプロジェクトフォルダ・・とご理解下さい。リポジトリはいくつでも作ることができるので、その数だけサイトを作ることができます。

index.html ファイルが一つだけしかない小さなWebサイトでも、1サイト = 1プロジェクトになるようにして下さい。「いくつかのサイトをグループにまとめて1つのリポジトリに入れた方がわかりやすい?」と思うかもしれませんが、カテゴリー分けというのは、そこからはみ出したり、どちらに入れるか迷うものも出てきます。グルーピングは、後からリンク集でまとめればいい・・と考えて、シンプルな構成を考えて下さい。

以下、リポジトリの作成手順です。GitHub上にフォルダをひとつ作る・・という感覚でイメージして下さい。


GitHubPagesNew.png
GitHubPages01.png


3.3. ファイルのアップロード

GitHubPages02.png
GitHubPages03.png


3.4. 公開設定

サイトのファイルは、アップしただけでは公開されません。以下の設定操作によって公開されます。

GitHubPagesSettings.png
GitHubPages05.png


設定変更から公開まで数分かかることがあります。


3.5. 不要なリポジトリの削除

作業の過程で、間違った名称のリポジトリを作ってしまった場合は、以下の手順で削除可能です。

GitHubPagesDelete.jpg


付記:サイトの更新方法

ソースコードの更新には、以下の2つの方法があります。

いずれの場合も、Commit changes をクリックして更新が完了します。




はい、お疲れです。これで本日の峠は超えました。
ここで、一旦休憩して下さい。





各自のペースで演習を・・

今日は初回なので、作業の流れを掴んでもらえばOKです。

もういちど、1年上級の先輩のページを参考にして下さい。


演習:P と BR

以下事例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample P & BR</title>
  </head>
  <body>
    <h1>PとBR(改行の違い)</h1>
    <h2>brなし</h2>
    <P>
      本文|適当に文章を書いて下さい。
      本文|適当に文章を書いて下さい。
    </P>
    <h2>brあり</h2>
    <P>
      本文|適当に文章を書いて下さい。<br>
      本文|適当に文章を書いて下さい。<br>
    </P>
  </body>
</html>


演習:H1-H6

以下事例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample H1 - H6</title>
  </head>
  <body>
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
  </body>
</html>




補足講義|軽く読む程度でOK

基本のタグについて解説します。

参考:HTML

ソースコードの書き方について

フォルダ名、ファイル名は必ず半角英数で''

images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。

文字コードについて

リモートとローカルという言葉について

4. 本日の成果の書き込み

学科サイトの氏名/WebSample のページに以下の情報を書き込んで下さい。

本日制作したWebサンプルを報告

以下のパターンで、HTML のサンプル(最低1件)をリンク掲載して下さい。

**HTML
-BASIC SAMPLE:https : //JohnSmith.github.io/html_sample_01/
-TAG P:https : //JohnSmith.github.io/html_sample_02/
-TAG H1 - H6:https : //JohnSmith.github.io/html_sample_03/
~


現在の作業環境についての報告

ページの一番下に、以下のような書き込みを加えて下さい。

**APPENDIX
***制作環境
-OS: macOS  10.14.6(MacBook Air)
-Editor:Atom
-Browser:Chrome, Firefox, Safari
-ImageEditor:Adobe Photoshop CC
~

***公開リポジトリ
-GitHub:https : // github.com/JohnSmith
~


以上で、本日の授業は終了です。お疲れさまでした。

第2回 について

次回も同様に行いますので、定刻になったら、授業のページを開いて、2回目の授業部分を見て作業を進めて下さい。

K'sLife の負荷軽減のため「連絡通知」は使用しませんので、ご了承ください。

おそらく遠隔授業が続くことが予想されます。教員は 授業のページ に実習解説を記載し、受講生の方は、学科サイトの個人ページ に、出来上がったサンプルへのリンクを掲載報告する・・という流れで進めますので、以後、引き続き、よろしくお願いします。








PAGES

GUIDE

DATA

Last-modified: 2020-04-28 (火) 17:46:50