MAPSD » Padrões Web (Web Standards) http://www.mapsd.com.br/blog Tutoriais e dicas para tirar o melhor da internet Tue, 23 Feb 2010 13:35:02 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Modos de renderização ‘Standards mode’ vs ‘Quirks mode’ http://www.mapsd.com.br/blog/index.php/2010/01/modos-de-renderizacao-standards-mode-vs-quirks-mode/ http://www.mapsd.com.br/blog/index.php/2010/01/modos-de-renderizacao-standards-mode-vs-quirks-mode/#comments Mon, 04 Jan 2010 23:36:44 +0000 Alexandre Broggio http://www.mapsd.com.br/blog/?p=232 Um navegador de web tem no mínimo dois modos de exibição das paginas ou modos de renderização,  que o navegador escolhe a partir de declaração de uma DTD (Doctype) no documento que seja valida, ou seja (escrita corretamente).

Com base na DTD o navegador ira renderizar a pagina em

- Modo padrão ( Standards mode ) – Modo correto de o navegador exibe a pagina conforme as especificações do DTD (Doctype) declarado no documento. Este modo segue os padrões descritos no W3C.
- Modo não padrão (Quirks  mode) – o navegador exibe a pagina de uma forma mais vaga que poder gerar resultados inesperados, pois este modo emula o comportamentos de navegadores mais antigos.
Escolher um modo de renderização pelo DTD( Doctype ) de um documento e chamando de alternância (switching) de DOCTYPE ou indetificação (sniffing) de DOCTYPE. Abaixo como deve ser um Box model rendeizado corretamente

Box model

Abaixo os códigos HTML e CSS  para você ver os resultados da imagem que esta logo abaixo dos códigos.

Código CSS

<style type="text/css">
body {
	font-size: 25px;
}
p {
	font-size: 50%;
}
h1 {
	font-size: 16px;
}
div {
	margin: 20px;
	width: 170px;
	padding: 50px;
	border: 6px solid #F00;
}
table, td, th {
	border:1px solid #333;
	text-align:left;
}
</style>

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>xhtml document</title>
</head>
<body>
<h1>Teste</h1>
<div>
  <p> 'Standards mode'  vs  'Quirks  mode' </p>
</div>
<table>
  <thead><tr><th colspan="2">Titulo da tabela</th></tr></thead>
  <tfoot><tr><th colspan="2">Rodapé</th></tr></tfoot>
  <tbody>
    <tr>
      <td><p>Texto da tag p.</p></td>
      <td><p>texto da tag p.</p></td>
    </tr>
    <tr>
      <td>Conteúdo.</td>
      <td>Conteúdo.</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Código renderizado em modo padrão Standards mode com DTD(Doctype)
stander mode

Ja aqui o mesmo código renderizado mas em modo não padrão ‘Quirks mode’ sem o DTD(Doctype)

Quicks mode

Aqui uma outra comparação de entre box model padrão e um quebrado

comparacao de box model

Caso querira se aprofundar mais no assunto alguns links que lhe sera útil

http://www.w3.org/International/articles/serving-xhtml/Overview.en.php#quirks
http://en.wikipedia.org/wiki/Quirks_mode
http://www.communitymx.com/content/article.cfm?cid=85fee
https://developer.mozilla.org/en/Mozilla%27s_DOCTYPE_sniffing
http://www.cssnewbie.com/standards-vs-quirks-mode/
http://www.w3.org/TR/CSS2/box.html

Usei também como referência o livro Criando páginas web com css.

]]> http://www.mapsd.com.br/blog/index.php/2010/01/modos-de-renderizacao-standards-mode-vs-quirks-mode/feed/ 0 Como usar incorretamente o DTDs(Doctype) afeta suas paginas http://www.mapsd.com.br/blog/index.php/2009/11/como-usar-incorretamente-o-dtds-doctype-afeta-suas-paginas/ http://www.mapsd.com.br/blog/index.php/2009/11/como-usar-incorretamente-o-dtds-doctype-afeta-suas-paginas/#comments Sat, 28 Nov 2009 17:36:19 +0000 Alexandre Broggio http://www.mapsd.com.br/blog/?p=202 Doctype html

Document Type Definition, ou simplesmente DTD, contém as regras que definem quais as tags que podem ser usadas em um documento e quais os valores que são válidos.

A declaração DOCTYPE deve ser a primeira coisa em um documento HTML, antes mesmo da tag <html>. A declaração DOCTYPE não é uma tag de HTML, e sim uma instrução para os navegadores  sobre qual a versão da linguagem de marcação esta escrito o código da  página. A declaração DOCTYPE se refere a um tipo de documento (DTD). O DTD especifica as regras para a linguagem de marcação, para que os navegadores possam processar e exibir o conteúdo corretamente, abaixo estão algumas.

HTML 4.01 Strict, Transitional, Frameset


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset


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

XHTML 1.1 DTD


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Diferenças entre Strict, Transitional, Frameset

Strict
Escolhendo um DOCTYPE Strict quer dizer que seu código está seguindo á risca os padrões, sem nenhum tipo de erro de validação.

Transitional
Escolhendo um DOCTYPE Transitional é quando você está fazendo uma transição de uma forma antiga de marcação para uma mais moderna.

Frameset
Escolhendo um DOCTYPE Frameset é para quando você usa Frames em sua página.

Quando não se declara o DOCTYPE o navegador renderiza a pagina em “Quirks Mode” ou seja ele tem que “adivinhar” qual a forma de renderizar a pagina, já quando se tem um DOCTYPE o navegador ira renderiar o codigo em ” Standards Compliance Mode ” no qual a apresentação do documento é não só mais rápida como também isenta de uma má apresentação ao qual estão sujeitos os documentos sem uma declaração de Doctype.

Lista de DTDS  http://www.w3.org/QA/2002/04/valid-dtd-list.html

]]> http://www.mapsd.com.br/blog/index.php/2009/11/como-usar-incorretamente-o-dtds-doctype-afeta-suas-paginas/feed/ 0 O que é W3C ? http://www.mapsd.com.br/blog/index.php/2009/11/o-que-e-w3c/ http://www.mapsd.com.br/blog/index.php/2009/11/o-que-e-w3c/#comments Sun, 22 Nov 2009 16:40:45 +0000 Alexandre Broggio http://www.mapsd.com.br/blog/?p=173 logo w3c O Consórcio World Wide Web (W3C) é uma comunidade internacional com organizações filiadas, no qual  trabalham em tempo integral e junto com o publico trabalham para desenvolver padrões para web (Web standards). Liderados pelo inventor da Web Tim Berners-Lee, a missão do W3C é levar a Web ao seu pleno potencial.

O W3C desenvolve padrões e diretrizes para a Web

Basicamente, o W3C faz sua missão com a criação de padrões e diretrizes para a Web. Desde 1994,
o W3C publicou mais de 110 desses padrões, denominados Recomendações do W3C.

O W3C também se envolve em educação e divulgação, desenvolve softwares e atua como fórum aberto para discussões sobre a Web. Para que a Web atinja todo o seu potencial, as tecnologias mais fundamentais da Web precisam ser  compatíveis entre si e permitir que todos os equipamentos e softwares usados para acessar a Web funcionem juntos.

O W3C chama essa meta de “Interoperabilidade da Web”. Ao publicar padrões abertos  (não-exclusivos) para línguas e protocolos da Web, o W3C procura evitar a fragmentação do mercado e, consequentemente, a fragmentação da Web.

Tim Berners-Lee e outros criaram o W3C como um consórcio do setor dedicado a construir consenso em torno das tecnologias da Web. O Sr. Berners-Lee, que criou a World Wide Web em 1989 enquanto trabalhava na Organização Européia para Pesquisa Nuclear (CERN), tem servido como Diretor do W3C desde sua fundação,em 1994.

O que precisamos saber a principio e que o W3C desenvolve padrões(Web standards) e diretrizes para a Web o qual devemos seguir.

Para mais informações clique nos links.

http://www.w3c.br Escritório no Brasil.
http://www.w3.org.

]]> http://www.mapsd.com.br/blog/index.php/2009/11/o-que-e-w3c/feed/ 0