Download Web Standard

Web Standards
Como construir sistemas arrasadores usando AJAX
Apresentação
Professor: Sérgio dos Santos
FDV: 7º Período [ Sistemas de Informação ] FORMANDO dez/2007 
E-mail: [email protected]
Cel: 31 8411 2320
Colunista no iMasters desde dez/2006
http://www.imasters.com.br/
Delicious: del.icio.us/serginhosant/webstandards
Blog: www.gigro.com/blog
Web Standards

São normas para Web e tem por objetivo:

Criação de uma Web universal;

Evitar que apenas um membro da equipe tenha domínio exclusivo sobre
o desenvolvimento;

Acessibilidade; e

Melhor posicionamento nas ferramentas de busca.

É um conjunto de normas, diretrizes, recomendações, notas,
artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C; e

Destinada a orientar desenvolvedores para o uso de práticas que
possibilitem a criação de uma Web acessível a todos, ajudados por
diversos recursos que fazem uma Web mais agradável de usar.
W3C

O World Wide Web Consortium é um consórcio de empresas de
tecnologia, atualmente com cerca de 500 membros;

Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu
potencial máximo, por meio do desenvolvimento de protocolos
comuns e fóruns abertos que promovem sua evolução e asseguram
a sua interoperabilidade; e

Todos os sites desenvolvidos segundo os padrões W3C podem ser
acessados e visualizados por qualquer pessoa ou tecnologia,
independente de hardware ou software.
Nosso dever

É um dever de todo desenvolvedor Web respeitar e seguir os
padrões do W3C, pois de outro modo poderá impor barreiras
tecnológicas a diversas pessoas, desestimulando e até mesmo
impedindo o acesso a suas páginas; e

Cabe agora aos desenvolvedores atualizarem seus conhecimentos e
revolucionar a Internet, pois internet mudou a vida das pessoas;
agora, são as pessoas que vão mudar a internet.
A guerra dos browsers

Pela primeira vez desde que a Microsoft lançou seu browser, em
1995, o Internet Explorer está perdendo participação de mercado;

Segundo pesquisa da WebSideStory, a fatia de usuários do IE caiu
de 95,48% em julho de 2004 para 88,86% em abril de 2005;

Essa queda pode ser ainda maior, já que uma nova safra de bons
navegadores atrai usuários de todos os tipos;
A guerra dos browsers
Fonte: http://www.css3.info
A guerra dos browsers

Com tantas opções a um simples download, por que se preocupar?

Que browser é o melhor?

Devo realmente mudar?

Há uma série de razões pelas quais usuários estão fugindo do IE,
mas a maioria delas restringe-se a questões de segurança;
A guerra dos browsers

Nenhum browser está isento de falhas;

A Fundação Mozilla remendou alguns buracos do Firefox e a Opera
publicou algumas atualizações focadas em segurança no ano
passado;

Os produtores de vírus e os hackers miram o IE porque há uma
infinidade de sistemas rodando esse programa;
A guerra dos browsers

De todos os browsers, o Firefox sobressai como a melhor escolha
de todas;

O Firefox faz um excelente trabalho na exibição das páginas,
oferece interface superior e dá menos problemas que outras
opções, inclusive o Opera; e

Além disso, é mais customizável por meio das chamadas extensões
para o Firefox.
Fire Bug
Disponível em: http://del.icio.us/serginhosant/mozilla
A grande sacada

Na verdade, a grande sacada do web standards está na total
separação das camadas envolvidas em um projeto web, que são
respectivamente:
 Informação (html);
 Estilo (css); e
 Comportamento (javascript).
Tableless

É uma metodologia de desenvolvimento de layouts sem o uso de
tabelas, da qual toda informação é separada da formatação,
formando assim, as camadas de estrutura e de apresentação;

Com esta metodologia, é possível reduzir o tamanho dos arquivos
de código em até 70%, tornando o site mais rápido, mais leve e
consequentemente reduzindo a banda utilizada no o seu
carregamento; e

É importante lembrar que isso também garante que seu site seja
visualizado em qualquer dispositivo, independente dele aceitar
folha de estilo ou não, como, por exemplo, em celulares.
Semântica

Semântica é uma palavra de origem grega (semantiké) que
traduzida seria "a arte da significação". É o estudo do significado
das palavras e de sua relação de significação nos signos
lingüísticos. Signo é todo objeto ou símbolo que tem um significado
por si mesmo, como a cruz que representa o cristianismo, a cor
vermelha como um sinal de pare, uma palavra qualquer como
"cadeira" que nos remete a um objeto no mundo real;

Escrever algo semântico então, é utilizar uma tag no contexto certo
para a qual ela foi criada:

<acronym title=“Faculdade de Viçosa">FDV</acronym>
Semântica

A tag <table> foi criada para exibir dados tabulares e não pra
estruturar sites;

Usar a tag <br /> para simular parágrafos, onde a tag <p> poderia
ser usada;

Usar qualquer outra tag que não seja os headings (títulos) como
h1, h2, h3, etc, para declarar títulos; e

Quando usar uma citação em um texto coloque entre a tag <cite>.
Microformatos

Microformatos são um conjunto de formatos abertos projetados
para adicionar semântica em qualquer documento XML,
especialmente HTML/XHTML;

http://microformats.org/wiki/Main_Page;

Aplicações, como buscadores, podem extrair informações
específicas de páginas que usam microformatos, como informações
de contato, evento, licença, etc; e

A função destas especificações é enriquecer a informação inserida
em páginas web com meta informação;
Então o que seria
web 1.0 e web 2.0?
Web 1.0
Web 2.0
Sites pessoais
Page Views
Domain Name Speculation
DoubleClick
Britannica Online
Publicação
CMS’s
Diretórios (taxonomias)
mp3.com
blogging
Preço por Click
SEO
Google AdSense
Wikipedia
iMasters (articulista)
Wikis
Tagging ("folksonomy")
P2P
Apresento-lhes o AJAX
AJAX


Asynchronous JavaScript And XML; e
Usando XML HTTP Request para aplicações Web sem reload.
AJAX: O servidor fornece
dados, e não conteúdo
AJAX: O servidor fornece
dados, e não conteúdo
AJAX: O servidor fornece
dados, e não conteúdo
AJAX

Um pouco de história:
 O grande problema;
 Aplicações Web-Based;
 Os frames;
 iFrames;
 O XHTML não aceita Frame nem iFrame;
 RIA;
 Applets Java;
 ActiveX (que provê um protocolo client-side que permite
comunicação HTTP com o servidor, chamado
"Microsoft.XMLHTTP"); e
 Outros Browsers também implementaram;
AJAX

Ajax é uma combinação de técnicas disponíveis desde meados do
ano 2000, consistindo de:





(X)HTML, Javascript e CSS ;
Document Object Model (DOM); e
XMLHttpRequest.
JavaScript não-obstrusivo; e
Em suma: usem a tecnologia com responsabilidade.
Ajax: Pontos Fortes





Maior Interatividade nas aplicações;
Redução do consumo de banda;
Redução de processamento no servidor;
Não é proprietário; e
Portabilidade.
Ajax: Pontos Fracos






Capacidades limitadas;
Performance do cliente;
Comportamento dos botões Back e Forward;
Bookmarking (Unique URL);
Latência da rede; e
Requer conectividade permanente.
Meu primeiro AJAX

Depois de toda essa teoria, finalmente podemos fazer algo prático
com nosso mais novo amigo, o XMLHTTPRequest;
Construindo o sistema
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Pedido</title>
</head>
<body>
<h1>Cadastro de Pedido</h1>
<div id="CadPedGeral">
<div id="CadPedidoLeft"></div>
<div id="CadPedidoRight">
<div id="CodPedidoRightTop"></div>
<div id="CodPedidoRightMeio"></div>
<div id="CodPedidoRightBotton"></div>
</div>
</div>
</body>
</html>
A linha
<div class="linha">
<div class="fields_name">Código: </div>
<div class="fields_input">
<input type="text" id="codpedido" name="codpedido" value="" />
</div>
</div>
Os produtos
<div id="CodPedidoRightTop">
<div class="codigoProd">Codigo</div>
<div class="nomeProd">Produto</div>
<div class="qtdProd">Qtd</div>
<div class="valorProd">Valor</div>
<br />
<div id=“itens"></div>
</div>
Os botões
<div id="CodPedidoRightMeio"></div>
<div id="CodPedidoRightBotton">
<input type="button" id="novo" name="novo" value="Novo" />
<input type="button" id="pesquisar" name="pesquisar" value="Pesquisar" />
<input type="button" id="excluir" name="excluir" value="Excluir" />
</div>
Obá... CSS

Ufa! Terminamos a primeira camada;

Podemos testar no browser, o que fizemos até agora, para vermos como
ficou a nossa primeira camada;

É hora da diversão: CSS; e

Vamos começar a dar vida a nosso sistema.
Configurando o CSS
<link rel="stylesheet" type="text/css" href="estilos.css" />
body{}
h1{}
.linha{}
.fields_name{}
.fields_input{}
#CadPedGeral{}
#CadPedidoLeft{}
#CadPedidoRight{}
#CodPedidoRightTop{}
#CodPedidoRightMeio{}
#CodPedidoRightBotton{}
Configurando o CSS
body{
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size:80%;
padding:0;
margin:0;
}
h1{
font-size:12px;
font-weight:bold;
color:#3e72a4;
padding:20px;
}
Configurando o CSS
.linha{
width:250px;
clear:both;
}
.fields_name{
float:left;
font-weight:bold;
text-align:right;
width:80px;
padding-bottom:5px;
}
Configurando o CSS
.fields_input{
float:left;
width:250px;
padding-left:5px;
padding-bottom:5px;
}
#CadPedGeral{
float:left;
background-color:#EEEEEE;
height:350px;
width:620px;
padding:20px;
}
Configurando o CSS
#CadPedidoLeft{float:left; width:340px; }
#CadPedidoRight{ float:left; width:260px; }
#CodPedidoRightTop{
font-size:11px;
float:left;
background-color:#CCCCCC;
height:150px;
width:270px;
padding:10px;
overflow:auto;
}
Configurando o CSS
#CodPedidoRightMeio{
float: left;
width: 250px;
height: 160px;
}
#CodPedidoRightBotton{
float: right;
}
#codigoProd{
float:left;
width:40px;
}
Configurando o CSS
#nomeProd{
float:left;
width:130px;
}
#qtdProd{
float:left;
width:30px;
}
#valorProd{
float: left;
width: 30px;
}
UFA!!!
Terminamos a 2ª Camada

Agora vamos testar como está o nosso sistema;

Veja que o sistema está medíocre;

Precisamos colocar comportamento;

Precisamos fazer o sistema funcionar; e

Vamos pensar em tudo: USABILIDADE e ACESSIBILIDADE.
O Comportamento
<script type="text/javascript" src="comportamento.js"></script>
function NovoCliente(){
limpacampos("frmCadastroCliente");
$.post("funcionalidades.php", {acao: "NovoCliente"}, function (retorno){
codigoNewCliente = retorno;
$("#codpedido").val(codigoNewCliente);
$.post("funcionalidades.php", {acao: "Produtos"}, function (retorno){
$("#printPodutos").html(retorno);
})
})
}
O Comportamento
function SalvarDadosCliente(campo){
codigo = $("#codpedido").val();
field = campo.name;
valor = campo.value;
$.post("funcionalidades.php",
{
acao: "SalvarDadosCliente",
codigo: codigo,
field: field,
valor: valor
})
}
O Comportamento
function Excluir(){
codigo = $("#codpedido").val();
$.post("funcionalidades.php",
{
acao: "Excluir",
codigo: codigo
},
function (retorno){
limpacampos("frmCadastroCliente");
$("#itens").html("");
$("#printPodutos").html("");
})
}
O Comportamento
function VerSinopse(produto){
$.post("funcionalidades.php",
{
acao: "VerSinopse",
produto: produto
},
function (retorno){
$("textarea[@name=descricao]").val(retorno);
})
}
O Comportamento
function AddProduto(){
produto = $("#produto").val();
cliente = $("#codpedido").val();
if (produto == 0){
alert("OPS! Você esqueceu de escolher um produto");
return false;
}else{
$.post("funcionalidades.php",
{
acao: "AddProduto",
produto: produto,
cliente: cliente
},
function (retorno){
$("#itens").html(retorno);
}
)
}
}
O Comportamento
function ExcluirProduto(id){
$.post("funcionalidades.php",
{
acao: "ExcluirProduto",
id: id
},
function (retorno){
$("#"+id).hide();
}
)
}
Referências Bibliográficas

del.icio.us/serginhosant/webstandards