Professor: Rodrigo Lins Rodrigues   Aula 1 – 07 e 09 de 02/2012 e
   O que é Web 2.0?   Ciclos da Web   Abrangência   Web 2.0 Hoje   Mercado de Trabalho “2.0”
 Informação a qualquer hora,em qualquer lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada;
   Voltar ao tempo para entender o termo;   A evolução da web;   Ciclo.
   Conteúdo: Estático e atualizado pelos       webmastes;      Tecnologia: Escassas e limitadas;      Desenvolvimento: ...
   Conteúdo: A publicação de artigos e notícias se      torna automatizado;     Tecnologia: Evolução das tecnologias e  ...
   Conteúdo: Ainda mais dinâmico, mais customizável    e mais abrangente. (Música, video e animações);   Tecnologia: Tec...
   Conteúdo: Em sua grande maioria livre. Os usuários;   Tecnologia: Padrões muito mais próximos ao W3C;    Surgimento ...
   Informação a qualquer hora, em qualquer    lugar;   Rápidos resultados;   Portabilidade absoluta;   Manutenção faci...
   Visualização de dados sem comunicação    externa (conteúdo estático)   A partir da troca de dados, entre um cliente e...
Requisição básica client-server
Requisição usando banco de dados
Desenvolver pra web resume-se, então, em"criar interfaces (páginas) que dão acesso a um  conteúdo local ou externo, sendo ...
   Uma página web constitui-se de três    camadas:    ◦ Conteúdo    ◦ Apresentação    ◦ Comportamento   A divisão em cam...
   Uma página web constitui-se de três    camadas:    ◦ Conteúdo    ◦ Apresentação    ◦ Comportamento   A divisão em cam...
Modelo de desenvolvimento emcamadas: organização de código,facilitação do trabalho
   Camada fundamental, a mais importante.   Na maioria das vezes, HTML – hoje evoluído    para XHTML.
   XHTML É a linguagem responsável por exibir    e estruturar os dados.   Teoria muito simples, fácil entendida quando  ...
   Basicamente, é a formatação, o design da    página.   Deve ser construída a partir de uma    linguagem chamada CSS (C...
   CSS é a parte do código que cuida do    layout, design e formatação da página e seus    componentes;   Uso simples, i...
item {   cor: vermelho;   tamanho: 2;}parágrafo {   destaque: negrito;   alinhamento: centralizado;}Analogia à estrutura d...
   Até agora, temos pouca interação com o    usuário.   Tem conteúdo, é bonito. Mas é sem graça.   O usuário precisa in...
   É a camada que permite melhorar a interação    do usuário com a página;   É composta principalmente por uma outra    ...
   Uma poderosíssima linguagem de    programação, mais voltada para a Web, que    nos oferece inúmeros recursos para uma ...
resultado = pergunta("Deseja realmente sair da   página?");se (resultado == sim) {   sair();} senão {   permanecer();}Anal...
Modelo de desenvolvimento emcamadas: linguagens utilizadas
Servidores      Web, BD           Internet   Cliente com                                   Web Browser            Terceiri...
   É um conjunto de normas e recomendações    para o desenvolvimento web que visam    padronizar e, assim, facilitar a pr...
   Um consórcio chamado W3C (World Wide    Web Consortium), que foi criado para tornar    a Web "universal", criando padr...
   O maior problema que enfrentamos hoje,    quando estamos desenvolvendo uma    aplicação web, é a incompatibilidade de ...
   Quando a Web surgiu, navegadores    começaram a adicionar recursos que apenas    ele possuíam, no intuito de atrair   ...
   Internet Explorer e Netscape Navigator, os    mais usados na época, travaram uma    verdadeira "guerra";   O resultad...
   Então entramos na briga e agora apoiamos    completamente os padrões web.   E agora os navegadores estão cada vez mai...
   Desenvolvedor back-end    ◦ JAVA,php, ruby, django (python), asp;   Desenvolvedor front-end    ◦ Html 5, CSS3, javasc...
   HTML   CSS   Javascript   XML   ...
<html> <head>   <title>Título da Página</title> </head> <body>   Esta é minha primeira página. </body></html>
<html>  <head>    <link href="pagina.css" rel="stylesheet"type="text/css" />    <title>Título da Página</title>  </head>  ...
body {  background-color :#ffffff;  color : #000000;}
<html>    <body>        <script type="text/javascript">        for (i = 0; i < 5; i++)        {               document.wri...
<html>                             <body> <head>                              <script   <script                        typ...
<?xml version="1.0" encoding="UTF-8"?><livros>      <livro isbn=“0001”>            <titulo>JavaServer Pages</titulo>      ...
   “Inferno” dos web-designers: compatibilidade    entre browsers!    ◦   Firefox    ◦   Opera    ◦   Internet Explorer (...
   Necessidade dos websites oferecerem    conteúdos dinâmicos e atualizados   Ciclo de vida da informações trafegadas en...
   Servidores Web    ◦ IIS    ◦ Apache    ◦ Tomcat
   Servidor web mais utilizado no mundo    atualmente (Fonte: Netcraft)   Software Livre   Escrito em C   Executa dive...
   Implementação de referência para    JSP/Servlets (Java)   Escrito em Java   Devido à sua simplicidade e fácil instal...
   Estes servidores oferecem recursos comuns    a diferentes aplicações    (autenticação, conexão à BDs, suporte a    tra...
 Formato padrão, baseado emXML Tem sido adotado por websites que  disponibilizam informações na rede, como  sites de jor...
   Proposta:    ◦ Integração de sistemas através do uso de XML      sobre HTTP   Tecnologias:    ◦ XML    ◦ WSDL (Web Se...
   Asynchronous Javascript And XML   Construção de páginas mais dinâmicas    através de chamadas assíncronas ao servidor...
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Upcoming SlideShare
Loading in...5
×

Introdução sobre desenvolvimento web

2,089

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,089
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
69
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×