What is Fire.app

Transcript

1. •Web

   View Slide

2. Fire
   .app
   Dead Easy HTML Prototyping
   

   View Slide

3. wireframe mockup
   prototype
   product
   

   View Slide

4. wireframe mockup
   prototype
   product
   

   View Slide

5. HTML Prototype
   

   View Slide

6. ↜ⅳῲਔ
   •隨著專案演進，設計師會交付不⼀一致的
   header/footer 以及 css/js includes
   •⼀一個好設計師，為什麼把⼈人⽣生浪費在做
   image sprites
   •⼀一個好設計師，為什麼把⼈人⽣生浪費在寫
   plain CSS
   

   View Slide

7. Sass, Compass ݺݺႨ
   

   View Slide

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 }
   

   View Slide

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
   

   View Slide

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}
    

    View Slide

11. Sass, Compass ݺݺႨ
    $ gem install compass
    # Done!
    $ sass --compass --watch foo.scss:foo.css
    # start coding!
    

    View Slide

12. When we introduce
    Sass/Compass to
    designers...
    

    View Slide

13. COMMAND LINE INTERFACE
    FFFFFUUUUU!!
    

    View Slide

14. our designer uses Windows :(
    Press any key to continue
    Bad News
    

    View Slide

15. write an app
    

    View Slide

16. Fire.app + Editor
    = ⽴立刻可以⼯工作
    

    View Slide

17. Features
    •Built-in web server
    •Watch and compile Sass/Compass/
    CoffeeScript
    •ERB/Haml/Markdown
    + Layout/Partial/Helpers like Rails
    •Automatic browser reloading
    

    View Slide

18. Features (cont.)
    •Project template
    •Build project into deliverables
    •Growl notification
    •Cross-platform
    

    View Slide

19. Lorem Helpers
    <%= lorem_sentence %>
    <%= lorem_words 5 %>
    <%= lorem_word %>
    <%= lorem_paragraphs 10 %>
    <%= lorem_paragraph %>
    <%= lorem_date %>
    <%= lorem_name %>
    <%= lorem_first_name %>
    <%= lorem_last_name %>
    <%= lorem_email %>
    

    View Slide

20. Lorem Helpers
    <%= zh_lorem_sentence %>
    <%= zh_lorem_words 5 %>
    <%= zh_lorem_word %>
    <%= zh_lorem_paragraphs 10 %>
    <%= zh_lorem_paragraph %>
    <%= zh_lorem_name %>
    <%= zh_lorem_first_name %>
    <%= zh_lorem_last_name %>
    <%= zh_lorem_email %>
    

    View Slide

21. Lorem Helpers
    
    
    
    
    

    View Slide

22. 1 <% 10.times do |i| %>
    2
    3
    4
    7 <%= lorem_last_name %> <%=
    lorem_paragraph %>
    8 <%= lorem_date %>
    9
    10
    11 <% end %>
    

    View Slide

23. GPLv2
    Source Code is available on GitHub
    https://github.com/handlino/FireApp
    

    View Slide

24. if you want to buy us some beers
    $14
    ~1000 copies sold
    https://github.com/handlino/FireApp
    

    View Slide

25. 
    Contributions
    documents, pull requests, issues
    https://github.com/handlino/FireApp
    

    View Slide