Evolucao Da Web

Laboratrio de Informtica VI - Projecto de Aplicaes Web
A Evoluo da Web
21-Mar-16
@ Maxa === email: maxa@up.ac.mz ou

mando.maxa@gmail.com
Laboratrio de Informtica VI Projecto de Aplicaes Web
Diferenas entre Internet e Web

Internet um sistema global de redes de computadores interligadas que
utilizam um conjunto prprio de protocolos (Internet Protocol
Suite ouTCP/IP) com o propsito de servir progressivamente utilizadores
em todo o mundo. uma rede de vrias outras redes, que consiste de
milhes de empresas privadas, pblicas, acadmicas e de governo, com
alcance local e global e que est ligada por uma ampla variedade de
tecnologias de rede eletrnica, sem fio e pticas (Wikipdia).
Web - sistema hipertextual que opera atravs da Internet (Wikipdia).
21-Mar-16
@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com
World Wide Web

Projeto criado pela CERN para compartilhamento de textos
cientficos.
W3C - World Wide Web Consorcium (www.w3c.org)

Fundada por Tim Berners Lee, em 1994 com a misso de
conduzir a WWW ao alcance de todo seu pontencial.
Possui diversos comits que estudam as tecnologias existentes
e criam padres de recomendao para uso das mesmas;
21-Mar-16
O advento da Web
Problema: redundncia
Dados isolados e
armazenados
em arquivos
21-Mar-16
O advento da Web
Soluo: Bases de dados
21-Mar-16
Com o tempo as
bases de dados
organizam-se em
grupos, originando
as bases de dados
distribudas e as
federaes
de
bases de dados.
O advento da Web
Bases de dados distribudas
E. Com o objective de
permitir o
compartilhamento,
surge na dcada de 90
a World Wide Web.
21-Mar-16
World Wide Web

1991 - Primeiro site criado na web
http://info.cern.ch/hypertext/WWW/TheProject.html
1993 - Criao do navegador MOSAIC;
1994, 1995 - Yahoo, Ebay, Internet Explorer, Compras online
(timidamente);
1996 - Hotmail, UOl;
1997-1999 - Google, Conexo ADSL, mais de 1 milho de sites;
2000 Crescimento de compras on-line.
21-Mar-16
Web 1.0
O primeiro conceito surgiu em
1990, com Tim Berners Lee;
Trata-se de uma juno de
trs
tecnologias
simples,
nomeadamente HTML, HTTP
e HYPERLINKS;
Web meramente informativa
21-Mar-16
Web 2.0
O termo surgiu em meados
de 2004, com Dale
Dougherty;
Web bi-direcional;
Mudana em como
consumidores e
desenvolvedores vem a
web;
21-Mar-16
Web 2.0 Evoluo

A web 2.0 cresceu muito e rapidamente...
Mais de 100 milhes de sites ativos;
Mais de 1 bilho de pessoas acessam a internet;
Transio de Hiperlinkagem de documentos para Contedo
dinmico, gerado pelos usurios.
Servios da Web 2.0
21-Mar-16
10
Web 2.0 Tecnologias utilizadas

AJAX;
Adobe Flex;
Google Toolkit.
Web 1.0 x Web 2.0
21-Mar-16
Web 1.0
Web 2.0
Leitura
Leitura/Escrita
Empresas
Comunidade
Cliente/Servidor
Peer to Peer
Dados proprietrios
Dados compartilhados
Formulrios Web
Aplicaes Web
11
Web 2.0 Tecnologias utilizadas

Resultado....
21-Mar-16
12
Web 2.0 Volume de dados
21-Mar-16
13
Web 2.0
A web baseada no HTML:
O HTML define estrutura, ou sintaxe do contedo APENAS;
E a SEMNTICA!??
21-Mar-16
14
Da web da estrutura, ou
sintaxe do contedo
apenas Web da
semntica
21-Mar-16
15
Web 3.0 ou Web semntica

A Web Semntica uma extenso da Web atual onde a informao ter
um significado bem definido, permitindo que computadores e pessoas
trabalhem melhor em cooperao.
Tim Berners-Lee e Eric Miller
O objetivo da Web Semntica melhorar as potencialidades da web
atravs da criao de padres e ferramentas que permitam atribuir
significado ao contedo das pginas web e, tambm possibilitar que
utilizadores e programas possam trabalhar de forma cooperativa.
21-Mar-16
16
Escopo da Web semntica
21-Mar-16
17
Objectivos da Web 3.0

Tornar a web legvel por mquina e no apenas por seres humanos;
Que a semntica da informao seja disponvel de maneira estruturada
e explcita;
Permitir buscas mais complexas e eficazes;
Transformar a web de documentos em uma web de dados.
21-Mar-16
18
Arquitectura da Web 3.0
21-Mar-16
19
21-Mar-16
20

A camada denomindada Unicode / URI fornece a interoperabilidade em
relao codificao de caracteres e ao endereamento e nomeao de
recursos da Web Semntica.
O Unicode um padro de codificao para fornecer uma representao
numrica universal e sem ambiguidade para cada caractere de maneira
independente da plataforma de software e do idioma. O URI um padro
para identificar um recurso fsico ou abstrato de maneira nica e global.
O URI - Uniform Resource Identifier um padro para identificar um
recurso fsico ou abstrato de maneira nica e global.
21-Mar-16
21

Um identificador URL Uniform Resource Locator um caso especfico de
URI, formado pela concatenao de sequncias de caracteres para
identificar o protocolo de acesso ao recurso, o endereo da mquina na
qual o recurso pode ser encontrado e o prprio recurso em questo.
A camada denominada de XML / Namespace / XML Schema fornece a
interoperabilidade em relao sintaxe de descrio de recursos da Web
Semntica.
A XML - Extensible Markup Language uma linguagem para
representao sinttica de recursos de maneira independente de
plataforma, ou seja, possibilita a estruturao dos dados por meio da
definio de elementos e atributos
21-Mar-16
22

A XML Schema uma linguagem de definio para descrever uma
gramtica para uma classe de documentos XML. A linguagem XML Schema
fornece elementos para descrever a estrutura e restringir o contedo de
documentos XML. Isto , o XML Schema define esquemas, regras de
validao e restries para documentos XML.
Os Namespaces fornecem um mtodo para qualificar os nomes de
elementos e atributos, utilizados nos documentos XML, atravs da
associao destes nomes com os espaos de nomes identificados por
referncias de URI. Ou seja, possibilita saber onde um elemento que ser
utilizado, foi definido.
21-Mar-16
23

Eles so teis para distinguir entre dois elementos definidos com um
mesmo nome, mas que pertencem a esquemas diferentes. Alem disso,
um documento pode associar elementos previamente definidos sua
estrutura, desde que utilize referencias aos esquemas que definem esses
elementos.
To de continued ....
21-Mar-16
24
21-Mar-16
25
HTML 5 Elementos semnticos

Semntica o estudo do significado das palavras e frases em uma
linguagem. Ento, elementos semnticos so elemntos com significado.
O que so elemtnos semnticos?
Um elemento semntico descreve claramente o seu significado, tanto para
o navegador, quanto para o desenvolvedor.
Exemplos de elementos no semnticos: <div> e <span> - No dizem nada
sobre seu contedo.
Exemplos de elementos semnticos: <form>, <table> e <img> - definem
claramente o seu contedo.
21-Mar-16
26
HTML 5 Novos elementos semnticos

Muitos web sites contm cdigos HTML como: <div id="nav"> <div
class="header"> <div id="footer"> para indicar navegao, cabealho e
rodap.
O HTML5 oferece novos elementos semnticos com o objectivo de definir
diversas partes da pgina.
<article>, <aside>, <details>, <figcaption>,

<figure>, <footer>, <header>, <main>, <mark>,
<nav>, <section>, <summary>, <time>
21-Mar-16
27
Fonte: http://www.uxdesign.blog.br
21-Mar-16
28
21-Mar-16
29
HTML5 - Estrutura
21-Mar-16
30
HTML5 - Estrutura
21-Mar-16
31
HTML 5 - Estrutura
O Doctype
<!DOCTYPE html>
No nenhuma tag do HTML, mas sim, uma instruo para que o browser
informe-se sobre que verso de cdigo a marcao foi feita.
O element HTML
O cdigo HTML um conjunto de elementos em forma de rvore onde
alguns elementos so filhos de outros. O principal elemento dessa grande
rvore a tag HTML.
21-Mar-16
32
HTML 5 - Estrutura
<html lang=pt-br>
Instrue aos user-agents sobre qual a linguagem principal do documento.
Nota: O atributo LANG no exclusivo ao elemento HTML, ele pode ser
utilizado em qualquer outro elemento para indicar o idioma do texto
representado.
HEAD
Contm a parte inteligente da pgina: os metadados (informaes sobre a
pgina e o contedo nela publicado.
21-Mar-16
33
HTML 5 - Estrutura
Metatag Charset
<meta charset=utf-8>
Indica a tabela de caractres que a pgina utiliza.
Tag LINK
Indica fontes externas que sero usadas no documento.
<link rel=stylesheet type=text/css href=style.css>
21-Mar-16
34
HTML 5 Novos elementos

Metatag Charset
<meta charset=utf-8>
Indica a tabela de caractres que a pgina utiliza.
Tag LINK
Indica fontes externas que sero usadas no documento.
<link rel=stylesheet type=text/css href=style.css>
21-Mar-16
35

HTML5 offers new elements for better document structure:
21-Mar-16
36
21-Mar-16
37
Fonte: w3schools.com
21-Mar-16
38
HTML 5 Novos elementos - formulrios
21-Mar-16
39
HTML 5 Novos elementos input types

Input types
Color
date
Datetime
datetime-local
Email
month
Number
range
Search
tel
Time
url
week
21-Mar-16
Input types
Autocomplete
autofocus
Form
formaction
Formenctype
formmethod
Formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
Required
step
40
HTML 5 Novos elementos Attribute Syntax
21-Mar-16
41
HTML 5 Graphics
21-Mar-16
42
HTML 5 Novos elementos Media
21-Mar-16
43

Evolucao Da Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Evolucao Da Web

Enviado por

Direitos autorais:

Formatos disponíveis

Laboratrio de Informtica VI - Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou

Laboratrio de Informtica VI Projecto de Aplicaes Web

Diferenas entre Internet e Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

World Wide Web

W3C - World Wide Web Consorcium (www.w3c.org)

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

World Wide Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Web 2.0 Evoluo

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Web 2.0 Tecnologias utilizadas

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Web 2.0 Tecnologias utilizadas

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Web 2.0 Volume de dados

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Web 3.0 ou Web semntica

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Escopo da Web semntica

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Objectivos da Web 3.0

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Arquitectura da Web 3.0

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Arquitectura da Web 3.0

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Arquitectura da Web 3.0

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Arquitectura da Web 3.0

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Arquitectura da Web 3.0

@ Maxa === email: maxa@up.ac.mz ou mando.maxa@gmail.com

Laboratrio de Informtica VI Projecto de Aplicaes Web

Arquitectura da Web 3.0