【準備課題08-09】
【準備課題08】「線」とは何か答えなさい
【解答08】数学概念では「距離だけあって幅が無い」つまり長さそのものと、捉えどころがないような表現をします。しかし現実的視覚において「線」は描かれる面積との対比によって「線」に見えるということになります。狭い面積に極太い線が描かれても「線」には見えず、これは「面」に見えます。しかし広い面積に細い線が走れば「線」に見えるとういうことです。
【準備課題09】「面」とは何か答えなさい
【解答09】上記の「線」の幅が広がったもの。長さと幅がそれぞれ広がったものという概念で、この「面」の両端はまた「線」であるとも言えます。
【準備課題02-07】
【準備課題02】
HTMLとは何をさすのか答えなさい
【解答02】
HTMLとは(Hyper Text Markup Languageの頭文字で、)ウェブページを記述する人工言語のひとつ。文書の論理構造や表示方を記述でき、標準化団体W3Cによって標準化されている。現在でも主だったウェブブラウザーでHTMLの文書表示が可能で、文書を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾の情報を埋め込んで記述できる。文章の中で表題や段落の区切りを指定したり、箇条書きの項目を列挙したり、画像や音声、動画を埋め込んだり、他の文書へのリンクを設定できる。
【準備課題03】
CSSとは何をさすのか答えなさい
【解答03】
ウェブページのレイアウト、見栄えを定義する規格。これまでウェブページのレイアウトはHTMLを用いて記述され、HTMLにもレイアウトに関する仕様が取り込まれてきたが、これは文書の論理構造を記述するというHTMLの本来の目的に反するため、文書のレイアウト、視覚的構造を規定する枠組みとしてCSS(Cascading Style Sheetsの頭文字)が新たに作られた。
CSSは文字の種類やサイズ、行間、見栄えに関する情報を文書本体(文章の論理構造を記したHTML)から切り離し、ユーザが適当なものを自由に選択できるようにした。HTML同様に標準化団体W3Cで標準化されている。
【準備課題04】
RGBは何をさすのか答えなさい
【解答04】
(Red-Green-Blue color modelの頭文字で、コンピュータ上で色を表現する際に用いられる表記法のうちのひとつ。色を赤(Red)・緑(Green)・青(Blue)の3つの色の組み合わせとして表現する。この3色は光の三原色と呼ばれ、この組み合わせですべての色を表現できる。
【準備課題05】
CMYKは何をさすのか答えなさい
【準備課題05】
色の表現方式のうちのひとつ。藍色(Cyan)、深紅色(Magenta)、黄色(Yellow)、黒(BlacK)の配合比率ですべての色を表現する。本来はカラー印刷で利用されていた方式で、理論的にはCMYの3原色ですべての色を表現できるが、黒を美しく印刷するために黒も原色に加えられている。コンピュータの世界では、カラー印刷での利用が想定されるアプリケーションがこのCMYKをサポートしていることがある。
コンピュータのディスプレイなどでは赤(Red)、緑(Green)、青(Blue)の3色を組み合わせて色を表現するRGBが用いられることが多く、グラフィックス関連のアプリケーションやプリンタドライバなどにRGB形式からCMYK形式への変換機能があることが多い。
【準備課題06】
オフセット印刷の「オフセット」とは何をさすのか答えなさい
【解答06】
版から直接印刷するのではなく媒介物を介して印刷すること。版に着いたインキをいったん剥して(OFFして)ブランケットに移し、ブランケットから原紙にインキを移す(SETする)ことによって印刷する方式(OFF-SET)だからオフセットだと言われているそうです。
【準備課題07】
「ゴシック体」と「明朝体」の違いを答えなさい
【解答07】
「ゴシック体」は角張っていて線幅が均一なフォントの総称。視認性が高く目に付きやすいフォントでしっかりした印象。点や線の太さが均一なため画数の少ない文字をハッキリ表現するのに適しており、文字数が少なくてもインパクトを出したい文章に向いている。しかし画数が多くて長文の場合は、太さが均一なために読み疲れる印象にるケースもある。 新鮮、合理的、モダン、飾り気がない、インパクト、押出し感、機械的、男性的なイメージを持つ。
「明朝体」は可読性が高く、優しい柔らかい印象。点線が細いため画数の多い文字を見やすく表現できる。 点文字にメリハリがあるため文字数の多い文章に向くが、文字数の少ない一言電報などには少し弱い感じに出る。 穏やか、伝統的、保守的、芸術的、繊細、女性的なイメージを持つ。
7/4クラスノート
[講師語録]
・日本でインターネットが生かされるべきは「農業!」
・ウェブは使い方ひとつで、技術そのだけではない。
・面積の真半分を使うデザインは不安を喚起するので使わないのが黄金則。
・「空き」こそが名刺製作の真髄。すべてをセンタリングしてはならない。小説が斜め読みできるのは面取りが揃えてあるから。
・スペースは絶対使用しない。
・コアなオーディオ中古製品販売買取中野ブロードウェイ内:
http://fujiya-avic.co.jp/
・日本語文字の基準:9pt.13Q(クオータ)0.25mm
・紙媒体のポートフォリオは作った方が絶対有利。
7/30クラスノート
初回サイトプレゼン最終日
http://choque3.hotcom-cafe.com/
[講師語録]
webはまず文章構造ありき。目で見えないことも伝わるよう表現する。[usability]
白黒コピーして写らないものはすべて失敗。コントラストと補色に配慮する。面積として三色は必ず使う。
ウェブへの道は一本だけではない。
fontは最低14以上必要。13px以下は特に読ませなくてもいい場合のみOK。
htmlに全角スペースは絶対入れない。
キーワードは設計して作る。
風姿花伝[準備]一気読み!
失礼を承知で書かせて頂きます。
大変に遅ればせながら(二ヶ月強も、)たった今風姿花伝の[準備]編に目を通させて頂きました!
ひと言、「いやー、手代木先生はホントすごい人です。」あまりお世辞を言うタイプではないのですが、強い感銘を受けました。あの手の学校でとは失礼極まりありませんが、この[準備]講義内容は大学一般教養レベル以上のクオリティーと完成度ではないでしょうか。
[準備]編といえども量的にも内容的にも盛りだくさんで、2012年4月後半から開始した今期授業の初回プレゼンを終えた今夜、24時前の帰宅後に一気読みしてしまいました。
うーーんん、確かにいちから(マウス操作からのGoogleアカウント取得まで手とり足とりと、)説明がしてある。あったんですね・・・。
「ブログを読んで課題を愚直に行う」と・・・。先生が吠えたくなる気持ちもわかる、わかった気がした今夜でした。
あの、htmlは他の本を買わず、まずは以下の三つのサイトで勉強してみます。
1時間で作るホームページ
http://www.shoshinsha.com/hp/index.html
ゼロから始めるホームページ作成講座
http://www.dspt.net/bgn/index.html
HTML+CSS Web制作リファレンス
http://www.tagindex.com/
さて明日からついにブログ課題を始められるか、もし続けば大穴です。
罪滅ぼしにこれだけは答えて寝ます。
【準備課題01】パソコンの電源ボタンマークは、何を意味するのか答えなさい
【解答】現在のほとんどのコンピューターがノイマン型故に、二進法の数字0[OFF]と1[ON]を模して作られたロゴで、すべてのコンピューターの電源記号に採用されているユニバーサルデザインのひとつ。
以上で今夜は就寝。記念すべきブログ課題第一号でした。
5/30クラスノート
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ background-color: #CCC; } #container{ background-color: #FFF; width: 800px; height: 600px; margin: 10px auto; } #header{ background-color:#F30; width:800px; height:120px; } #navigation{ width: 800px; height: 60px; } #navigation ul{ list-style: none; } #one { background-color:#3FF; width: 160px; height: 60px; float: left; } #navigation #two { background-color:#F99; width: 160px; height: 60px; float: left; } #navigation #three{ background-color:#C39; width: 160px; height: 60px; float: left; } #navigation #four{ background-color:#36F; width: 160px; height: 60px; float: left; } #navigation #five{ background-color:#63F; width: 160px; height: 60px; float: left; } #content{ background-color:#F66; width: 600px; height: 360px; float: right; } #sidebar{ background-color:#CF0; width: 200px; height: 360px; } #footer{ background-color:#6C0; width: 800px; height: 60px; } h1{ color:#FFF; } --> </style> </head> <body> <div id="container"> <div id="header"><h1>フェリカテクニカルアカデミー</h1> </div> <div id="navigation"> <ul> <li id="one"><a href="#">A</a></li> <li id="two"><a href="#">B</a></li> <li id="three"><a href="#">C</a></li> <li id="four"><a href="#">D</a></li> <li id="five"><a href="#">E</a></li> </ul> </div> <div id="content">content </div> <div id="sidebar">sidebar </div> <div id="footer">footer </div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ background-color: #CCC; } #container{ background-color: #FFF; width: 800px; height: 600px; margin: 10px auto; } #header{ background-color:#F30; width:800px; height:120px; } #navigation{ width: 800px; height: 60px; } #navigation ul{ list-style: none; } #one { background-color:#3FF; width: 160px; height: 60px; float: left; } #navigation #two { background-color:#F99; width: 160px; height: 60px; float: left; } #navigation #three{ background-color:#C39; width: 160px; height: 60px; float: left; } #navigation #four{ background-color:#36F; width: 160px; height: 60px; float: left; } #navigation #five{ background-color:#63F; width: 160px; height: 60px; float: left; } #content{ background-color:#F66; width: 600px; height: 360px; float: right; } #sidebar{ background-color:#CF0; width: 200px; height: 360px; } #footer{ background-color:#6C0; width: 800px; height: 60px; } h1{ color:#FFF; } --> </style> </head> <body> <div id="container"> <div id="header"><h1>フェリカテクニカルアカデミー</h1> </div> <div id="navigation"> <ul> <li id="one"><a href="#">A</a></li> <li id="two"><a href="#">B</a></li> <li id="three"><a href="#">C</a></li> <li id="four"><a href="#">D</a></li> <li id="five"><a href="#">E</a></li> </ul> </div> <div id="content">content </div> <div id="sidebar">sidebar </div> <div id="footer">footer </div> </div> </body> </html>