Padrões Web para Desenvolvimento

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.

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

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

3

HTML e XHTML
Conhecendo e começando
Web Standards Projects

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)

5

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.

6

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.

7

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.

8

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!

9

10

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 –...

11

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

12

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

13

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.

14

Mudança de Conceito...

15

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

16

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.

17

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>

18

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)

19

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.
20

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.

21

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”.

22

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

23

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.

24

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.

25

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

26

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>

27

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

28

• Documentos devem ser bem formados
• A estrutura básica do documento deve ser conforme
mostrado a seguir:
<html>
<head> ... </head>
<body>
...
</body>
</html>

29

• 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>

30

• 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>

31

• Uso de tags de fechamento é obrigatório

Errado:
<p>Um parágrafo.

Correto:
<p>Um parágrafo.</p>

32

• 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” />

33

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.

35

• 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
– 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
– Proposta em 2001

36

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

37


Propriedade Valor

h1 {color : green }
Seletor Declaração

38

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>

39

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>

40

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 */

41

Validadores
• Validador de HTML, XHTML, XML e
– http://validator.w3.org

• Validador de Folhas de Estilo CSS
– http://jigsaw.w3.org/css-validator

42

FIXE BEM...
“XHTML PARA ESTRUTURAR
E
CSS PARA APRESENTAR (FORMATAÇÃO).”

Técnicas e Padrões de Projeto Web 43

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

44

Dúvidas?

45

Padrões Web para Desenvolvimento

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (16)

Semelhante a Padrões Web para Desenvolvimento

Semelhante a Padrões Web para Desenvolvimento (20)

Último

Último (20)

Padrões Web para Desenvolvimento