Web 3.0

1.025 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.025
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
40
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web 3.0

  1. 1. O FUTUROPRÓXIMO DA WEB
  2. 2. Sumário:• A evolução das tecnologias web• Como é construída a experiência web• O que vamos poder fazer no futuro
  3. 3. Web 1.0, 2.0, 3.0…
  4. 4. Web 2.0
  5. 5. 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
  6. 6. WEB3.0 ?
  7. 7. Semântica• A semântica (…) refere-se ao estudo do significado, em todos os sentidos do termo.
  8. 8. Rede mais inteligente
  9. 9. 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
  10. 10. georreferenciação
  11. 11. 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>
  12. 12. 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.
  13. 13. 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)
  14. 14. 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
  15. 15. Exemplo… …<body> h1 { <h1>Titulo</h1> color:red; … font-size:24pt; <p> … </p> font-weight:bold; …. }</body> ……
  16. 16. 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
  17. 17. 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
  18. 18. Bibliotecas de JavascriptSelecção e manipulação de elementos da página facilitado
  19. 19. 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>
  20. 20. 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”
  21. 21. 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.
  22. 22. 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
  23. 23. 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”
  24. 24. 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!!!
  25. 25. 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.
  26. 26. Explorem!

×