XHTML/CSS Ana Laura Gomes

Ana Laura Gomes

Contextualização WEB 2.0

WEB 2.0

Contextualização WEB 2.0 - Web como plataforma

WEB 2.0 - Web como plataforma

Contextualização WEB 2.0 - mais colaborativa

WEB 2.0 - mais colaborativa

Contextualização WEB 2.0 – experiência mais rica para os usuários

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

Contextualização WEB 2.0 – experiência mais rica entre os usuários

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

Contextualização WEB 2.0 – foco no usuário

WEB 2.0 – foco no usuário

Contextualização Usuário

Usuário

Contextualização Usuário - Acessibilidade

Usuário - Acessibilidade

Contextualização Usuário - Portabilidade

Usuário - Portabilidade

Contextualização Usuário - Flexibilidade

Usuário - Flexibilidade

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 .

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 .

Contextualização E mais...

E mais...

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

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

Aplicação XHTML / CSS

XHTML / CSS

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) – XHTML Forma (design) – CSS

XHTML / CSS

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

Conteúdo (parte editorial) – XHTML

Forma (design) – CSS

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

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

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

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

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

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

Aplicação CSS – teoria O que é Como funciona Vantagens

CSS – teoria

O que é

Como funciona

Vantagens

Aplicação CSS – css zen garden

CSS – css zen garden

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)

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)

Dúvidas ? Contextualização Web2.0, usuário, e mais Aplicação XHTML, CSS [email_address]

Contextualização

Web2.0, usuário, e mais

Aplicação

XHTML, CSS

[email_address]

Lista de sites www.microsoft.com/windowsvista/ docs.google.com www.blogger.com www.pageflakes.com www.havaianas.com.br delicious.com www.wikipedia.org www.flickr.com www.google.com/webhp?hl=en&complete=1 www.w3schools.com/xml/default.asp www.adobe.com/products/dreamweaver www.mamboserver.com www.joomlabrasil.org drupal.org moodle.com www.w3.org/ www.w3schools.com/ www.cgi.br www.nic.br www.csszengarden.com/tr/portuguese http://www.tiny.cc/pVkSH

www.microsoft.com/windowsvista/

docs.google.com

www.blogger.com

www.pageflakes.com

www.havaianas.com.br

delicious.com

www.wikipedia.org

www.flickr.com

www.google.com/webhp?hl=en&complete=1

www.w3schools.com/xml/default.asp

www.adobe.com/products/dreamweaver

www.mamboserver.com

www.joomlabrasil.org

drupal.org

moodle.com

www.w3.org/

www.w3schools.com/

www.cgi.br

www.nic.br

www.csszengarden.com/tr/portuguese