What is Fire.app

Transcript

1. •Web
2. Fire .app Dead Easy HTML Prototyping
3. wireframe mockup prototype product
4. wireframe mockup prototype product
5. HTML Prototype
6. ↜ⅳῲਔ •隨著專案演進，設計師會交付不⼀一致的 header/footer 以及 css/js includes •⼀一個好設計師，為什麼把⼈人⽣生浪費在做 image sprites •⼀一個好設計師，為什麼把⼈人⽣生浪費在寫 plain CSS
7. Sass, Compass ݺݺႨ
8. Sass, Compass ݺݺႨ 1 .btn { 2 @include border-radius(4px); 3 @include box-shadow($shadow); 4 color: $grayDark; 5 font-size: $baseFontSize; 6 line-height: $baseLineHeight; 7 } 8 .btn-large { 9 @include border-radius(5px); 10 font-size: $baseFontSize + 2px; 11 }
9. Sass, Compass ݺݺႨ 1 .nav { 2 ... 3 li { 4 &.first { ... } 5 ... 6 a { 7 &.current { } 8 .ie7 & {} // hack 9 } 10 } 11 } nav li.first nav li a.current .ie7 nav li a
10. Sass, Compass ݺݺႨ .icon-sprite,.icon-chat,.icon-gear,.icon-group,.icon-lock,.icon-pencil,.icon- tag,.icon-user{background:url('../images/icon-saed2a53191.png') no-repeat}.icon- chat{background-position:0 -129px;height:22px;width:24px}.icon-gear{background- position:0 0;height:26px;width:26px}.icon-group{background-position:0 -46px;height: 21px;width:32px}.icon-lock{background-position:0 -212px;height:24px;width: 20px}.icon-pencil{background-position:0 -256px;height:23px;width:23px}.icon- tag{background-position:0 -87px;height:22px;width:22px}.icon-user{background- position:0 -171px;height:21px;width:24px}.icon-retina-sprite{background:url('../ images/icon-retina-s7eb4b555e1.png') no-repeat}@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){.icon-all-retina- sprites,.icon-chat,.icon-gear,.icon-group,.icon-lock,.icon-pencil,.icon-tag,.icon- user{background-image:url('../images/icon-retina-s7eb4b555e1.png');-webkit- background-size:32px auto;-moz-background-size:32px auto;-o-background-size:32px auto;background-size:32px auto}.icon-chat{background-position:0 -197px}.icon- gear{background-position:0 -31px}.icon-group{background-position:0 0}.icon- lock{background-position:0 -98px}.icon-pencil{background-position:0 -132px}.icon- tag{background-position:0 -165px}.icon-user{background-position:0 -67px}}.icon{display:inline-block}.container{width:960px;margin:20px auto}
11. Sass, Compass ݺݺႨ $ gem install compass # Done! $ sass --compass --watch foo.scss:foo.css # start coding!
12. When we introduce Sass/Compass to designers...
13. COMMAND LINE INTERFACE FFFFFUUUUU!!
14. our designer uses Windows :( Press any key to continue Bad News
15. write an app
16. Fire.app + Editor = ⽴立刻可以⼯工作
17. Features •Built-in web server •Watch and compile Sass/Compass/ CoffeeScript •ERB/Haml/Markdown + Layout/Partial/Helpers like Rails •Automatic browser reloading
18. Features (cont.) •Project template •Build project into deliverables •Growl notification •Cross-platform
19. Lorem Helpers <p><%= lorem_sentence %></p> <p><%= lorem_words 5 %></p> <p><%= lorem_word %></p> <p><%= lorem_paragraphs 10 %></p> <p><%= lorem_paragraph %></p> <p><%= lorem_date %></p> <p><%= lorem_name %></p> <p><%= lorem_first_name %></p> <p><%= lorem_last_name %></p> <p><%= lorem_email %></p>
20. Lorem Helpers <p><%= zh_lorem_sentence %></p> <p><%= zh_lorem_words 5 %></p> <p><%= zh_lorem_word %></p> <p><%= zh_lorem_paragraphs 10 %></p> <p><%= zh_lorem_paragraph %></p> <p><%= zh_lorem_name %></p> <p><%= zh_lorem_first_name %></p> <p><%= zh_lorem_last_name %></p> <p><%= zh_lorem_email %></p>
21. Lorem Helpers <img src="<%= lorem_image('300x400') %>"> <img src="<%= lorem_image('300x400', :background_color => '333', :color => 'fff') %>"> <img src="<%= lorem_image('300x400', :random_color => true) %>"> <img src="<%= lorem_image('300x400', :text => lorem_word) %>">
22. 1 <% 10.times do |i| %> 2 <div class="media"> 3 <a href="http://twitter.com/<%= lorem_last_name %>" class="img"> 4 <img src="/images/fake/avatar/<%= i %>.png”> 5 </a> 6 <div class="bd"> 7 <p><%= lorem_last_name %> <%= lorem_paragraph %></p> 8 <p><%= lorem_date %></p> 9 </div> 10 </div> 11 <% end %>
23. GPLv2 Source Code is available on GitHub https://github.com/handlino/FireApp
24. if you want to buy us some beers $14 ~1000 copies sold https://github.com/handlino/FireApp
25.  Contributions documents, pull requests, issues https://github.com/handlino/FireApp