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

Desenvolvendo Interfaces "Total-Flex"

3f2ebf61315d43cae59e727dab091620?s=47 Daniel Filho
November 28, 2012

Desenvolvendo Interfaces "Total-Flex"

Apresentação curta sobre o desenvolvimento de interfaces, com enfoque no "flexbox" ou "CSS Flexible Box Layout Module" do CSS3

3f2ebf61315d43cae59e727dab091620?s=128

Daniel Filho

November 28, 2012
Tweet

Transcript

  1. Desenvolvendo Interfaces “Total-Flex” Daniel Filho daniel!lho.info

  2. @danielfilho

  3. ig.com.br front-end developer

  4. zofe.com.br co-host

  5. makeyou.com core-team front-end engineer

  6. danielfilho.github.com eternal apprentice

  7. </time>

  8. None
  9. <table />

  10. <table width="100%" cellpadding="10" cellspacing="0" border="0"> <tr> <td colspan="2" bgcolor="#777d6a"> <h1>Website

    Logo</h1> </td> </tr> <tr> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="#">Menu link</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <td width="80%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2> <p>Here's a two column layout with header and footer</p> <p>The second table row contains the menu and the content column.</p> <p>The third table row creates the footer.</p> </td> </tr> <tr> <td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td> </tr> </table> </body>
  11. None
  12. <div />

  13. <div class="logo"> <h1>Website Logo</h1> </div> <div class="menu"> <ul> <li><a href="#link"

    title="Menu link">Menu link</a></li> <li><a href="#link" title="Menu link">Menu link</a></li> <li><a href="#link" title="Menu link">Menu link</a></li> </ul> </div> <div class="main"> <h2>Page heading</h2> <p>Here's a two column layout with header and footer</p> <p>The second table row contains the menu and the content column.</p> <p>The third table row creates the footer.</p> </div> <div class="footer">Copyright ©</div>
  14. +semantic

  15. <header> <h1>Website Logo</h1> </header> <aside> <nav> <ul> <li><a href="#" title="Menu

    link">Menu link</a></li> <li><a href="#" title="Menu link">Menu link</a></li> <li><a href="#" title="Menu link">Menu link</a></li> </ul> </nav> </aside> <article> <h2>Page heading</h2> <p>Here's a two column layout with header and footer</p> <p>The second table row contains the menu and the content column.</p> <p>The third table row creates the footer.</p> </article> <footer>Copyright ©</footer>
  16. None
  17. div{ display: table-cell; } div{ display: table-row; }

  18. 6 : Math.floor( Math.pow(2, 2.59) );

  19. None
  20. None
  21. None
  22. None
  23. Vamos falar de coisa boa?

  24. CSS

  25. Flexible Box Layout Module http://www.w3.org/TR/css3-flexbox/

  26. Flexbox

  27. -webkit-flex; -moz-flex; -ms-flex; -o-flex; display: flex;

  28. -webkit-justify-content: {...}; -moz-justify-content: {...}; -ms-justify-content: {...}; -o-justify-content: {...}; justify-content: {...};

  29. -webkit-align-items: {...}; -moz-align-items: {...}; -ms-align-items: {...}; -o-align-items: {...}; align-items: {...};

  30. code demo 1: alignment

  31. code demo 2: sorting and orientation

  32. code demo 3: flexibility

  33. simurai.com

  34. code demo 1: website vs webapp

  35. code demo 2: header

  36. code demo 3: e-mail webapp

  37. None
  38. danielfilho.info/ /about-me /g /+ /@ /sd /in