Tecnologias para desenvolvimento WEB Julho 2007 Agenda I

Tecnologias para desenvolvimento WEB Julho/2007

Agenda I – Objetivos II – Conceitos

Objetivo Ø Apresentar uma visão macro das tecnologias e conceitos envolvidos no desenvolvimento de aplicações WEB.

Internet Ø O que é? Ø WWW e WEB é Internet? Ø Páginas WEB - HTTP

Programação WEB - Conteúdo Ø HTML - Hyper. Text Markup Language Ø CSS – Cascading Style Sheets Ø Java. Script Ø DOM - Document Object Model Ø XML - e. Xtensible Markup Language Ø CGI - Common Gateway Interface Ø AJAX - Asynchronous Javascript And XML

Programação WEB – 1 de 7 HTML

Hyper. Text Markup Language – Definição Ø Não é linguagem de programação é uma linguagem de marcação de hipertexto; Ø Arquivo texto, puro. Documentos são interpretados por navegadores; Ø Baseado em tags – Normalmente abrem e fecham. O Hipertexto é um texto de suporte que acopla outros textos em sua superfície.

HTML - Exemplo <html> <head> <title> Título do Documento </title> </head> <body>. . . . Textos, Imagens, Links. . . . </body> </html>

HTML – Para saber mais Ø W 3 C - HTML 4. 01 Specification http: //www. w 3. org/TR/html 401/ Ø ICMC-USP - Tutorial HTML http: //www. icmc. usp. br/ensino/material/html/ Ø UFSC - HTML - Referência Rápida http: //geodesia. ufsc. br/Aulas/Hipertextos/Referencia/HTMLref. html Ø Artífice da Web - Tutorial de HTML 4. 01 http: //www. artifice. web. pt/tutoriais/cntd/tut_html 1. html Ø Artífice da Web - Referência de HTML 4. 01 http: //www. artifice. web. pt/tutoriais/cntd/ref_html 1. html

HTML - Formatação de documentos em HTML. <p><font color=“blue”>Título azul</font></p> <p><font color=“green”>Texto verde</font></p> Preciso alterar todas as páginas do site? SIM!! Existe uma solução? SIM!!

Programação WEB – 2 de 7 CSS

Cascading Style Sheets - Definição Ø Linguagem de estilo utilizada para definir a apresentação de documentos em uma linguagem de marcação, como HTML ou XML. Ø Formatação de um site fica em um único arquivo. Ø O código fonte dos documentos de marcação são reduzidos em tamanho e complexidade. Ø Diferentes usuários podem ter diferentes estilos.

CSS - Exemplo <style> /* comentário em css (igual à linguagem c) */ BODY { } . . . No HTML. . . font-family: Arial, Verdana, sans-serif; <body> <table class=“dados”> TABLE. dados<tr><td>Cel</td></tr> { </table> margin: 10 px 0 px 0 px; } <input type=“text” class=“nome. Da. Classe”> . nome. Da. Classe { <table class=“nome. Da. Classe”> <tr><td>Cel</td></tr> background-image: url(img. gif); } </style> </table> </body>. . .

CSS – Para saber mais Ø W 3 C - Cascading Style Sheets http: //www. w 3. org/Style/CSS/ Ø Artífice da Web - Tutorial e Referência de CSS http: //www. artifice. web. pt/tutoriais/cntd/tut_css 1. html Ø W 3 Schools - CSS Tutorial http: //www. w 3 schools. com/css/default. asp

Onde estamos agora? Ø HTML Definir dados e tipos Ø CSS Definir apresentação dos dados Ø Mas como podemos programar em páginas WEB e interagir com o usuário da aplicação? Java. Script é a solução! Mas também é um problemão!

Programação WEB – 3 de 7 Javascript

Javascript - Definição Ø Linguagem que permite injetar lógica em páginas escritas em HTML. Os parágrafos de lógica do Javascript podem estar "soltos" ou atrelados a ocorrência de eventos. Ø Javascript não é Java! Ø Interação com a página no lado cliente (Navegador) • Validação de formulários • Modificar dinâmicamente o HTML Ø Linguagem interpretada e case sensitive.

Javascript - Características Ø Acessibilidade limitada – Segurança Ø Usabilidade ruim – Usuário/Desenvolvedor Ø Padronização – Diferença entre navegadores Ø Economiza processamento – Rede e servidores Ø Nativamente, não conversa com servidor HTTP

Javascript - Exemplo <html> <head> <title>Título</title> <script> /* comentário em JS (igual à linguagem c) */ var nome 1 = "Carla"; var nome 2 = 'Joel'; function Alo. Mundo(quem) { alert ("Alô Mundo, " + quem); } </script> </head> <body onload=“Alo. Mundo(nome 1); ”> Textos, Imagens, Links </body></html>

Javascript – Para saber mais Ø Artífice da Web - Programação em Java. Script http: //www. artifice. web. pt/tutoriais/cntd/tut_js 1. html Ø W 3 Schools - Java. Script Tutorial http: //www. w 3 schools. com/js/default. asp Ø W 3 Schools - Java. Script Reference http: //www. w 3 schools. com/jsref/default. asp Ø Mozilla – Javascript http: //developer. mozilla. org/en/docs/About_Java. Script Ø Internet Explorer – Javascript http: //msdn 2. microsoft. com/en-us/library/ms 970435. aspx

Onde estamos agora? HTML Definir dados e tipos Javascript Lógica e interação em páginas CSS Definir a apresentação dos dados Para mudarmos dinâmicamente uma página, o Javascript precisa “enxergar” o HTML. Mas, como acessamos as tags HTML através do Javascript? Agora é a vez do DOM!

Programação WEB – 4 de 7 DOM

Document Object Model - Definição Ø Plataforma e linguagem que oferece uma interface para programas acessarem e mudarem o conteúdo de documentos dinâmicamente. Ø Os navegadores implementam esta plataforma e o desenvolvedor faz o acesso através do Javascript. Ø Documentos podem ser HTML ou XML. Ø HTML dinâmico!! Usando Javascript Ø Permite criar ou alterar qualquer tag HTML/XML sem precisar recarregar o documento. Tabelas, campos de formulário, textos, cores, etc.

DOM - Exemplo <script> function adicionar. Tabela() { var body = document. get. Elements. By. Tag. Name("body")[0]; var tbl = document. create. Element("table"); for (var j = 0; j < 2; j++) { var row = document. create. Element("tr"); var cell = document. create. Element("td"); var cell. Text = document. create. Text. Node(“cel: “ + j); cell. append. Child(cell. Text); row. append. Child(cell); tbl. append. Child(row); } body. append. Child(tbl); } </script>

DOM – Para saber mais Ø Danny Goodman - Java. Script/DHTML Application Examples http: //www. dannyg. com/examples/ Ø Mozilla. org - DOM Sample Code http: //www. mozilla. org/docs/dom/samples/ Ø W 3 Schools http: //www. w 3 schools. com/js/js_examples_3. asp

Programação WEB – 5 de 7 XML

Extensible Markup Language - Definição Ø Linguagem de marcação de dados, extremamente flexível, permite a descrição de dados estruturados. Ø Arquivo texto, utilizando o recurso de tags, como no HTML. Ø Simples e legível, tanto para humanos quanto para computadores. Ø Validação da estrutura através dos DTDs. Descreve os parâmetros válidos para um determinado arquivo XML. É opcional, mas sua utilidade é indiscutível quando o formato é compartilhado por diferentes desenvolvedores.

XML - Aplicações Ø Descrever dados • Apresentar dados em algum formato XHTML, SVG, Math. ML, RSS, Pod. Cast • Trocar dados de entre plataformas diferentes • Separação do conteúdo da formatação

XML - Exemplo <? xml version="1. 0" encoding="ISO-8859 -1"? > <email> <de>Desenvolvimento de Sistemas</de> <para>Diretoria Técnica</para> <assunto>Acompanhamento dos projetos</assunto> <mensagem> XSL Favor comparecem à reunião que se realizará em 10/08/2007, Linguagem de marcação às 8: 00 usada para horas, no auditório da empresa. transformar documentos XML em outro </mensagem> formato, como por exemplo </email> em HTML.

XML – Para saber mais Ø Universidade Federal do Rio de Janeiro - Tutorial XML http: //www. gta. ufrj. br/grad/00_1/miguel/index. html Ø W 3 Schools - XML Tutorial http: //www. w 3 schools. com/xml/default. asp Ø Wikipedia - XML Definition http: //en. wikipedia. org/wiki/XML Ø W 3 C XML http: //www. w 3. org/XML

Programação WEB – 6 de 7 CGI

Common Gateway Interface - Definição Ø Tecnologia que permite gerar páginas dinâmicas com a possibilidade do navegador passar parâmetros para um programa alojado num servidor HTTP. Ø Scripts CGI são os pequenos programas que interpretam esses parâmetros e geram a página depois de os processar. Ø Exemplos: ASP. Net, PHP, Lotus Notes, Cold. Fusion e JSP Ø Qualquer solução de desenvolvimento para WEB utiliza esta especificação para permitir o desenvolvimento. Ø E como isso funciona? !

CGI – Funcionamento das Solicitações Ø Navegador solicita um determinado arquivo do servidor HTTP. Ø O servidor HTTP disponibiliza o arquivo solicitado. Ø Navegador “olha” o arquivo e decide o que fazer: • Se o formato for conhecido (HTML, JS, XML, CSS, TXT, etc) o navegador copia localmente, interpreta e mostra o conteúdo do arquivo; • Se for um formato desconhecido, verifica se possui algum programa associado no computador e utiliza este programa para abrir o arquivo; • No caso de não haver programas, o navegador oferece a opção do usuário salvar o arquivo na máquina. Com este modelo, um arquivo. ASP seria baixado como um formato desconhecido, ou teria seu código fonte apresentado na tela como se fosse um arquivo texto.

CGI – Funcionamento das Solicitações Ø Navegador solicita um determinado arquivo do servidor HTTP. Ø O servidor HTTP verifica se o formato do arquivo deve ser executado pelo CGI. Ø Se sim, passa a execução para o CGI e aguarda o retorno. Ø CGI retorna um arquivo gerado. Este arquivo, normalmente, é HTML puro, não existe mais código-fonte da linguagem utilizada no CGI. Com este modelo, um arquivo. ASP Ø Servidor HTTP assume que o arquivo resultadooda seria executado, o gerado é arquivo solicitado. execução seria um HTML que o Ø Ø servidor HTTP enviaria O servidor HTTP disponibiliza o arquivo solicitado Navegador “olha” o arquivonavegador. fazer. e decide o que para o Ø Se o formato for conhecido (HTML, JS, XML, CSS, TXT, etc) o navegador copia localmente, interpreta e mostra o conteúdo do arquivo. Ø Se for um formato desconhecido, verifica se possui algum programa associado no computador e utiliza este programa para abrir o arquivo. Ø No caso de não haver programas, o navegador oferece a opção do usuário salvar o arquivo na máquina.

CGI – Funcionamento das Solicitações Solicita um documento, via HTTP Internet Servidor HTTP Retorna o resultado do processamento do documento requisitado Solicitação Só entende de gerenciamento de arquivos Solicita processamento do servidor de aplicação Browser Não entende ASP ou PHP. Somente HTML, Javascript, etc. Retorna o arquivo processado. Pode ser TXT ou um formato binário Retorno O resultado será um arquivo HTML Banco Dados Script busca informações para montagem do arquivo. ASP. Net Lotus Notes PHP

Programação WEB – 7 de 7 AJAX

Asynchronous Javascript And XML - Definição Não é produto de limpeza e nem aquele time de futebol da Holanda!!

Asynchronous Javascript And XML - Definição Ø Javascript + CGI + XML + DOM Conjunto de tecnologias que já existiam, mas que juntas deixam sua aplicação mais dinâmica sem precisar carregar as páginas várias vezes. Assíncrono: Significa que quando você faz uma requisição, está livre para fazer outras coisas enquanto a resposta não vem. Javascript faz uma chamada ao servidor HTTP que executa um CGI e retorna somente a informação desejada, dentro de um arquivo XML.

AJAX - Vantagens Ø Maior Interatividade nas aplicações Ø Redução do consumo de banda Ø Redução de processamento no servidor Ø Não é proprietário Ø Portabilidade Permite que uma aplicação WEB se comporte como uma aplicação Desktop; Devido a sua característica de atualizações granulares, consegue-se reduzir a quantidade de informação trocada; Através de aplicações AJAX é possível em alguns casos trazer parte do que seria processado no servidor para o cliente; AJAX não é uma marca ou produto, é uma designação de um método de como projetar aplicações WEB; Roda em muitos navegadores e não requer a instalação de qualquer plugin ou software no cliente.

AJAX - Funcionamento Ø Chamada ao CGI é feita da forma que foi apresentada na animação sobre as solicitações HTTP, entretanto esta chamada é realizada pelo Javascript em background, sem precisar atualizar a tela. Ø Após a chamada, o navegador fica livre para realizar outras operações, como outras chamadas via AJAX, permitindo que o desenvolvedor execute processos paralelos. Ø A resposta do servidor HTTP será um enxuto arquivo XML gerado pelo CGI, e não um arquivo HTML com Over. Head. Ø Na chegada da resposta, uma função Javascript definida pelo desenvolvedor é chamada. Ø O Javascript interpreta o XML e atualiza o documento HTML, acessando tags através da interface DOM.

AJAX - Exemplo. . . Retorno do index. aspx var url = “alunos. aspx? idade=10”; var request. O GCI poderia retornar um arquivo XML somente com a relação de = new XMLHttp. Request(); alunos com 10 anos de idade. request. onreadystatechange = processar. Retorno; request. open("GET", url, true); <? xml version="1. 0" encoding="ISO-8859 -1"? > request. send(""); <lista> <aluno> // Esta função será chamada pelo componente Xml. Http. Request <nome>Machado de Assis</nome> function processar. Retorno () {01/02/1997</nascimento> <nascimento> var retorno = “”; </aluno> if (request. ready. State == 4) { <aluno> //Pega o XML recebido <nome>Dom Quixote</nome> var retorno = request. response. Text; </nascimento> <nascimento>03/01/1997 } </aluno> return retorno; <aluno> <nome>Robert de Niro Júnior</nome> } <nascimento>05/01/1997</nascimento>. . . </aluno> <lista>

AJAX – Para saber mais Ø Microsoft - AJAX: The Official ASP. NET AJAX Site http: //ajax. asp. net/ Ø Mozzilla - AJAX: Como começar http: //developer. mozilla. org/pt/docs/AJAX: Como_come%C 3%A 7 ar Ø Mozzilla – XMLHttp. Request http: //developer. mozilla. org/en/docs/XMLHttp. Request Ø Wikipedia – Ajax http: //pt. wikipedia. org/wiki/AJAX_(programa%C 3%A 7%C 3%A 3 o) Ø Apostila – Java – Visão Conceitual http: //www. portaljava. com/home/modules. php? name=Content&pa=s howpage&pid=154

Resumindo Ø HTML Define dados e tipos; Ø CSS Define a visualização dos dados; Ø Java. Script Adiciona lógica nas páginas HTML; Ø DOM Interface que permite o Javascript acessar as tags HTML; Ø XML Representação de informações de forma padronizada e flexível; Ø CGI Gerar o conteúdo que o servidor HTTP retornará ao navegador de forma dinâmica; Ø AJAX Reúne tecnologias existentes para deixar as páginas HTMLs mais interativas e funcionais.

Conclusão Ø Muitos são os recursos disponíveis para a programação WEB e o conhecimento destes recursos é fundamental para um desenvolvimento consciente e bem feito. Ø Espero que com esta apresentação tenha despertado o interesse, para que busquem o aperfeiçoamento de cada um destes recursos no dia a dia do desenvolvimento.

Dúvidas César Tegani Tofanini Engenheiro da Computação Especialista em Programação Orientada à Objetos Analista de Sistemas - CIJUN