1 of 55

SCC0219 – Int. à Programação Web

Adaptado por Dilvan Moreira de conteúdo de

Professores do Intermídia

​

2 of 55

Aplicação: Web

2

3 of 55

WWW

  • sistema de comunicação e informação hipertextual;
  • popularmente utilizado na Internet na qual a comunicação de dados adota o modelo cliente/servidor;
  • clientes WWW (browsers) podem acessar informações hipermídia através de vários protocolos através de um esquema de endereçamento.

3

4 of 55

Histórico da WWW

Tim Berners Lee propõe Hypertext ao CERN (Conseil Européen pour la Recherche Nucléaire):

  • interface consistente sobre todas as plataformas permite acesso a informação nos mais diversos tipos de ambientes computacionais
  • acesso a diversos tipos de documentos através de diversos tipos de protocolos
  • esquema de acesso universal permite qualquer usuário da rede a acessar informação

4

5 of 55

WWW

  • Tim Bernes-Lee criou os primeiros websites (ou sistemas Web)
        • Propósito de divulgação de pesquisa científica
        • servidor de arquivos baseado em URL (Universal Resource Location)
        • Os documentos eram simplesmente apresentados no browser
  • Em 1990, uso comercial da rede

6 of 55

WWW (1991)

  • março: servidor www roda em uma rede de computadores
  • maio: cliente roda nos computadores centrais do CERN
  • inicia divulgação ⇨ em agosto, o servidor e sua interface são divulgados nos Usenet newsgroup alt.hypertext e para a comunidade dos físicos em sua newsletter de dezembro.

6

7 of 55

WWW (1992)

  • interesse e crescimento continuam
  • janeiro: a interface & servidor tornam-se publicamente disponíveis a partir do servidor do CERN e durante todo o ano o trabalho de divulgação continua.

7

8 of 55

WWW (1993)

  • 50 servidores instalados
  • até então a totalidade do desenvolvimento para WWW centrado no CERN
  • primeiras interfaces gráficas para X-Window & Macintosh tornam-se disponíveis
  • Marc Andreesen, aluno de graduação da U. Illinois, trabalhando para o NCSA (National Center for Supercomputing Applications) lidera a equipe que liberou em fevereiro a versão alpha do Mosaic para X-Window

8

9 of 55

10 of 55

WWW (1993)

Mosaic

  • interface gráfica point-and-click para a WWW
  • surpreendente aumento do interesse pela WWW
  • setembro: NCSA libera primeira versão operacional do Mosaic para X-Window, Macintosh e MS Windows
  • dezembro: 500 servers instalados !!

10

11 of 55

WWW (1994)

  • companhias anunciam versões comerciais para seus clientes

Marc Andreesen & colegas deixam NCSA e, com Jim Clark (Silicon Graphics) fundam a Netscape Co. (http://www.netscape.com).

  • maio: 1a conferência internacional sobre WWW Genebra
  • junho: 1.500 servers !!!
  • julho: fundada pelo MIT + CERN a WWW Organization para direcionamento estável (depois chamado WWW Consortium ou W3C)

11

12 of 55

WWW (1995)

  • desenvolvimento marcado por modificações técnicas & comercialização
  • Netscape Navigator (Mozilla) inclui mais extensões da linguagem HTML
  • questões de segurança e transações comerciais tornam-se centro das atenções
  • maio: 15.000 servidores !!!
  • empresas e provedores de serviço entram para a WWW
  • lançados jornais e dezenas de livros sobre a web

12

13 of 55

Arquitetura

13

14 of 55

A Era do Hipertexto

  • ​
    • Transferência de documentos HTML multimídia (estáticos)
    • Browser : apresentador (interpretador) de páginas HTML

Browser

+

HTML

PC

Internet

Documentos

HTML

Servidor Web

(Web Server)

HTTP

HTTP

HTTP

Cliente

Servidor

Browser

+

HTML

MAC

Arquiteturas Web

15 of 55

A Era Interativa

​

    • Aplicação Web
    • No cliente: funcionalidades de interação no navegador
      • Formulários
        • para construir interfaces de interação com a aplicação (botões, caixas de texto, caixas de seleção, ...)
      • Scripts (JavaScript)
        • para controlar eventos sobre os elementos do formulário
      • Programas cliente
        • Applets Java – processamento de dados no cliente
        • No servidor: documentos HTML estáticos + páginas dinâmicas
        • PHP, ASP, CGI, JSP, Servlet

Arquiteturas Web

16 of 55

  • Interação Cliente/Servidor (criação de aplicações web)
  • Arquitetura 3-Tier (3 camadas) – interativa

Browser

+

HTML

+

Forms e Scripts

Clientes

Internet

Documentos

HTML

Servidor Web

(Web Server)

HTTP

HTTP

CGI

PHP

ASP

Cliente

Servidor

Módulos

Acoplados ao servidor

Base

de Dados

Sistema

Gerenciador

de Base

de Dados

Arquiteturas Web

17 of 55

  • Interação cliente-servidor - AJAX
  • Single-page Application

Browser

+

HTML

+

JavaScript TypeScript React.js Angular.js JSON

Clientes

Internet

Documentos

HTML

Servidor Web

(Web Server)

HTTP

HTTP

Cliente

Servidores

Base

de Dados

Arquiteturas Web Atual

Servidor Web

(Web Services)

Base

de Dados

Base

de Dados

Servidor Web

(Web Services)

18 of 55

História do HTML

18

19 of 55

Documento Web

​

  • escrito em Hypertext Markup Language (HTML), uma aplicação de SGML (Standard Generalised Markup Language - http://www.sgmlopen.org/)
  • assim, HTML demarca a forma de apresentação da informação
  • objetivo de SGML ⇨ permitir a formatação de informação de modo que sistemas de divulgação/publicação possam partilhar essas informações com facilidade

19

20 of 55

A Markup Language...

  • W3C: World Wide Web Consortium
    • http://www.w3.org
  • Extensible Markup Language - XML.
    • W3C Recommendation, 10 February 1998
      • http://www.w3.org/TR/1998/REC-xml-19980210
    • W3C Recommendation, 06 Outubro 2000 (Segunda Edição)
      • http://www.w3.org/TR/REC-xml

Quem?

Quando?

Onde?

Como?

Por que?

21 of 55

22 of 55

HTML

  • HyperText Markup Language
  • Simples e flexível
  • Simples? Conjunto limitado de marcações

<TITLE> ... </TITLE>

<H1> ...</H1>

<A>...</A>

<IMG SRC=“...” ALT=“...”>

<HR>

  • Flexível?
    • Conteúdo representado juntamente com sua estrutura e forma de apresentação

​

23 of 55

Documento da Web?

  • Documentos em geral possuem três dimensões:
    • Conteúdo
    • Estrutura
    • Apresentação

​

  • Um Documento HTML...

24 of 55

Conteúdo, estrutura e apresentação

25 of 55

Conteúdo, estrutura e apresentação

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>A Beginner's Guide to URLs</TITLE>

<META content="text/html; charset=windows-1252" http-equiv=Content-Type>

<META content="MSHTML 5.00.2314.1000" name=GENERATOR></HEAD>

<BODY>

<H1>A Beginner's Guide to URLs</H1>

What is a URL? A URL is a <B>Uniform Resource Locator</B>. Think of it as a networked extension of the standard <I>filename</I> concept: not only can you point to a file in a directory, but that file and that directory can exist on any machine on the network, can be served via any of several different methods, and might not even be something as simple as a file: URLs can also point to queries, documents stored deep within databases, the results of a <I>finger</I> or <I>archie</I> command, or whatever.

​

26 of 55

De onde veio HTML?

  • HTML foi definida com SGML [ISO 1986!]

http://www.iso.ch/cate/d16387.html

ISO 8879:1986: Information processing -- Text and office systems -- Standard Generalized Markup Language (SGML)

  • SGML permite definir linguagens específicas!
  • Exemplo: documento SGML para um documento “demo”

​

​

​

<!doctype demo [

<!element demo o o (p*)>

<!element p - o (#pcdata)>

]>

<p>

The first paragraph.

<p>

The second paragraph.

27 of 55

Mas...

​

​

​

  • E as limitações de HTML4?

28 of 55

Não é possível estender HTML4

​

  • NÃO permite que autores ou comunidades criem seus próprios conjuntos de marcas, definidos para melhor caracterizar os documentos de interesse.

​

  • NÃO permite que aplicações possam associar significado a dados e campos do documento e viabilizar o processamento automático dos documentos!

29 of 55

SGML na Web...

​

  • Por que não usar SGML na Web?
    • Maior poder de expressão e flexibilidade que HTML ☺
    • Autoria mais complexa que HTML 😐
    • Documentos exigem um processamento por demais elaborado para ser realizado sob demanda na Web ☹

​

  • Impasse:
    • SGML - poderosa, porém cara ... 😐
    • HTML - prática, porém limitada... 😐

30 of 55

HTML5 and Designing a Rich Internet Experience

Garth Colasurdo

HSLIC Web and Applications Group

gcolasurdo@salud.unm.edu

31 of 55

In This Presentation

  • HTML5 ≈ HTML 5 + CSS 3 + JavaScript
  • Rich Internet Applications (RIA)
  • HTML5 x 5
  • Caution and Progress
  • Example and Reference Sites

32 of 55

33 of 55

HTML5 ≈ HTML 5 + CSS 3 + JavaScript

  • HTML5 is a suite of tools for:
    • Markup (HTML 5)
    • Presentation (CSS 3)
    • Interaction (DOM, Ajax, APIs)
  • Brought on by the evolving use of the web

​

http://slides.html5rocks.com/

34 of 55

A Rough History of Web Standards

91-92

93-94

95-96

97-98

99-00

01-02

03-04

05-06

07-08

09-10

11-12

13-14

HTML 1

HTML 2

​

HTML 4

XHTML 1

​

​

​

​

HTML 5

​

​

​

​

CSS 1

CSS 2

​

T-less D

Web 2.0

​

​

CSS3

​

​

​

​

JS

ECMA, DOM

DOM 2

​

​

Ajax

​

DOM, APIs

​

​

2004

WHATWG started

2008

W3C Working Draft

2012 (2010)

W3C Candidate Rec

2022

W3C Rec

1996 – CSS 1

W3C Rec

1998 – CSS 2

W3C Rec

1999 – CSS 3

Proposed

2005 – CSS 2.1

W3C Candidate Rec

2001 – CSS 3

W3C Working Draft

HTML 5

CSS

35 of 55

Rich Internet Applications (RIA)

  • Space between the internet and the desktop
  • Apps that look good and behave well
  • Adobe Air/Flash, Java, Silverlight, Gears
  • Availability
    • Anywhere a web browser is available
    • As a desktop widget or application
    • Part of a mobile application store

36 of 55

RIA Examples

37 of 55

5 HTML Enhancements

  • HTML
  • Forms
  • CSS
  • Offline applications
  • Local storage

​

38 of 55

HTML Extended

  • Document Flow: div, section, article, nav, aside, header, footer
  • Audio, Video and Embed
  • Canvas: paths, gradients, image manipulation, events
  • Microdata for semantics and enhanced search engine results (Google Rich Snippets)

39 of 55

HTML

Header

Navigation

Aside

Footer

Section

​

​

​

​

​

​

​

​

​

​

​

Article

​

Footer

Article

​

Footer

Article

​

Footer

Figure

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Image, Video, Quote, Table, etc…

Legend

40 of 55

Canvas

<canvas id=“canvas” width=“150” height=“150”>

</canvas>

​

function draw() {

var canvas = document.getElementById(“canvas”);

if (canvas.getContext) {

var ctx = canvas.getContext(“2d”);

ctx.fillStyle = “rgb(200,0,0)”;

ctx.fillRect (10,10,55,50);

​

ctx.fillStyle = “rgb(0,0,200)”;

ctx.fillRect (30,30,55,50);

}

}

41 of 55

Form Enhancements

  • Placeholder text
  • Specific text input: email, URL, number, search
  • Slider
  • Date picker
  • User Agent validation

42 of 55

CSS Effects

  • Rounded corners
  • Gradients
  • Box and text shadows
  • Fonts
  • Transparencies
  • Multiple background images and border images
  • Multiple columns and grid layout
  • Box sizing
  • Stroke and outlines
  • Animation, movement and rotation
  • Improved selectors

43 of 55

CSS Effect Example

.amazing {

border: 1px solid blue;

color: red;

background-color: gold;

​

-webkit-border-radius: 40px;

-moz-border-radius: 40px;

border-radius: 40px;

​

-webkit-box-shadow: 8px 8px 6px #474747;

-moz-box-shadow: 8px 8px 6px #474747;

box-shadow: 8px 8px 6px #474747;

​

text-shadow: 8px 8px 2px #595959;

filter: dropshadow(color=#595959, offx=8, offy=8);

}

Amazing CSS Effects

http://css3generator.com/

44 of 55

CSS Timelines

http://mattbango.com/notebook/web-development/pure-css-timeline/

45 of 55

Programmer Tools

  • Offline Applications
  • Storage
  • Communication
    • Web Workers
    • Web Sockets
  • Desktop experience
    • Drag and Drop
    • Notifications
  • Geolocation

46 of 55

Offline Applications

  • Service Workers

​

​

47 of 55

Local Storage

  • Beyond cookies- local storage
    • Manipulated by JavaScript
    • Persistent
    • 5MB storage per “origin”
    • Secure (no communication out of the browser)
  • Session storage
    • Lasts as long as the browser is open
    • Each page and tab is a new session
  • Browser based SQLite or IndexedDB

48 of 55

Local Storage

  • Web storage�window.localStorage[‘value’] = ‘Save this!’;
  • Session storage�sessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’);�alert(“Hello ” + sessionStorage.fullname);
  • Database storage�var database = openDatabase(“Database Name”, “Database Version”);�database.executeSql(“SELECT * FROM test”, function(result1) {� …�});

​

http://dev.w3.org/html5/webstorage/

49 of 55

User Agent Storage

50 of 55

Cautions

  • Browser implementation is fragmented
  • Standards are in development
    • HTML Candidate Recommendation is scheduled for 2012
    • CSS3 is in multiple drafts and proposals
    • ECMA-262 (edition 3) (or JavaScript 1.5)
  • New markup and architecture design

51 of 55

Progress

  • Multiple support levels
    • HTML editors
    • CSS editors and frameworks
    • JavaScript libraries and frameworks
  • Astounding user agent development
    • JavaScript engines
    • Rendering engines
    • Device awareness
    • Widget adoption
    • Robust vendor competition and cooperation
  • Continue with progressive enhancement/graceful failure methods

52 of 55

Advocacy Sites

​

53 of 55

Demos and Experiments

​

54 of 55

Developer Reference Sites

55 of 55

Por enquanto é isso!!

​

​

​

​

Esses slides têm sido elaborados juntamente com os profs. do grupo de pesquisa “Sistemas Web e Multimídia Interativos”