Upload
rodrigo-rodrigues
View
1.836
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Visão geral de desenvolvimento web
Professor: Rodrigo Lins RodriguesAula 1 – 07 e 09 de 02/2012 e
Conceitos que fundamentam a
Web
O que é Web 2.0? Ciclos da Web Abrangência Web 2.0 Hoje Mercado de Trabalho “2.0”
Conteúdo
Informação a qualquer hora, em qualquer lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada;
O que é isso?
Voltar ao tempo para entender o termo; A evolução da web; Ciclo.
O que é WEB 2.0?
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.
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"
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
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 - ?
Entendendo o desenvolvimento
web
Informação a qualquer hora, em qualquer lugar;
Rápidos resultados; Portabilidade absoluta; Manutenção facilitada;
Vantagens
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?
Como funciona?
Requisição básica client-server
Como funciona?
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 este através de requisições e respostas (troca de dados)."
Definição
Desenvolvimento front-end:
desenvolvimento em camadas
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”?
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”?
Conteúdo
Apresentação
Comportamento
Modelo de desenvolvimento em camadas: organização de código, facilitação do trabalho
“Camadas”?
Camada fundamental, a mais importante. Na maioria das vezes, HTML – hoje evoluído
para XHTML.
Camada de Conteúdo
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
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
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
item {cor: vermelho;tamanho: 2;
}parágrafo {
destaque: negrito;alinhamento: centralizado;
}
Exemplo - CSS
Analogia à estrutura do CSS
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?
É 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
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!
resultado = pergunta("Deseja realmente sair da página?");
se (resultado == sim) {sair();
} senão {permanecer();
}
Analogia à estrutura do JavaScript
XHTM
LCSSJa
vaScriptModelo de desenvolvimento em camadas: linguagens utilizadas
Resumindo....
Desenvolvimento back-end
Entendendo....
Servidores Web, BD Internet
Terceirizável Manutenção Mínima,
Tempo Zero de ConfiguraçãoAplicação
Cliente com Web Browser
Algumas tecnologias
Padrões Web: fazendo certo
É 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?
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?
O maior problema que enfrentamos hoje, quando estamos desenvolvendo uma aplicação web, é a incompatibilidade de nossos projetos entre navegadores.
Padrões Web
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”
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”
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
Quais as áreas de trabalho ?
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
Arquitetura
Execução no Cliente (Browser) HTML CSS Javascript XML ...
HTML
<html> <head> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body></html>
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>
CSS – “pagina.css”
body { background-color : #ffffff; color : #000000;}
JavaScript
<html><body>
<script type="text/javascript">
for (i = 0; i < 5; i++){
document.write("Alo você !!!")
document.write("<br />")}</script>
</body></html>
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>
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>
Execução no Cliente (Browser) “Inferno” dos web-designers:
compatibilidade entre browsers!◦ Firefox◦ Opera◦ Internet Explorer (IECA)◦ Konqueror
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
Execução no Servidor
Servidores Web◦ IIS◦ Apache◦ Tomcat
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
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
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
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 ..
RSS
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
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