Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Introdução ao desenvolvimento da web.pptx

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
LP003 - AULA 2.potx
LP003 - AULA 2.potx
Wird geladen in …3
×

Hier ansehen

1 von 59 Anzeige
Anzeige

Weitere Verwandte Inhalte

Aktuellste (20)

Anzeige

Introdução ao desenvolvimento da web.pptx

  1. 1. Professor: MARCELO ROSENBROCK Aula 1
  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.
  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 alguma 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. 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)."
  12. 12.  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.
  13. 13.  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.
  14. 14. Modelo de desenvolvimento em camadas: organização de código, facilitação do trabalho
  15. 15.  Camada fundamental, a mais importante.  Na maioria das vezes, HTML – hoje evoluído para XHTML.
  16. 16.  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.
  17. 17.  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)
  18. 18.  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.
  19. 19. item { cor: vermelho; tamanho: 2; } parágrafo { destaque: negrito; alinhamento: centralizado; }
  20. 20.  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!
  21. 21.  É 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.
  22. 22.  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;
  23. 23. resultado = pergunta( ); se (resultado == sim) { sair(); } senão { permanecer(); }
  24. 24. Modelo de desenvolvimento em camadas: linguagens utilizadas
  25. 25. Servidores Web, BD Internet Terceirizável Manutenção Mínima, Tempo Zero de Configuração Aplicação Cliente com Web Browser
  26. 26.  É um conjunto de normas e recomendações para o desenvolvimento web que visam padronizar e, assim, facilitar a programação e acesso.
  27. 27.  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;
  28. 28.  O maior problema que enfrentamos hoje, quando estamos desenvolvendo uma aplicação web, é a incompatibilidade de nossos projetos entre navegadores.
  29. 29.  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;
  30. 30.  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.
  31. 31.  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):
  32. 32.  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
  33. 33.  HTML  CSS  Javascript  XML  ...
  34. 34. <html> <head> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body> </html>
  35. 35. <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>
  36. 36. body { background-color : #ffffff; color : #000000; }
  37. 37. <html> <body> <script type="text/javascript"> for (i = 0; i < 5; i++) { document.write("Alo você !!!") document.write("<br />") } </script> </body> </html>
  38. 38. <html> <head> <script type="text/javascript"> function alo(k) { var s = ""; for (i = 0; i < k; i++) { s = s + "Alo você !!!" s = s + "<br />" } return s } </script> <title>Alouuuuuu</title> </head> <body> <script type="text/javascript"> document.write(alo(4)) </script> </body> </html>
  39. 39. <?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 laranja lima</titulo> <editora>Vozes</editora> <autor>Brilhante</autor> </livro> </livros>
  40. 40.  “Inferno” dos web-designers: compatibilidade entre browsers! ◦ Firefox ◦ Opera ◦ Internet Explorer (IECA) ◦ Konqueror
  41. 41.  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
  42. 42.  Servidores Web ◦ IIS ◦ Apache ◦ Tomcat
  43. 43.  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
  44. 44.  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
  45. 45.  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
  46. 46.  Formato padrão, baseado em XML  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 ..
  47. 47.  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
  48. 48.  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

×