HTML for food pizza, please      XHTML, 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á f...
3 doctypes<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><...
Boas práticas•   Manter semântica•   <span> mania (span class=bold)•   layout sem <table>, mas tabulares•   <h1>,<h2>, <ul...
Jogo dos sete erros<p><strong>Negrito</p></STRONG><ul> <li>Item   <ol><li>Sub-item</ol></ul><strong><em>Alô Informant</em>...
Jogo dos sete erros<p><strong>Negrito</strong></p><ul> <li>Item   <ol><li>Sub-item</li></ol></li></ul><strong><em>Alô Info...
CSS•   Inline e/ou externo?•   Separar em vários arquivos?•   Minify (UI Performance, Ant)•   Tableless ou divless (!)    ...
CSS no id ou na class?•   Tanto faz•   E que tal nas tags?       div.box { float:left; }    <div class="box">...<div class...
Boas práticas•   tag#elementId•   X.elementClass•   Simplificação (background, font, border)•   CSS reset    html, body, d...
HTML versus CSS•   <strong> ou font-weight:bold•   <em> ou font-style:italic•   ...
CSS 3•   Graceful degradationCSS3 Generator:• Box shadow• Text shadow• Border radius...FontSquirrel:• Gerador de fontes cu...
SEO•   Importância das tags•   <meta> tags•   Robots.txt      User-agent: *      Allow: /      Disallow: /admin/      Site...
Sitemaps•   Padrão em http://www.sitemaps.org<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/...
Estudando a interface
div.header   > div                             ul                         div.console   div.welcome                       ...
Talk is cheap...
Upcoming SlideShare
Loading in...5
×

Html forfood

735

Published on

Tech Lunch - Rafael Fedelix

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
735
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html forfood

  1. 1. HTML for food pizza, please XHTML, CSS e técnicas SEO
  2. 2. É 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. 3. 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">
  4. 4. 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
  5. 5. 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 />
  6. 6. 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" />
  7. 7. 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"> ...
  8. 8. CSS no id ou na class?• 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>...
  9. 9. Boas práticas• tag#elementId• X.elementClass• Simplificação (background, font, border)• CSS reset html, 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; }
  10. 10. HTML versus CSS• <strong> ou font-weight:bold• <em> ou font-style:italic• ...
  11. 11. CSS 3• Graceful degradationCSS3 Generator:• Box shadow• Text shadow• Border radius...FontSquirrel:• Gerador de fontes customizadas
  12. 12. SEO• Importância das tags• <meta> tags• Robots.txt User-agent: * Allow: / Disallow: /admin/ Sitemap: http://www.informant.com.br/sitemap.xml• Webmaster Tools• Analytics
  13. 13. 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>
  14. 14. Estudando a interface
  15. 15. div.header > div ul div.console div.welcome div.getstarted div.container div div div div.featuresdiv.footer ul
  16. 16. Talk is cheap...
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×