Rapid Prototyping      Even Wu
• 30~40 mins Talk• 20~30 mins Q&A + Live Demo
http://evendesign.tw
http://rocodev.com
Prototyping Tools• Photoshop / Illustrator / Artwork...• Dreamweaver or handcraft HTML / CSS...• Back-end Code...• Axure R...
很久以前...           BOSS           PM           翻譯官Designer          Developer
今天           co-workDesigner             Developer           產品
今天 老闆?                 老闆?...XD           co-workDesigner             Developer           產品
Rapid Prototyping
流程的改變• Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
天瓏書局
widget         widget
工具的改變• ruby• middleman• sass/compass  framework• haml markup
Middlemanmiddleman init new_project_name.!"" config.rb#"" source    !"" index.html.haml    !"" javascripts    $   #"" all....
Middleman                 css, js, img... 路徑, 壓縮方式....                             haml!"" config.rb#"" source    !"" inde...
Middleman= partial ”partial_name”                ruby                                rails helper- 5.times do  %li= link_t...
<html><head>                        %html  <title>text</title>                          %head</head>                      ...
<div class=”book”>  <div>    <h2>text</h2>         .book  </div>                    %div  <article>                   %h2 ...
<div class=”book”>  <div>    <h2>text</h2>         .book  </div>                    %div  <article>                   %h2 ...
compass• 使用語言 sass http://sass-lang.com  其實就跟 less 差不多好用• 但加上 compass 後完全不⼀一樣
compass basic@import “compass”;@include global-reset;
• Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
blog design                          partials#"" stylesheets    !"" _article.scss    !"" _formalize.sass    !"" _global.sc...
#"" stylesheets    !"" _ggs.scss    !"" _setup.scss    !"" ggs    $   !"" _border-box.scss    $   !"" _default-style.scss ...
殺手功能簡介
css                          scssa {                         a {  color: blue;                color: blue;}               ...
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 {    & {                     hack ...
圖片取代文字                  量⼀一下圖片寬高 orz...width: 439px;             高手都知道的普通技巧 orz...height: 276px;text-indent: -99999px;back...
圖片取代文字@include replace-text-with-dimensions($img);                                    沒人在算寬高的啦XDDD                 clearfix...
內建 Vertical Rhythm!!
內建 Vertical Rhythm!!$base-font-size: 16px;$base-line-height: 24px;@import “compass”;h2 {  @include adjust-font-size-to(24p...
Spriting with Compass@import "icon/*.png";@include all-icon-sprites;           自動產生 (^o^).icon-sprite,.icon-delete,.icon-e...
更多請參閱
非 ruby,rails 專案可使用...
Q&A
http://rgba.tw
Thanks.http://rocodev.com       http://rgba.tw             Twitter @evenwu
Rapid Prototyping
Rapid Prototyping
Rapid Prototyping
Rapid Prototyping
Rapid Prototyping
Rapid Prototyping
Rapid Prototyping
Upcoming SlideShare
Loading in …5
×

Rapid Prototyping

2,916 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,916
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
54
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Rapid Prototyping

  1. 1. Rapid Prototyping Even Wu
  2. 2. • 30~40 mins Talk• 20~30 mins Q&A + Live Demo
  3. 3. http://evendesign.tw
  4. 4. http://rocodev.com
  5. 5. Prototyping Tools• Photoshop / Illustrator / Artwork...• Dreamweaver or handcraft HTML / CSS...• Back-end Code...• Axure RP?...• Keynote?...
  6. 6. 很久以前... BOSS PM 翻譯官Designer Developer
  7. 7. 今天 co-workDesigner Developer 產品
  8. 8. 今天 老闆? 老闆?...XD co-workDesigner Developer 產品
  9. 9. Rapid Prototyping
  10. 10. 流程的改變• Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
  11. 11. 天瓏書局
  12. 12. widget widget
  13. 13. 工具的改變• ruby• middleman• sass/compass framework• haml markup
  14. 14. Middlemanmiddleman init new_project_name.!"" config.rb#"" source !"" index.html.haml !"" javascripts $   #"" all.js !"" layout.haml #"" stylesheets #"" all.css.scss
  15. 15. Middleman css, js, img... 路徑, 壓縮方式.... haml!"" config.rb#"" source !"" index.html.haml !"" javascripts $   #"" all.js scss / compass !"" layout.haml #"" stylesheets #"" all.css.scss
  16. 16. Middleman= partial ”partial_name” ruby rails helper- 5.times do %li= link_to( @name, @url )<html><head> <title>text</title></head> content<body> <%= yield %></body></html>
  17. 17. <html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html>
  18. 18. <div class=”book”> <div> <h2>text</h2> .book </div> %div <article> %h2 text <div class=”inner”> %article <%= yield %> .inner </div> = yield </article></div>
  19. 19. <div class=”book”> <div> <h2>text</h2> .book </div> %div <article> %h2 text <div class=”inner”> %article <%= yield %> .inner </div> = yield </article></div><div class=”book”> <h2>text</h2> .book <article> %h2 text <%= yield %> %article </article> = yield</div>
  20. 20. compass• 使用語言 sass http://sass-lang.com 其實就跟 less 差不多好用• 但加上 compass 後完全不⼀一樣
  21. 21. compass basic@import “compass”;@include global-reset;
  22. 22. • Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
  23. 23. blog design partials#"" stylesheets !"" _article.scss !"" _formalize.sass !"" _global.scss !"" _icon.scss !"" _layout.scss hacks !"" _setting.scss !"" _superfish.scss import them... !"" ie.css.scss #"" main.css.scss
  24. 24. #"" stylesheets !"" _ggs.scss !"" _setup.scss !"" ggs $   !"" _border-box.scss $   !"" _default-style.scss import media... $   !"" _mixins.scss $   !"" _prettify.scss $   !"" _responsive-layout.scss $   !"" _type-size-presets.scss $   #"" media $   !"" _desktop-wide.scss $   !"" _desktop-wide2.scss $   !"" _desktop-wide3.scss $   !"" _desktop.scss $   !"" _mobile-wide.scss $   !"" _mobile.scss $   !"" _tablet-wide.scss $   #"" _tablet.scss #"" main.css.scss
  25. 25. 殺手功能簡介
  26. 26. css scssa { a { color: blue; color: blue;} &:hover {a:hover { color: black; color: black; }} &:visited {a:visited { color: blue; color: blue; }} } compassa { @include link-colors(blue, black);}
  27. 27. 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
  28. 28. inline block @include inline-block;@mixin inline-block {  @if $legacy-support-for-ie {    & { hack      *display: inline; } }  display: -moz-inline-box; hack  -moz-box-orient: vertical;  display: inline-block;  vertical-align: middle; hack  @if $legacy-support-for-ie {    *vertical-align: auto; } }
  29. 29. 圖片取代文字 量⼀一下圖片寬高 orz...width: 439px; 高手都知道的普通技巧 orz...height: 276px;text-indent: -99999px;background: url(logo.png) no-repeat; clearfix hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; }
  30. 30. 圖片取代文字@include replace-text-with-dimensions($img); 沒人在算寬高的啦XDDD clearfix @include pie-clearfix; or @include clearfix; 沒人在記 ie 怎麼 hack 的啦
  31. 31. 內建 Vertical Rhythm!!
  32. 32. 內建 Vertical Rhythm!!$base-font-size: 16px;$base-line-height: 24px;@import “compass”;h2 { @include adjust-font-size-to(24px);} font-size: 0.938em; line-height: 1.6em; 電腦幫你算啦!!!
  33. 33. Spriting with Compass@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; }
  34. 34. 更多請參閱
  35. 35. 非 ruby,rails 專案可使用...
  36. 36. Q&A
  37. 37. http://rgba.tw
  38. 38. Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu

×