Como Implementar um Sistema Universitário de Interatividade WEB 3.0
Web 3.0
38
O FUTURO PRÓXIMO DA WEB
-
Upload
miguel-alho -
Category
Technology
-
view
826 -
download
0
description
Apresentação (2ªparte) aos alunos da Escola Padre António Morais da Fonseca (Murtosa) - Cursos Profissionais de Multimédia, durante a semana de informática de 2011, sobre o que aí vem na web - novas tecnologias, novas opções e novas oportunidades. Incluiu breve introdução ao Jquery.
Transcript of Web 3.0
O FUTURO
PRÓXIMO
DA WEB
Sumário:
• A evolução das tecnologias web
• Como é construída a experiência web
• O que vamos poder fazer no futuro
Web 1.0, 2.0, 3.0…
Web 2.0
Web 1.0 vs. Web 2.0
• A Web 1.0 era composta por páginas interligadas
– A hiperligação era a “chave”
• A Web 2.0 está associada à partilha de informação e colaboração
– Blogs, redes sociais, RSS, AJAX
– Dinâmica com a participação dos utilizadores
WEB 3.0 ?
Semântica
• A semântica (…) refere-se ao estudo do significado, em todos os sentidos do termo.
Rede mais inteligente
Mais exemplos do Wolfram Alpha:
• Nota Musical:
http://www.wolframalpha.com/input/?i=F%23++
• 1 metro por segundo http://www.wolframalpha.com/input/?i=1%20meter%20per%20second&lk=2
• Youtube http://www.wolframalpha.com/input/?i=youtube
HTML 5 => Semântica
• Novas tags permitem identificar o significado do conteúdo do documento.
• <article> • <audio> • <datalist> • <footer> • <header> • <hgroup> • <meter> • <nav> • <section> • <summary> • <video>
HTML 5 => Armazenamento no Browser
• Permite melhorar as aplicações web com armazenamento do lado do cliente
– Permite trabalhar offline
– Permite loads mais rápidos
– Permite melhores funcionalidades no trabalho com dados.
Os efeitos gráficos
• Os efeitos gráficos oferecidos pelo Html 5 supreendem:
– SVG, Canvas, WebGL e CSS3 (com 3D)
– Melhor integração de jogos
– Melhores capacidades de apresentação (sem recurso a imagens)
– Melhor capacidade de animação (sem recurso a plugins)
Cascading Style Sheets
• Utilizamos CSS para estilizar a nossa página
• Usar CSS permite separar o estilo do conteúdo
• Uma página pode e deve poder funcionar sem estilos
Exemplo
… <body> <h1>Titulo</h1> … <p> … </p> …. </body> …
… h1 { color:red; font-size:24pt; font-weight:bold; } …
Novo no CSS3
• Fundos melhorados
• Cantos redondos nos elemento
• Disposição multi-coluna
• Melhorias de posicionamento de elementos
• Selectores novos
• Efeitos de texto
• Fontes web
Javascript Evoluído
• Javascript permite adicionar “comportamento” às páginas.
• A evolução trás novas funcionalidades a nível do javascript
• Selectores (por classe) • Web storage • Web SQL Database storage • Cache API • Web Workers • Web Sockets • Notificações • Drag n’ Drop • Georreferenciação • Manipulação de áudio e
vídeo • Canvas
Bibliotecas de Javascript
Selecção e manipulação de elementos da página facilitado
jQuery Basics
(…)
<a href=“” >link</a>
(…)
<script type=“text/javascript>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
• $(document).ready() permite definir o comportamento, só depois de carregar o DOM.
• Neste exemplo todos os links (elemento a) ao serem clicados vão abrir um alerta no browser.
jQuery Basics - Selectores
• O jQuery facilita a escrita de código para seleccionar elementos da nossa árvore de objectos
• “Selectors”
$(“a”) -> selecciona todos os elementos do tipo a (links)
$(“#menu”) -> selecciona o elemento cujo id é “menu” (só um elemento seleccionado)
$(“.red”) -> selecciona todos os elementos com a classe “red”
jQuery Basics - CSS
• Depois de seleccionado, podemos facilmente alterar as características dos elementos.
• “manipulation”, “effects”, “attributes”, “css”
$(“a”).css(“color”: “#ff0000”) -> selecciona todos os elementos do tipo a e muda-lhes a cor. $(“#menu”).hide() -> selecciona o elemento cujo id é “menu” e esconde-o $(“.red”) .fadeOut () -> selecciona todos os elementos com a classe “red” e esconde-os lentamente.
jQuery Basics - Eventos
• Depois de seleccionado, podemos facilmente alterar as características dos elementos.
• “manipulation”, “effects”, “attributes”, “css”
$(“a”).click( function(){…}) -> executa a função escrita quando o elemento a (qualquer) é clicado. $(“#email”).focus(function(){…}) -> executa a função escrita quando o elemento (input) cujo id é “email” e recebe focus. $(“.red”) .live(…) -> os elementos com a classe “red” (mesmo os ainda por incluir na página) recebem o evento indicado
jQuery Basics - AJAX
• Temos também a comunicação com o servidor simplificado.
• “ajax”
$.ajax({ type: "POST", url: "some.php", data: "name=Miguel&location=Murtosa", success: function(msg){ alert( "Data Saved: " + msg ); } });
Suporte:
• Alguns browsers começam a suportar o HTML5 e tecnologias associadas: – IE 9
– Firefox 4
– Chrome 7
– Safari
– Opera 10
• Prevê-se norma completa para 2022!!!
Conclusão
• Como tudo, a web está em evolução, sendo o conceito do 3.0 o próximo passo.
• HTML 5, CSS 3 e Javascript são tecnologias de suporte (estrutura, estilo e comportamento).
• Ainda não está completamente suportado, mas já existem browsers e ferramentas para iniciar a evolução.
Explorem!
