html forfood
TRANSCRIPT
HTML for food pizza, pleaseXHTML, CSS e técnicas SEO
É quase idêntico ao HTML 4
A principal diferença é que o XHTML é
definido como XML
tags sempre em minúsculas
Como já fazemos:
<span></span>, <script></script>
Mas também com self-closing:
<br />, <hr />, <meta />, <img />
3 doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Boas práticas
• Manter semântica
• <span> mania (span class=bold)
• layout sem <table>, mas tabulares
• <h1>,<h2>, <ul>...
• Pra CSS, <link /> na <head>
• <scripts> no fim, antes do </body>
• <scripts> em CDNs
• Poucas tags, menor DOM = SUCCESS
Jogo dos sete erros
<p><strong>Negrito</p></STRONG>
<ul>
<li>Item
<ol><li>Sub-item</ol>
</ul>
<strong><em>Alô Informant</em></strong>
<TABLE width=100></table>
<div><script></script></div>
<input disabled />
Jogo dos sete erros
<p><strong>Negrito</strong></p>
<ul>
<li>Item
<ol><li>Sub-item</li></ol>
</li></ul>
<strong><em>Alô Informant</em></strong>
<table width="100"></table>
<div><script></script></div>
<input disabled="disabled" />
CSS
• Inline e/ou externo?
• Separar em vários arquivos?
• Minify (UI Performance, Ant)
• Tableless ou divless (!)<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#FF7F00">
<td rowspan="2" width="138" align="center" valign="middle"><img
src="http://web.archive.org/web/20011009083132im_/http://www.terra.com.br/capa/logoterra.gif" width="110"
height="32" border="0" alt="Terra Networks"></td>
<td width="320" align="RIGHT" valign="MIDDLE">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td width="97" height="17" align="RIGHT">
...
• Tanto faz
• E que tal nas tags?
div.box { float:left; }
<div class="box">...<div class="box">...
div.boxes div { float:left; }
<div>...<div>...<div>...
CSS no id ou na class?
Boas práticas
• tag#elementId
• X.elementClass
• Simplificação (background, font, border)
• CSS resethtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
HTML versus CSS
• <strong> ou font-weight:bold
• <em> ou font-style:italic
• ...
CSS 3
• Graceful degradation
CSS3 Generator:
• Box shadow
• Text shadow
• Border radius...
FontSquirrel:
• Gerador de fontes customizadas
SEO
• Importância das tags
• <meta> tags
• Robots.txtUser-agent: *
Allow: /
Disallow: /admin/
Sitemap: http://www.informant.com.br/sitemap.xml
• Webmaster Tools
• Analytics
Sitemaps
• Padrão em http://www.sitemaps.org
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
Estudando a interface
div.header > div ul
div.container
div.welcome
div.features
div.console
div.getstarted
divdiv
div
div.footerul
Talk is cheap...