Successfully reported this slideshow.

Introdução sobre desenvolvimento web

3,036 views

Published on

  • Be the first to comment

Introdução sobre desenvolvimento web

  1. 1. Professor: Rodrigo Lins Rodrigues Aula 1 – 07 e 09 de 02/2012 e
  2. 2.  O que é Web 2.0? Ciclos da Web Abrangência Web 2.0 Hoje Mercado de Trabalho “2.0”
  3. 3.  Informação a qualquer hora,em qualquer lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada;
  4. 4.  Voltar ao tempo para entender o termo; A evolução da web; Ciclo.
  5. 5.  Conteúdo: Estático e atualizado pelos webmastes;  Tecnologia: Escassas e limitadas;  Desenvolvimento: Praticamente artesanal;  Serviços: Apenas uma vitrine, nenhuma interação do usuário.Requisição básica client-server
  6. 6.  Conteúdo: A publicação de artigos e notícias se torna automatizado;  Tecnologia: Evolução das tecnologias e surgimento de outras;  Desenvolvimento: Surgem softwares que ajudam em algumas partes do processo;  Serviços: Surgem as primeiras aplicações comerciais, os usuários já tem algumaRequisição usando banco de dados interatividade. Inícios dos "Webmails"
  7. 7.  Conteúdo: Ainda mais dinâmico, mais customizável e mais abrangente. (Música, video e animações); Tecnologia: Tecnologia começa a se tornar padrão com (XHTML, CSS, XML). A era do Flash. Os navegadores alcançam níveis satisfatórios de recursos; Desenvolvimento: Surgem NOVOS softwares que ajudam em algumas partes do processo ; Serviços: Deixam de ser vitrines e se tornam aplicações profissionais. O usuário confia um pouco mais na web e começa a comprar pela internet.
  8. 8.  Conteúdo: Em sua grande maioria livre. Os usuários; Tecnologia: Padrões muito mais próximos ao W3C; Surgimento do AJAX, consolidação do padrão XML; Desenvolvimento: Mais automatizado, mais ferramentas de desenvolvimento, muito mais produtivo. Seja no cliente ou no Servidor. Serviços: O uso de recursos como o Ajax, deixam os sites com aparência de aplicações. Os usuários tem muito mais interação com os sites, conquistam mais poder e liberdade
  9. 9.  Informação a qualquer hora, em qualquer lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada;
  10. 10.  Visualização de dados sem comunicação externa (conteúdo estático) A partir da troca de dados, entre um cliente e um servidor (conteúdo dinâmico) Arquitetura client-server: requisição - resposta
  11. 11. Requisição básica client-server
  12. 12. Requisição usando banco de dados
  13. 13. Desenvolver pra web resume-se, então, em"criar interfaces (páginas) que dão acesso a um conteúdo local ou externo, sendo este através de requisições e respostas (troca de dados)."
  14. 14.  Uma página web constitui-se de três camadas: ◦ Conteúdo ◦ Apresentação ◦ Comportamento A divisão em camadas, além de ser uma boa prática, facilita o nosso trabalho e nos oferece mais performance ao projeto.
  15. 15.  Uma página web constitui-se de três camadas: ◦ Conteúdo ◦ Apresentação ◦ Comportamento A divisão em camadas, além de ser uma boa prática, facilita o nosso trabalho e nos oferece mais performance ao projeto.
  16. 16. Modelo de desenvolvimento emcamadas: organização de código,facilitação do trabalho
  17. 17.  Camada fundamental, a mais importante. Na maioria das vezes, HTML – hoje evoluído para XHTML.
  18. 18.  XHTML É a linguagem responsável por exibir e estruturar os dados. Teoria muito simples, fácil entendida quando bem usada Deve ser sempre o mesmo código, independentemente do dispositivo / programa que acessa a página.
  19. 19.  Basicamente, é a formatação, o design da página. Deve ser construída a partir de uma linguagem chamada CSS (Cascading Style Sheet – Folha de estilos encadeados)
  20. 20.  CSS é a parte do código que cuida do layout, design e formatação da página e seus componentes; Uso simples, intuitivo; Pode mudar de acordo com o dispositivo ou programa que está acessando a página, ou até mesmo com as preferências do usuário.
  21. 21. item { cor: vermelho; tamanho: 2;}parágrafo { destaque: negrito; alinhamento: centralizado;}Analogia à estrutura do CSS
  22. 22.  Até agora, temos pouca interação com o usuário. Tem conteúdo, é bonito. Mas é sem graça. O usuário precisa interagir mais com a página, e a página precisa reagir a comandos do usuário! A página precisa de comportamento!
  23. 23.  É a camada que permite melhorar a interação do usuário com a página; É composta principalmente por uma outra linguagem, chamada JavaScript. Muitas vezes essa camada fica restrita a determinados dispositivos / programas.
  24. 24.  Uma poderosíssima linguagem de programação, mais voltada para a Web, que nos oferece inúmeros recursos para uma página; Recursos mais avançados da linguagem, às vezes, requerem um navegador mais aprimorado;
  25. 25. resultado = pergunta("Deseja realmente sair da página?");se (resultado == sim) { sair();} senão { permanecer();}Analogia à estrutura do JavaScript
  26. 26. Modelo de desenvolvimento emcamadas: linguagens utilizadas
  27. 27. Servidores Web, BD Internet Cliente com Web Browser Terceirizável Manutenção Mínima, Tempo Zero deAplicação Configuração
  28. 28.  É um conjunto de normas e recomendações para o desenvolvimento web que visam padronizar e, assim, facilitar a programação e acesso.
  29. 29.  Um consórcio chamado W3C (World Wide Web Consortium), que foi criado para tornar a Web "universal", criando padrões; É composto por empresas na área de tecnologias pra Web;
  30. 30.  O maior problema que enfrentamos hoje, quando estamos desenvolvendo uma aplicação web, é a incompatibilidade de nossos projetos entre navegadores.
  31. 31.  Quando a Web surgiu, navegadores começaram a adicionar recursos que apenas ele possuíam, no intuito de atrair desenvolvedores; O problema era que todos os navegadores eram usados. E o usuário tem direito a ter acesso onde ele quiser;
  32. 32.  Internet Explorer e Netscape Navigator, os mais usados na época, travaram uma verdadeira "guerra"; O resultado foi que cada site tinha que ter uma versão para cada navegador; E quem era mais prejudicado? Isso. Nós. Desenvolvedores.
  33. 33.  Então entramos na briga e agora apoiamos completamente os padrões web. E agora os navegadores estão cada vez mais se aprimorando neste aspecto. Próxima geração (mais usados):
  34. 34.  Desenvolvedor back-end ◦ JAVA,php, ruby, django (python), asp; Desenvolvedor front-end ◦ Html 5, CSS3, javascript; ◦ Usabilidade / Acessibilidade Arquitetura web ◦ SOA ◦ Web-Services ◦ API Segurança web
  35. 35.  HTML CSS Javascript XML ...
  36. 36. <html> <head> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body></html>
  37. 37. <html> <head> <link href="pagina.css" rel="stylesheet"type="text/css" /> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body></html>
  38. 38. body { background-color :#ffffff; color : #000000;}
  39. 39. <html> <body> <script type="text/javascript"> for (i = 0; i < 5; i++) { document.write("Alo você !!!") document.write("<br />") } </script> </body></html>
  40. 40. <html> <body> <head> <script <script type="text/javascript">type="text/javascript"> document.write(alo(4)) function alo(k) </script> { </body> var s = ""; </html> for (i = 0; i < k; i++) { s = s + "Alo você !!!" s = s + "<br />" } return s } </script> <title>Alouuuuuu</title> </head>
  41. 41. <?xml version="1.0" encoding="UTF-8"?><livros> <livro isbn=“0001”> <titulo>JavaServer Pages</titulo> <autor>Nick Todd</autor> <editora>Campus</editora> <assunto>JSP</assunto> </livro> <livro isbn=“0002”> <titulo>Meu pé de laranjalima</titulo> <editora>Vozes</editora> <autor>Brilhante</autor> </livro></livros>
  42. 42.  “Inferno” dos web-designers: compatibilidade entre browsers! ◦ Firefox ◦ Opera ◦ Internet Explorer (IECA) ◦ Konqueror
  43. 43.  Necessidade dos websites oferecerem conteúdos dinâmicos e atualizados Ciclo de vida da informações trafegadas entre servidor e cliente (escopo) Linguagens de script ◦ JSP ◦ ASP ◦ PHP ◦ Perl
  44. 44.  Servidores Web ◦ IIS ◦ Apache ◦ Tomcat
  45. 45.  Servidor web mais utilizado no mundo atualmente (Fonte: Netcraft) Software Livre Escrito em C Executa diversas linguagens script: PhP, Perl, ASP, etc. Possui suporte nativo ao MySQL
  46. 46.  Implementação de referência para JSP/Servlets (Java) Escrito em Java Devido à sua simplicidade e fácil instalação, é comumente utilizado em cursos para desenvolvimento web
  47. 47.  Estes servidores oferecem recursos comuns a diferentes aplicações (autenticação, conexão à BDs, suporte a transação, etc) Pensando-se numa arquitetura em camadas, um servidor de aplicação é um servidor que hospeda e oferece serviços para outras aplicações Com isso, espera-se que os desenvolvedores poupem tempo para implementação da lógica do negócio
  48. 48.  Formato padrão, baseado emXML Tem sido adotado por websites que disponibilizam informações na rede, como sites de jornais, blogs, sites institucionais, etc. Hoje existem diversos leitores (agregadores) de RSS: browsers, programas de e- mail, softwares, etc ..
  49. 49.  Proposta: ◦ Integração de sistemas através do uso de XML sobre HTTP Tecnologias: ◦ XML ◦ WSDL (Web Service Description Language) ◦ SOAP (Simple Object Access Protocol) Vantagens: ◦ Integração com baixo acoplamento ◦ Independe das linguagens de implementação
  50. 50.  Asynchronous Javascript And XML Construção de páginas mais dinâmicas através de chamadas assíncronas ao servidor Não é uma tecnologia, mas sim uma combinação de tecnologias ◦ XHTML + CSS + XML + XSLT + XMLHttpRequest e JavaScript

×