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 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

Semântica
• A semântica (…) refere-se ao estudo
do significado, em todos os sentidos do termo.

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%20m
eter%20per%20second&lk=2

• Youtube
http://www.wolframalpha.com/input/?i=youtube

HTML 5 => Semântica
• Novas tags permitem • <article>
identificar o • <audio>
• <datalist>
significado do • <footer>
conteúdo do • <header>
documento. • <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 {
<h1>Titulo</h1> color:red;
… font-size:24pt;
<p> … </p> font-weight:bold;
…. }
</body> …
…

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 • Selectores (por classe)
“comportamento” às • Web storage
páginas. • Web SQL Database storage
• Cache API
• A evolução trás novas • Web Workers
funcionalidades a nível do
javascript • 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
• $(document).ready() (…)
permite definir o <a href=“” >link</a>
comportamento, só (…)
depois de carregar o
DOM. <script type=“text/javascript>
$(document).ready(function() {
• Neste exemplo todos $("a").click(function() {
os links (elemento a) alert("Hello world!");
ao serem clicados vão });
abrir um alerta no });
browser. </script>

jQuery Basics - Selectores
• O jQuery facilita a $(“a”) -> selecciona todos os
escrita de código para elementos do tipo a (links)
seleccionar
elementos da nossa $(“#menu”) -> selecciona o
árvore de objectos elemento cujo id é “menu” (só
um elemento seleccionado)
• “Selectors”
$(“.red”) -> selecciona todos os
elementos com a classe “red”

jQuery Basics - CSS
• Depois de $(“a”).css(“color”: “#ff0000”) ->
seleccionado, selecciona todos os elementos
podemos do tipo a e muda-lhes a cor.
facilmente alterar
as características $(“#menu”).hide() -> selecciona
dos elementos. o elemento cujo id é “menu” e
esconde-o
• “manipulation”,
“effects”, $(“.red”) .fadeOut () ->
“attributes”, “css” selecciona todos os elementos
com a classe “red” e esconde-os
lentamente.

jQuery Basics - Eventos
• Depois de $(“a”).click( function(){…}) ->
seleccionado, executa a função escrita quando o
podemos facilmente elemento a (qualquer) é clicado.
alterar as
características dos $(“#email”).focus(function(){…}) ->
elementos. executa a função escrita quando o
elemento (input) cujo id é “email” e
• “manipulation”, recebe focus.
“effects”,
“attributes”, “css” $(“.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 $.ajax({
type: "POST",
a comunicação url: "some.php",
com o servidor data: "name=Miguel&location=Murtosa",
success: function(msg){
simplificado. alert( "Data Saved: " + msg );
}
});
• “ajax”

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.

O Futuro Próximo da Web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a O Futuro Próximo da Web

Semelhante a O Futuro Próximo da Web (20)

Mais de Miguel Alho

Mais de Miguel Alho (7)

O Futuro Próximo da Web