Desenvolvimento de sites com xhtml e css nos

Desenvolvimento de sites
com XHTML e CSS nos
padrões web
Vinícius rocha Olivieri
Discente do Curso de Bacharelado em
Ciência da Computação do CUA/UFMT

Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB

Introdução
 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.
 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.


Histórico da Web
Web 1.0 Web 2.0

Conteúdo estático Conteúdo dinâmico

Utilização de tabelas para
Utilização de CSS e Tableless
posicionar e alinhar os
para posicionar elementos
elementos em uma página.

Conteúdo fornecido e Conteúdo pode ser
editado por apenas uma elaborado e editado com
pessoa colaboração dos usuários
Sem utilização de padrões de Utilização de padrões de
desenvolvimento desenvolvimento


Padrões Web
 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.
 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.
 Web Standards Project (WSP): grupo formado em 1998
com o objetivo de promover os Padrões Web.


Sem Padrões Com Padrões

Extensão da Mídia Impressa Acessível de qualquer dispositivo

Layout baseado em Tabelas Layout baseado em CSS

Conteúdo, Apresentação e Separação entre conteúdo,
Comportamento aninhados Apresentação e comportamento

Código Incompreensível Código Acessível

Carregamento mais rápido Carregamento mais lento

Menores custos com hospedagem Maiores custos com hospedagem

Maior acessibilidade e
Acessibilidade reduzida
interoperabilidade


Tableless x Padrões Web
 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.


HTML
 HTML ou HyperText Markup Language é uma linguagem
de marcação, utilizada para construir a camada visual
de páginas web.
 Sua função é dar um valor semântico e estruturar todo
o conteúdo de um documento.
 É o que define o conteúdo visualizado na tela
 Toda linguagem de programação web interage com
HTML, por esses motivos todo profissional que se preza
(redatores, designers, programadores etc) conhece
bem a sua sintaxe.
 Compõe a estrutura de uma página através de
etiquetas (tags) e atributos.


HTML
 Essa linguagem de marcação baseia-se em etiquetas
(tags) com valor semântica, englobando trechos de
conteúdo dotando-os de sentido e valor.
 Uma tag nada mais é do que um comando HTML com
um ponto inicial (abertura) e um ponto final
(fechamento).

ESTRUTURA DE UMA TAG

<TAG>¹ Conteúdo a ser Formatado </TAG>²
¹ Início da TAG | ² Fim da TAG


HTML
Estrutura básica de um documento

<html>
<head>
<title> Título do Documento</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>


XHTML
 O (X)HTML, ou eXtensible Hypertext Markup Language,
é uma reformulação da linguagem de marcação HTML
baseada em XML.
 Criada para suprir a falta de flexibilidade do HTML.
 Separação do conteúdo da formatação.
 Pode ser interpretado por qualquer dispositivo,
independentemente da plataforma utilizada, pois as
marcações possuem sentido semântico para as
máquinas.

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


HTML XHTML
Não há tanta rigidez na criação de
Documentos devem ser bem-formados
documentos

As tag podem ser escritas em letras Todas as tags devem ser escritas com
maiúsculas e/ou minúsculas letras minúsculas

Tags devem estar convenientemente
Tags não necessitam estar aninhadas
aninhadas

Não é obrigatório o uso de tags de Uso de tags de fechamento é
fechamento obrigatório

Não é necessário o fechamento de
Elementos vazios devem ser fechados
elementos vazios


CSS
 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.


CSS
 Uma folha de estilo consiste de uma lista de regras,
onde cada regra ou conjunto de regras consiste de um
ou mais seletores e um bloco de declaração.
 Cada declaração em si é uma propriedade, dois
pontos (:), um valor, então um ponto e vírgula (;).
 Seletores são usados para declarar a quais elementos
de marcação um estilo se aplica, uma espécie de
expressão correspondente.

Estrutura de um seletor

seletor { propriedade: valor }
h1 { color: green }

Desenvolvimento de sites com xhtml e css nos

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Desenvolvimento de sites com xhtml e css nos

Desenvolvimento de sites com xhtml e css nos