Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,110 views

Published on

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ by Schoo
http://schoo.jp/class/251

Published in: Design
  • Be the first to comment

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

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

×