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
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
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!?
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!?
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).
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.
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.
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/
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/
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/
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>
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
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>
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;
}
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ã.
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
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)
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>
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>
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)
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
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...
Motivação HTML5 + CSS3 Actividade Desafio Conclusão
Debate / Discussão
Questões!