O FUTUROPRÓ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á asso...
WEB3.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://w...
georreferenciação
HTML 5 => Semântica• Novas tags permitem   •   <article>  identificar o         •   <audio>                        •   <da...
HTML 5 => Armazenamento no              Browser• Permite melhorar as aplicações web com  armazenamento do lado do cliente ...
Os efeitos gráficos• Os efeitos gráficos oferecidos pelo Html 5  supreendem:  – SVG, Canvas, WebGL e CSS3 (com 3D)  – Melh...
Cascading Style Sheets• Utilizamos CSS para estilizar a nossa página• Usar CSS permite separar o estilo do conteúdo• Uma p...
Exemplo…                            …<body>                       h1 {       <h1>Titulo</h1>              color:red;      ...
Novo no CSS3•   Fundos melhorados•   Cantos redondos nos elemento•   Disposição multi-coluna•   Melhorias de posicionament...
Javascript Evoluído• Javascript permite adicionar   • Selectores (por classe)  “comportamento” às             • Web storag...
Bibliotecas de JavascriptSelecção e manipulação de elementos da página facilitado
jQuery Basics• $(document).ready()     (…)  permite definir o       <a href=“” >link</a>  comportamento, só       (…)  dep...
jQuery Basics - Selectores• O jQuery facilita a      $(“a”) -> selecciona todos os  escrita de código para   elementos do ...
jQuery Basics - CSS• Depois de             $(“a”).css(“color”: “#ff0000”) ->  seleccionado,         selecciona todos os el...
jQuery Basics - Eventos• Depois de             $(“a”).click( function(){…}) ->  seleccionado,         executa a função esc...
jQuery Basics - AJAX• Temos também     $.ajax({                        type: "POST",  a comunicação         url: "some.php...
Suporte:• Alguns browsers começam a suportar o  HTML5 e tecnologias associadas:  – IE 9  – Firefox 4  – Chrome 7  – Safari...
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 te...
Explorem!
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Web 3.0
Próximos SlideShares
Carregando em…5
×

Web 3.0

1.096 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.096
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
44
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!

×