カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ

  • 886 views
Uploaded on

schoo WEB-campus …

schoo WEB-campus
http://schoo.jp/class/251

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
886
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. カ ェ フ のWebサイ を作 て ト っ Webデザ ンの イ 基礎と技術を学ぶ schoo WEB-campus 2013年10月26日 金澤直毅
  • 2. Naoki Kanazawa http://designless.net
  • 3. ? Webをゼロ ら か 作った と り すか こ があ ま ?
  • 4. ? Webをゼロ ら か 作る と こ の意味 は と?
  • 5. 手仕事
  • 6. 1 読む 2 遊ぶ Playing 3 作る Making 4 学ぶ Studying Reading
  • 7. 1 読む
  • 8. こ ウ ブページです れは ェ http://justinjackson.ca/words_japan.html
  • 9. 設計図 = 完成図
  • 10. HUMAN COMPUTER WEB
  • 11. SERVER CLIENT
  • 12. SKILL? ? WORDPRE PHP ADOBE JAVASCRIPT CSS HTML
  • 13. SKILL!
  • 14. 2 遊ぶ
  • 15. Webデザイ ンの砂場 http://designless.net/editor
  • 16. HTML < タグ > H e l l o W o r l d ! < タグ > html, body, head, h1, h2, h3 h4, h5, h6, p, ul, li, a, dl, table, img, div, span, em, strong...
  • 17. HTML <html> <head> メタ情報 </head> <body> <h 1 > 最初に伝えたいこと</h 1 > <p> 説明などの文章 </p> コ ンピュ ータに伝え る <h 2 > 次に伝えたいこと</h 2 > <p> 説明などの文章 </p> <ul> <li> グループ </li> <li> グループ </li> <li> グループ </li> </ul> </body> </html>
  • 18. CSS セレクタ { プ ロ パ ティ : 値 ; } color, background, font-size, text-align, width, height, margin, padding, border, float, clear, position...
  • 19. CSS 人にやさ しい装飾と イ ト レ アウ
  • 20. JavaScript イ タラクシ ンな演出と拡張 ン ョ
  • 21. jQuery $ ( セレクタ ) . メソッド ( 値 ) click, hover, addClass, removeClass, fade, toggle, animate...
  • 22. HTML CSS 内容 装飾 JS 演出
  • 23. DEVELOPER TOOL 要素の検証
  • 24. IMAGE
  • 25. CSS images style.css flower.jpg index.html
  • 26. PATH ディレクトリ構 成 フォル ダ / ファイル 名 . 拡 張 子 . . / フォル ダ / ファイル 名 . 拡 張 子
  • 27. 3 作る
  • 28. TOOL ブラウ ザ + エディタ Google Chrome Mozilla Firefox CotEditor terapad
  • 29. 素材のダウ ロー ン ド http://designless.net/data/schoo20131026.zip
  • 30. ペリカン カフェ _resource _design _www
  • 31. ? なぜ、 ェのWebサイ なのか カフ ト ?
  • 32. 架 空 の カフェ Pelican Cafe 北欧 青山 www.pelican-cafe.com
  • 33. BUSINESS VISUAL CODE CONCEPT
  • 34. 1 HTML = 情報構造 タグの入 れ 子
  • 35. 2 属性 src, href, class, id
  • 36. 3 ボックスモ デル reset.css
  • 37. 4 j Q u e r y プラグイン bxslider, colorbox
  • 38. 5 jQuer y仕掛け fade, scroll,
  • 39. 6 Google Map API
  • 40. 4 学ぶ
  • 41. 試行錯誤
  • 42. SANDBOX Webデザイ ンの砂場
  • 43. ANNTENA イプト ン ッ の仕組み
  • 44. ? レポー ト課題 Webサイ は ん デ ア ト ど なメ ィ ?