22
Tecnologias para Tecnologias para Internet Internet Thyago Maia Tavares de Thyago Maia Tavares de Farias Farias Aula 5 Aula 5

Tecnologias para internet - Aula 5

Embed Size (px)

DESCRIPTION

Slides referentes a 5ª aula da disciplina Tecnologias para Internet, realizada no dia 18/02/2011

Citation preview

Page 1: Tecnologias para internet - Aula 5

Tecnologias para Tecnologias para InternetInternet

Thyago Maia Tavares de Thyago Maia Tavares de FariasFarias

Aula 5Aula 5

Page 2: Tecnologias para internet - Aula 5

SumárioSumário

Arquiteturas de sistemas WebArquiteturas de sistemas Web Arquitetura de duas camadas (cliente-Arquitetura de duas camadas (cliente-

servidor)servidor) Arquitetura de três camadasArquitetura de três camadas

Camada de ApresentaçãoCamada de Apresentação Formulários HTMLFormulários HTML JavaScriptJavaScript

Page 3: Tecnologias para internet - Aula 5

Arquitetura de duas Arquitetura de duas camadacamada

Também conhecida como arquitetura cliente-Também conhecida como arquitetura cliente-servidor;servidor;

Resolve o problema de custos de processamento Resolve o problema de custos de processamento da arquitetura de uma camada;da arquitetura de uma camada;

Baseada na divisão de trabalho (componentes);Baseada na divisão de trabalho (componentes); Tipos de divisãoTipos de divisão

Thin Client: Cliente implementa apenas a interface Thin Client: Cliente implementa apenas a interface gráfica; Servidor implementa a lógica e gerenciamento gráfica; Servidor implementa a lógica e gerenciamento de dados;de dados;

Thick Client: Cliente implementa a interface gráfica e Thick Client: Cliente implementa a interface gráfica e a lógica de negócio; Servidor implementa o a lógica de negócio; Servidor implementa o gerenciamento de dados;gerenciamento de dados;

Page 4: Tecnologias para internet - Aula 5

Arquitetura de três Arquitetura de três camadascamadas

Cada uma das camadas resolve e cuida de Cada uma das camadas resolve e cuida de problemas específicos;problemas específicos;

Cada uma das camadas envolve um Cada uma das camadas envolve um componente e sua separação é facilmente componente e sua separação é facilmente identificável;identificável;

Camadas existentes:Camadas existentes: Camada de apresentação: Cuida da interface do Camada de apresentação: Cuida da interface do

usuário;usuário; Camada lógica: Ponte entre apresentação e Camada lógica: Ponte entre apresentação e

dados;dados; Camada de gerenciamento de dados: Camada de gerenciamento de dados:

representado por um ou mais SGBDs;representado por um ou mais SGBDs;

Page 5: Tecnologias para internet - Aula 5

Arquitetura de três Arquitetura de três camadascamadas

Page 6: Tecnologias para internet - Aula 5

Arquitetura de três Arquitetura de três camadascamadas

Exemplo: matrículas em cursosExemplo: matrículas em cursos

Utilidade: Sistema online para matrículas de Utilidade: Sistema online para matrículas de estudantes em cursos;estudantes em cursos;

O sistema de gerenciamento de dados cuida O sistema de gerenciamento de dados cuida das informações dos estudantes, dos cursos, das informações dos estudantes, dos cursos, das turmas, requisitos, etc;das turmas, requisitos, etc;

O servidor de aplicação mantém a lógica para O servidor de aplicação mantém a lógica para adicionar cursos, turmas, fazer matrículas, tec;adicionar cursos, turmas, fazer matrículas, tec;

O programa cliente (Web ou não) cuida do O programa cliente (Web ou não) cuida do login de diferentes usuários, apresentação de login de diferentes usuários, apresentação de formulários, saída de dados, etc;formulários, saída de dados, etc;

Page 7: Tecnologias para internet - Aula 5

Arquitetura de três Arquitetura de três camadascamadas

Vantagens:Vantagens: Permite que a melhor tecnologia seja Permite que a melhor tecnologia seja

aplicada em cada camada;aplicada em cada camada; Manutenção, modificação e substituição Manutenção, modificação e substituição

de cada camada é feita de forma de cada camada é feita de forma independente;independente;

Permite clientes “leves”;Permite clientes “leves”; Códigos da lógica centralizados;Códigos da lógica centralizados; Componentização;Componentização;

Page 8: Tecnologias para internet - Aula 5

Camada de ApresentaçãoCamada de Apresentação

No detalhamento da camada de No detalhamento da camada de apresentação, abordaremos as apresentação, abordaremos as tecnologias que existem no lado do tecnologias que existem no lado do cliente da arquitetura de três cliente da arquitetura de três camadas.camadas.

Page 9: Tecnologias para internet - Aula 5

Camada de ApresentaçãoCamada de Apresentação

Serão discutidos nessa sessão:Serão discutidos nessa sessão:

Formulários HTML;Formulários HTML; JavaScript;JavaScript; CSS (Folhas de estilo)CSS (Folhas de estilo)

Page 10: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Utilizados na comunicação entre a Utilizados na comunicação entre a camada de apresentação e a camada camada de apresentação e a camada lógica;lógica;

Usados para captar diferentes tipos de Usados para captar diferentes tipos de entradas do usuário:entradas do usuário: Campos de texto;Campos de texto; Caixas de seleção;Caixas de seleção; Campos de escolha;Campos de escolha; Campos de senha;Campos de senha; Entre outros...Entre outros...

Page 11: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Estruturas que permitem aos Estruturas que permitem aos usuários submeter dados;usuários submeter dados;

Os dados submetidos podem ser Os dados submetidos podem ser tratados e/ou armazenados na tratados e/ou armazenados na camada de gerenciamento de dados, camada de gerenciamento de dados, dependendo da aplicação;dependendo da aplicação;

Formato:Formato:<form action=“” method=“” name=“”>...</form>

Page 12: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Cada atributo da tag Cada atributo da tag formform tem um tem um significado e utilidade:significado e utilidade: Action: Especifica a URI para onde será Action: Especifica a URI para onde será

encaminhado o conteúdo do formulário;encaminhado o conteúdo do formulário; Method: Especifica o método pelo qual Method: Especifica o método pelo qual

serão enviados os dados. Existem dois serão enviados os dados. Existem dois métodos:métodos: GET e POST (Mais detalhes adiante);GET e POST (Mais detalhes adiante);

Name: Especifica o nome do formulárioName: Especifica o nome do formulário

Page 13: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Entre <form> e </form> especificamos Entre <form> e </form> especificamos os elementos de entrada do formulário:os elementos de entrada do formulário: Tag input (campos e botões);Tag input (campos e botões); Tag select (caixas de seleção);Tag select (caixas de seleção); Tag textarea (áreas de texto);Tag textarea (áreas de texto);

Exemplos de tags para elementos de Exemplos de tags para elementos de entrada:entrada: <input type=“text” name=“nome” /><input type=“text” name=“nome” /> <input type=“password” name=“senha” /><input type=“password” name=“senha” />

Page 14: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Tag Tag inputinput Pode ter vários atributos. Os mais Pode ter vários atributos. Os mais

importantes são:importantes são: TypeType: Especifica o tipo do campo de entrada, que : Especifica o tipo do campo de entrada, que

pode ser pode ser texttext (campo de texto), (campo de texto), passwordpassword (campo (campo de senha), de senha), resetreset (botão para resetar campos) e (botão para resetar campos) e submitsubmit (botão que dispara o envio de conteúdo (botão que dispara o envio de conteúdo para o servidor);para o servidor);

NameName: especifica o nome do campo para que este : especifica o nome do campo para que este possa ser identificado na camada lógica;possa ser identificado na camada lógica;

ValueValue: Especifica o valor padrão (o conteúdo) do : Especifica o valor padrão (o conteúdo) do campo; campo;

Page 15: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Exemplo – Formulário com a tag Exemplo – Formulário com a tag input:input:

<form action=“” method=“post”><form action=“” method=“post”>

<input type=“text” name=“login”/><input type=“text” name=“login”/>

<input type=“text” name=“senha”/><input type=“text” name=“senha”/>

<input type=“submit” value=“Enviar”/><input type=“submit” value=“Enviar”/>

<input type=“reset” value=“limpar”/><input type=“reset” value=“limpar”/>

</form></form>

Page 16: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Métodos GET e POSTMétodos GET e POST Utilizando o Utilizando o method=“get”method=“get” na tag form, na tag form,

fazemos com que o conteúdo do fazemos com que o conteúdo do formulário seja codificado na URI;formulário seja codificado na URI; Exemplo: http://thyagomaia.com?Exemplo: http://thyagomaia.com?

campo1=valorcampo1=valor No caso do No caso do method=“post”method=“post”, os campos , os campos

de entrada do formulário vão embutidos de entrada do formulário vão embutidos na requisição HTTP, invisível para o na requisição HTTP, invisível para o usuário;usuário;

Page 17: Tecnologias para internet - Aula 5

Formulários HTMLFormulários HTML

Exemplo – Formulário com o Exemplo – Formulário com o method=“get”:method=“get”:

<form action=“http://www.teste.com” <form action=“http://www.teste.com” method=“get”>method=“get”>

<input type=“text” name=“login”/><input type=“text” name=“login”/>

<input type=“text” name=“senha”/><input type=“text” name=“senha”/>

<input type=“submit” value=“Enviar”/><input type=“submit” value=“Enviar”/>

<input type=“reset” value=“limpar”/><input type=“reset” value=“limpar”/>

</form></form>

Page 18: Tecnologias para internet - Aula 5

JavaScriptJavaScript

Linguagem de script utilizada na Linguagem de script utilizada na camada de apresentação;camada de apresentação;

Aplicações em JavaScript rodam NO Aplicações em JavaScript rodam NO CLIENTE;CLIENTE;

Utilizada para:Utilizada para: Comunicação com servidores;Comunicação com servidores; Validar formulários;Validar formulários; Adicionar funcionalidades;Adicionar funcionalidades; Entre outros...Entre outros...

Page 19: Tecnologias para internet - Aula 5

JavaScriptJavaScript

JavaScript está usualmente JavaScript está usualmente embarcada em páginas HTML;embarcada em páginas HTML;

Qualquer pessoa pode utilizar Qualquer pessoa pode utilizar JavaScript. Não há necessidade de JavaScript. Não há necessidade de se adquirir qualquer licença;se adquirir qualquer licença;

Lembre-se: JavaScript e Java não são Lembre-se: JavaScript e Java não são a mesma coisa!a mesma coisa!

JavaScript é Case Sensitive;JavaScript é Case Sensitive;

Page 20: Tecnologias para internet - Aula 5

JavaScriptJavaScript

O que podemos fazer com JavaScript?O que podemos fazer com JavaScript?

Programar pequenas aplicações web;Programar pequenas aplicações web; Inserir conteúdo dinâmico em uma Inserir conteúdo dinâmico em uma

página HTML;página HTML; Prever e reagir a eventos;Prever e reagir a eventos; Ler e escrever em elementos HTML;Ler e escrever em elementos HTML; Validar dados;Validar dados; Entre outros;Entre outros;

Page 21: Tecnologias para internet - Aula 5

JavaScriptJavaScript

A tag HTML <script> é usada para A tag HTML <script> é usada para inserir código JavaScript em uma página inserir código JavaScript em uma página HTML;HTML;

Exemplo:Exemplo:<html><html>

<body><body>

<script type=“text/javascript”><script type=“text/javascript”>

document.write(Date());document.write(Date());

</script></script>

</body></body>

</html></html>

Page 22: Tecnologias para internet - Aula 5

JavaScript – Exemplo 2JavaScript – Exemplo 2

<html><html><head><head><script type="text/javascript"><script type="text/javascript">function show_alert()function show_alert(){{

alert(“Sport Recife – Campeão Brasileiro!");alert(“Sport Recife – Campeão Brasileiro!");}}</script></script></head></head><body><body>

<input type="button" onclick="show_alert()" <input type="button" onclick="show_alert()" value=“Mostrar caixa de alerta" />value=“Mostrar caixa de alerta" />

</body></body></html></html>