Transferir como PDF, PPTX
Carregado porMiguel Alho
Web 3.0
O documento discute a evolução da web para a Web 3.0, com foco nas novas tecnologias como HTML5, CSS3 e Javascript que permitem experiências web mais ricas e inteligentes, incluindo semântica melhorada, armazenamento no navegador, efeitos gráficos avançados e novas APIs. Essas tecnologias ainda não têm suporte completo, mas já permitem iniciar a construção da próxima geração da web.
Web 3.0
- 1.
- 2. Sumário: • A evoluçãodas tecnologias web • Como é construída a experiência web • O que vamos poder fazer no futuro
- 3. Web 1.0, 2.0,3.0…
- 4.
- 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
- 7.
- 9. Semântica • A semântica(…) refere-se ao estudo do significado, em todos os sentidos do termo.
- 10.
- 11. Mais exemplos doWolfram 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
- 12.
- 14. 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>
- 16. 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.
- 22. 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)
- 26. 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
- 27. Exemplo … … <body> h1 { <h1>Titulo</h1> color:red; … font-size:24pt; <p> … </p> font-weight:bold; …. } </body> … …
- 28. 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
- 29. Javascript Evoluído • Javascriptpermite 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
- 30. Bibliotecas de Javascript Selecçãoe manipulação de elementos da página facilitado
- 31. 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>
- 32. 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”
- 33. 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.
- 34. 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
- 35. 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”
- 36. Suporte: • Alguns browserscomeçam a suportar o HTML5 e tecnologias associadas: – IE 9 – Firefox 4 – Chrome 7 – Safari – Opera 10 • Prevê-se norma completa para 2022!!!
- 37. 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.
- 38.