O documento discute os principais conceitos da Web 2.0, incluindo sua evolução, tecnologias envolvidas e oportunidades de mercado. Aborda tópicos como a história da web, modelos de desenvolvimento, linguagens como HTML, CSS e JavaScript e padrões como W3C.

1. Professor: Rodrigo Lins Rodrigues
Aula 1 – 07 e 09 de 02/2012 e

3.  O que é Web 2.0?
 Ciclos da Web
 Abrangência
 Web 2.0 Hoje
 Mercado de Trabalho “2.0”

4.  Informação a qualquer hora,
em qualquer lugar;
 Rápidos resultados;
 Portabilidade absoluta;
 Manutenção facilitada;

5.  Voltar ao tempo para entender o termo;
 A evolução da web;
 Ciclo.

6.  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

7.  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
Requisição usando banco de dados
interatividade. Inícios dos "Webmails"

8.  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.

9.  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

11.  Informação a qualquer hora, em qualquer
lugar;
 Rápidos resultados;
 Portabilidade absoluta;
 Manutenção facilitada;

12.  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

13. Requisição básica client-server

14. Requisição usando banco de dados

15. 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)."

17.  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.

18.  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.

19. Modelo de desenvolvimento em
camadas: organização de código,
facilitação do trabalho

20.  Camada fundamental, a mais importante.
 Na maioria das vezes, HTML – hoje evoluído
para XHTML.

21.  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.

22.  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)

23.  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.

24. item {
cor: vermelho;
tamanho: 2;
}
parágrafo {
destaque: negrito;
alinhamento: centralizado;
}
Analogia à estrutura do CSS

25.  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!

26.  É 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.

27.  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;

28. resultado = pergunta("Deseja realmente sair da
página?");
se (resultado == sim) {
sair();
} senão {
permanecer();
}
Analogia à estrutura do JavaScript

29. Modelo de desenvolvimento em
camadas: linguagens utilizadas

31. Servidores
Web, BD Internet Cliente com
Web Browser
Terceirizável Manutenção
Mínima,
Tempo Zero de
Aplicação Configuração

34.  É um conjunto de normas e recomendações
para o desenvolvimento web que visam
padronizar e, assim, facilitar a programação
e acesso.

35.  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;

36.  O maior problema que enfrentamos hoje,
quando estamos desenvolvendo uma
aplicação web, é a incompatibilidade de
nossos projetos entre navegadores.

37.  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;

38.  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.

39.  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):

41.  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

43.  HTML
 CSS
 Javascript
 XML
 ...

44. <html>
<head>
<title>Título da Página</title>
</head>
<body>
Esta é minha primeira página.
</body>
</html>

45. <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>

46. body {
background-color :
#ffffff;
color : #000000;
}

47. <html>
<body>
<script type="text/javascript">
for (i = 0; i < 5; i++)
{
document.write("Alo você !!!")
document.write("<br />")
}
</script>
</body>
</html>

48. <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>

49. <?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>

50.  “Inferno” dos web-designers: compatibilidade
entre browsers!
◦ Firefox
◦ Opera
◦ Internet Explorer (IECA)
◦ Konqueror

51.  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

52.  Servidores Web
◦ IIS
◦ Apache
◦ Tomcat

53.  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

54.  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

55.  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

56.  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 ..

58.  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

59.  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