Aula 07

Prévia do material em texto

Programação Cliente em Sistemas web
Prof. Jorge Ferreira
Aula 7-CONCEITOS DE SISTEMAS PARA INTERNET
Programação cliente em sistemas web
Objetivos da disciplina
Ensinar programação que rodam do lado cliente.
Alguns tipos de trabalho que podemos fazer.
3
Conteúdo Programático desta aula
Padrão Tableless e normas W3C;
Conceito de usabilidade;
Normas W3C para usabilidade na Web
Programação cliente em sistemas web
4
WebStandards
Muitos desenvolvedores já adotaram os Webstandards, mas seguem apenas os padrões que beneficiam a produção das páginas. Existem técnicas de codificação que podem aumentar a acessibilidade, a usabilidade e a beleza das páginas, mas elas não estão muito difundidas.
Programação cliente em sistemas web
5
Vantagens
Melhor indexabilidade em buscadores como o Google;
Diminui custo de produção;
Atualiza mais fácil;
Facilita a vida do usuário (carrega mais rápido,etc).
Programação cliente em sistemas web
6
W3C
Os Webstandards, em última análise, devem beneficiar o usuário; 
Separação entre conteúdo, apresentação e comportamento.
Programação cliente em sistemas web
7
W3C
Teremos um código mais organizado, mais fácil de manter com diferentes arquivos de CSS para diferentes mídias: monitor, PDA, impressora, áudio.
Programação cliente em sistemas web
8
Programação cliente em sistemas web
9
Tableless
Originalmente as tabelas foram criadas para exibirem dados tabulados. Elas começaram a ser usadas para marcar layout porque não havia alternativa melhor na época.
Programação cliente em sistemas web
10
Tableless
Para substituir as tabelas na marcação do layout, é recomendável a utilização da tag <div>…</div>.
Devemos evitar usar tabelas para marcar layout.
Criar layout sem utilizar tabelas.
Programação cliente em sistemas web
11
Submenus
Programação cliente em sistemas web
12
Submenus
Programação cliente em sistemas web
13
Jacob Nielsen - Scrolling
TQuando as páginas tem o recurso de rolagem vertical e horizontal, os usuários podem mover a sua janela em duas dimensões, o que torna difícil para cobrir todo o espaço.
Para pessoas com pouca habilidade de visualização espacial, é desafiador para planejar movimentos ao longo de dois eixos através de um plano invisível.
Programação cliente em sistemas web
14
O layout deverá funcionar em diferentes resoluções
Programação cliente em sistemas web
15
Criação de um LayOut
Programação cliente em sistemas web
16
Exemplo
<div id=“wrapper">
<div id=“topo"></div>
<div id=“content">content</div>
<div id=“sidebar">sidebar</div>
<div id=“footer”>footer</div>
</div>
Programação cliente em sistemas web
17
Folha de Estilo
*{margin:0;padding:0}
body{background:#cfc;}
#wrapper{
margin: 0 auto;
background:#fff; 
width: 90%; 
height:400px;
Programação cliente em sistemas web
18
Folha de Estilo
#topo{
background:#0000ff;
width: 100%;
height:150px;
}
#content{
float:left;
background:#000;
width: 70%;
height:150px;}
Programação cliente em sistemas web
19
Folha de Estilo
#sidebar{
float:right;	
background:#ff0000;
width: 30%;
height:150px;}
#footer{
clear:both;
background:#0000ff;
width: 100%;
height:50px;}
Programação cliente em sistemas web
Jorge Ferreira da Silva
Professor Universitário, Empresário na área de Desenvolvimento de Sites e Sistemas pela Empresa Mk-Desenvolvimento de Software LTDA - Desde 2009. Com especialização concluída em Dezembro de 2010, na área de Análise, Projeto e Gerência de Sistemas pela Universidade Estácio de Sá, pós-graduação em Docência do Ensino Superior pela Universidade Cândido Mendes e pós graduação em docência do ensino médio e fundamental. Também possui graduação em Ciência da Computação pela Universidade Veiga de Almeida (2004) , graduação em Superior de Tecnologia em Informática pela Universidade Veiga de Almeida (2000).
http://lattes.cnpq.br/4587014427208613
Programação cliente em sistemas web
Obrigado! Até a próxima aula.