#author("2021-01-22T19:42:54+09:00;2021-01-22T19:30:31+09:00","default:inoue.ko","inoue.ko") #author("2023-07-07T16:44:39+09:00;2021-01-22T19:42:54+09:00","default:inoue.ko","inoue.ko") *Webデザイン｜序説 ~ このページでは、WWWのしくみ、Webでの情報発信の種類、閲覧に用いられる各種ブラウザの理解、さらに情報発信において留意すべきことなど、Webデザインの前提となる基本的な技術について概説します。 ~ ***CONTENTS #contents2_1 ~ **WWWとは WWW(World Wide Web)は、ネットワーク同志をつなぐ、蜘蛛の巣状のネットワークで、主にHTMLによるハイパーテキストが送受信されるシステムです。 もともとは、大学や研究所などの個々のネットワーク同士が同一の規約(プロトコル)にしたがって、自律分散的に勝手に手をつないだもので、一企業が全体を管理している わけではありません。 どこかが断線しても、別の経路で目的のコンピュータにつながる仕組みになっているので、非常に安定した信頼性の高い仕組みといえます。しかし逆に言えば、一旦情報が流出すると、誰にも止めることができません。発信前に十分な注意が必要です。 Webはクライアント・サーバモデルに基づくシステムで、クライアント側の視点でみると、以下のように動作します。 -1) ブラウザにURL(アドレス)を入力、あるいはリンクをクリックする -2) URLがDNSというデータベースによってIPアドレスに変換される -3) IPアドレスに対応するサーバにHTTPというプロトコルで接続される -4) HTMLで書かれたページが画像などとともに、要求元に送信される -5) 受け取ったデータはブラウザによって画面上に描き出される 多くのWebページは他のページへのリンクを含んでいて、このリンクによって、情報のネットワークが形成されます。関連の強いもの同士のリンクは相互リンクによって自然に強固なものになっていきます。 これは、人間の脳内ネットワークの仕組みと同じです。WWWは、人間の脳のしくみを社会システムに投影したものといえるでしょう。人間が求めていた究極のしくみといっても過言ではありません。人間の脳が考えた、登場すべくして登場したシステムといえます。 ~ ***HTMLの歴史 ページを独立させました ＞ [[WebDesign/History]] ~ ***Webサーバー -[[世界最初のWebサーバー（画像）>http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:First_Web_Server.jpg]] [[関連記事>http://www.ibarakiken.gr.jp/www/cernwww/www1.html]] -[[日本最初のWebサーバー>http://www.ibarakiken.gr.jp/www/web-1/index2.html]] -[[日本で最初のホームページ（アーカイブ）>http://www.ibarakiken.gr.jp/www/first/kek.html]] 1992年 高エネルギー加速器研究機構 計算科学センターの森田洋平博士によって発信 情報源＞[[株式会社つくばマルチメディアが管理するサイト>http://www.ibarakiken.gr.jp/www/index.html]] ~ ***Internet Archive -https://archive.org/ --[[internet archives / mac>https://archive.org/details/softwarelibrary_mac]] ~ ***Webブラウザについて -記載内容を別ページに移動しました。＞ [[Browser]] ~ ***Webメディアの特質 -Head(見出し) と Body(本文) という構造・・わかりやすい情報編集の基本 //※ポスターの構造 映画におけるマスターショットシステム -内容(HTML)と形式(CSS)の分離 -クローズドからオープンへ //※従来型のビジネスモデルは変革をせまられています。 -リンク という概念の一般化 //※人間は基本的にリンクを張る動物である。 記号 → 実体へのリンク -「書きかけです」・・という暫定公開の容認 //***読んでおきたい２冊の本 //梅田望夫著 「ウェブ進化論」 ちくま新書 //中川淳一郎 「ウェブはバカと暇人のもの」 光文社新書 ~ ~ **情報公開の様々なかたち -Blog、WikiなどのWebサービスを利用したWebサイト HTML+CSSの知識は不要。アカウント取得で、すぐに情報発信が可能。 --Blog ＞ 事例：[[WordPress>https://ja.wordpress.com/]] --Wiki ＞ 事例：[[Seesaa Wiki>https://wiki.seesaa.jp/]] -ウェブサイトビルダーで編集・作成するWebサイト -ノーコードツール（Webサイトビルダー）で編集・作成するWebサイト HTML+CSSの知識は不要。お好みのテンプレートを選んで、画面上でサイトのデザインを行うことができます。 --''Google Sites'' https://sites.google.com/ ← 最も手軽な方法 --STUDIO（スタジオ） https://studio.design/ja/ --Jimdo(ジンドゥー） http://jp.jimdo.com/ -- Wix（ウィックス） http://ja.wix.com/ --Jimdo(ジンドゥー） http://jp.jimdo.com/ -HTML による一般的なWebサイト Webサイトの構築と公開のための基礎知識を必要とします。 --HTML、CSS、JavaScript 等を直接コーディングして作成 --[[テンプレート>Google:Webデザイン テンプレート]]を利用する方法もあります。 -[[CMS]]をカスタマイズした Webサイト HTML、CSS、JavaScript、PHP といった言語とサーバー管理の知識が必要になります。以下、いずれもオープンソースなので、無料でダウンロードして、自分のサイトのシステムとして利用することが可能です。 --Blog：[[WordPress]] ← 世界中のサイトの約40%がこれです。 --Wiki：[[PukiWiki]]、[[MediaWiki]] ~ //-FLASHを用いた視覚的にインパクトのあるサイト //--かつて一世風靡しましたが、[[事実上、終焉を迎えています。>Google:Flash 将来性]] //~ #aname("notice") ~ **Web開発に関わるソフトウエア 作るソフト ・ 見るソフト ・ 転送するソフト IllustratorやPhotoshopでグラフィックを作成するのと異なり、Web開発では、複数のソフトを使用します。この点が多くの初心者の方の混乱のもとになっているようですので、ここで確認しておきたいと思います。 ~ ***1) 作るソフト・・ Webサイトの構成ファイルは、HTML、CSS、JavaScript等のテキストファイルです。したがってまず「作るソフト」として、「メモ帳」のような文字の入力と編集ができる[[テキストエディタ>TextEditor]]が必要です。Dreamweaver、ホームページビルダーなどのオーサリングソフト（ワープロ感覚で作成したページの情報からHTML等を自動生成するソフト）を利用すれば能率が上がりますが、これらは必須というわけではありません。 //※～.htmlをダブルクリックしても、通常はこれらのソフトは起動しません。 -[[TextEditor]] ~ ***2) 見るソフト(ブラウザ)・・ Chrome、Firefox、Safari、Microsoft Edge、Internet Explorer、などホームページを閲覧するソフトをブラウザといいます。～.htmlをダブルクリックすると、通常これ(デフォルトブラウザ)が起動します。ページが正しく表示されるか複数のブラウザで確認する必要があります。 -[[Browser]] ~ ***3) 転送するソフト(FTPソフト)・・ FileZilla、FFFTP、Cyberduck、FireFTP(Firefox拡張)など、出来上がった～.html ファイルや画像データを、自分のパソコンから、リモート(遠隔地にある)・サーバーへ転送するのが、主な役割です。作ったファイルは、サーバーにアップロードすることによって、はじめて世界中から見えるページになります。 -[[FTP]] ~ ~ ***補足：オーサリングソフトについて 授業では原則として[[テキストエディタ>TextEditor]]を用いますが、仕組みが理解できたら、以下のようなオーサリングソフトウエアを利用することで、より効率よく、作業することができます。 -1） [[Dreamweaver>http://www.adobe.com/jp/products/dreamweaver/]] Adobeのソフトウエアで、多くの制作現場で使用されています。 http://ja.wikipedia.org/wiki/Adobe_Dreamweaver -2） [[Aptana Studio>http://www.aptana.com/]] オープンソースの開発環境です。WYSIWYGではありませんが高機能です。 http://ja.wikipedia.org/wiki/Aptana http://aptana.cssmaid.net/ マニュアル 以下のサイトからダウンロードできます。 http://www.aptana.com/ -3）[[BlueGriffon>http://www.bluegriffon.org/]] Webオーサリングツール、Nvu(Kompozer) の後継バージョンです。 HTML5に対応しています。 http://ja.wikipedia.org/wiki/BlueGriffon -4） [[Kompozer(N|vu)>http://kompozer.net/]] これもオープンソースのソフトウエアです。WYSIWYGです。 使いやすいのですが、HTML5に対応していません。 http://ja.wikipedia.org/wiki/KompoZer http://kompozer.cssmaid.net/index.html マニュアル 以下のサイトからダウンロードできます。 http://kompozer.net/ ~ &aname(Considerations); ~ **情報発信についての留意事項 情報の公開に際しては、以下のことに十分注意して下さい。 -著作権侵害行為がないか確認して下さい。 [[著作権とは何か>Google:著作権]]、簡単な記事でいいので、その概要を知っておきましょう。また、自分が他人の著作権を侵害しない…というだけでなく、著作権を侵害している（と思われる）ページへのリンクを貼ることも避けましょう。例えば、違法にアップされた動画へのリンク・紹介は、やはり原著作者の権利を脅かすことになります。 -肖像権や、個人情報にも注意が必要です。 人物が写った画像については原則、その本人の許諾が必要であると考えて下さい。たとえ友人でも、写真をアップする場合には、本人の許諾を得てくださ い。自分自身についても、生年月日や連絡先などの情報の掲載には配慮が必要です。基本的に、氏名と生年月日をあわせると、ほぼ個人が特定できてしまいます（つまり、なりすましが可能になります）ので、両方を同時に掲載するのは控えた方がいいでしょう。 ただし、将来の活動のために、自身のプロフィールをきちんと公開するということも、チャンス獲得の上では重要です。本人への連絡の手段がない・・という ことからチャンスを逃してしまうこともありますので、そのあたりはよく検討してください。 -他者が見て、不快に感じるような表現がないか注意して下さい。 Webは公の場です。個人を攻撃する発言はもちろんいけませんが、攻撃するつもりがなくとも、配慮のなさから、閲覧した人に不快感を与えてしまう可能性も あります。日頃から「言葉づかい」に気を配る習慣を身につけましょう。 -「立場上知り得る情報」を投稿しないこと 団体・組織に所属するメンバーには「守秘義務」があるのが普通です。アルバイト先の顧客に関することや、本学の学生のみが知り得る情報などは、絶対にWebにアップしないよう、注意して下さい。 -facebook その他SNSを利用中の学生さんへ 人間関係のトラブルが多発しているようです（学生のではなく一般の話）。 で、とりあえず、''自分以外の人物が写っている写真は、本人の確実な許諾がない限り、絶対に掲載しないで下さい。''公開設定によっては、友達の友達（つまり他人）にも見えてしまいます。Aグループの飲み会を断ってBグループの飲み会に参加したことが友人の投稿からバレてAグループの人間関係に亀裂・・・などのトラブルが最も多いようです。また画像は簡単にダウンロードできるので、思慮のない第三者が面白半分で別のところにアップしてしまった・・・ということもあるようです。SNSとはいえ、情報が公開されていることに変わりはありません。様々な事例を聞く限り、自分以外の人物が写った写真は掲載しないのが賢明です。何か問題が生じてからでは取り返しがつきません。十分な配慮をお願いします。 ''さらに''、というか、こちらの方が重要な話かもしれませんが、facebookユーザの多くの方が、情報の「公開範囲」の設定を行わず、初期設定のまま使っていることで個人情報がダダ漏れになっています。facebookのデフォルトは「公開」です。つまり、自分で「友人の範囲に制限する」・・・などの操作を行わない限りすべての情報が他人に丸見えです。 試しに、誰かの名前で適当に検索してみて下さい。まったく知らない人の友人の友人・・・までぞろぞろ出てきます。顔と名前はもちろん、投稿記事まで読めてしまうのは、本人がまったくブロックしていない証拠です。多くの日本人がfacebookの仕組みを知らずに使っている状況です。 [[公開範囲の設定について、正しく理解しておきましょう。>http://f-navigation.jp/manual/contactfriend/share_privacy.html]] ~ ~ ~