introdução sobre desenvolvimento web
DESCRIPTION
TRANSCRIPT
![Page 1: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/1.jpg)
Visão geral de desenvolvimento web
Professor: Rodrigo Lins RodriguesAula 1 – 07 e 09 de 02/2012 e
![Page 2: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/2.jpg)
Conceitos que fundamentam a
Web
![Page 3: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/3.jpg)
O que é Web 2.0? Ciclos da Web Abrangência Web 2.0 Hoje Mercado de Trabalho “2.0”
Conteúdo
![Page 4: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/4.jpg)
Informação a qualquer hora, em qualquer lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada;
O que é isso?
![Page 5: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/5.jpg)
Voltar ao tempo para entender o termo; A evolução da web; Ciclo.
O que é WEB 2.0?
![Page 6: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/6.jpg)
1º Ciclo: 1994 - 1996
Requisição básica client-server
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.
![Page 7: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/7.jpg)
2º Ciclo: 1997 - 2000
Requisição usando banco de dados
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"
![Page 8: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/8.jpg)
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.
3º Ciclo: 2001 - 2004
![Page 9: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/9.jpg)
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
4º Ciclo: 2004 - ?
![Page 10: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/10.jpg)
Entendendo o desenvolvimento
web
![Page 11: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/11.jpg)
Informação a qualquer hora, em qualquer lugar;
Rápidos resultados; Portabilidade absoluta; Manutenção facilitada;
Vantagens
![Page 12: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/12.jpg)
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
Como funciona?
![Page 13: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/13.jpg)
Como funciona?
Requisição básica client-server
![Page 14: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/14.jpg)
Como funciona?
Requisição usando banco de dados
![Page 15: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/15.jpg)
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)."
Definição
![Page 16: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/16.jpg)
Desenvolvimento front-end:
desenvolvimento em camadas
![Page 17: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/17.jpg)
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.
“Camadas”?
![Page 18: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/18.jpg)
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.
“Camadas”?
![Page 19: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/19.jpg)
Conteúdo
Apresentação
Comportamento
Modelo de desenvolvimento em camadas: organização de código, facilitação do trabalho
“Camadas”?
![Page 20: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/20.jpg)
Camada fundamental, a mais importante. Na maioria das vezes, HTML – hoje evoluído
para XHTML.
Camada de Conteúdo
![Page 21: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/21.jpg)
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.
Camada de Conteúdo
![Page 22: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/22.jpg)
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)
Camada de Apresentação
![Page 23: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/23.jpg)
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.
Camada de Apresentação
![Page 24: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/24.jpg)
item {cor: vermelho;tamanho: 2;
}parágrafo {
destaque: negrito;alinhamento: centralizado;
}
Exemplo - CSS
Analogia à estrutura do CSS
![Page 25: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/25.jpg)
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!
E agora?
![Page 26: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/26.jpg)
É 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.
Camada de comportamento
![Page 27: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/27.jpg)
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;
JavaScript!
![Page 28: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/28.jpg)
resultado = pergunta("Deseja realmente sair da página?");
se (resultado == sim) {sair();
} senão {permanecer();
}
Analogia à estrutura do JavaScript
![Page 29: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/29.jpg)
XHTM
LCSSJa
vaScriptModelo de desenvolvimento em camadas: linguagens utilizadas
Resumindo....
![Page 30: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/30.jpg)
Desenvolvimento back-end
![Page 31: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/31.jpg)
Entendendo....
Servidores Web, BD Internet
Terceirizável Manutenção Mínima,
Tempo Zero de ConfiguraçãoAplicação
Cliente com Web Browser
![Page 32: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/32.jpg)
Algumas tecnologias
![Page 33: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/33.jpg)
Padrões Web: fazendo certo
![Page 34: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/34.jpg)
É um conjunto de normas e recomendações para o desenvolvimento web que visam padronizar e, assim, facilitar a programação e acesso.
Padrões Web?
![Page 35: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/35.jpg)
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;
Quem cria?
![Page 36: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/36.jpg)
O maior problema que enfrentamos hoje, quando estamos desenvolvendo uma aplicação web, é a incompatibilidade de nossos projetos entre navegadores.
Padrões Web
![Page 37: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/37.jpg)
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;
“Despadronizados”
![Page 38: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/38.jpg)
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.
“Despadronizados”
![Page 39: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/39.jpg)
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):
Navegadores
![Page 40: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/40.jpg)
Quais as áreas de trabalho ?
![Page 41: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/41.jpg)
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
Áreas de trabalho
![Page 42: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/42.jpg)
Arquitetura
![Page 43: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/43.jpg)
Execução no Cliente (Browser) HTML CSS Javascript XML ...
![Page 44: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/44.jpg)
HTML
<html> <head> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body></html>
![Page 45: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/45.jpg)
CSS<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>
![Page 46: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/46.jpg)
CSS – “pagina.css”
body { background-color : #ffffff; color : #000000;}
![Page 47: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/47.jpg)
JavaScript
<html><body>
<script type="text/javascript">
for (i = 0; i < 5; i++){
document.write("Alo você !!!")
document.write("<br />")}</script>
</body></html>
![Page 48: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/48.jpg)
JavaScript<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>
![Page 49: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/49.jpg)
XML<?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>
![Page 50: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/50.jpg)
Execução no Cliente (Browser) “Inferno” dos web-designers:
compatibilidade entre browsers!◦ Firefox◦ Opera◦ Internet Explorer (IECA)◦ Konqueror
![Page 51: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/51.jpg)
Execução no Servidor
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
![Page 52: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/52.jpg)
Execução no Servidor
Servidores Web◦ IIS◦ Apache◦ Tomcat
![Page 53: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/53.jpg)
Apache
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
![Page 54: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/54.jpg)
Tomcat 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
![Page 55: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/55.jpg)
Servidores de Aplicação 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
![Page 56: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/56.jpg)
RSS
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 ..
![Page 57: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/57.jpg)
RSS
![Page 58: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/58.jpg)
Web Services
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
![Page 59: Introdução sobre desenvolvimento web](https://reader033.vdocuments.site/reader033/viewer/2022042613/5495c1ffac7959132e8b4f3d/html5/thumbnails/59.jpg)
AJAX 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