HTML5 e o futuro da web - Campus Party 2011
•
4 likes•781 views
Palestra apresentada no Campus Party 2011. Sobre HTML5 + JS + CSS3
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to HTML5 e o futuro da web - Campus Party 2011
Similar to HTML5 e o futuro da web - Campus Party 2011 (20)
Recently uploaded
Recently uploaded (20)
HTML5 e o futuro da web - Campus Party 2011
- 1. E o futuro da Web Maxwell Dayvson - @dayvson dayvson@gmail.com maxwell.silva@corp.terra.com.br Friday, January 21, 2011
- 2. <!DOCTYPE html> Friday, January 21, 2011
- 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 interaction Friday, January 21, 2011
- 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.com Friday, January 21, 2011
- 5. HTML5 Friday, January 21, 2011
- 6. CSS3 Friday, January 21, 2011
- 7. JS Friday, January 21, 2011
- 8. HTML5 + CSS3 + JAVASCRIPT = APLICAÇÕES INCRÍVEIS Friday, January 21, 2011
- 9. O que já temos online! Friday, January 21, 2011
- 10. O que já temos online! Friday, January 21, 2011
- 11. O que já temos online! Friday, January 21, 2011
- 12. O que já temos online! Friday, January 21, 2011
- 13. O que já temos online! Friday, January 21, 2011
- 14. O que já temos online! Friday, January 21, 2011
- 15. O que já temos online! Friday, January 21, 2011
- 16. O que já temos online! Friday, January 21, 2011
- 17. O que já temos online! Friday, January 21, 2011
- 18. O que já temos online! Friday, January 21, 2011
- 19. O que já temos online! Friday, January 21, 2011
- 20. Nova era de <video> da Web Codec War Friday, January 21, 2011
- 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, Vorbis Friday, January 21, 2011
- 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 + Vorbis Friday, January 21, 2011
- 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), WebM Friday, January 21, 2011
- 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.264 Friday, January 21, 2011
- 25. <VIDEO> - Nova experiência em consumo de vídeos Google anunciou que vai criar plugins do WebM para: Friday, January 21, 2011
- 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. <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. Friday, January 21, 2011
- 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. 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. LocalStorage É possível guardar valores no browser do usuário sem utilizar cookies. Friday, January 21, 2011
- 32. LocalStorage API localStorage.setItem('msg', 'Campus Party 2011'); sessionStorage.setItem('timestamp', new Date().getTime()); localStorage.getItem('msg'); //Campus Party 2011 sessionStorage.getItem('timestamp'); //1295495745940 Friday, January 21, 2011
- 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. 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. Existem frameworks e convenções que você pode seguir para facilitar seu trabalho e manter um padrão. Friday, January 21, 2011
- 36. Patterns + Frameworks - Simplifique seu trabalho Friday, January 21, 2011
- 37. Patterns + Frameworks - Simplifique seu trabalho Friday, January 21, 2011
- 38. Patterns + Frameworks - Simplifique seu trabalho Friday, January 21, 2011
- 39. Patterns + Frameworks - Simplifique seu trabalho Friday, January 21, 2011
- 40. Patterns + Frameworks - Simplifique seu trabalho Friday, January 21, 2011
- 41. Patterns + Frameworks - Simplifique seu trabalho Friday, January 21, 2011
- 42. Patterns + Frameworks - Simplifique seu trabalho Friday, January 21, 2011
- 43. Perguntas? dayvson@gmail.com #twitter @dayvson Obrigado :) Friday, January 21, 2011