• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Middleman 一小時完成你的專案原形
 

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

on

  • 6,770 views

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

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

Statistics

Views

Total Views
6,770
Views on SlideShare
6,750
Embed Views
20

Actions

Likes
50
Downloads
112
Comments
1

4 Embeds 20

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

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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
    • 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 (喔耶...?) http://rocodev.com
    • <html><head> <title>text</title></head><body> <%= yield %></body></html> content http://rocodev.com
    • = 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.first_namelorem.last_namelorem.email http://rocodev.com
    • Placeholder Images http://rocodev.com
    • 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
    • http://rocodev.com
    • <html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html> http://rocodev.com
    • <div> <div> <div> <div> %div <div> %div ... %div </div> %div </div> %div ... </div> </div></div> http://rocodev.com
    • <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
    • 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 { color: black; color: black; }} }compassa { @include link-colors(blue, black);} http://rocodev.com
    • 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
    • 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
    • 量⼀一下圖片寬高 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
    • hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; } compass@include pie-clearfix; 沒人在記 ie 怎麼 hack 的啦 http://rocodev.com
    • http://rocodev.com
    • $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
    • @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
    • http://pinterest-clone.heroku.com/ http://rocodev.com
    • http://rocodev.com
    • Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu http://rocodev.com