Post on 19-Jun-2015
description
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