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

Desenvolvendo Interfaces "Total-Flex"

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

Daniel Filho

November 28, 2012
Tweet

More Decks by Daniel Filho

Other Decks in Technology

Transcript

  1. <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>
  2. <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>
  3. <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>
  4. CSS