HTML/HTTPe a Web

Willian Massami Watanabe

1

Objetivo

Analisar a evolução das tecnologias web

2

Sumário

• HTML e HTTP

• Web 2.0

• HTML5

• Impactos na Engenharia Web

3

HTML e HTTP

4

HTML e HTTP

5

HTML e HTTP

5

HTML e HTTP

5

HTML e HTTP

5

HTML e HTTP

5

HTML e HTTP

5

HTML e HTTP

6

HTML e HTTP

7

HTML e HTTP

WWW

8

HTML e HTTP

WWW

Como isso começou?

9

WWW

HTML e HTTP

10

HTML e HTTP

WWW

Tim Berners Lee

11

HTML e HTTP

Tim Berners Lee

1989 Hoje

HTML

HTTP

Browser

12

HTML e HTTP1989 Hoje

1945: Memory Extension

1960s: Hypertext1974: Internet

13

HTML e HTTP1989 Hoje

1945: Memory Extension

1960s: Hypertext1974: Internet

MemexVannevar Bush

14

HTML e HTTP1989 Hoje

1945: Memory Extension

1960s: Hypertext1974: Internet

Hypertext

15

HTML e HTTP

Tim Berners Lee

1989 Hoje

HTML

HTTP

Browser

16

HTML e HTTP

Tim Berners Lee

1989 Hoje

HTML

HTTP

Browser

Hipertexto

17

HTML e HTTP

HTML

HyperText Markup Language: para organizar o conhecimento

Tim Berners Lee18

HTML e HTTP1989 Hoje

1945: Memory Extension

1960s: Hypertext1974: Internet

Internet

19

HTML e HTTP

Internet

20

HTML e HTTP

Internet

AplicaçãoApresentação

SessãoTransporte

RedeEnlaceFísico

21

HTML e HTTP

Internet

AplicaçãoApresentação

SessãoTransporte

RedeEnlaceFísico

HTTP

22

HTML e HTTP

Tim Berners Lee

1989 Hoje

HTML

HTTP

Browser

Protocolo

23

HTML e HTTP

Tim Berners Lee

1989 Hoje

HTML

HTTP

Browser Interface

24

HTML

HTTP

Browser

25

HTML e HTTP1989 Hoje

HTML

HTTP

Browser

WWW

26

HTML e HTTP

Tim Berners Lee

Por quê?

27

HTML e HTTP

Tim Berners Lee

Frustration

28

HTML e HTTP

Tim Berners Lee

Frustration

Documentos

29

HTML e HTTP

Tim Berners Lee

Frustration

Documentos

30

HTML e HTTP

Tim Berners Lee

Frustration

Documentos

31

HTML e HTTP

Tim Berners Lee

Frustration

Documentos

!= !=

32

HTML e HTTP

Tim Berners Lee

Hipertexto não foi a inovação

33

HTML

HTTP

Browser

34

HTML

HTTP

Browser

Documentos Distribuídos

34

HTML e HTTP

Interoperabilidade

35

HTML e HTTP1989 Hoje

HTML

HTTP

Browser

36

HTML e HTTP1989 Hoje

HTML

HTTP

Browser

HTML

Hoje

JavaScript CSS

37

HTML e HTTP1989 Hoje

HTML

HTTP

Browser

Hoje

HTML

38

HTML e HTTP1989 Hoje

HTML

HTTP

Browser

Hoje

39

HTML e HTTP1989 Hoje

HTML

HTTP

Browser

40

Web 2.0

41

Web 2.0

Web como plataforma

Web humana

42

Web 2.0

Web humana

43

Web 2.0

Web humana

HTMLAutor de conteúdo

Usuários

44

Web 2.0

Web humana

HTML Usuários

Usuário participando da autoria de conteúdo

Redes sociais como Orkut, Twitter, ...45

Web 2.0

Web humana

HTML Usuários

Usabilidade

46

• Melhorar a experiência do usuário

• Satisfação• Eficiência• Eficácia

Web 2.0Usabilidade

47

Web 2.0Usabilidade

Ajax

Estilo arquitetural composto por diferentes idéias e tenologias associadas (Mahemoff, 2006)

Emprego de tecnologias abertas com base em padrões arquiteturais da Internet e da Web

(Garrett, 2005)(Fraternali et al., 2010)48

Web 2.0

Ajax

49

Web 2.0

JavaScript e DHTML

50

Web 2.0

AjaxJavaScript

HTML Events

DOM HTMLDHTML

CSS

HTML

51

Web 2.0

JavaScript

Formatos de comunicação de dados

52

Web 2.0

AjaxJavaScript

HTML Events

DOM HTMLDHTML

CSS

HTMLXML

SVG

JSON

53

Web 2.0

JavaScript

Formatos de comunicação de dados

Protocolo de comunicação HTTP

54

Web 2.0

AjaxJavaScript

HTML Events

DOM HTMLDHTML

CSS

HTMLXML

SVG

JSON

JAVA.netPHP Python

RUBY

55

Web 2.0

Ajax

56

Web 2.0

Web como plataforma

Web humana

57

Web 2.0

Web como plataforma

Web mashups

Reutilização de conteúdo web disponíveis em outras aplicações

58

Web 2.0

Web como plataforma

Web mashups

XML SVG JSON

RSS Schema

RPC RestFulWebservices

Ajax

59

Web 2.0

Web como plataforma

Web mashups

Reutilização

Performance60

HTML5

61

1989 Hoje

HTML

HTTP

Browser

HTML

Hoje

JavaScript CSS

HTML5

62

HTML5

JavaScript

HTML

CSS 3

63

HTML5

• Armazenamento no Cliente (Web SQL Database, App Cache, Web Storage)

• Communicação (Web Sockets, Worker Workers)

• Interação com o Usuário (Notifications, Drag and Drop API)

• Geolocalização

JavaScript

64

HTML5

• Semântica (New tags, Link Relations, Microdata)

• Acessibilidade (ARIA roles)

• Formulário Web 2.0 (Input Fields)

• Multimídia (Audio Tag, Video Tag)

• Desenhos 2D and 3D (Canvas, WebGL, SVG)

HTML

65

HTML5

• Tipografia (Text-shadow, font face)

• Novos elementos visuais (RGBA, Border Radius, Gradient)

• Transição, transformação e animação

CSS 3

66

HTML5

67

Impactos no desenvolvimento

68

Impactos no desenvolvimento

• Vantagens da plataforma web

• Cliente padrão

• Atualizações centralizadas no servidor

• Portabilidade

69

HTML e HTTP

Interoperabilidade

HTML

HTTP

Browser

70

Web 2.0

Web humana

HTML Usuários

Usabilidade

71

Web 2.0

Web como plataforma

Web mashups

Reutilização

Performance72

Impactos no desenvolvimento

HTML

JavaScript CSS

73

Impactos no desenvolvimento

HTML

JavaScript CSS

74

Impactos no desenvolvimento

HTML

JavaScript CSS

Usuários75

Impactos no desenvolvimento

HTML

JavaScript CSS

Usuários76

Impactos no desenvolvimento

HTML

JavaScript CSS

Usuários77

Referências• CHERYL GRIBBLE. History of the Web Beginning at CERN, 2010. Disponível em: http://

www.hitmill.com/internet/web_history.html.

• TIM BERNERS-LEE. Information Management: A Proposal, 1990. Disponível em: http://www.nic.funet.fi/index/FUNET/history/internet/w3c/proposal.html.

• TIM BERNERS-LEE e R. CAILLIAU. World Wide Web: Proposal for a HyperText Project, 1990. Disponível em: http://www.w3.org/Proposal.html.

• DOM CONNOLY. A Little History of the World Wide Web, 2000. Disponível em: http://www.w3.org/History.html.

• J. J. GARRET. Ajax: A new approach to web applications, 2005. Disponível em: http://adaptivepath.com/ideas/essays/archives/000385.php.

• M. MAHEMOFF. Ajax Design Patterns, 2006. O’Reilly Media, Inc.

• P. FRATERNALI, S. COMAI, A. BOZZON E G. T. CARUGHI. Engineering rich internet applications with a model-driven approach, 2010. ACM Transaction on Information Systems.

78

Onde procurar ajuda?

• http://w3schools.com

• http://www.w3.org/TR/REC-html40/

• http://www.w3.org/Protocols/rfc2616/rfc2616.html

• http://www.html5rocks.com/

• http://ajaxpatterns.org/Patterns

79