desenvolvimento de sites com xhtml e css nos
TRANSCRIPT
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.
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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.
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
Desenvolvimento de sites com XHTML e CSS
utilizando 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
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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.
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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.
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
HTML Estrutura básica de um documento
<html>
<head>
<title> Título do Documento</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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”.
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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.
Desenvolvimento de sites com XHTML e CSS
utilizando os padrões WEB
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
utilizando os padrões WEB