html&css 7 - tips & tricks

&DINIS CORREIA 2011

cbn

HTMLCSS

TIPSTRICKSDONT'S

DO'S

O CSS É COMOO XADREZ

FOTO DE KEVIN O'MARA c HTTP://FLIC.KR/P/3TYZSI

HTML SEMÂNTICO

<p  class="titulo">SAPO.pt</p>

<div  class="nav">...

</div>

<p  class="titulo">SAPO.pt</p>

<div  class="nav">...

</div>

<h1>SAPO.pt</h1>

<ul  class="nav">...

</ul>

<div  class="barra-­‐verde">...

</div>

<div  class="barra-­‐verde">...

</div>

<div  class="header">...

</div>

<p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>

<p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>

<p>Ó  mar  salgado,  quanto  do  teu  sal<br>São  lágrimas  de  Portugal!<br>Por  te  cruzarmos,  quantas  mães  choraram,<br>Quantos  filhos  em  vão  rezaram!<br>Quantas  noivas  ficaram  por  casar<br>Para  que  fosses  nosso,  ó  mar!</p>

http://naked.dustindiaz.com

PROGRESSIVE ENHANCEMENT

CONTEÚDOHTML

COMPORTAMENTOJavaScript

APRESENTAÇÃOCSS

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

CSSCONDITIONAL

p  {margin:  10px;_margin:  20px;

}

p  {margin:  10px;_margin:  20px;

}

<link  type="text/css"  rel="stylesheet"  href="global.css">

<!-­‐-­‐[if  IE  6]><link  type="text/css"  rel="stylesheet"  href="ie6.css"><![end  if]-­‐-­‐>

http://bit.ly/conditional_css

http://bit.ly/css_compat

LIDAR COM BUGSDE CSSFOTO DE BRIAN SEARLE c HTTP://FLIC.KR/P/5KVVSL

http://bit.ly/ie_bugs

CSS RESET

User agent User Author

21 3

http://bit.ly/reset_meyerweb

http://bit.ly/reset_meyerweb

COMENTÁRIOS

“Comments as notes-to-future-self FTW

@gruber — http://twitter.com/gruber/status/391293102

/*  Header  */h1.logo

ul.nav  {  ...  }ul.nav  li  {  ..  }

/*  Content  */.item  {  ...  }  

http://bit.ly/css_edit

http://bit.ly/css_edit

<div  class="container"><div  class="header"><ul  class="nav"><li>  ...  </li>

</ul><div  class="search">...</div>

</div></div>

<div  class="container"><div  class="header"><ul  class="nav"><li>  ...  </li>

</ul><div  class="search">...</div><!-­‐-­‐  Um  comentário  -­‐-­‐>

</div></div>

<div  class="container"><div  class="header"><ul  class="nav"><li>  ...  </li>

</ul><div  class="search">...</div><!-­‐-­‐  /.search  -­‐-­‐>

</div><!-­‐-­‐  /.header  -­‐-­‐>

</div><!-­‐-­‐  /.container  -­‐-­‐>

FERRAMENTAS

http://bit.ly/firebug

http://bit.ly/firebug

http://bit.ly/notepad_plus

E AINDA...

http://bit.ly/css_cheat_sheet

http://alistapart.com

http://www.456bereastreet.com

http://www.webdesignerwall.com

http://css-tricks.com

http://csszengarden.com

http://csszengarden.com

http://csszengarden.com

diniscorreia@mac.com@diniscorreia

OBRIGADO