Introdução à
Arquitectura de
aplicações para a
Web
Arquitectura Cliente, Servidor
Protocolo de comunicação HTTP
Noção de URL
Evolução histórica
Desenvolvimentos actuais
WEB 2.0
Arquitectura Cliente Servidor
http://www.xpto.pt/abcd.htm
Cliente
Servidor
“xpto”
Protocolo HTTP
HTTP – Hypertext Transfer Protocol
Protocolo de comunicação baseado no
TCP/IP.
Especificação W3C
(http://www.w3.org/Protocols/)
Suporta a transferencia de informação
entre o cliente e o servidor Web.
Métodos GET e POST para envio da
informação
Stateless
Cookies, Hidden Field, Session
HTTP
Request
GET /index.html HTTP/1.1 Host: www.example.com
HTTP/1.1 200 OK
Response
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Etag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Content-Length: 438
Connection: close
Content-Type: text/html; charset=UTF-8
HTTP Request
HTTP Response
HTTP Status Code Format
Status Code
Format
Meaning
1yy
Informational
Message
Provides general information; does not
indicate success or failure of a request.
2yy
Success
The method was received, understood and
accepted by the server.
3yy
4yy
5yy
Description
Redirection
The request did not fail outright, but additional
action is needed before it can be
successfully completed.
Client Error
The request was invalid, contained bad syntax
or could not be completed for some other
reason that the server believes was the
client's fault.
Server Error
The request was valid but the server was
unable to complete it due to a problem of
its own.
Servidor Web
Aplicação informática que trata os pedidos
HTTP dos clientes Web.
Servidores mais usuais
IIS – Internet Information Server
Mais usual no universo Windows
Desenvolvido pela Microsoft
Apache
Usual nos sistemas Unix/Linux
Também existe para sistemas Windows
Open Source
Noção de URL
URL – Uniform Resource Location
Sintaxe
protocolo://endereco/caminho/nomeFicheiro
Exemplos:
http://www.dei.isep.ipp.pt/ades/teste.htm
ftp://ftp.dei.isep.ipp.pt
gopher://gopher.micro.umn.edu/11
wais://cnidr.org/directory-of-servers
Evolução histórica
1.
Páginas simplesmente estáticas
O servidor Web é simplesmente um repositório
de páginas (ficheiros HTML) que são enviados
para o cliente ao seu pedido.
A informação e o aspecto da página será
constante ao longo do tempo. Mudando
unicamente se houver intervenção do
programador.
Evolução histórica
2.
Paginas estáticas com scripts embutidos
Continuam a ser páginas estáticas
São introduzidos objectos dinâmicos na página
recorrendo a uma linguagem de script. Estes
scripts são interpretados e executados no
browser cliente.
Suportadas pelo IE 3+ e pelo Netscape 4+
As linguagens de script mais usuais são
JavaScript
VBScript
Evolução histórica
3.
Paginas dinâmicas
O servidor constrói a página que será enviada
ao cliente.
Permite interacção com recursos externos (p.e.
Bases de Dados)
O aspecto e a informação da página obtida
pelo cliente depende de parâmetros que foram
passados ao servidor a quando do pedido
Evolução histórica
Páginas dinâmicas
Cliente
Recursos
externos
Servidor
Evolução histórica
4.
Paginas dinâmicas com CGI
CGI – Common Gateway Interface.
Existe uma aplicação no servidor (aplicação
CGI) que será invocada pelo pedido do cliente
e que irá construir em tempo real a página que
será enviada ao cliente.
As aplicações CGI podem ser programadas em
qualquer linguagem que aceda ao STDIN e ao
STDOUT. As mais usuais são:
Perl
C
Exemplo de um CGI
/*************************************************************************/ /** **/ /**
hello_s.c -- "hello, world" simple, para demonstrar a **/ /** saida CGI
basica. **/ /** **/
/*************************************************************************/
#include <stdio.h>
void main() {
/** Imprimir o header de resposta CGI, exigido para toda saida HTML.
**/ /** Notar o \n adicional, para enviar a linha vazia.
**/ printf("Content-type: text/html\n\n") ;
/** Imprimir a pagina de resposta HTML em STDOUT. **/
printf("<html>\n") ;
printf("<head><title>CGI Output</title></head>\n") ;
printf("<body>\n") ;
printf("<h1>Hello, world.</h1>\n") ;
printf("</body>\n") ;
printf("</html>\n") ; exit(0) ; }
Evolução histórica
5.
Páginas dinâmicas com código embutido
O código da linguagem utilizado para a
geração da página coexiste com os comandos
HTML que formatam a página.
São mais simples de desenvolver e de manter
que as aplicações CGI.
As tecnologias mais usuais desta categoria
são:
ASP
PHP
JSP
Exemplo de uma página ASP
<html>
<body>
<form action="demo_reqquery.asp" method="get">
Your name:
<input type="text" name="fname" size="20" />
<input type="submit" value="Submit" />
</form>
<%
dim fname
fname=Request.QueryString("fname")
If fname<>"" Then
Response.Write("Hello " & fname & "!<br />")
Response.Write("How are you today?")
End If
%>
</body>
</html>
Exemplo de uma página ASP
<html>
<body>
<%
response.write("<h2>You can use HTML tags to
format the text!</h2>")
%>
<%
response.write("<p style='color:#0000ff'>This text is
styled with the style attribute!</p>")
%>
</body>
</html>
Exemplo de PHP
Form
<html> <body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name" />
Age: <input type="text" name="age" />
<input type="submit" /> </form></body>
</html>
welcome.php
<html>
<body>Welcome
<?php echo $_POST["name"]; ?>.
<br />
You are <?php echo $_POST["age"]; ?>
years old.</body> </html>
Exemplo de PHP
<html> <body>
<?php
function writeMyName()
{ echo "Kai Jim Refsnes"; }
echo "Hello world!<br />";
echo "My name is "; writeMyName();
echo ".<br />That's right, ";
writeMyName();
echo " is my name."; ?>
</body>
</html>
Evolução histórica
6.
Páginas ASP .NET
Beneficia da tecnologia .NET
Independente do browser cliente
Informação inserida no cliente é directamente
processada no servidor (conceito de Web
Form)
O código utilizado para a construção da página
e o código que define a interface podem ser
colocados em ficheiros disjuntos (programação
code-behind)
WWW – Presente e Futuro …
The great need for information about information,
to help us categorize, sort, pay for, own
information is driving the design of languages for
the web designed for processing by machines,
rather than people.
The web of human-readable document is being
merged with a web of machine-understandable
data. The potential of the mixture of humans and
machines working together and communicating
through the web could be immense.
Tim Berners-Lee
Q: You talked about the need for a metadata
language. Can you tell us laymen what it is?
A: "Meta" is used with anything which is about itself
(...) metadata is data about data. On the Web, this
means all sorts of information about
information(...)These needs are driving us to make
ways of putting information on the web designed
for computers to be able to understand. Web
pages at the moment in HTML are designed to be
read by humans. In the future, some Web pages
will be in "RDF" -- Resource Description
Framework. This will be read by computer
programs which will help us organize ourselves
and our data and possibly everything we do.
WWW
The Semantic Web provides a common
framework that allows data to be shared
and reused across application, enterprise,
and community boundaries. It is a
collaborative effort led by W3C with
participation from a large number of
researchers and industrial partners. It is
based on the Resource Description
Framework (RDF).
The Semantic Web is a web of data
http://www.w3.org/2001/sw/
WWW
WEB 2.0
Inteligência colectiva
Trabalho colaborativo
Conhecimento distribuído - WikiPedia
Folksonomy
Web Mashup = API [A] + API [B]
AJAX
Assynchronous JavaScript
Aplicações Web mais interactivas
What Is Web 2.0
Design Patterns and Business Models for the Next Generation
of Software (by Tim O'Reilly 09/30/2005 )
Web 1.0
DoubleClick -->
Ofoto -->
Akamai -->
mp3.com -->
Britannica Online -->
personal websites -->
domain name speculation -->
page views -->
screen scraping -->
publishing -->
content management systems -->
directories (taxonomy) -->
stickiness -->
Web 2.0
Google AdSense
Flickr
BitTorrent
Napster
Wikipedia
blogging
search engine optimization
cost per click
web services
participation
wikis
tagging ("folksonomy")
syndication
http://www.youos.com/html/index.html?mode=demo
http://www.pageflakes.com/
Download
