Middleman 一小時完成你的專案原形
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 7,401 views
Uploaded on

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

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

More in: Technology , Design , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,401
On Slideshare
7,380
From Embeds
21
Number of Embeds
4

Actions

Shares
Downloads
116
Comments
1
Likes
54

Embeds 21

http://tweetedtimes.com 16
http://pinterest.com 2
https://twitter.com 2
http://www.pinterest.com 1

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. Middleman⼀一小時完成你的專案原形 http://rocodev.com
  • 2. ○ twitter.com/evenwu○ facebook.com/evenwu http://rocodev.com
  • 3. ○ Photoshop / Illustrator / Artwork...○ Dreamweaver or handcraft HTML / CSS...○ Back-end Code...○ Axure RP?...○ Keynote?... http://rocodev.com
  • 4. http://rocodev.com
  • 5. ○ 畫假圖浪費你很多時間○ 打假字浪費你時間○ 排版要自己對齊○ 不能互動 http://rocodev.com
  • 6. http://rocodev.com
  • 7. ○ HTML超難打 orz○ 寫CSS超幹○ 重複複製相同的東西○ 路徑問題○ 很難管理所有頁面 http://rocodev.com
  • 8. http://rocodev.com
  • 9. ○ 醜○ 拉來拉去跟photoshop一樣累○ 一個小功能要點很久才做出來○ 無法體驗進階效果○ 有些東西根本做不出來... http://rocodev.com
  • 10. http://rocodev.com
  • 11. ○ 先買 Rails101○ 設計師超難入門○ 建環境、假資料...○ 我只要快速設計阿~~~○ 很抱歉今天也沒有要 洗腦這個 http://rocodev.com
  • 12. http://rocodev.com
  • 13. http://middlemanapp.com http://rocodev.com
  • 14. ○ 靜態網站產生器○ gem install middleman○ middleman init your_project_name http://rocodev.com
  • 15. ○ Layouts & Partials (喔耶不用重複copy html)○ Helpers (喔耶亂數資料、Rails整合方便)○ Haml (喔耶...?)○ Sass & Compass (喔耶...?) http://rocodev.com
  • 16. <html><head> <title>text</title></head><body> <%= yield %></body></html> content http://rocodev.com
  • 17. = partial ”partial_name” http://rocodev.com
  • 18. ruby helper- 5.times do %li= link_to( @name, @url ) http://rocodev.com
  • 19. lorem.sentence # ⼀一句廢話lorem.words 5 # 五個詭異單字lorem.wordlorem.date # 隨便給個日子lorem.name # 奇怪的名字lorem.first_namelorem.last_namelorem.email http://rocodev.com
  • 20. Placeholder Images http://rocodev.com
  • 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. http://rocodev.com
  • 23. <html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html> http://rocodev.com
  • 24. <div> <div> <div> <div> %div <div> %div ... %div </div> %div </div> %div ... </div> </div></div> http://rocodev.com
  • 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. http://compass-style.org http://rocodev.com
  • 27. ○ 使用語言 sass http://sass-lang.com○ 其實就跟 less 差不多好用○ 但加上 compass 後完全不一樣 http://rocodev.com
  • 28. @import “compass”;@include global-reset; http://rocodev.com
  • 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. 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. 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. 量⼀一下圖片寬高 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. hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; } compass@include pie-clearfix; 沒人在記 ie 怎麼 hack 的啦 http://rocodev.com
  • 34. http://rocodev.com
  • 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. @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. http://pinterest-clone.heroku.com/ http://rocodev.com
  • 38. http://rocodev.com
  • 39. Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu http://rocodev.com