• Nenhum resultado encontrado

O Futuro da Internet

N/A
N/A
Protected

Academic year: 2022

Share "O Futuro da Internet"

Copied!
23
0
0

Texto

(1)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

O Futuro da Internet

– Web 1.0 ... Web 2.0 ... WEB 3.0 – Web Semântica e as novas normas HTML5 e CSS3

Ricardo André Pereira Freitas rfreitas@fam.ulusiada.pt

Universidade Lusíada – Norte, CampusVila Nova de Famalicão

Portugal

Fevereiro 2017

(2)

1 Motivação Internet vs Web O Futuro da Internet

2 HTML5 + CSS3 HTML5 CSS3

CSS Responsive

3 Actividade Desafio Desafio – Exercício

4 Conclusão

(3)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Internet vs Web O Futuro da Internet

Internet vs Web

Afinal o que é a Web?

Qual a Diferença entre Internet e Web?

O que é possível fazer através da Internet e/ou Web?

Endereço? URL (Uniform Resource Locator)? Hyperlink (hiperligação)?

HTML? PHP? – HTTP? FTP? DNS? TCP/IP? SMTP, POP e IMAP. telnet, ping, tracert... Bases de Dados? Redes Sociais!?

(4)

Internet vs Web

Afinal o que é a Web?

Qual a Diferença entre Internet e Web?

O que é possível fazer através da Internet e/ou Web?

Endereço? URL (Uniform Resource Locator)? Hyperlink (hiperligação)?

HTML? PHP? – HTTP?

FTP? DNS? TCP/IP?

SMTP, POP e IMAP.

telnet, ping, tracert...

Bases de Dados?

Redes Sociais!?

(5)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Internet vs Web O Futuro da Internet

Internet vs Web

Internet?

A Internet é uma enorme rede de redes;

Corresponde às infra-estruturas de rede dispersas universalmente;

Estabelece ligações (através de protocolos e outros) entre milhares de milhões de computadores (máquinas).

World Wide Web ou simplesmenteWeb?

Uma forma de aceder a conteúdos que existem alojados em servidores de páginas Web.

Consiste num modelo de partilha de informação que é construído utilizando a infra-estrutura da Internet.

A Web usa o protocolo HTTP (um dos vários protocolos suportados pela Internet para transmitir dados).

(6)

Entender a História da Internet e Perspetivar o Futuro

Primeira fase (1961-1974) – Inovação

Tinha por objectivos estabelecer ligação entre investigadores de diferentes países.

Segunda fase (1975-1994) – Institucionalização

O departamento de defesa dos EUA proporcionou fundos para expandir a rede no sentido de a tornar num sistema de comunicações militares e civis.

Terceira fase (1995-presente) – Expansão/Comercialização

As agências governamentais encorajaram as empresas privadas a investir na expansão da rede.

A Internet começa a ser utilizada para os mais variados fins, inclusive fins de divulgação/comunicação, comerciais e de apoio às organizações.

(7)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Internet vs Web O Futuro da Internet

Entender a História da Internet/Web e Perspetivar o Futuro

O que é possível fazer através da Internet/Web?

Web 1.0 – Também chamada a primeira versão da Web

A necessidade de programadores/especialistas para criação de páginas Web;

Consulta de páginas e transferência de ficheiros; E-mail...

Mas quem inventou a Web (WWW)?

https://www.w3.org/People/Berners-Lee/

Web 2.0 – Após alguns anos

Criação e distribuição de conteúdos por parte dos utilizadores.

Twitter; Youtube; Facebook; MySpace; Instagram;

Apple iPhone; Google Desktop, Maps, Google Calendar, ...;

Second Life; Wikipedia; etc.

(8)

O Futuro da Internet – Web 3.0

Web 1.0 – Também chamada a primeira versão da Web Consulta de páginas online (partilha de conteúdos)

Web 2.0

Criação e distribuição de conteúdos por parte dos utilizadores.

Web 3.0

Semântica???

a Web Semântica – Semantic Web

http://www.w3.org/standards/semanticweb/

(9)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Internet vs Web O Futuro da Internet

O Futuro da Internet – Web 3.0

Web 3.0 – o significado dos dados a Web Semântica – Semantic Web

http://www.w3.org/standards/semanticweb/

Pesquisar na Web para tentar perceber do que estamos a falar!!!

Uma Web de Dados (informação)vs uma Web Documentos

http://pt.dbpedia.org/ http://www.geonames.org/ http://www.foaf-project.org/ http://schema.org/

(10)

O Futuro da Internet – Web 3.0

Web 3.0 – o significado dos dados a Web Semântica – Semantic Web

http://www.w3.org/standards/semanticweb/

Pesquisar na Web para tentar perceber do que estamos a falar!!!

Uma Web de Dados (informação)vs uma Web Documentos

http://pt.dbpedia.org/

http://www.geonames.org/

http://www.foaf-project.org/

http://schema.org/

(11)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Internet vs Web O Futuro da Internet

O Futuro da Internet – Web 3.0

Semantic Web –http://schema.org/

<div itemscope itemtype ="http://schema.org/Movie">

<h1 itemprop="name">Avatar</h1>

<span>Director: <span itemprop="director">James Cameron</span>

(born August 16, 1954)</span>

<span itemprop="genre">Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>

</div>

Semantic Web – FOAF

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:foaf="http://xmlns.com/foaf/0.1/">

<foaf:Person>

<foaf:name>Ricardo Freitas</foaf:name>

<foaf:mbox rdf:resource="mailto:rfreitas@fam.ulusiada.pt"/>

</foaf:Person>

</rdf:RDF>

(12)

1 Motivação Internet vs Web O Futuro da Internet

2 HTML5 + CSS3 HTML5 CSS3

CSS Responsive

3 Actividade Desafio Desafio – Exercício

4 Conclusão

(13)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

HTML5 CSS3 CSS Responsive

O Futuro da Internet – HTML5

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>

<html>

<head>

<title>Website HTML5</title>

</head>

<body>

<header>

<h1>titulo</h1>

</header>

<nav id="menup">

<ul>

<li>

<a href="#op1">opção 1</a>

</li>

<li>

<a href="#op2">opção 2</a>

</li>

</ul>

</nav>

<main>

<section id="s1">

<article>

<h1>titulo do 1 artigo</h1>

<p>texto do 1 artigo</p>

</article>

</section>

<section id="s2"> ... </section>

</main>

<footer>

<h3>rodape....</h3>

</footer>

</div>

</body>

(14)

O Futuro da Internet – CSS3

#example1 { border-radius: 15px;

} h1 {

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

} div {

box-shadow: 10px 10px 5px grey;

}

/* Alterar as dimensões de um elemento...

div:hover { width: 300px;

}

(15)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

HTML5 CSS3 CSS Responsive

O Futuro da Internet – CSS Responsive

CSS Responsive – Responsive Web Design

Adaptar a página web aos diferentes dispositivos e/ou resoluçoes (desktops , tablets e smartphones, TVs, etc).

Utilizar CSS e HTML para redimensionar, ocultar, encolher, ampliar ou mover o conteúdo para torná-lo visível e adaptável a qualquer ecrã.

(16)

1 Motivação Internet vs Web O Futuro da Internet

2 HTML5 + CSS3 HTML5 CSS3

CSS Responsive

3 Actividade Desafio Desafio – Exercício

4 Conclusão

(17)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Desafio – Exercício

Desafio: Elaborar uma página Web

Elaborar uma página Web: Pessoal (HTML5, CSS3, Web Semântica) Utilizar anotações semânticas (HTML5);

Aplicar um efeito (ex.: transição, border-radius, ...) CSS3;

Definir um pequeno texto descritivo (pessoal, nome, email, ..., músicas, filmes, etc);

Atribuir significado a alguns termos do texto utilizando a web semântica:

http://www.foaf-project.org/

http://schema.org/

http://www.w3.org/RDF/Validator/(foaf validator)

https://developers.google.com/structured-data/testing-tool/

(schema.org validator)

(18)

Semantic Web – FOAF

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"

xmlns:foaf="http://xmlns.com/foaf/0.1/"

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:bibo="http://purl.org/ontology/bibo/"

xmlns:dcterms="http://purl.org/dc/terms/"

xmlns:ical="http://www.w3.org/2002/12/cal/ical#"

xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" >

<foaf:Person rdf:ID="rpf">

<foaf:name xml:lang="en">Ricardo Freitas</foaf:name>

<foaf:givenname>Ricardo</foaf:givenname>

<foaf:family_name>Freitas</foaf:family_name>

<foaf:title>Professor</foaf:title>

<foaf:img rdf:resource="http://www.fam.ulusiada.pt/fotos/Docentes/33001298.jpg"/>

<foaf:nick>rpf</foaf:nick>

<foaf:based_near geo:lat="41.41" geo:long="-8.5225" />

<foaf:mbox rdf:resource="mailto:rfreitas@fam.ulusiada.pt"/>

<foaf:homepage rdf:resource="http://docentes.fam.ulusiada.pt/~d1298/"/>

<foaf:schoolHomepage rdf:resource="http://www.fam.ulusiada.pt/"/>

<foaf:weblog rdf:resource="http://rpfreitas.com/"/>

<foaf:publications rdf:resource="http://docentes.fam.ulusiada.pt/~d1298/investigacao.php"/>

</foaf:Person>

</rdf:RDF>

(19)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Desafio – Exercício

Semantic Web – http://schema.org/

<div itemscope itemtype ="http://schema.org/Person">

<h1 itemprop="name">Ricardo Freitas</h1>

<ul>

<li> Data Nascimento: <span itemprop="birthDate">November 26, 1979</span></li>

<li itemprop="email">rfreitas@fam.ulusiada.pt</li>

<li itemprop="jobtitle">Professor</li>

<li itemprop="memberOf">Universidade Lusiada</li>

</ul>

</div>

(20)

Desafio: Elaborar uma página Web

Elaborar uma página Web: Pessoal (HTML5, CSS3, Web Semântica)

http://rpfreitas.com/htmlsemantic.html (ver/reutilizar o código fonte da página de exemplo) Atribuir significado a alguns termos do texto utilizando a web semântica:

http://www.foaf-project.org/

http://schema.org/

http://www.w3.org/RDF/Validator/(foaf validator)

https://developers.google.com/structured-data/testing-tool/

(schema.org validator)

(21)

Outline

1 Motivação Internet vs Web O Futuro da Internet

2 HTML5 + CSS3 HTML5 CSS3

CSS Responsive

3 Actividade Desafio Desafio – Exercício

4 Conclusão

(22)

O Futuro da Internet: Web Semântica (Semantic Web)

Dotar as páginas de Web de significado (semântica) formal capaz de ser processado por máquinas;

Motores de busca "mais inteligentes"...

Exemplos... (já está a acontecer...):

Quantas freguesias tem famalicão?

Quem é o presidente de Portugal?

Quais as universidades mais antigas do mundo?

Quem é o presidente da América?

Onde fica o maior rio do mundo?

Em que universidades existe o curso de Informática?

O que é uma vela?

Pode a vela andar?

quero colher arroz...

quero sede de...

Quais as pessoas especialistas em Linguagens de anotação?

Quem inventou a Internet e Web?

Quem inventou a Internet e ?

Uma simples palavra (entre várias) altera radicalmente os resultados das pesquisas. Conclusões a retirar...

(23)

Motivação HTML5 + CSS3 Actividade Desafio Conclusão

Debate / Discussão

Questões!

Referências

Documentos relacionados

Saladas: Verde: alface, brócolis, rúcula, agrião, pepino; Branca: repolho, brotos, cebola, couve-flor, batata inglesa; Vermelha: tomate salada, tomate cereja; Roxa: beterraba

Detectar mutações associadas à resistência primária aos ARVs e subtipos do HIV-1 no gene pol de isolados de pacientes HIV+/Aids atendidos no Laboratório Central e de

O transporte florestal é de responsabilidade dos clientes do mercado consumidor; porém, a empresa regra dentro da sua unidade de manejo, através da Norma de

Qualquer alteração da rotina escolar na próxima segunda-feira devido a possíveis protestos será informada no site da escola www.dohms.org.br..

Pour créer et/ou formater la partition sur le CHD3UL, vous pouvez utiliser l'outil de formatage de Windows par défaut, ou le programme Swissknife que vous pourrez trouver sur

O corpo docente do MBA em Marketing, assim como dos outros cursos do MBA USP/Esalq, é composto por professores da Universidade de São Paulo (USP), profissionais de

Foi possível, através deste trabalho, tomando como referência o estudo de caso, observar e relatar a relevância da sistematização da prática da assistência de enfermagem

Adaptação: Apresentação do Presidente do IASAÚDE, IP-RAM na XI Semana Regional de Prevenção da Toxicodependência.. Fonte: Associação Nacional de