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

posicionar e alinhar os

elementos em uma página.

Utilização de CSS e Tableless

para posicionar elementos

Conteúdo fornecido e

editado por apenas uma

pessoa

Conteúdo pode ser

elaborado e editado com

colaboração dos usuários

Sem utilização de padrões de

desenvolvimento

Utilização de padrões de

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 Comportamento aninhados

Separação entre conteúdo, 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

interoperabilidade Acessibilidade reduzida



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

Documentos devem ser bem-formados

As tag podem ser escritas em letras maiúsculas e/ou minúsculas

Todas as tags devem ser escritas com letras minúsculas

Tags não necessitam estar aninhadas Tags devem estar convenientemente

aninhadas

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

Uso de tags de fechamento é obrigatório

Não é necessário o fechamento de elementos vazios

Elementos vazios devem ser fechados



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 }



Design

Desenvolvimento de sites com xhtml e css nos