arquitetura web terceiro encontro gug porto alegre/brasil

24
Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Upload: internet

Post on 17-Apr-2015

102 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Arquitetura Web

Terceiro EncontroGUG Porto Alegre/Brasil

Page 2: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTML

<html><head>

<title>Título</title></head><body>

Exemplo de página <i>HTML</i>!</body>

</html>

Page 3: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTML

.destaque {font-style:italic;}

<html> <head> <title>Título</title> <link rel="Stylesheet" href='estilo.css' /> </head> <body> <table> <tr> <td><img src="genexus.jpg"></td> <td>Exemplo de página <span class="destaque">HTML</span>! </td> </tr> </table> </body></html>

Page 5: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

WPF• Windows Presentation Foundation, um componente do

Microsoft .NET Framework 3.5, permite que você construa a próxima geração de aplicativos Windows. WPF suporta UI, media, documentos, aceleração de hardware, vetores gráficos, escalabilidade, visualização de dados interativo e facilidade de leitura de conteúdo superior.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock>Hello World!</TextBlock></Canvas>

Page 6: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTML - Div

.destaque {font-style:italic;}

<html> <head> <title>Título</title> <link rel="Stylesheet" href='estilo.css' /> </head> <body> <div style="position: absolute;top: 10px;"> <img src="genexus.jpg"> </div> <div style="position: absolute;top: 40px;left: 100px"> Exemplo de página <span class="destaque">HTML</span>! </div> </body></html>

Page 7: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTML & HTTP

<html><head>

<title>Título</title></head><body>

Exemplo de página <i>HTML</i>!</body>

</html>

3 Resposta

1 Requisição

2 Leitura

HTML

Page 8: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTML & HTTP

2 Leitura

GET /exemplo2.html HTTP/1.1Accept: */*Accept-Language: pt-brUA-CPU: x86Accept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; FDM; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; WWTClient2; InfoPath.1)Host: 192.168.0.180Proxy-Connection: Keep-AlivePragma: no-cache

HTTP/1.1 200 OKServer: Microsoft-IIS/5.1X-Powered-By: ASP.NETDate: Thu, 14 May 2009 01:35:34 GMTContent-Type: text/htmlAccept-Ranges: bytesLast-Modified: Thu, 14 May 2009 00:23:29 GMTETag: "cec8bf342ad4c91:8e7"Content-Length: 100

<html><head><title>T tulo</title></head>�<body>Exemplo de p gina <i>HTML</i>!�</body></html>

1 Requisição

3 Resposta

Page 9: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Páginas Dinâmicas – CGI Bin

5 Resposta6 Desconecta

1 Abre Conexão2 Requisição

3 Chamada 4 Retorno

HTML

… Console.Write(@"HTTP/1.1 200 OK

Content-type: text/html

<html><head><title>Título</title></head><body>Exemplo de página <i>HTML</i>!</body></html>"); }…

Page 10: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Pág. Din. – ASP/PHP

2 Chamada 5 Retorno

<html><head>

<title>Título</title></head><body>

Exemplo de página<% Response.Write "<i>HTML</i>" %>!</body>

</html>

4 Carrega memória

3 Interpreta

6 Resp./Desc.

1 Conec./Requis.

HTML

Page 11: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Pág. Din. – .NET/Servlets

2 Chamada 4 Retorno

Binário

3 Carrega memória

6 Resp./Desc.

1 Conec./Requis.

HTML

Page 12: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Acesso a Dados

2 Chamada5 Retorno

6 Resp./Desc.

1 Conec./Requis.

HTML

DBMS

3 Chamada4 Retorno

Scripts

Binário

CGI Bin

SQL

Page 13: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Uma Possível Solução

1

6

2

5

3

4

HTMLProtocolo Nativo

SQL

DBMS Server Application Server

Web Server

Page 14: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

4 Resp./Desc.

1 Conec./Requis.

HTTP – Get & Post

HTML

Binário 3 Resposta

2 Requisição

HTML

HTML’

HTML

Binário 3 Resposta

2 Requisição

HTML’

HTML

• Get

• Post

4 Resp./Desc.

1 Conec./Requis.

Page 15: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTML

2 Chamada 4 Retorno

.destaque {font-style:italic;}

<html> <head> <title>Título</title> <link rel="Stylesheet" href='estilo.css' /> </head> <body> <table> <tr> <td><img src="genexus.jpg"></td> <td>Exemplo de página <span class="destaque">HTML</span>! </td> </tr> </table> </body></html>

HTML

HTML

Imagens

CSS

5 Resp./Desc.

1 Conec./Requis.

Page 16: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP

Page 17: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP

ACTUAL PERFORMANCE--------------Requests started at: 22:12:12:3281Responses completed at: 22:12:12:4062Total Sequence time: 00:00:00.0781250

RESPONSE CODES--------------HTTP/200: 3

RESPONSE BYTES (by Content-Type)--------------image/jpeg: 1.894 text/css: 37 ~headers: 740 text/html: 275

Page 18: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP – Ajax - Get

4 Resposta

1 Requisição

2 Chamada 3 Retorno

Binário

<html><head>

<title>Título</title></head><body>

Exemplo de página <i>HTML</i>!</body>

</html>

HTML

Imagens

CSS

Javascrípt

HTML

Page 19: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP

Page 20: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP

HTTP/1.1 200 OKServer: Microsoft-IIS/5.1Date: Thu, 14 May 2009 03:43:36 GMTX-Powered-By: ASP.NETX-AspNet-Version: 2.0.50727Pragma: no-cacheCache-Control: no-cacheContent-Type: text/html; charset=utf-8Content-Length: 1917

<html><head><meta name="Generator" content="GeneXus C#"/><meta name="Version" content="10_0_3-18367"/><meta name="Description" content="Exemplo"/><meta http-equiv="Page-Enter" content="BlendTrans(Duration=0.1)"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>Exemplo</title>

Page 21: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP – Ajax - Post

4 Chamada 5 Retorno

Binário

{"gxProps":{"TEXTBLOCK1":{"Name":"Textblock1","Caption":"Exemplo de página\t<i\>HTML</i\>!"}},"gxHiddens":{"_EventName":"","_EventGridId":"","_EventRowId":"","sCallerURL":"","GX_FocusControl":"","GX_AJAX_KEY":"88EFFF70E5123B83C2E66FC5A3099862","GX_CMP_OBJS":{}},"gxValues":[],"gxMessages":{"MAIN":[]},"gxComponents":{},"gxOverlapCmp":{},"gxFloatingCmp":{},"gxBackCmp":{},"gxGrids":{}}

6 Resposta

3 Requisição

Json

Json

Framework Javascritpt

8 MontaPágina

1 ExecutaAção

7 Retorno2 Requisição

Page 22: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP

Page 23: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

HTTP

HTTP/1.1 200 OKServer: Microsoft-IIS/5.1Date: Thu, 14 May 2009 03:55:36 GMTX-Powered-By: ASP.NETX-AspNet-Version: 2.0.50727Pragma: no-cacheCache-Control: no-cacheCache-Control: max-age=0Content-Type: text/html; charset=utf-8Content-Length: 385

{"gxProps":{"TEXTBLOCK1":{"Name":"Textblock1","Caption":"Exemplo de página\t<i\>HTML</i\>!"}},"gxHiddens":{"_EventName":"","_EventGridId":"","_EventRowId":"","sCallerURL":"","GX_FocusControl":"","GX_AJAX_KEY":"88EFFF70E5123B83C2E66FC5A3099862","GX_CMP_OBJS":{}},"gxValues":[],"gxMessages":{"MAIN":[]},"gxComponents":{},"gxOverlapCmp":{},"gxFloatingCmp":{},"gxBackCmp":{},"gxGrids":{}}

Page 24: Arquitetura Web Terceiro Encontro GUG Porto Alegre/Brasil

Perguntas