カフェのwebサイトを作って、webデザインの基礎と技術を学ぶ
DESCRIPTION
schoo WEB-campus http://schoo.jp/class/251TRANSCRIPT
2013年10月26日schoo WEB-campus
金澤直毅
カフェのWebサイトを作って
Webデザインと基礎 技術を学ぶ
の
Naoki Kanazawa
http://designless.net
?Webをゼロから作ったことがありますか？
?Webをゼロから作ることの意味とは？
手仕事
1 読む
2 遊ぶ
3 作る
4 学ぶ
Reading
Playing
Making
Studying
読む1
http://justinjackson.ca/words_japan.html
これはウェブページです
設計図 ＝ 完成図
HUMAN
WEB
COMPUTER
SERVER
CLIENT
SKILL?
HTMLCSSJAVASCRIPTADOBE
WORDPRESSPHP?
SKILL!
2遊ぶ
http://designless.net/editor
Webデザインの砂場
<タグ>H e l l o Wo r l d !<タグ>
HTML
html, body, head, h1, h2, h3 h4, h5, h6,p, ul, li, a, dl, table,
img, div, span, em, strong...
<html><head>メタ情報</head><body><h1>最初に伝えたいこと</h1><p>説明などの文章</p>
<h2>次に伝えたいこと</h2><p>説明などの文章</p><ul> <li>グループ</li> <li>グループ</li> <li>グループ</li></ul></body></html>
HTMLコンピュータに伝える
CSSセレクタ { プロパティ : 値 ; }
color, background, font-size, text-align,width, height, margin, padding, border,
float, clear, position...
人にやさしい装飾とレイアウト
CSS
JavaScriptインタラクションな演出と拡張
jQuery＄(セレクタ ) .メソッド (値 )
click, hover,addClass, removeClass,fade, toggle, animate...
H T M L C S S
J S
内容 装飾
演出
DEVELOPER TOOL
要素の検証
IMAGE
index.html
style.css flower.jpg
CSS images
PATHディレクトリ構成
フォルダ/ファイル名 .拡張子. . /フォルダ/ファイル名 .拡張子
3作る
TOOLブラウザ ＋ エディタGoogle ChromeMozilla Firefox
CotEditorterapad
http://designless.net/data/schoo20131026.zip
素材のダウンロード
ペリカンカフェ
_resource _design _www
?なぜ、カフェのWebサイトなのか？
北欧 青山
Pelican Cafe
www.pelican-cafe.com
架空のカフェ
BUSINESS
VISUAL
CODE
CONCEPT
H T M L = 情報構造タグの入れ子
1
属性
2
src, href, class, id
ボックスモデル
3
reset.css
j Q u e r yプラグイン
4
bxslider, colorbox
j Q u e r y仕掛け
5
fade, scroll,
G o o g l e M a p A PI
6
4学ぶ
試行錯誤
SANDBOX
Webデザインの砂場
ANNTENA
インプットの仕組み
?Webサイトはどんなメディア？
レポート課題