Web Standards Como construir sistemas arrasadores usando AJAX

1. Web StandardsComo construir sistemas arrasadores usando AJAX

2. Apresentação Professor: Sérgio dos Santos FDV: 7º Período [ Sistemas de Informação ] FORMANDO dez/2007  E-mail: sergio.serginhosant@gmail.com 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

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

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

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

6. 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;

7. A guerra dos browsers Fonte: http://www.css3.info

8. 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;

9. 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;

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

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

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

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

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

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

16. 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;

17. Então o que seria web 1.0 e web 2.0? Web 1.0 Web 2.0 Sites pessoais blogging Page Views Preço por Click Domain Name Speculation SEO DoubleClick Google AdSense Britannica Online Wikipedia Publicação iMasters (articulista) CMS’s Wikis Diretórios (taxonomias) Tagging ("folksonomy") mp3.com P2P

18. Apresento-lhes o AJAX

19. AJAX • Asynchronous JavaScript And XML; e • Usando XML HTTP Request para aplicações Web sem reload.

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

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

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

23. 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;

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

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

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

27. Meu primeiro AJAX • Depois de toda essa teoria, finalmente podemos fazer algo prático com nosso mais novo amigo, o XMLHTTPRequest;

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

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

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

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

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

40. 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{}

41. 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; }

42. Configurando o CSS .linha{ width:250px; clear:both; } .fields_name{ float:left; font-weight:bold; text-align:right; width:80px; padding-bottom:5px; }

43. 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; }

44. 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; }

45. Configurando o CSS #CodPedidoRightMeio{ float: left; width: 250px; height: 160px; } #CodPedidoRightBotton{ float: right; } #codigoProd{ float:left; width:40px; }

46. Configurando o CSS #nomeProd{ float:left; width:130px; } #qtdProd{ float:left; width:30px; } #valorProd{ float: left; width: 30px; }

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

48. 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); }) }) }

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

50. O Comportamento function Excluir(){ codigo = $("#codpedido").val(); $.post("funcionalidades.php", { acao: "Excluir", codigo: codigo }, function (retorno){ limpacampos("frmCadastroCliente"); $("#itens").html(""); $("#printPodutos").html(""); }) }