第１回 ガイダンス
Webデザイン基礎B/2020｜造形短期大学部｜2020.09.14｜対面
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート
情報共有シートは、遠隔授業時の質疑応答シートを兼ねています。 - 本授業の展開方法について説明します。
- 受講生情報共有のための特設サイトについて編集方法を確認して下さい。
- 最後に特設サイトでの「記事の執筆体験」を求ています。趣旨を確認後、各自ページに書き込みを行なって下さい。
特設サイト（受講生一覧）
以下、本日の内容です。
本日のメニュー
ガイダンス
この授業の進め方について
- 状況に応じて対面と遠隔を切り替えて行います。
- 当日の対面/遠隔については に掲載します。
- 授業連絡：Webデザイン基礎B/2020 に記載します。
「K'sLife の連絡通知」は使いません。 - 授業内容：このページと同様に１回分を１ページに掲載します。
- 対面授業の場合：
- 教室にて口頭で説明します。質疑応答も対面で行います。
- 感染拡大対策にご協力ください。
- 遠隔授業の場合：
- 解説動画をページの冒頭に掲載します。
- 質疑応答は当該時間に 情報共有シート で行います。
学習目標
HTML+CSSによるページ制作の技術を習得するとともに、
自身の「ギャラリーサイト」を構築します。
- 成績評価について
- 演習の進め方について
- 使用するソフトウエアについて
- 成果目標 ： Web標準技術によるギャラリーサイト
Webの現状と演習内容の位置づけ
専門的な知識がなくても、誰でもきれいなWebサイトを持てる時代です
- Jimdo(ジンドゥー） http://jp.jimdo.com/ Webサイトビルダー
- Wix（ウィックス） http://ja.wix.com/ Webサイトビルダー
- WordPress（ワードプレス） http://ja.wordpress.com/ ブログ
参考：https://opensquarejp.wordpress.com/
ですが、この演習では単なるエンドユーザーではなく、デザイナーとしてサイト構築に携わることを前提に、HTMLとCSSというWeb標準の技術について学びながら、半年を通して「あなた自身のギャラリーサイトの構築」を目指します。
受講に必要な環境
対面と遠隔のハイブリッド授業となるため、以下のような、インターネットを活用するためのアカウントと自宅の受講環境が必要になります（自宅に環境がない場合は、実習室を利用して下さい）。
- Googleアカウント（Gmail が使える方、そのままでOKです。）
- GitHub アカウント（後日説明します）
- PC（Win/Mac/Linux）とインターネット接続環境
- ソフトウエアは、以下のものをダウンロードしてインストールして下さい。
この演習で使用するソフトウエア
特別なソフトは必要ありません*1。ホームページの制作には以下の２つがあれば十分です。
付記：実習室における Atomの利用について
個人用のディスク領域に Atomを置いて下さい。
- ダウンロードしたAtomを個人領域にコピーします(200MBほどあります)。
- 個人領域には容量制限があります。そこで・・・
- まず最初に、ゴミ箱（これは個人領域を圧迫します）を空にして下さい。
- 個人領域にある不要なファイルをできるだけ、ゴミ箱に入れて、その後もういちどゴミ箱を空にして下さい。
- 実習室のPCは、再起動、再ログインすると、ソフトウエアの設定がリセットされてしまいます。授業の開始時に再設定して下さい。
- Atom > Preferences
- install 「japanese」で検索して「日本語メニュー」をインストール
- テーマ で好みのデザインに変更
特設サイトについて
対面と遠隔のハイブリッド展開を臨機応変に切り替えられるよう、当授業用の特設サイトを設けています。以下に、あなた専用のページ（お名前がそのままページ名です）があることを確認してください。
特設サイト（受講生一覧） ブックマークしておいて下さい。
第１回目の授業では、まず、その使い方の説明と、実際に、みなさんからの情報発信体験をしていただきます。
特設サイトはMediaWiki というCMSでできています
MediaWiki は、Wikipedia のために作られたWikiシステムで、 Webブラウザから簡単にページの発行・編集などを行なうことができます。MediaWiki はオープンソース（無料）なので、Webの基礎とサーバー関連の技術を身につければ、誰でも自由にこのようなサイトを構築することができます。
MediaWiki は Markdown記法という、HTMLを記号化した文法で記述されたテキストデータを PHPによって HTML に変換する処理を行なっています。
つまり、この授業で後に予定している、HTML の構造に関する理解は、Wikiの編集を通して学ぶことができるので、このスキルを身につけて損することはありません。
さらにここで、経験したことは、そのまま Wikipedia の執筆にも活かすことができますので、ぜひ、積極的な記事の執筆に挑戦して下さい。
特設サイトの執筆・編集の手順を体験します
1. はじめにログインが必要です
サイト右上の「ログイン」をクリックして、利用者ID と パスワードでログインして下さい。
2. あなたのページに移動します
- 受講者一覧から自分の名前をクリックして、自分のページに移動して下さい。
- 以下のように表示されます。
◯◯◯◯を編集 まだ存在しないページへのリンクをたどりました。 このページを新規作成するには、ページの内容を以下のボックスに 記入してください (詳しくはヘルプページを参照してください)。 誤ってこのページにたどり着いた場合には、 ブラウザーの戻るボタンで前のページに戻ってください。
- ページ名が自分の名前であることを確認して下さい
- 基本的に、あなたが編集するページは、ここだけ・・とご理解ください。
- なんでもいいので、一言書いて、「ページを保存」として下さい。
- この時点で、情報は公開となります。
このサイトは、アドレス自体が水面下にあって、みなさん以外に知る人はいないので、事実上、関係者のみが閲覧している状態です。
- MediaWiki は、参加者全員を信用する（性善説を採用する）というポリシーにもとづいて作られています。他人のページを勝手に編集することもできてしまいますが、受講生の皆様を信用して、オープンな仕様で進めます。
MediaWikiの編集記法を確認します
基本３要素
記事の基本要素は、見出し・本文・箇条書き です。これを正しく、使って記事情報を構成することができれば、仕事の８割は完成すると思ってください。
見出し
見出しは、半角の [ = ]記号を連結する形で、大見出し、中見出し、小見出しを区別します。
==大見出し== ===中見出し=== ====小見出し====
本文
編集画面内での改行は画面には反映されません。連続する文章は一つの段落内に連続する文字列とみなされ、文章の幅はウインドウの幅に応じて変化します（リキッドレイアウト）。
- 強制的に改行を行う場合は、行末に <br> タグを書いて下さい。
- 一行の空改行で「段落区切り」の扱いになります。
- 二行の空改行で１行分の空きができます。
箇条書き
番号なしリスト、番号付きリスト、定義リストは以下の書式で実現します。
* 箇条書きレベル１ ** 箇条書きレベル２
斜体・太字・文字色
斜体と太字については シングルクォーテーション ['] を用いて演出します。
''斜体'' '''太字''' '''''太字 & 斜体'''''
整形済みブロック
行頭に半角スペースがあると「整形済みプロック」とみなされて、ライトグレーの背景枠が出現します。
この文章は、行頭半角スペースに続けて記載しています。
記事の執筆を体験します
1. 自身のページへ移動
あなたのページを別窓で開いて下さい。
特設サイト
2. 記事の雛形を入力
はじめに、テンプレート（雛形）を提供します。
- 以下のグレーの部分を、そのままコピーして、特設サイトのあなたのページにペーストして下さい。
==研究テーマ（私の関心ゴト）== ===タイトル=== ◯◯◯◯◯ ◯◯◯◯◯◯◯◯◯◯ ◯◯◯◯◯（一行程度で簡潔に） <br> ===研究の目的・背景=== 上記、研究テーマ（関心ゴト）との出会い、背景。また、その関心ゴトを追求するために、具体的にどんなことを学びたいと考えているか・・など <br> <br> ==自己紹介== ===ごあいさつ=== （担当教員に向けて・・ではなく、不特定多数の閲覧者に向けて） <br> ===自由な見出し=== （趣味、好きな音楽・・など自由に・・） <br> <br>
- MediaWiki では、見出し項目がある程度揃うと自動的にメニューが表示されるように設計されています。
3. 記事の書き込み
- それぞれの項目を自身で執筆・編集して下さい。
留意事項
- 今回は、文字情報のみ掲載して下さい。画像等は不用意に上げるとトラブルになります。画像や動画の掲載については、回が進んでから・・ということでご了承下さい。
- 記事が見やすくなるよう、強制改行を使って適宜「余白」を作って下さい。
- 読者を一般閲覧者と想定して下さい。つまり、授業担当者である私（井上(貢)）に向けて感想を書くのではなく、あなたのページを読む可能性のある、不特定多数の方を読者と想定して文章を書くようお願いします。
以上、第１回目は、この先の遠隔授業を想定した「情報共有のための基盤づくり・記事の執筆体験」をもって終了とします。
第２回は、対面 / 遠隔 で行います。 （第１回の授業の状況を見て判断します）