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