Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Codificando sua interface como um profissional

Nando Vieira
November 07, 2011

Codificando sua interface como um profissional

Nando Vieira

November 07, 2011
Tweet

More Decks by Nando Vieira

Other Decks in Programming

Transcript

  1. elementos a, abbr, address, area, article, aside, audio, b, base,

    bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr
  2. elementos a, abbr, address, area, article, aside, audio, b, base,

    bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr
  3. HTML <div class="event"> <div class="name">RubyConf Brasil</div> <div class="description"> A RubyConf

    Brasil é a maior conferência com foco em Ruby da América do Sul. </div> </div>
  4. A RubyConf Brasil é a maior conferência com foco em

    Ruby da América do Sul. <h1> </h1> <p> </p> RubyConf Brasil
  5. Templates são terra de ninguém O importante é o que

    o usuário vê, e não o que está por baixo.
  6. <!-- div#container_main é aberta no application layout --> <h2 class="question-title">Pergunta</h2>

    <%#<p id="next-question"><a href="#" title="Próxima pergunta: título da pergunta">próxima pergunta</a></p>%> <div class="question-box" id="question"> <%= avatar_link_to :medium, @question.user %> <div class="question-data-wrapper"> <% special_info = special_flag(@question) %> <div class="question-data <%= special_info.first+"_question- data" if special_info %>"> <% if @question.expired? || @question.closed? %> <p class="question-status closed"><strong>Pergunta fechada</strong></p> <% else %> <p class="question-status open"><strong>Pergunta aberta</strong></p> <% end %> <% if special_info %> <div class="special_flag <%= special_info.first %>_flag"> <img src="/images/specials/<%= special_info.first %>/flag_question.png" alt="<%= special_info.first %>" class="pngfix"/> <a href="<%= special_info.last %>" title="<%=
  7. view: 323 partial: 70 * 25 outras partials: 32 +

    20 + 70 +70 + 59 layout: 210 + 15 Faça as contas 2549 LOC em uma única action
  8. - content_for :title do = [@race.place.name, l(@race.meeting.meeting_date), @race.to_s, @race.name].join(' -

    ') - cache([I18n.locale, @race.cache_key, :result].join('/'), :expires_in => 2.weeks) do :ruby meeting = @race.meeting selected_race = @race next_race = @next_race closed = @race.closed? ? 'complete' : 'upcoming' %h1.drop_shadow = @race.place.name \- #{l(@race.meeting.meeting_date, :format => :short)} \- #{t(:counter_race, :count => @race.meeting.races.count)} - case request.fullpath - when /fprogramme-courses/ %span= link_to(raw("#{t(:other_races, :scope => :races)} &raquo;"), meeting_path(@race.meeting)) - when /resultats-courses/ %span= link_to(raw("#{t(:other_races, :scope => :races)} &raquo;"), meeting_path(@race.meeting)) %div.drop_shadow[meeting]{:style => "margin: 0 0 8px 0 !important"} = render 'race_meeting_title' .cleaner .body .meeting_races
  9. Pense duas vezes antes de usar Haml se o seu

    time tem uma alta rotatividade ou se você contrata muitos freelancers. ATENÇÃO!
  10. Err, Mr. Designer. WTF? Nem tudo pode ser como o

    designer sonhou. Cada navegador é diferente.
  11. Suporte avançado N W S E NW SW SE NE

    Os navegadores mais modernos possuem suporte avançado ao CSS, e incluem até animações.
  12. Internet Explorer A Microsoft inovou ao lançar o IE6, o

    mais avançado navegador que já existiu... em 2001.
  13. Windows XP, que ainda tem a maior base de usuários

    Windows, tem suporte até o Internet Explorer 8. IE8 é o novo Internet Explorer 6 http://en.wikipedia.org/wiki/Usage_share_of_operating_systems
  14. <!DOCTYPE html> <html> <head> <title>Sample app</title> <%= stylesheet_link_tag "application" %>

    <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html> eRb
  15. var tags = "abbr|article|aside...".split("|"); for (var i = 0; i

    < tags.length; i++) { document.createElement(tags[i]); } JavaScript https://gist.github.com/dea13a2b98569cbaa673
  16. JavaScript App.users = { before: function() { // execute before

    all actions } , index: function() { // code for :index action } , new: function() { // code for :new action } };
  17. ATENÇÃO! Pense duas vezes antes de usar Coffeescript se o

    seu time tem uma alta rotatividade ou se você contrata muitos freelancers.
  18. <!DOCTYPE html> <html dir="ltr" lang="<%= I18n.locale %>"> <head> <meta charset="utf-8">

    <title><%= page_title %> • Codeplane</title> <%= dispatcher_tag %> <%= favicon_link_tag %> <%= javascript_include_tag "html5" %> <%= stylesheet_includes :application %> </head> <%= body do %> <%= yield %> <%= javascript_includes :application %> <% end %> </html> eRb
  19. O Rails tornou nossa vida muito mais fácil, mas ainda

    dá para melhorar um pouco. forms
  20. <%= form_for @repo do |f| %> <%= f.error_messages %> <p>

    <%= f.label :name %> <%= f.text_field :name %> </p> <p> <%= f.submit "Create" %> </p> <% end %> eRb
  21. <%= simple_form_for @repo do |form| %> <%= form.error_notification %> <%=

    form.input :name, autofocus: true %> <%= f.button :submit %> <% end %> eRb
  22. eRb <% label = target.moderated? ? "Revogar Moderação" : "Moderar

    Pergunta" %> <% paginate_link = nil if local_assigns[:paginate_link].nil? %>
  23. eRb <% cache("/welcome/highlights", :expires_in => 24.hours) do %> <% posts

    = Highlight.posts bookmark = Highlight.bookmark if bookmark.size == 1 bookmark = bookmark.first else bookmark = nil end post_count = 1 %> ... muito markup aqui! <% end %>
  24. module IssuesHelper def statuses_options Issue::STATUS.collect do |name, value| [t(value, scope:

    "issues.statuses"), value] end end end Ruby app/helpers/issues_helper.rb
  25. Objetos que irão preparar os dados para a view. Toda

    a lógica fica encapsulada, melhorando sua view e tornando os testes mais simples. PRESENTERS
  26. class IssuePresenter < Presenter expose :number, :title, :created_at def categories_options

    Issue::CATEGORY.collect do |name, value| [ t(value, scope: "issues.categories"), value ] end end end Ruby app/presenters/issue_presenter.rb
  27. context "category options" do subject { IssuePresenter.new.categories_options } it {

    should have(3).items } it { should include(["Bug", "bug"]) } it { should include(["Feature", "feature"]) } it { should include(["Task", "task"]) } end Ruby spec/presenters/issue_presenter_spec.rb
  28. class IssuesController < ApplicationController def new @issue = Issue.new @presenter

    = IssuePresenter.new(@issue) respond_with(@issue) end end Ruby spec/presenters/issue_presenter_spec.rb
  29. <%= simple_form_for @issue do |form| %> <%= render form, presenter:

    @presenter %> <p class="submit"> <%= submit_or_cancel back_url, button: t("issues.create_button") %> </p> <% end %> Ruby app/views/issues/new.html.erb