Web StandardsWeb StandardsComo construir sistemas arrasadores usando AJAXComo construir sistemas arrasadores usando AJAX

ApresentaçãoApresentação

Professor: Sérgio dos SantosFDV: 7º Período [ Sistemas de Informação ] FORMANDO dez/2007 E-mail: sergio.serginhosant@gmail.comCel: 31 8411 2320

Colunista no iMasters desde dez/2006http://www.imasters.com.br/

Delicious: del.icio.us/serginhosant/webstandards

Blog: www.gigro.com/blog

Web StandardsWeb 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.

W3CW3C 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 deverNosso 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 browsersA 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 browsersA guerra dos browsers

Fonte: http://www.css3.info

A guerra dos browsersA 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 browsersA 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 browsersA 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 BugFire Bug

Disponível em: http://del.icio.us/serginhosant/mozilla

A grande sacadaA 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).

TablelessTableless É 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ânticaSemâ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ânticaSemâ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>.

MicroformatosMicroformatos 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 Então o que seria web 1.0 e web 2.0?web 1.0 e web 2.0?

Web 1.0 Web 2.0

Sites pessoais bloggingPage Views Preço por ClickDomain Name Speculation SEODoubleClick Google AdSenseBritannica Online WikipediaPublicação iMasters (articulista)CMS’s WikisDiretórios (taxonomias) Tagging ("folksonomy")mp3.com P2P

Apresento-lhes o AJAXApresento-lhes o AJAX

AJAXAJAX Asynchronous JavaScript And XML; e Usando XML HTTP Request para aplicações Web sem

reload.

AJAX: O servidor fornece AJAX: O servidor fornece dados, e não conteúdodados, e não conteúdo

AJAX: O servidor fornece AJAX: O servidor fornece dados, e não conteúdodados, e não conteúdo

AJAX: O servidor fornece AJAX: O servidor fornece dados, e não conteúdodados, e não conteúdo

AJAXAJAX 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;

AJAXAJAX 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 FortesAjax: 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 FracosAjax: 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 AJAXMeu primeiro AJAX Depois de toda essa teoria, finalmente podemos fazer algo prático

com nosso mais novo amigo, o XMLHTTPRequest;

Construindo o sistemaConstruindo 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 linhaA 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 produtosOs 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õesOs 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á... CSSObá... 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 CSSConfigurando 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 CSSConfigurando o CSSbody{

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 CSSConfigurando o CSS.linha{

width:250px;clear:both;

}

.fields_name{float:left; font-weight:bold; text-align:right; width:80px; padding-bottom:5px;

}

Configurando o CSSConfigurando 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 CSSConfigurando 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 CSSConfigurando o CSS#CodPedidoRightMeio{

float: left;width: 250px;height: 160px;

}

#CodPedidoRightBotton{float: right;

}

#codigoProd{float:left;width:40px;

}

Configurando o CSSConfigurando o CSS#nomeProd{

float:left;width:130px;

}

#qtdProd{float:left;width:30px;

}

#valorProd{float: left;width: 30px;

}

UFA!!! UFA!!! Terminamos a 2ª CamadaTerminamos 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 ComportamentoO 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 ComportamentoO Comportamentofunction SalvarDadosCliente(campo){

codigo = $("#codpedido").val();field = campo.name;valor = campo.value;$.post("funcionalidades.php",

{acao: "SalvarDadosCliente", codigo: codigo, field: field, valor: valor})

}

O ComportamentoO Comportamentofunction Excluir(){

codigo = $("#codpedido").val();$.post("funcionalidades.php",

{acao: "Excluir",codigo: codigo},function (retorno){

limpacampos("frmCadastroCliente");$("#itens").html("");$("#printPodutos").html("");

})}

O ComportamentoO Comportamentofunction VerSinopse(produto){

$.post("funcionalidades.php", {acao: "VerSinopse", produto: produto},function (retorno){

$("textarea[@name=descricao]").val(retorno);})

}

O ComportamentoO Comportamentofunction 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 ComportamentoO Comportamentofunction ExcluirProduto(id){

$.post("funcionalidades.php", {acao: "ExcluirProduto", id: id},function (retorno){

$("#"+id).hide();}

)}

Referências Referências BibliográficasBibliográficas

del.icio.us/serginhosant/webstandards