Middleman⼀一小時完成你的專案原形   http://rocodev.com
○ twitter.com/evenwu○ facebook.com/evenwu                        http://rocodev.com
○ Photoshop / Illustrator / Artwork...○ Dreamweaver or handcraft HTML / CSS...○ Back-end Code...○ Axure RP?...○ Keynote?.....
http://rocodev.com
○ 畫假圖浪費你很多時間○ 打假字浪費你時間○ 排版要自己對齊○ 不能互動               http://rocodev.com
http://rocodev.com
○ HTML超難打 orz○ 寫CSS超幹○ 重複複製相同的東西○ 路徑問題○ 很難管理所有頁面                http://rocodev.com
http://rocodev.com
○ 醜○ 拉來拉去跟photoshop一樣累○ 一個小功能要點很久才做出來○ 無法體驗進階效果○ 有些東西根本做不出來...                      http://rocodev.com
http://rocodev.com
○ 先買 Rails101○ 設計師超難入門○ 建環境、假資料...○ 我只要快速設計阿~~~○ 很抱歉今天也沒有要  洗腦這個                http://rocodev.com
http://rocodev.com
http://middlemanapp.com                          http://rocodev.com
○ 靜態網站產生器○ gem install middleman○ middleman init your_project_name                                     http://rocodev.com
○ Layouts & Partials   (喔耶不用重複copy html)○ Helpers (喔耶亂數資料、Rails整合方便)○ Haml (喔耶...?)○ Sass & Compass (喔耶...?)              ...
<html><head>  <title>text</title></head><body>  <%= yield %></body></html>         content                          http:/...
= partial ”partial_name”                           http://rocodev.com
ruby                       helper- 5.times do  %li= link_to( @name, @url )                                http://rocodev.com
lorem.sentence     # ⼀一句廢話lorem.words 5      # 五個詭異單字lorem.wordlorem.date         # 隨便給個日子lorem.name         # 奇怪的名字lorem....
Placeholder Images                     http://rocodev.com
lorem.image(300x400)  #=> http://placehold.it/300x400lorem.image(300x400, :background_color => 333, :color => fff)  #=> ht...
http://rocodev.com
<html><head>                        %html  <title>text</title>                          %head</head>                      ...
<div>  <div>    <div>       <div>      %div         <div>      %div           ...         %div         </div>          %di...
<article>  <header>    <h2>標題</h2>           %article  </header>                 %header  <div class=”content”>       %h2 ...
http://compass-style.org                           http://rocodev.com
○ 使用語言 sass http://sass-lang.com○ 其實就跟 less 差不多好用○ 但加上 compass 後完全不一樣                               http://rocodev.com
@import “compass”;@include global-reset;                         http://rocodev.com
scss lessa {                     a {  color: blue;            color: blue;}                         &:hover {a:hover {    ...
compass css3   @include border-radius(5px);      prefix    -ms-border-radius: 5px;               -webkit-border-radius: 5px...
inline block   @include inline-block;               @mixin inline-block {                 @if $legacy-support-for-ie {    ...
量⼀一下圖片寬高 orz...    width: 200px;             高手都知道的普通技巧 orz...    height: 200px;    text-indent: -99999px;    background: ...
hack  .group {    *zoom: 1;      hack  }  .group:after {    content: “”;    display: table;    clear: both;  }     compass...
http://rocodev.com
$base-font-size: 16px;$base-line-height: 24px;@import “compass”;h2 {  @include adjust-font-size-to(24px);  @include traile...
@import "icon/*.png";@include all-icon-sprites;           自動產生 (^o^).icon-sprite,.icon-delete,.icon-edit,.icon-new,.icon-s...
http://pinterest-clone.heroku.com/                                 http://rocodev.com
http://rocodev.com
Thanks.http://rocodev.com       http://rgba.tw             Twitter @evenwu                                          http:/...
Upcoming SlideShare
Loading in …5
×

Middleman 一小時完成你的專案原形

9,443 views

Published on

介紹為何使用、如何使用強大的 Middleman 工具,快速建構你的專案原形 (rapid prototyping)

Published in: Technology, Design, Business
1 Comment
77 Likes
Statistics
Notes
No Downloads
Views
Total views
9,443
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
152
Comments
1
Likes
77
Embeds 0
No embeds

No notes for slide

Middleman 一小時完成你的專案原形

  1. 1. Middleman⼀一小時完成你的專案原形 http://rocodev.com
  2. 2. ○ twitter.com/evenwu○ facebook.com/evenwu http://rocodev.com
  3. 3. ○ Photoshop / Illustrator / Artwork...○ Dreamweaver or handcraft HTML / CSS...○ Back-end Code...○ Axure RP?...○ Keynote?... http://rocodev.com
  4. 4. http://rocodev.com
  5. 5. ○ 畫假圖浪費你很多時間○ 打假字浪費你時間○ 排版要自己對齊○ 不能互動 http://rocodev.com
  6. 6. http://rocodev.com
  7. 7. ○ HTML超難打 orz○ 寫CSS超幹○ 重複複製相同的東西○ 路徑問題○ 很難管理所有頁面 http://rocodev.com
  8. 8. http://rocodev.com
  9. 9. ○ 醜○ 拉來拉去跟photoshop一樣累○ 一個小功能要點很久才做出來○ 無法體驗進階效果○ 有些東西根本做不出來... http://rocodev.com
  10. 10. http://rocodev.com
  11. 11. ○ 先買 Rails101○ 設計師超難入門○ 建環境、假資料...○ 我只要快速設計阿~~~○ 很抱歉今天也沒有要 洗腦這個 http://rocodev.com
  12. 12. http://rocodev.com
  13. 13. http://middlemanapp.com http://rocodev.com
  14. 14. ○ 靜態網站產生器○ gem install middleman○ middleman init your_project_name http://rocodev.com
  15. 15. ○ Layouts & Partials (喔耶不用重複copy html)○ Helpers (喔耶亂數資料、Rails整合方便)○ Haml (喔耶...?)○ Sass & Compass (喔耶...?) http://rocodev.com
  16. 16. <html><head> <title>text</title></head><body> <%= yield %></body></html> content http://rocodev.com
  17. 17. = partial ”partial_name” http://rocodev.com
  18. 18. ruby helper- 5.times do %li= link_to( @name, @url ) http://rocodev.com
  19. 19. lorem.sentence # ⼀一句廢話lorem.words 5 # 五個詭異單字lorem.wordlorem.date # 隨便給個日子lorem.name # 奇怪的名字lorem.first_namelorem.last_namelorem.email http://rocodev.com
  20. 20. Placeholder Images http://rocodev.com
  21. 21. lorem.image(300x400) #=> http://placehold.it/300x400lorem.image(300x400, :background_color => 333, :color => fff) #=> http://placehold.it/300x400/333/ffflorem.image(300x400, :random_color => true) #=> http://placehold.it/300x400/f47av7/9fbc34dlorem.image(300x400, :text => blah) #=> http://placehold.it/300x400&text=blah http://rocodev.com
  22. 22. http://rocodev.com
  23. 23. <html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html> http://rocodev.com
  24. 24. <div> <div> <div> <div> %div <div> %div ... %div </div> %div </div> %div ... </div> </div></div> http://rocodev.com
  25. 25. <article> <header> <h2>標題</h2> %article </header> %header <div class=”content”> %h2 標題 <div class=”inner”> .content <%= @content %> .inner </div> = @content </div></article><article> <h2>標題</h2> %article <div class=”content”> %h2 標題 <%= @content %> .content </div> = @content</article> http://rocodev.com
  26. 26. http://compass-style.org http://rocodev.com
  27. 27. ○ 使用語言 sass http://sass-lang.com○ 其實就跟 less 差不多好用○ 但加上 compass 後完全不一樣 http://rocodev.com
  28. 28. @import “compass”;@include global-reset; http://rocodev.com
  29. 29. scss lessa { a { color: blue; color: blue;} &:hover {a:hover { color: black; color: black; }} }compassa { @include link-colors(blue, black);} http://rocodev.com
  30. 30. compass css3 @include border-radius(5px); prefix -ms-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; $experimental-support-for-khtml: false $experimental-support-for-mozilla: false http://rocodev.com
  31. 31. inline block @include inline-block; @mixin inline-block {   @if $legacy-support-for-ie {     & { hack       *display: inline; } }   display: -moz-inline-box;   -moz-box-orient: vertical;   display: inline-block;   vertical-align: middle; hack   @if $legacy-support-for-ie {     *vertical-align: auto; } } http://rocodev.com
  32. 32. 量⼀一下圖片寬高 orz... width: 200px; 高手都知道的普通技巧 orz... height: 200px; text-indent: -99999px; background: url(logo.png) no-repeat; compass@include replace-text-with-dimensions($img); 沒人在算寬高的啦XDDD http://rocodev.com
  33. 33. hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; } compass@include pie-clearfix; 沒人在記 ie 怎麼 hack 的啦 http://rocodev.com
  34. 34. http://rocodev.com
  35. 35. $base-font-size: 16px;$base-line-height: 24px;@import “compass”;h2 { @include adjust-font-size-to(24px); @include trailer(1,24px);} font-size: 1.375em; line-height: 2.182em; margin-bottom: 1.091em; 電腦幫你算啦!!! http://rocodev.com
  36. 36. @import "icon/*.png";@include all-icon-sprites; 自動產生 (^o^).icon-sprite,.icon-delete,.icon-edit,.icon-new,.icon-save { background: url(/images/icon-s34fe0604ab.png) no-repeat; } 沒人在算座標的啦.icon-delete { background-position: 0 0; }.icon-edit { background-position: 0 -32px; }.icon-new { background-position: 0 -64px; }.icon-save { background-position: 0 -96px; } http://rocodev.com
  37. 37. http://pinterest-clone.heroku.com/ http://rocodev.com
  38. 38. http://rocodev.com
  39. 39. Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu http://rocodev.com

×