HTML5 e o futuro da web - Campus Party 2011

2.905 visualizações

Publicada em

Palestra apresentada no Campus Party 2011. Sobre HTML5 + JS + CSS3

Publicada em: Educação
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.905
No SlideShare
0
A partir de incorporações
0
Número de incorporações
152
Ações
Compartilhamentos
0
Downloads
35
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5 e o futuro da web - Campus Party 2011

  1. 1. E o futuro da Web Maxwell Dayvson - @dayvson dayvson@gmail.com maxwell.silva@corp.terra.com.brFriday, January 21, 2011
  2. 2. <!DOCTYPE html>Friday, January 21, 2011
  3. 3. HTML5 - Como anda o suporte do seu browser? O que foi avaliado nos testes Parsing rules Forms Communication Canvas Geolocation Web applications Audio WebGL Microdata Video Workers Files Elements Storage Local devices User interactionFriday, January 21, 2011
  4. 4. HTML5 - Como anda o suporte do seu browser? pontuação máxima 300 pontos 96 pontos 177 pontos 207 pontos 208 pontos 231 pontos 242 pontos Esses resultados são das últimas versões dos browsers incluindo versões betas http://html5test.comFriday, January 21, 2011
  5. 5. HTML5Friday, January 21, 2011
  6. 6. CSS3Friday, January 21, 2011
  7. 7. JSFriday, January 21, 2011
  8. 8. HTML5 + CSS3 + JAVASCRIPT = APLICAÇÕES INCRÍVEISFriday, January 21, 2011
  9. 9. O que já temos online!Friday, January 21, 2011
  10. 10. O que já temos online!Friday, January 21, 2011
  11. 11. O que já temos online!Friday, January 21, 2011
  12. 12. O que já temos online!Friday, January 21, 2011
  13. 13. O que já temos online!Friday, January 21, 2011
  14. 14. O que já temos online!Friday, January 21, 2011
  15. 15. O que já temos online!Friday, January 21, 2011
  16. 16. O que já temos online!Friday, January 21, 2011
  17. 17. O que já temos online!Friday, January 21, 2011
  18. 18. O que já temos online!Friday, January 21, 2011
  19. 19. O que já temos online!Friday, January 21, 2011
  20. 20. Nova era de <video> da Web Codec WarFriday, January 21, 2011
  21. 21. <VIDEO> - Nova experiência em consumo de vídeos Containers de vídeos: MP4,OGG,FLV, WEBM Codecs de vídeos: H.264, VP8, Theora, VP6 Codecs de aúdio: AAC, MP3, VorbisFriday, January 21, 2011
  22. 22. <VIDEO> - Nova experiência em consumo de vídeos Combinações de containers e codecs: MP4 => H.264 + AAC/MP3 WEBM => VP8 + Vorbis OGG => Theora + VorbisFriday, January 21, 2011
  23. 23. <VIDEO> - Nova experiência em consumo de vídeos MP4 (H.264 + AAC) MP4 (H.264 + AAC) e demais formato do QuickTime. OGG (Theora + Vorbis), WebM OGG (Theora + Vorbis), MP4 (H.264 + AAC), WebM OGG (Theora + Vorbis), WebM OGG (Theora + Vorbis), WebMFriday, January 21, 2011
  24. 24. <VIDEO> - Nova experiência em consumo de vídeos Google decidiu remover o suporte a H.264 nas próximas versões do Chrome - Então para quem usa tag <video> não será possível exibir vídeos em H.264Friday, January 21, 2011
  25. 25. <VIDEO> - Nova experiência em consumo de vídeos Google anunciou que vai criar plugins do WebM para:Friday, January 21, 2011
  26. 26. <VIDEO> - Nova experiência em consumo de vídeos Utilizando a tag <video> <video poster="/path/seuvideo-poster.png" preload="preload" controls="controls"> <source src="/path/seuvideo.mp4" /> <source src="/path/seuvideo.webm" /> <source src="/path/seuvideo.ogg" /> </video> Na tag vídeo podemos ter os seguintes atributos: autoplay, controls, height, width, loop, preload, src e poster. <source> aceita type e codecs É possível capturar e controlar por javascript eventos como: ended, start, playing entre outros.Friday, January 21, 2011
  27. 27. <input> - Novos forms types Alguns dos novos types para os inputs <input type="email" value="dayvson@gmail.com" /> <input type="number" step="1" min="-5" max="10" value="0" /> <input type="range" min="20" max="100" value="40" /> <input type="date" min="2011-01-01" max="2011-02-01" value="2010-01-21"/> <input type="search" results="10" placeholder="Procurar..." /> <input type="text" required />Friday, January 21, 2011
  28. 28. Friday, January 21, 2011
  29. 29. Geolocation API Com essa nova API é possível obter as coordenadas do usuário de maneira muito simples utilizando Javascript if (navigator.geolocation) {   navigator.geolocation.getCurrentPosition(onGeolocationSuccess, onGeolocationError); } else {   alert(GeoLocation não suportado); } function onGeolocationSuccess(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude; alert( latitude + || + longitude); } function onGeolocationError(msg){ alert(Erro ao tentar pegar sua localização); }Friday, January 21, 2011
  30. 30. Geolocation API E marcar sua posição no googlemaps por exemplo. Exibir informações de acordo com a localização do usuário.Friday, January 21, 2011
  31. 31. LocalStorage É possível guardar valores no browser do usuário sem utilizar cookies.Friday, January 21, 2011
  32. 32. LocalStorage API localStorage.setItem(msg, Campus Party 2011); sessionStorage.setItem(timestamp, new Date().getTime()); localStorage.getItem(msg); //Campus Party 2011 sessionStorage.getItem(timestamp); //1295495745940Friday, January 21, 2011
  33. 33. LocalStorage API Tudo que é salvo no localStorage ou sessionStorage se torna uma string. Portanto se você precisa salvar um objeto javascript utilize algo como: JSON.stringify({nome:”Maxwell”, sobrenome:”Dayvson”});Friday, January 21, 2011
  34. 34. Patterns + Frameworks Técnicas que ajudam a começar um projeto utilizando padrões da web e boas práticas.Friday, January 21, 2011
  35. 35. Existem frameworks e convenções que você pode seguir para facilitar seu trabalho e manter um padrão.Friday, January 21, 2011
  36. 36. Patterns + Frameworks - Simplifique seu trabalhoFriday, January 21, 2011
  37. 37. Patterns + Frameworks - Simplifique seu trabalhoFriday, January 21, 2011
  38. 38. Patterns + Frameworks - Simplifique seu trabalhoFriday, January 21, 2011
  39. 39. Patterns + Frameworks - Simplifique seu trabalhoFriday, January 21, 2011
  40. 40. Patterns + Frameworks - Simplifique seu trabalhoFriday, January 21, 2011
  41. 41. Patterns + Frameworks - Simplifique seu trabalhoFriday, January 21, 2011
  42. 42. Patterns + Frameworks - Simplifique seu trabalhoFriday, January 21, 2011
  43. 43. Perguntas? dayvson@gmail.com #twitter @dayvson Obrigado :)Friday, January 21, 2011

×