Web Standards Como construir sistemas arrasadores usando AJAX.

Apresentação em tema: "Web Standards Como construir sistemas arrasadores usando AJAX."— Transcrição da apresentação:

1 Web Standards Como 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: FDV

15 Semântica A tag foi criada para exibir dados tabulares e não pra estruturar sites; Usar a tag para simular parágrafos, onde a tag 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.

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.0Web 2.0 Sites pessoaisblogging Page ViewsPreço por Click Domain Name SpeculationSEO DoubleClickGoogle AdSense Britannica OnlineWikipedia PublicaçãoiMasters (articulista) CMS’sWikis Diretórios (taxonomias) Tagging ("folksonomy") mp3.comP2P

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

22

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;

28

29

30

31

32

33

34

35 Construindo o sistema Cadastro de Pedido Cadastro de Pedido

36 A linha Código:

37 Os produtos Codigo Produto Qtd Valor

38 Os botões

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 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 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(""); }) }

51 O Comportamento function VerSinopse(produto){ $.post("funcionalidades.php", { acao: "VerSinopse", produto: produto },}, function (retorno){ $("textarea[@name=descricao]").val(retorno); }) }

52 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); } ) } }

53 O Comportamento function ExcluirProduto(id){ $.post("funcionalidades.php", { acao: "ExcluirProduto", id: id },}, function (retorno){ $("#"+id).hide(); } ) }

54 Referências Bibliográficas del.icio.us/serginhosant/webstandards