xhtml e css

24
1/24 XHTML/CSS Ana Laura Gomes

Upload: guest90bfaa

Post on 19-Jun-2015

823 views

Category:

Technology


5 download

DESCRIPTION

vantagens em se trabalhar com xhtml/css - curso tableless senac

TRANSCRIPT

Page 1: Xhtml e Css

1/24

XHTML/CSS

Ana Laura Gomes

Page 2: Xhtml e Css

2/24

Contextualização

WEB 2.0

Page 3: Xhtml e Css

3/24

Contextualização

WEB 2.0 - Web como plataforma

Page 4: Xhtml e Css

4/24

Contextualização

WEB 2.0 - mais colaborativa

Page 5: Xhtml e Css

5/24

Contextualização

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

Page 6: Xhtml e Css

6/24

Contextualização

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

Page 7: Xhtml e Css

7/24

Contextualização

WEB 2.0 – foco no usuário

Page 8: Xhtml e Css

8/24

Contextualização

Usuário

Page 9: Xhtml e Css

9/24

Contextualização

Usuário - Acessibilidade

Page 10: Xhtml e Css

10/24

Contextualização

Usuário - Portabilidade

Page 11: Xhtml e Css

11/24

Contextualização

Usuário - Flexibilidade

Page 12: Xhtml e Css

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.

Page 13: Xhtml e Css

13/24

Contextualização

E mais...

Page 14: Xhtml e Css

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

Page 15: Xhtml e Css

15/24

Aplicação

XHTML / CSS

Page 16: Xhtml e 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

Page 17: Xhtml e 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

Page 18: Xhtml e Css

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

Page 19: Xhtml e Css

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

Page 20: Xhtml e Css

20/24

Aplicação

CSS – teoria

• O que é• Como funciona• Vantagens

Page 21: Xhtml e Css

21/24

Aplicação

CSS – css zen garden

Page 22: Xhtml e Css

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)

Page 23: Xhtml e Css

23/24

Dúvidas ?

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

AplicaçãoXHTML, CSS

[email protected]

Page 24: Xhtml e Css

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