Implementação de Padrões Web

Padrões de
Implementação de
Interfaces

Um pouquinho de História...

Em 1989,
Tim Berners-Lee criou a
World Wide Web.
Lançamento oﬁcial foi em
6 de agosto de 1991.

World Wide Web

Sistema de documentos de hipertexto interligados.

A navegação entre páginas web, se dá por links.

É de tecnologia aberta e gratuita.

World Wide Web Consortium

“ To lead the World Wide Web to its full
potential by developing protocols and
guidelines that ensure long-term
growth for the Web.
”
Tim Berners-Lee, Diretor
da W3C e inventor da
criado em 1994
World Wide Web

WaSP
Web Standards Projects

Grupo formado em 1998
para promover os Padrões Web

Padrões
XML
XHTML DOM
HTML
WSDL CSS
SVG
SOAP RDF

Nova Proposta

Divisão em Camadas

Padrão HTML

SGML

base do padrão XML
(Extensible Markup Language)

1997 - W3C endossou o HTML 4

Padrão XHTML

eXtensible HyperText Markup Language

documentos web compatíveis com aplicações XML

2000 - endossado o XHTML 1.0

2001 - endossado o XHTML 1.1

XHTML é baseado em XML

HTML4 = XHTML1

Documentos são lidos,
visualizados e editados
em qualquer ferramenta XML

É possível criar novas
marcações (tags)

Há compatibilidade com
diversos navegadores

Melhores resultados nos
mecanismos de busca

Arquivo Menor:
Carregamento mais rápido,
economia de banda

Diferenças entre
HTML e XHTML

Documentos devem ser
bem formatados

<html>
<head>
<title> </title>
</head>

<body>
<p> ... </p>
</body>

</html> regra obrigatória

proibido em XHTML
<div> <DIV>
<p>texto</p> <P>texto</P>
</div> </DIV>

Tags devem ser
aninhadas
corretamente

proibido em XHTML
<div> <div>
<p> <p>
<em> <em>
Texto Texto
enfatizado enfatizado
</em> </p>
</p> </em>
</div> </div>

proibido em XHTML
<p>
Um parágrafo <p>
</p> Um parágrafo

<li> <li>
Um item de lista Um item de lista
</li>

Elementos vazios
(órfãos) devem ser fechados

<br />
<hr /> proibido em XHTML
<img src=”imagem.gif”
alt=”minha imagem” />
<br>
<hr>
ou
alt=”minha imagem”>
<br></br>
<hr></hr>
alt=”minha imagem”></img>

<td rowspan=”3” <td ROWSPAN=”3”

<td rowspan=”3” <td rowspan=3

<input checked=”checked” /> <input checked />
<input realonly=”readonly” /> <input readonly />
<textarea multiple=”multiple” /> <textarea multiple />
... ...

<a name=”topo”>Início</a>

(Para HTML)

<a id=”topo”>Início</a>

(Para XHTML)

<a id=”topo” name=”topo”>Início</a>
(Para compatibilidade com navegadores antigos)

regra obrigatória

<img src=”imagem.gif” alt=”minha imagem” />
(Para XHTML)

<img src=”imagem.gif” alt=” ” />

(Para imagem que decorativa que não transmita
informação)

Editores WYSIWYG
“O que você vê é o que você tem”

onmouseover=function() onMouseOver=function()

Codiﬁcação de caracteres
reservados

Entidades HTML

Comércio & Exportação Comércio & Exportação

Entidades HTML
Caractere Nome da Entidade Descrição em inglês

“ " quotation mark

‘ ' apostrophe

» » angle quotation mark (right)

< < less-than

> > more-than

ó ó small a, acute accent

ã ã small a, tilde

À À big a, grave accent

ê ê small e, circumﬂex accent

ç ç small c, cedilla

Exemplo
Código
Esta apresentação é sobre padr&otild;es web.

Visual
Esta apresentação é sobre padrões web.

<!DOCTYPE blablablablabla>
<html xmlns=”http://www.w3c.org/1999/xhtml”
xml:lang=”pt-br” lang=”pt-br”>
<head>
<title>Título do documento</title>
</head>
<body>
Conteúdo do documento
</body>
</html>

DOCTYPE
Document Type Deﬁnition

Especiﬁca a sintaxe e a
gramática SGML usada para a
linguagem de marcação XHTML

DOCTYPE Strict
Mais rígida das declarações:

itens de apresentação dentro dos elementos
<div align=”center”></div>

elementos em desuso
<u></u>

Marcação de conteúdo totalmente independente da
apresentação

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">

DOCTYPE Transitional
Declarações mais ﬂexíveis que a anterior:

itens de apresentação dentro dos elementos
<div align=”center”></div>

elementos em desuso
<u></u>

Destinado para navegadores sem suporte a CSS

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

Semântica

É a parte da
linguística que
estuda o
signiﬁcado das
palavras.

XHTML
Marcação semântica

Tags são usadas
considerando seu
signiﬁcado,
destino e função

Alguns Elementos
<h1> <h2> .... até <h6> para cabeçalhos
<p> para parágrafos
<strong> para maior importância
<small> para menor importância
<em> para enfatizar
<ul> para lista sem ordenação
<ol> para lista ordenada
<li> para item de lista
<table> para dados tabulares
<div> e <span> não tem valor semântico

Ferramenta certa
para o trabalho certo

Sintaxe CSS

Composta por
seletor e declaração

seletor {
propriedade : valor;
}

seletor { propriedade: valor; }

seletor: é o alvo da regra CSS

declaração: parâmetros de estilização

propriedade: característica a ser estilizada

valor: quantiﬁcação ou qualiﬁcação da propriedade

seletor { propriedade: valor; }

Elemento <p> - parágrafo

p {
color: #000000;
background-color: #ff0000;
font-style: italic;
text-align: center;
}

h1 { color: red; }
h2 { color: red; }
p { color: red; }

agrupando...

h1, h2, p { color: red; }

Classe

Seletor de classificação
ID
Vários elementos Seletor de identificação
podem ter a mesma
classe Somente um elemento
pode ter aquele id
Não tem tanta
especificidade Mais específico

<h4 class=”titulo”>
Cabeçalho nível 4
</h4>

h4.titulo { color: red; }

.titulo { color: red; }

<p class=”introducao”>
Texto de introdução da minha notícia.
</p>

p.introducao {
color: black;
font-size: 12px;
width: 500px;
margin: 10px 5px;
}

p.artigo {
color: gray;
font-size: 13px;
}

<p class=”introducao artigo”>
Texto de introdução do meu artigo.
</p>

<div id=”principal”></div>

<div id=”secundario”></div>

div#principal { color: black; }

#principal { color: black; }

#secundario { color: red; }

<div id=”principal”>
<p class=”descricao”>
<strong>Nome do produto</strong>
Descrição do produto.
</p>
</div>

div#principal {
color: black;
font-style: normal;
}
p.descricao{ font-size: 13px; }

p.descricao strong {
font-size: 14px;
color: #005A9C;
}

Inline

<p style=”width:200px; color:red;
background-color:#ccc; font-size:1.8em;”>
Texto com estilo inline.
</p>

Incorporado
...
<head>
...
<style type=”text/css”media=”screen”>
body {
margin: 0;
padding: 0;
font-size: 80%;
color: black;
background-color: white;
}

... outras regras ...
</style>
</head>
...

Arquivo Linkado
...
<head>
...
<link rel=”stylesheet” type=”text/css”
href=”estilo.css” media=”all” />

</head>
<body>
...

Arquivo Importado
...
<head>
...
<style type=”text/css”>
@import url(“estilos.css” screen;
</style>

</head>
<body>
...

http://jigsaw.w3.org/css-validator/

Boa marcação de
Conteúdo para
Leitores de Tela

Referências
http://www.w3c.br/
http://www.w3.org/TR/xhtml1/
http://jigsaw.w3.org/css-validator/
http://www.w3.org/Style/CSS/#support
http://www.maujor.com/w3c/xhtml10_2ed.html
http://www.acessibilidade.net/
http://www.acesso.umic.pt/w3/TR/WCAG20/
http://www.acessibilidadelegal.com/
http://acessodigital.net/

Implementação de Padrões Web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Implementação de Padrões Web

Ähnlich wie Implementação de Padrões Web (20)

Implementação de Padrões Web