Introdução sobre desenvolvimento web

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: Praticamente artesanal;
 Serviços: Apenas uma vitrine, nenhuma
interação do usuário.

Requisição básica client-server

 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"

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

 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

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

 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

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 este
através de requisições e respostas (troca de
dados)."

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

Modelo de desenvolvimento em
camadas: 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
bem usada
 Deve ser sempre o mesmo
código, independentemente do dispositivo /
programa que acessa a página.

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

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

item {
cor: vermelho;
tamanho: 2;
}
parágrafo {
destaque: negrito;
alinhamento: centralizado;
}

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!

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

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

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

Modelo de desenvolvimento em
camadas: linguagens utilizadas

Servidores
Web, BD Internet Cliente com
Web Browser

Terceirizável Manutenção
Mínima,
Tempo Zero de
Aplicação Configuração

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

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

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

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

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

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

 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

 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>
Esta é minha primeira página.
</body>
</html>

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

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

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

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

 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

 Servidores Web
◦ IIS
◦ Apache
◦ Tomcat

 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

 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

 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

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

 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

 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

Introdução sobre desenvolvimento web

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Introdução sobre desenvolvimento web

Mais de Rodrigo Rodrigues

Introdução sobre desenvolvimento web