1. DESVENDANDO PADRÕES PARA
DESENVOLVIMENTO WEB, BASE PARA
O SUCESSO
Prof. Esp. Ubiratan Zakaib do Nascimento
onucleo@onucleo.com
http://www.onucleo.com
Twitter: @birazn
@onucleo
This work is licensed under a Creative Commons Atribuição-Uso não-
comercial-Vedada a criação de obras derivadas 3.0 Unported License.
2. AGENDA DO TREINAMENTO
• Apresentação do facilitador
• Apresentação das ferramentas
– NetBeans versão X
– Navegador X
• Conhecendo WebStandards
Técnicas e Padrões de Projeto Web
2
3. AGENDA DO TREINAMENTO
• Treinamento “mão na massa”
– Implementação de Códigos XHTML
– Validação XHTML
– Implementação de Códigos CSS
– Validação CSS
– Implementando com Framework AJAX
– Implementando Galeria de Fotos
Técnicas e Padrões de Projeto Web
3
5. Como tudo começou
• A Web foi criado em 1989, por Tim Berners-Lee,
para ser um padrão de publicação e distribuição
de textos científicos e acadêmicos.
• Localizador Uniforme de Recursos (URL)
• Linguagem de Marcação de Hipertexto (HTML)
• Protocolo de Transferência de Hipertexto (HTTP)
• Navegador Web (Browser)
Técnicas e Padrões de Projeto Web
5
6. A Bagunça
• A Web cresce comercialmente, e veem a
necessidade de publicação de conteúdo
diagramado, como em revistas e jornais (algo para
o qual o HTML não possuía recursos).
• Há então a adaptação da linguagem de forma
equivocada, com uma preocupação unicamente
visual, esquecendo da qualidade do código.
Técnicas e Padrões de Projeto Web
6
7. A Guerra dos Browsers
• Aproximadamente entre 1995 e 1999 houve a
chamada “Guerra dos Browsers”, onde a Netscape (e
seu Browsers de mesmo nome) e a Microsoft (com o
seu Internet Explorer) disputavam o mercado de
navegadores.
• Além de não darem suporte aos padrões do recém
criado World Wide Web Consortium (W3C), ainda
criavam seus próprios padrões, aumentando a
bagunça.
Técnicas e Padrões de Projeto Web
7
8. Editores WYSIWYG
• "O que você vê é o que você tem", ou em inglês "What You See Is
What You Get" (WYSIWYG) são programas que lhe permitem ter a
visualização final de um documento, enquanto o mesmo ainda é
editado.
• Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver
surgiram por volta de 1996, e são conhecidos por gerar um código
sujo e muito maior que o necessário.
Técnicas e Padrões de Projeto Web
8
9. Com tudo isso...
• Cada arquivos de um site acaba sendo um
incompreensível emaranhado de Tags com tabelas,
formatações, scripts...
• Tudo muito maior que o necessário.
• Dessa forma, para que seja feita alguma alteração no
site, é necessário alterar todos os arquivos... um a
um!
Técnicas e Padrões de Projeto Web
9
11. Os Padrões Web
• Padrões Web ou Web Standards são um conjunto de
normas, diretrizes, recomendações, notas, artigos,
tutoriais e afins de caráter técnico, produzidos pelo W3C e
destinados a orientar fabricantes, desenvolvedores e
projetistas para o uso de práticas que possibilitem a
criação de uma Web acessível a todos,
independentemente dos dispositivos usados ou de suas
necessidades especiais.
XHTML – HTML – CSS – DOM – XML –...
Técnicas e Padrões de Projeto Web
11
12. O que é W3C?
• W3C (World Wide Web Consortium) é um
consórcio de empresas de tecnologia. Fundado
por Tim Berners-Lee em 1994 para levar a Web ao
seu potencial máximo.
• Desenvolve Recomendações abertas, até agora
mais de 80 padrões...
www.w3.org
Técnicas e Padrões de Projeto Web
12
13. Web Standards Project
• O Web Standards Project (WaSP) é um grupo formado em
1998 com o objetivo de promover os Padrões Web,
assegurando desse modo um acesso simples e com menos
custos para todos.
• Vem encorajando e persuadindo os fabricantes de Browsers
a fornecerem suporte aos padrões, como o XHTML, CSS,
ECMAScript (a versão standard do JavaScript) e o DOM.
www.webstandards.org
Técnicas e Padrões de Projeto Web
13
14. Mudança de Conceito...
• Web dividida em três camadas:
– Conteúdo (XHTML)
– Apresentação (CSS)
– Comportamento (Javascript)
Devem ser desenvolvidas de forma independente,
porém uma complementa a outra.
Técnicas e Padrões de Projeto Web
14
16. Vantagens da adoção dos Padrões
• Carregamento mais rápido
• Menores custos com hospedagem
• Melhor Consistência Visual
• Redesign mais barato e eficiente
• Melhores resultados nos Mecanismos de Buscas
• Maior acessibilidade e interoperabilidade
Técnicas e Padrões de Projeto Web
16
17. Tableless x Web Standards
• Tableless é um termo que ficou muito popular no Brasil, e
que acaba por confundir muita gente.
• Tableless significa (resumidamente) um site desenvolvido
sem o antiquado uso das tabelas para organizar o layout,
e sim usando CSS.
• Criar um site Tableless não significa que esteja seguindo
os Padrões Web, que vão muito além de um código
válido, e tem preocupações maiores como a Semântica e
a Acessibilidade.
Técnicas e Padrões de Projeto Web
17
18. HTML
• HTML é a abreviação para HyperText Markup Language, que
pode ser traduzido como Linguagem de Marcação para
Hipertexto.
• Compõe a estrutura de uma página Web através de
etiquetas (tags) e atributos.
Inicia Finaliza
comando <tag> Texto </tag> comando
Conteúdo formatado
<tag atributo=“valor” atributo2=“valor”> TEXTO </tag>
Técnicas e Padrões de Projeto Web
18
19. HTML
• O HTML sofreu várias mudanças em suas diferentes versões, com
o objetivo de estender a linguagem para que pudesse
acompanhar a evolução da Web e das tecnologias nela inseridas.
• Versões do HTML:
– HTML 2.0 (Novembro de 1995)
– HTML 3.2 (Janeiro de 1997)
– HTML 4.0 (Dezembro de 1997)
– HTML 4.01 (Dezembro de 1999)
– ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000)
– HTML 5 (Janeiro de 2008 em Implementação quase finalizada)
Técnicas e Padrões de Projeto Web
19
20. XML: eXtensible Markup Language
• Criada para suprir a falta de flexibilidade do HTML.
• Separação do conteúdo da formatação.
• Simplicidade e Legibilidade, para humanos e
computadores.
• Criação de arquivos para validação de estrutura.
• Interligação de bancos de dados distintos.
• Concentração na estrutura da informação.
Técnicas e Padrões de Projeto Web
20
21. XHTML
• O (X)HTML, ou eXtensible Hypertext Markup
Language, é uma reformulação da linguagem de
marcação HTML baseada em XML.
• Pode ser interpretado por qualquer dispositivo,
independentemente da plataforma utilizada, pois
as marcações possuem sentido semântico para as
máquinas.
Técnicas e Padrões de Projeto Web
21
22. Um Código Semântico
• Semântica refere-se ao estudo do significado.
• Quando utilizamos cada marcação para o que ela
realmente foi criada, estamos construindo um
“Código Semântico”.
• Parar de pensar em “isso vem aqui, isso vai ali...” e
pensar na “Estrutura da Informação”
• Criar uma “Marcação com Significado”.
Técnicas e Padrões de Projeto Web
22
23. Marcação Semântica
• Usar <table></table> apenas para dados tabulares
• Usar <h1></h1> até <h6></h6> para títulos
• Usar <ol></ol> para Listas Ordenadas e <ul></ul> para
Listas Não Ordenadas, seguidos do elemento <li></li>
• Usar <em></em> para Enfase, e <strong></strong>
para Enfase Forte
Técnicas e Padrões de Projeto Web
23
24. Versões do XHTML
• XHTML é uma linguagem que começou como uma
reformulação do HTML 4.01
• usando XML 1.0:
– XHTML 1.0 (Janeiro de 2000)
– XHTML 1.1: (Maio de 2001)
– XHTML 2.0: Ainda é um projeto de trabalho do W3C.
– XHTML 5.0: é uma atualização para o XHTML 1.x, está
sendo definido juntamente com o HTML5 no mesmo
projeto.
Técnicas e Padrões de Projeto Web
24
25. DTD: Document Type Definition
• Um padrão que define as partes de um
documento, e descrevem como eles podem ou
não ser usados, o que pode ser colocado em seus
interiores, e se são ou não elementos obrigatórios
do documento.
• Descreve com precisão a sintaxe e a gramática da
linguagem de marcação XHTML.
Técnicas e Padrões de Projeto Web
25
26. XHTML 1.0 - DOCTYPE:
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Técnicas e Padrões de Projeto Web
26
27. XHTML – Elementos obrigatórios:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Base</title>
</head>
<body>
<p>Conteúdo</p>
</body>
</html>
Técnicas e Padrões de Projeto Web
27
28. Diferenças entre XHTML e HTML
• Documentos devem ser bem formados
• Todas as tags escritas com letras minúsculas
• Tags devem estar convenientemente aninhadas
• Uso de tags de fechamento é obrigatório
• Elementos vazios devem ser fechados
Técnicas e Padrões de Projeto Web
28
29. Diferenças entre XHTML e HTML
• Documentos devem ser bem formados
• A estrutura básica do documento deve ser conforme
mostrado a seguir:
<html>
<head> ... </head>
<body>
...
</body>
</html>
Técnicas e Padrões de Projeto Web
29
30. Diferenças entre XHTML e HTML
• Todas as tags devem ser escritas com letras
minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>
Técnicas e Padrões de Projeto Web
30
31. Diferenças entre XHTML e HTML
• Tags devem estar convenientemente aninhadas
Errado:
<div><p>Aqui um <em>texto!</p></em></div>
Correto:
<div> <p> Aqui um <em> texto! </em> </p> </div>
Técnicas e Padrões de Projeto Web
31
32. Diferenças entre XHTML e HTML
• Uso de tags de fechamento é obrigatório
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>
Técnicas e Padrões de Projeto Web
32
33. Diferenças entre XHTML e HTML
• Elementos vazios devem ser fechados
Errado:
<br>
<img src=“imagem.gif” alt=“uma imagem” title=“uma imagem”>
Correto:
<br />
<img src=“imagem.gif” alt=“uma imagem” title=“uma imagem” />
Técnicas e Padrões de Projeto Web
33
35. CSS: Cascading Style Sheets
• Cascading Style Sheets (ou simplesmente CSS) é uma linguagem
de estilo utilizada para definir a apresentação de documentos
escritos em uma linguagem de marcação, como HTML ou XML.
• Seu principal benefício é prover a separação entre o formato e o
conteúdo de um documento.
• Pode-se definir apresentações especificas para diferentes
dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas
criando folhas de estilo alternativas.
Técnicas e Padrões de Projeto Web
35
36. CSS: Cascading Style Sheets
• CSS 1.0 … CSS level 1
• Em setembro de 1994 surgiu a primeira proposta
• Em dezembro de 1996 lançada como Recomendação oficial do W3C
• CSS 2.0 … CSS level 2
– Publicada em maio de 1998
– Ultima revisão: 12 de maio de 2008
• CSS 2.1 … CSS level 2 revision 1
• Candidata a Recomendação oficial do W3C em 23 de abril de 2009
• CSS 3.0 … CSS level 3
– Proposta em 2001
Técnicas e Padrões de Projeto Web
36
37. Associar CSSs a documentos HTML
• Inline
– Através do atributo style diretamente dentro de uma marcação
<p style=“regras”>
• Interno
– Através da tag style entre as marcações <head></head> do
documento HTML
<style type="text/css"> Regras </style>
• Externo
– Criar um link (ligação) para uma página que contém os estilos.
<link href="estilo.css" rel="stylesheet" type="text/css" />
Técnicas e Padrões de Projeto Web
37
38. CSS: Cascading Style Sheets
Propriedade Valor
h1 {color : green }
Seletor Declaração
Técnicas e Padrões de Projeto Web
38
39. CSS: Seletor classe
• Uma classe define a variação de um estilo.
• É referenciado através de uma ocorrência específica de um
elemento utilizando o atributo class.
• Serve para definir vários estilos diferentes para o mesmo
elemento.
• Definido pelo .(ponto)
• Exemplo:
– no CSS: h4.diferente {color:red;}
– no XHTML: <h4 class=“diferente”>Titulo</h4>
Técnicas e Padrões de Projeto Web
39
40. CSS: Seletor id
• Semelhante ao Seletor classe.
• A diferença é que utiliza o atributo id, que serve para identificar
exclusivamente um determinado elemento no documento.
• Definido pelo #
• Exemplo:
– no CSS: #topo {width:900px;}
– no XHTML: <div id=“topo”>…</div>
Técnicas e Padrões de Projeto Web
40
41. CSS: Comentários
• Assim como em qualquer linguagem de
programação, em CSS é possível adicionar
comentários para melhor documentar o código.
• Exemplo:
/* Comentário */
Técnicas e Padrões de Projeto Web
41
42. Validadores
• Validador de HTML, XHTML, XML e
– http://validator.w3.org
• Validador de Folhas de Estilo CSS
– http://jigsaw.w3.org/css-validator
Técnicas e Padrões de Projeto Web
42
43. FIXE BEM...
“XHTML PARA ESTRUTURAR
E
CSS PARA APRESENTAR (FORMATAÇÃO).”
Técnicas e Padrões de Projeto Web 43
44. Referências
• Silva, Maurício Samy – Construindo sites com CSS
e (X)HTML. -- São Paulo: Novatec, 2008.
www.w3.org
www.w3schools.com
www.maujor.com
www.tableless.com.br
www.cssnolanche.com.br
Técnicas e Padrões de Projeto Web
44