Apresentação utilizada durante o evento
Propaganda
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 - HyperText Markup Language
CSS – Cascading Style Sheets
JavaScript
DOM - Document Object Model
XML - eXtensible Markup Language
CGI - Common Gateway Interface
AJAX - Asynchronous Javascript And XML
Programação WEB – 1 de 7
HTML
HyperText 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
W3C - HTML 4.01 Specification
http://www.w3.org/TR/html401/
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_html1.html
Artífice da Web - Referência de HTML 4.01
http://www.artifice.web.pt/tutoriais/cntd/ref_html1.html
HTML - Formatação
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:
<body> Arial, Verdana, sans-serif;
<table class=“dados”>
TABLE.dados<tr><td>Cel</td></tr>
{
</table>
margin: 10px
0px 0px 0px;
}
<input type=“text” class=“nomeDaClasse”>
.nomeDaClasse
<table{class=“nomeDaClasse”>
<tr><td>Cel</td></tr>
background-image:
url(img.gif);
}
</style>
</table>
</body>
...
CSS – Para saber mais
W3C - Cascading Style Sheets
http://www.w3.org/Style/CSS/
Artífice da Web - Tutorial e Referência de CSS
http://www.artifice.web.pt/tutoriais/cntd/tut_css1.html
W3Schools - CSS Tutorial
http://www.w3schools.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?
JavaScript é 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 nome1 = "Carla";
var nome2 = 'Joel';
function AloMundo(quem) {
alert ("Alô Mundo," + quem);
}
</script>
</head>
<body onload=“AloMundo(nome1);”>
Textos, Imagens, Links
</body></html>
Javascript – Para saber mais
Artífice da Web - Programação em JavaScript
http://www.artifice.web.pt/tutoriais/cntd/tut_js1.html
W3Schools - JavaScript Tutorial
http://www.w3schools.com/js/default.asp
W3Schools - JavaScript Reference
http://www.w3schools.com/jsref/default.asp
Mozilla – Javascript
http://developer.mozilla.org/en/docs/About_JavaScript
Internet Explorer – Javascript
http://msdn2.microsoft.com/en-us/library/ms970435.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 adicionarTabela() {
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
for (var j = 0; j < 2; j++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cellText = document.createTextNode(“cel:“ + j);
cell.appendChild(cellText);
row.appendChild(cell);
tbl.appendChild(row);
}
body.appendChild(tbl);
}
</script>
DOM – Para saber mais
Danny Goodman - JavaScript/DHTML Application Examples
http://www.dannyg.com/examples/
Mozilla.org - DOM Sample Code
http://www.mozilla.org/docs/dom/samples/
W3Schools
http://www.w3schools.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, MathML, RSS, PodCast
• 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>
XSLque se
Favor comparecem à reunião
realizará em 10/08/2007, Linguagem
às 8:00 de marcação
usada para transformar
horas, no auditório da empresa.
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
W3Schools - XML Tutorial
http://www.w3schools.com/xml/default.asp
Wikipedia - XML Definition
http://en.wikipedia.org/wiki/XML
W3C XML
http://www.w3.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, ColdFusion 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
o arquivo
gerado é oda
arquivo
seria que
executado,
o resultado
solicitado.
execução seria um HTML que o
servidor
HTTP
enviaria
O servidor HTTP disponibiliza
o arquivo
solicitado
Navegador “olha” o arquivonavegador.
e decide o que fazer.
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 OverHead.
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”;
retornar um arquivo XML somente com a relação de
var requestO=GCI
newpoderia
XMLHttpRequest();
alunos com 10 anos
idade.
request.onreadystatechange
= de
processarRetorno;
request.open("GET", url, true);
<?xml version="1.0" encoding="ISO-8859-1"?>
request.send("");
<lista>
<aluno>
// Esta função será chamada pelo componente XmlHttpRequest
<nome>Machado de Assis</nome>
function processarRetorno
() {
<nascimento>01/02/1997</nascimento>
var retorno = “”;
</aluno>
if (request.readyState
<aluno> == 4) {
//Pega o XML<recebido
nome>Dom Quixote</nome>
var retorno =
request.responseText;
<nascimento>
03/01/1997</nascimento>
}
</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%C3%A7ar
Mozzilla – XMLHttpRequest
http://developer.mozilla.org/en/docs/XMLHttpRequest
Wikipedia – Ajax
http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)
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;
JavaScript
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
