html&css 7 - tips & tricks

53
& DINIS CORREIA 2011 cbn H T M L C S S TIPS TRICKS DONT'S DO'S

Upload: dinis-correia

Post on 09-Jun-2015

853 views

Category:

Technology


1 download

DESCRIPTION

Slides for my in-house HTML & CSS trainning at SAPO. Tips, tricks, do's and don'ts.

TRANSCRIPT

Page 1: HTML&CSS 7 - Tips & Tricks

&DINIS CORREIA 2011

cbn

HTMLCSS

TIPSTRICKSDONT'S

DO'S

Page 3: HTML&CSS 7 - Tips & Tricks

HTML SEMÂNTICO

Page 4: HTML&CSS 7 - Tips & Tricks

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

<div  class="nav">...

</div>

Page 5: HTML&CSS 7 - Tips & Tricks

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

<div  class="nav">...

</div>

Page 6: HTML&CSS 7 - Tips & Tricks

<h1>SAPO.pt</h1>

<ul  class="nav">...

</ul>

Page 7: HTML&CSS 7 - Tips & Tricks

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

</div>

Page 8: HTML&CSS 7 - Tips & Tricks

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

</div>

Page 9: HTML&CSS 7 - Tips & Tricks

<div  class="header">...

</div>

Page 10: HTML&CSS 7 - Tips & Tricks

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

Page 11: HTML&CSS 7 - Tips & Tricks

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

Page 12: HTML&CSS 7 - Tips & Tricks

<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>

Page 13: HTML&CSS 7 - Tips & Tricks
Page 14: HTML&CSS 7 - Tips & Tricks
Page 15: HTML&CSS 7 - Tips & Tricks

http://naked.dustindiaz.com

Page 16: HTML&CSS 7 - Tips & Tricks

PROGRESSIVE ENHANCEMENT

Page 17: HTML&CSS 7 - Tips & Tricks

CONTEÚDOHTML

COMPORTAMENTOJavaScript

APRESENTAÇÃOCSS

Page 18: HTML&CSS 7 - Tips & Tricks

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Page 19: HTML&CSS 7 - Tips & Tricks

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Page 20: HTML&CSS 7 - Tips & Tricks

CSSCONDITIONAL

Page 21: HTML&CSS 7 - Tips & Tricks

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

}

Page 22: HTML&CSS 7 - Tips & Tricks

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

}

Page 23: HTML&CSS 7 - Tips & Tricks

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

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

Page 24: HTML&CSS 7 - Tips & Tricks

http://bit.ly/conditional_css

Page 25: HTML&CSS 7 - Tips & Tricks

http://bit.ly/css_compat

Page 27: HTML&CSS 7 - Tips & Tricks

http://bit.ly/ie_bugs

Page 28: HTML&CSS 7 - Tips & Tricks

CSS RESET

Page 29: HTML&CSS 7 - Tips & Tricks

User agent User Author

21 3

Page 30: HTML&CSS 7 - Tips & Tricks

http://bit.ly/reset_meyerweb

Page 31: HTML&CSS 7 - Tips & Tricks

http://bit.ly/reset_meyerweb

Page 32: HTML&CSS 7 - Tips & Tricks

COMENTÁRIOS

Page 33: HTML&CSS 7 - Tips & Tricks

“Comments as notes-to-future-self FTW

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

Page 34: HTML&CSS 7 - Tips & Tricks

/*  Header  */h1.logo

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

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

Page 35: HTML&CSS 7 - Tips & Tricks

http://bit.ly/css_edit

Page 36: HTML&CSS 7 - Tips & Tricks

http://bit.ly/css_edit

Page 37: HTML&CSS 7 - Tips & Tricks

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

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

</div></div>

Page 38: HTML&CSS 7 - Tips & Tricks

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

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

</div></div>

Page 39: HTML&CSS 7 - Tips & Tricks

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

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

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

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

Page 40: HTML&CSS 7 - Tips & Tricks

FERRAMENTAS

Page 41: HTML&CSS 7 - Tips & Tricks

http://bit.ly/firebug

Page 42: HTML&CSS 7 - Tips & Tricks

http://bit.ly/firebug

Page 43: HTML&CSS 7 - Tips & Tricks

http://bit.ly/notepad_plus

Page 44: HTML&CSS 7 - Tips & Tricks

E AINDA...

Page 45: HTML&CSS 7 - Tips & Tricks

http://bit.ly/css_cheat_sheet

Page 46: HTML&CSS 7 - Tips & Tricks

http://alistapart.com

Page 47: HTML&CSS 7 - Tips & Tricks

http://www.456bereastreet.com

Page 48: HTML&CSS 7 - Tips & Tricks

http://www.webdesignerwall.com

Page 49: HTML&CSS 7 - Tips & Tricks

http://css-tricks.com

Page 50: HTML&CSS 7 - Tips & Tricks

http://csszengarden.com

Page 51: HTML&CSS 7 - Tips & Tricks

http://csszengarden.com

Page 52: HTML&CSS 7 - Tips & Tricks

http://csszengarden.com

Page 53: HTML&CSS 7 - Tips & Tricks

[email protected]@diniscorreia

OBRIGADO