Xhtml e Css

1/24

XHTML/CSS

Ana Laura Gomes

2/24

Contextualização

WEB 2.0

3/24

Contextualização

WEB 2.0 - Web como plataforma

4/24

Contextualização

WEB 2.0 - mais colaborativa

5/24

Contextualização

WEB 2.0 – experiência mais rica para os usuários

6/24

Contextualização

WEB 2.0 – experiência mais rica entre os usuários

7/24

Contextualização

WEB 2.0 – foco no usuário

8/24

Contextualização

Usuário

9/24

Contextualização

Usuário - Acessibilidade

10/24

Contextualização

Usuário - Portabilidade

11/24

Contextualização

Usuário - Flexibilidade

12/24

Contextualização

Usuário

• Usabilidade - norma ISO 9241-11

A capacidade que um sistema interativo oferece a seu usuário, em um determinado contexto de operação, para a realização de tarefas, de maneira eficaz, eficiente e agradável.

13/24

Contextualização

E mais...

14/24

Contextualização

E mais...

• Web semântica• Preparação para o XML• Mudanças no Dreamweaver 8• Outras plataformas de criação e

gerenciamento de sites (mambo, joomla, drupal, moodle, blogs etc.)

15/24

Aplicação

XHTML / CSS

16/24

Aplicação

XHTML / CSS

Para que parte destes objetivos seja alcançada, a primeira medida é separar o conteúdo da forma.

Conteúdo (parte editorial) – XHTMLForma (design) – CSS

17/24

Aplicação

XHTML / CSS conteúdo e forma definidos em código

• Rapidez no acesso (+- 56% de redução no tamanho final do arquivo)

• Maleabilidade• Facilidade na manutenção• Regras relacionadas à Navegabilidade /

Acessibilidade• Boa experiência para o usuário• Benefícios econômicos e prazerosos

18/24

Aplicação

XHTML - teoria

• O que são tags• Estrutura básica da página

– html, head, title, body

• Diferença HTML/XHTML– Regras do XHTML: DTD, boa formatação do

código etc.

• Sites para estudar– www.w3.org/– www.w3schools.com/– www.cgi.br– www.nic.br

19/24

Aplicação

XHTML - tags

• parágrafo, quebra de linha, títulos, negrito e itálico

• régua, comentário, imagem, listas (ordenada, não ordenada, definição), links (horizontal, vertical, email, site, download)

• tabelas e formulários• frames, iframes e tags em desuso

20/24

Aplicação

CSS – teoria

• O que é• Como funciona• Vantagens

21/24

Aplicação

CSS – css zen garden

22/24

Aplicação

CSS – declarações

• seletor– tag, class, id

• declarações– comentários, texto (text e font), cor– background, margem, padding, borda, lista, link– dimensionamento e posicionamento

• estilo interno, externo e inline• herança de estilos• aplicações práticas (formatar tabela,

formulário, interface)

23/24

Dúvidas ?

ContextualizaçãoWeb2.0, usuário, e mais

AplicaçãoXHTML, CSS

analauragomes@gmail.com

24/24

Lista de sites

www.microsoft.com/windowsvista/docs.google.comwww.blogger.comwww.pageflakes.comwww.havaianas.com.brdelicious.comwww.wikipedia.orgwww.flickr.comwww.google.com/webhp?hl=en&complete=1www.w3schools.com/xml/default.aspwww.adobe.com/products/dreamweaverwww.mamboserver.comwww.joomlabrasil.orgdrupal.orgmoodle.comwww.w3.org/www.w3schools.com/www.cgi.brwww.nic.brwww.csszengarden.com/tr/portuguese

http://www.tiny.cc/pVkSH