Faculdade de Excelência Educacional
do Rio Grande do Norte
Padrões
Curso: Desenvolvimento de Sistemas para Internet
Disciplina: Tecnologia Hipermídia e Multimídia
Profa. Rudson
rudsondant@gmail.com
apostilas.wikidot.com/hipermidia
Visão geral

W3C – criado em 1994 para lidar com
questões de padronização do ambiente
Web
• Dar benefícios aos usuários
• Assegurar a viabilidade dos documentos
publicados na Web ao longo do tempo

A adoção de padrões dá maior dinamismo
ao desenvolvimento de sítios/docs Web,
além
de
permitir
um
melhor
compartilhamento das informações
Padrões

Vantagens da adoção dos padrões Web
• Liberdade
• Estabilidade
• Acessibilidade
• Simplicidade
• Facilidade de criação e manutenção
Características

Facilidade de navegação
•
Elementos de sua interface sejam operáveis por qualquer
pessoa

Conteúdo e os controles devem ser de fácil identificação
e auto-explicativos

Conteúdo deve ser perceptível a qualquer pessoa,
independente das condições de acesso

Utilizar tecnologias compatíveis com os dispositivos de
visualização
Principais Padrões

Padrões desenvolvidos pela W3C:
• HTML (Hyper Text Markup Language)
• XML (Extensible Markup Language)
• XHTML (Extensible HyperText Markup Language
• CSS (Cascading Style Sheets)
• DOM (Document Object Model)
• etc.
HTML


Linguagem de marcação que descreve a
estrutura, o conteúdo e a apresentação de um
documento e sua relação com outros documentos
Apresenta uma informação e vinculá ela a outros
recursos:
• texto, áudio, vídeo, gráficos, etc.


Permite que várias informações sejam exibidas de
forma simultânea
Composto Informações e Tags
HTML

Tags (rótulos)
•
•
•
•
Elementos que compõe a estrutura de um documento
HTML
• Elementos de marcação que definirão como os
navegadores exibirão as informações contidas nas
páginas do sítio
Uma tag sempre está entre os caracteres: “<” e “>”
Na maioria das vezes, uma tag possui uma tag de
fechamento
• Exemplo: <body> ... </body>
Podem possuir atributos, que definem suas características
ou propriedades
Exemplo: Documento HTML simples
<html>
<head>
<title> Hello Class! </title>
</head>
<body>
<h1> Oi! <h1>
<p> Meu <em> primeiro </em> <strong>
documento </strong> HTML </p>
</body>
</html>
XML




Desenvolvida para solucionar limitações da
HTML
Linguagem de marcação para: descrição,
captura, processamento e publicação de
informações em diferentes tipos de mídias
É um método para estruturar dados
Fornece meios para introduzir informação
específica relacionada com o contexto em que
os documentos são utilizados
•
Facilitando compreensão e troca
XML

Também utiliza tags e atributos
• Não especifica o que cada tag e atributo
•


significam (como na HTML)
As tags delimitam os trechos de dados
• Interpretação fica a cargo da aplicação que os
lê
HTML = descreve a aparência e as ações em
um documento
XML = descreve o que cada trecho representa
(conteúdo do documento)
Exemplo de XML


<?xml version="1.1"?>
<!-- both namespace prefixes are available throughout
--> <bk:book xmlns:bk='urn:loc.gov:books'
xmlns:isbn='urn:ISBN:0-395-36341-6'>
<bk:title>Cheaper by the Dozen</bk:title>
<isbn:number>1568491379</isbn:number>
</bk:book>
XHTML


Reformulação da versão 4.01 da HTML
baseada na XML
Aproveita as vantagens de uma linguagem de
descrição de conteúdos com compatibilidade
com quase tudo na Web
•

Garantia de uma fácil transição
Suporta todas as funcionalidades da HTML
4.01 com a aplicação das regras mais rígidas
da sintaxe do XML
XHTML


É uma linguagem independente de dispositivos
Não é tão tolerante com a HTML
•
•
•
•
Todas as tags possuem uma tag de fechamento
Nome da tag de fechamento = Nome da tag de abertura
precedido do caractere “/”
As tags devem ser escritas em minúsculas
O valor de um atributo da tag deve ser delimitado por
aspas duplas
• nome_atributo=“valor”
Exemplo XHTML



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
CSS


Padrão de formatação para documentos
HTML/XHTML
Permite:
• Maior versatilidade no desenvolvimento de
•
•
design para sítios sem aumentar o seu tamanho
Controle maior sobre os atributos tipográficos
(tamanho/cor das fontes, espaçamento
linhas/caracteres)
Sobreposição de texto sobre texto/imagem
• Utilização de layers (camadas)
CSS

Com o CSS, a HTML/XHTML preocupase somente em estruturar o documento
em blocos de informação
CSS responsável pelo controle do design

Vantagens

• Consegue-se separar o estilo do conteúdo
• Facilidade na criação e manutenção do design
• Mais simples modificar a página de estilo dos
que todos os documentos
CSS

Vantagens (Continuação)
• Estilos diferentes e sofisticados podem ser aplicados
ao mesmo documento
• Autor pode redirecionar seu conteúdo para novos formatos
• Consistência
• Garantia de que todos os documentos tenham o mesmo
desenho e arranjo
• Linguagem simples
• Descrição de um estilo, não se preocupando com fatores
específicos da HTML/XHTML
CSS



p { text-align: center; color: black; font-family: arial }
<h1 class="center"> This heading will be centeraligned
</h1><p class="center"> This paragraph will also be
center-aligned. </p>
DOM



Interface de programação de aplicativos
para documentos HTML, XHTML e XML
É a definição da estrutura lógica (modelo
de estrutura) dos documentos e o meio
pelo qual um documento é acessado e
manipulado
Seu objetivo é proporcionar uma interface
de programação padrão que possa ser
utilizada em um grande número de
ambientes e aplicativos
DOM

Propriedade importante
• Isomorfismo
estrutural:
se
duas
implementações quaisquer de DOM forem
utilizadas para criar uma representação de
um mesmo documento, elas irão criar um
mesmo modelo de estrutura com exatamente
os mesmos objetos e relacionamentos
Download

padrões Web - Apostilas