Your SlideShare is downloading. ×
  • Like
Rapid Prototyping
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Rapid Prototyping

  • 2,543 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,543
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
52
Comments
0
Likes
7

Embeds 0

No embeds

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. Rapid Prototyping Even Wu
  • 2. • 30~40 mins Talk• 20~30 mins Q&A + Live Demo
  • 3. http://evendesign.tw
  • 4. http://rocodev.com
  • 5. Prototyping Tools• Photoshop / Illustrator / Artwork...• Dreamweaver or handcraft HTML / CSS...• Back-end Code...• Axure RP?...• Keynote?...
  • 6. 很久以前... BOSS PM 翻譯官Designer Developer
  • 7. 今天 co-workDesigner Developer 產品
  • 8. 今天 老闆? 老闆?...XD co-workDesigner Developer 產品
  • 9. Rapid Prototyping
  • 10. 流程的改變• Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
  • 11. 天瓏書局
  • 12. widget widget
  • 13. 工具的改變• ruby• middleman• sass/compass framework• haml markup
  • 14. Middlemanmiddleman init new_project_name.!"" config.rb#"" source !"" index.html.haml !"" javascripts $   #"" all.js !"" layout.haml #"" stylesheets #"" all.css.scss
  • 15. Middleman css, js, img... 路徑, 壓縮方式.... haml!"" config.rb#"" source !"" index.html.haml !"" javascripts $   #"" all.js scss / compass !"" layout.haml #"" stylesheets #"" all.css.scss
  • 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. <html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html>
  • 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. <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. compass• 使用語言 sass http://sass-lang.com 其實就跟 less 差不多好用• 但加上 compass 後完全不⼀一樣
  • 21. compass basic@import “compass”;@include global-reset;
  • 22. • Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
  • 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. #"" 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. 殺手功能簡介
  • 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. 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. 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. 圖片取代文字 量⼀一下圖片寬高 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. 圖片取代文字@include replace-text-with-dimensions($img); 沒人在算寬高的啦XDDD clearfix @include pie-clearfix; or @include clearfix; 沒人在記 ie 怎麼 hack 的啦
  • 31. 內建 Vertical Rhythm!!
  • 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. 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. 更多請參閱
  • 35. 非 ruby,rails 專案可使用...
  • 36. Q&A
  • 37. http://rgba.tw
  • 38. Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu