LogoMark.png

特定演習|情報デザインA/2020/0520 の変更点


#author("2020-05-20T09:45:24+09:00","default:inoue.ko","inoue.ko")
#author("2020-05-20T11:56:34+09:00","default:inoue.ko","inoue.ko")
*第4回 Web制作環境の準備
[[特定演習|情報デザインA]]|''2020.05.20''
~

***第4回目の要件
-''受講生側''|以下の作業を行なって下さい
--1. 演習の環境を整える作業(ソフトのインストール)を行なって下さい。
--2. サンプルのダウンロードと動作確認を行なって下さい。
--3. テキストエディタを使った編集体験をして下さい。
--4. テキストエディタの基本的な使い方について学習して下さい。
--5. 演習の最後に、大学院サイトでの「報告」を求ています。
&fontawesome(far fa-hand-point-right); [[大学院サイト>https://vision.ip.kyusan-u.ac.jp/art-gs/]] 
--質問はメールでお願いします。授業時間帯であれば、即答します。
inoue.ko@ip.kyusan-u.ac.jp

-''教員側''|井上(貢)は、以下のことを実施します
--このページにおいて、技術解説を行う。
--授業時間内は、メール等で質問に対応する。
--授業時間終了後、受講生のページを確認・調整する。
~

***受講生情報
//-[[芸術研究科 情報共有サイト>https://vision.ip.kyusan-u.ac.jp/art-gs/]]
//-[[上笹貫 鷹暁>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E4%B8%8A%E7%AC%B9%E8%B2%AB+%E9%B7%B9%E6%9A%81]]
-[[季 卓芸>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E5%AD%A3+%E5%8D%93%E8%8A%B8]]
-[[蔡 玥阳>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E8%94%A1+%E7%8E%A5%E9%98%B3]]
-[[宋 高天>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E5%AE%8B+%E9%AB%98%E5%A4%A9]]
~

'''''以下、まずは目次を見て、授業の全体を把握してから、順に読み進めて下さい。'''''

~

***本日の目次
#contents2_1

~

**はじめに
第3回目以降の遠隔授業でも、受講生専用のページを利用します。
[ 氏名 ]/WebDesign というサブページの存在を確認して下さい。 
今後の演習の成果については、そのページを使って公開します。
~
~
**1. 学習環境の整備
はじめに、あなたのPC上に、Web制作の環境を準備していただきます。以下の2種類のツールを使います。いずれも[[OpenSource]]です。無料でダウンロードして使えるので、自宅の学習環境に準備しておいてください。
~

***テキストエディタ
-[[テキストエディター>TextEditor]] とは、文字を入力編集するためのシンプルなツールです。基本的にこれがあれば Webデザインの仕事は全部できます。特別なソフトウエアは必要ありません。

-以下のページでフリーのものをいくつか紹介しています。
[[TextEditor]] 

-テキストエディタはあなたのお好みで何でも構いません。いずれかをダウンロードして、あなたのPCにインストールして下さい。「どれにすればいいか迷う・・」という場合は、大学の実習室と同じ、[[Atom]]をお勧めします。
https://atom.io/
~

***ブラウザ
-[[ブラウザ>Browser]]とは、Webページを閲覧するソフトウエアのことで、Chrome、Firefox、Safari、MS Edge などがそれにあたります。
-Windows の方、Mac の方、いずれも、Chrome、Firefox、はダウンロードしてインストールしておいて下さい。
--[[Google:Chrome ダウンロード]]
--[[Google:Firefox ダウンロード]]
~

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

**2. 基本サンプルのダウンロードと動作確認
受講生の中には、Webデザイン基礎A, B の受講経験のない方もいるかと思います。そこで、まずは、Webサイトを構成するファイルを丸ごとダウンロードしていただき、それを改編しながら、各ファイルの役割を確認していただきたいと思います。
まずは、Webサイトを構成するファイルを丸ごとダウンロードしていただき、それを改編しながら、各ファイルの役割を確認していただきたいと思います。
~

***サンプルのダウンロードと解凍
HTML+CSS によるWebサンプルです。以下から丸ごとダウンロードして、フォルダを開けてみて下さい。

-以下にアクセスして、緑の「clone or download」をクリック。「Download ZIP」を選択して、あなたの手元にダウンロードして下さい。
https://github.com/koichi-inoue/SampleSite

-ダウンロードした SampleSite-master.zip をデスクトップに移動して下さい。

-ZIP形式に圧縮されているので、これを解凍します。
 SampleSite-master.zip をダブルクリック、または、右クリック>解凍
>  SampleSite-master フォルダーができます。

-フォルダを開いて内容を確認して下さい。
--''index.html'':HTMLファイル
--''style.css'':スタイルシート
--README.md:不要です。削除して下さい。
~

***サンプルの表示確認
-ブラウザで新規ウインドウを開く、または、別のブラウザを起動して下さい。
-index.html を ブラウザのウインドウにドラッグ&ドロップして下さい。
-サンプルが表示されればOKです。

サンプルは以下と同じ形で表示されるはずです。
https://koichi-inoue.github.io/SampleSite/
~

***サンプルのフォルダについて
-フォルダ名は変更しても構いません。ただし、作業中にフォルダ名を変更すると混乱するので変更するのであれば、今行なって下さい。
例)SampleSite-master > MyWebsite

-オリジナルを残して、コピーを作成する場合は以下。
--SampleSite-master を [option(ctrl)] + ドラッグ  > 複製ができます。
--できた複製のフォルダ名を MyWebsite などに変更

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


**3. ソースコードをテキストエディタで編集
では、さっそくサンプルを編集してみましょう。

&color(red){本日は、みなさんの手元で作業を行なうのみです。演習の進捗確認については、次週以降、相互に閲覧可能となる仕組みをつくりますので、それ以後、毎週進捗確認を行います。今日の段階では、手元のWebサイトフォルダをしっかり管理しておくようお願いします。};
~

***Webデザイン 初心者の方へ
-Webサイトの大半は、HTML と CSS という2種類のファイルで構成されています(写真やイラストは、独立したデータとして別に扱います)。
-index.html、style.css ともに ''テキストファイル'' と呼ばれる形式のデータで、文字が並んだだけの、最もシンプルなものです。
-テキストデータは、ワープロ、メモ帳、その他、あらゆるソフトウエアでそれを開いて編集することができます。
-したがって、文字列の編集ができる ''テキストエディタ''があれば、Webサイトは制作できるのです。特別なソフトウエアは不要です。

&color(red){HTMLとCSSの説明は後日になります。今日は、あなたのテキストエディタの使い方に慣れていただくために、軽く触るだけです。};
~

***テキストエディタを起動して下さい
-本日の最初に準備した、あなたのテキストエディタを起動して下さい。
-ファイル>開く>index.html を選択 あるいは、index.html をエディタの画面にドラッグ&ドロップでファイルが開けることを確認して下さい。
~

***体験のプロセス
編集体験のプロセスは以下のとおりです。事前にご確認下さい。
-index.html あるいは style.css をテキストエディタで開く
-部分的な書き換えを行う
-ファイル>保存(英語では FILE > SAVE )
-index.html をブラウザにドラッグして結果を確認
すでに index.html が表示されていた場合は、ブラウザの更新
~

***index.html の編集体験
まず、はじめに HTMLファイルの編集を体験します。

-index.html をテキストエディタで開いて、以下の部分を書き換えて、ページの情報が変化することを確認して下さい。
 <title>Sample Site</title>  の Sample Site という文字列
 <h1>Sample Page</h1> の Sample Page という文字列
 <li><a href="#">home</a></li> の home という文字列を top に
 <article>
   article 01   ← この部分を長文に
 </article> 

-<> の部分、HTMLタグ の構成が壊れるとページのレイアウトが崩れます。
崩れてしまった場合は、COMMAND + Z(Windows は CTRL + Z )で編集を元に戻して下さい。

~

***style.css の編集体験
次に、CSSファイルの編集体験を行います。

-style.css をテキストエディタで開いて、以下の部分を書き換えて、ページのビジュアルが変化することを確認して下さい。
 color: white; > color: yellow;
 background: #333;  > background: red;
--color は文字の色です。CSSファイル内に数カ所あります。
--background は背景色です。CSSファイル内に数カ所あります。
--色の英語名については、以下を利用することができます。
https://www.colordic.org/

-記法の構成が壊れるとCSSが機能しなくなります。崩れてしまった場合は、COMMAND + Z(Windows は CTRL + Z )で編集を元に戻して下さい。
~

'''''以上、「ファイルを書き換えたら、ページの表示が変わる」ということが確認できればOKです。'''''

~
~

**4. テキストエディタの操作演習
次回以降の演習に備えて、あなたのテキストエディタの基本操作と、コードの書き方について、学習しておいて下さい。
~


***あなたのテキストエディタで、以下の基本操作を確認して下さい。
-文字列のコピー&ペースト(キーボードショートカット)
-画面の分割表示の方法(2画面同時編集ができるように)
-文字列の検索と置換の方法
-インデント(字下げ)の効率的なやりかた

ATOM をお使いの場合は、以下に解説を書いています。
-[[Atom]]
~

***ソースコードの書き方について
-ソースはそれ自体、見やすく書くのが基本です。
- TAB,半角スペースでインデント(字下げ)を設定しましょう。
- TAB,半角スペースは表示上は無視されます。
-全角スペースを使うと簡単に余白を作ることもできますが、デザイン上の余白はスタイルシートを使うのが基本です。
~


***文字コードについて
-テキストデータは、特定の文字コードでデジタルデータ化されています。
-現在は 世界中の文字を扱える[[UTF-8という文字コード>TextEditor#code]]を使って記述するのが一般的なので・・・
--エディターの環境設定で、文字コード:UTF-8 を確認して下さい。
--HTMLのヘッダー部分、meta タグに文字コード:UTF-8が正しく宣言されていることを確認して下さい。

~
~

**5. 大学院サイトの更新
本日の成果、あなた自身の制作環境の構築結果について、大学院サイトのサブページ WebDesign に記載された以下の部分を、各自の環境に合わせて修正して下さい。
~

 **APPENDIX
 ***演習環境
 -OS: macOS  10.14.6(MacBook Air)
 -Editor:Atom
 -Browser:Chrome, Firefox, Safari
 ~
~

'''''第4回目は、以上をもって終了とします。お疲れ様でした。'''''
~
~

**APPENDIX

***次回、第5回について
次回の演習では、みなさんの進捗を確認するための、Webサイトの公開方法についてご説明します。
 通常の授業であれば、大学のサーバーが使えるのですが、大学サーバーは学習用のため、学内ネットワークでしか閲覧ができません。そこで、Webサーバーの機能をもつ GitHub のアカウントを取得して、そこからWebサイトを相互に閲覧できるようにします。
 では、次回も同様に進めますので、よろしくお願いします。
~
~