Tecnologias para internet - Aula 5

1.045 visualizações

Publicada em

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

Publicada em: Tecnologia, Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.045
No SlideShare
0
A partir de incorporações
0
Número de incorporações
19
Ações
Compartilhamentos
0
Downloads
28
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para internet - Aula 5

  1. 1. Tecnologias para Internet Thyago Maia Tavares de Farias Aula 5
  2. 2. Sumário <ul><li>Arquiteturas de sistemas Web </li></ul><ul><ul><li>Arquitetura de duas camadas (cliente-servidor) </li></ul></ul><ul><ul><li>Arquitetura de três camadas </li></ul></ul><ul><li>Camada de Apresentação </li></ul><ul><ul><li>Formulários HTML </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul>
  3. 3. Arquitetura de duas camada <ul><li>Também conhecida como arquitetura cliente-servidor; </li></ul><ul><li>Resolve o problema de custos de processamento da arquitetura de uma camada; </li></ul><ul><li>Baseada na divisão de trabalho (componentes); </li></ul><ul><li>Tipos de divisão </li></ul><ul><ul><li>Thin Client: Cliente implementa apenas a interface gráfica; Servidor implementa a lógica e gerenciamento de dados; </li></ul></ul><ul><ul><li>Thick Client: Cliente implementa a interface gráfica e a lógica de negócio; Servidor implementa o gerenciamento de dados; </li></ul></ul>
  4. 4. Arquitetura de três camadas <ul><li>Cada uma das camadas resolve e cuida de problemas específicos; </li></ul><ul><li>Cada uma das camadas envolve um componente e sua separação é facilmente identificável; </li></ul><ul><li>Camadas existentes: </li></ul><ul><ul><li>Camada de apresentação: Cuida da interface do usuário; </li></ul></ul><ul><ul><li>Camada lógica: Ponte entre apresentação e dados; </li></ul></ul><ul><ul><li>Camada de gerenciamento de dados: representado por um ou mais SGBDs; </li></ul></ul>
  5. 5. Arquitetura de três camadas
  6. 6. Arquitetura de três camadas <ul><li>Exemplo: matrículas em cursos </li></ul><ul><ul><li>Utilidade: Sistema online para matrículas de estudantes em cursos; </li></ul></ul><ul><ul><li>O sistema de gerenciamento de dados cuida das informações dos estudantes, dos cursos, das turmas, requisitos, etc; </li></ul></ul><ul><ul><li>O servidor de aplicação mantém a lógica para adicionar cursos, turmas, fazer matrículas, tec; </li></ul></ul><ul><ul><li>O programa cliente (Web ou não) cuida do login de diferentes usuários, apresentação de formulários, saída de dados, etc; </li></ul></ul>
  7. 7. Arquitetura de três camadas <ul><li>Vantagens: </li></ul><ul><ul><li>Permite que a melhor tecnologia seja aplicada em cada camada; </li></ul></ul><ul><ul><li>Manutenção, modificação e substituição de cada camada é feita de forma independente; </li></ul></ul><ul><ul><li>Permite clientes “leves”; </li></ul></ul><ul><ul><li>Códigos da lógica centralizados; </li></ul></ul><ul><ul><li>Componentização; </li></ul></ul>
  8. 8. Camada de Apresentação <ul><li>No detalhamento da camada de apresentação, abordaremos as tecnologias que existem no lado do cliente da arquitetura de três camadas. </li></ul>
  9. 9. Camada de Apresentação <ul><li>Serão discutidos nessa sessão: </li></ul><ul><ul><li>Formulários HTML; </li></ul></ul><ul><ul><li>JavaScript; </li></ul></ul><ul><ul><li>CSS (Folhas de estilo) </li></ul></ul>
  10. 10. Formulários HTML <ul><li>Utilizados na comunicação entre a camada de apresentação e a camada lógica; </li></ul><ul><li>Usados para captar diferentes tipos de entradas do usuário: </li></ul><ul><ul><li>Campos de texto; </li></ul></ul><ul><ul><li>Caixas de seleção; </li></ul></ul><ul><ul><li>Campos de escolha; </li></ul></ul><ul><ul><li>Campos de senha; </li></ul></ul><ul><ul><li>Entre outros... </li></ul></ul>
  11. 11. Formulários HTML <ul><li>Estruturas que permitem aos usuários submeter dados; </li></ul><ul><li>Os dados submetidos podem ser tratados e/ou armazenados na camada de gerenciamento de dados, dependendo da aplicação; </li></ul><ul><li>Formato: </li></ul><form action=“” method=“” name=“”> ... </form>
  12. 12. Formulários HTML <ul><li>Cada atributo da tag form tem um significado e utilidade: </li></ul><ul><ul><li>Action: Especifica a URI para onde será encaminhado o conteúdo do formulário; </li></ul></ul><ul><ul><li>Method: Especifica o método pelo qual serão enviados os dados. Existem dois métodos: </li></ul></ul><ul><ul><ul><li>GET e POST (Mais detalhes adiante); </li></ul></ul></ul><ul><ul><li>Name: Especifica o nome do formulário </li></ul></ul>
  13. 13. Formulários HTML <ul><li>Entre <form> e </form> especificamos os elementos de entrada do formulário: </li></ul><ul><ul><li>Tag input (campos e botões); </li></ul></ul><ul><ul><li>Tag select (caixas de seleção); </li></ul></ul><ul><ul><li>Tag textarea (áreas de texto); </li></ul></ul><ul><li>Exemplos de tags para elementos de entrada: </li></ul><ul><ul><li><input type=“text” name=“nome” /> </li></ul></ul><ul><ul><li><input type=“password” name=“senha” /> </li></ul></ul>
  14. 14. Formulários HTML <ul><li>Tag input </li></ul><ul><ul><li>Pode ter vários atributos. Os mais importantes são: </li></ul></ul><ul><ul><ul><li>Type : Especifica o tipo do campo de entrada, que pode ser text (campo de texto), password (campo de senha), reset (botão para resetar campos) e submit (botão que dispara o envio de conteúdo para o servidor); </li></ul></ul></ul><ul><ul><ul><li>Name : especifica o nome do campo para que este possa ser identificado na camada lógica; </li></ul></ul></ul><ul><ul><ul><li>Value : Especifica o valor padrão (o conteúdo) do campo; </li></ul></ul></ul>
  15. 15. Formulários HTML <ul><li>Exemplo – Formulário com a tag input: </li></ul><ul><li><form action=“” method=“post”> </li></ul><ul><li><input type=“text” name=“login”/> </li></ul><ul><li><input type=“text” name=“senha”/> </li></ul><ul><li><input type=“submit” value=“Enviar”/> </li></ul><ul><li><input type=“reset” value=“limpar”/> </li></ul><ul><li></form> </li></ul>
  16. 16. Formulários HTML <ul><li>Métodos GET e POST </li></ul><ul><ul><li>Utilizando o method=“get” na tag form, fazemos com que o conteúdo do formulário seja codificado na URI; </li></ul></ul><ul><ul><ul><li>Exemplo: http://thyagomaia.com?campo1=valor </li></ul></ul></ul><ul><ul><li>No caso do method=“post” , os campos de entrada do formulário vão embutidos na requisição HTTP, invisível para o usuário; </li></ul></ul>
  17. 17. Formulários HTML <ul><li>Exemplo – Formulário com o method=“get”: </li></ul><ul><li><form action=“http://www.teste.com” method=“get”> </li></ul><ul><li><input type=“text” name=“login”/> </li></ul><ul><li><input type=“text” name=“senha”/> </li></ul><ul><li><input type=“submit” value=“Enviar”/> </li></ul><ul><li><input type=“reset” value=“limpar”/> </li></ul><ul><li></form> </li></ul>
  18. 18. JavaScript <ul><li>Linguagem de script utilizada na camada de apresentação; </li></ul><ul><li>Aplicações em JavaScript rodam NO CLIENTE; </li></ul><ul><li>Utilizada para: </li></ul><ul><ul><li>Comunicação com servidores; </li></ul></ul><ul><ul><li>Validar formulários; </li></ul></ul><ul><ul><li>Adicionar funcionalidades; </li></ul></ul><ul><ul><li>Entre outros... </li></ul></ul>
  19. 19. JavaScript <ul><li>JavaScript está usualmente embarcada em páginas HTML; </li></ul><ul><li>Qualquer pessoa pode utilizar JavaScript. Não há necessidade de se adquirir qualquer licença; </li></ul><ul><li>Lembre-se: JavaScript e Java não são a mesma coisa! </li></ul><ul><li>JavaScript é Case Sensitive; </li></ul>
  20. 20. JavaScript <ul><li>O que podemos fazer com JavaScript? </li></ul><ul><ul><li>Programar pequenas aplicações web; </li></ul></ul><ul><ul><li>Inserir conteúdo dinâmico em uma página HTML; </li></ul></ul><ul><ul><li>Prever e reagir a eventos; </li></ul></ul><ul><ul><li>Ler e escrever em elementos HTML; </li></ul></ul><ul><ul><li>Validar dados; </li></ul></ul><ul><ul><li>Entre outros; </li></ul></ul>
  21. 21. JavaScript <ul><li>A tag HTML <script> é usada para inserir código JavaScript em uma página HTML; </li></ul><ul><li>Exemplo: </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><script type=“text/javascript”> </li></ul><ul><li>document.write(Date()); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  22. 22. JavaScript – Exemplo 2 <ul><li><html> <head> <script type=&quot;text/javascript&quot;> function show_alert() { alert(“Sport Recife – Campeão Brasileiro!&quot;); } </script> </head> <body> <input type=&quot;button&quot; onclick=&quot;show_alert()&quot; value=“Mostrar caixa de alerta&quot; /> </body> </html> </li></ul>

×