SlideShare uma empresa Scribd logo
1 de 43
Baixar para ler offline
E o futuro da Web
                            Maxwell Dayvson - @dayvson
                               dayvson@gmail.com
                           maxwell.silva@corp.terra.com.br
Friday, January 21, 2011
<!DOCTYPE html>




Friday, January 21, 2011
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
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
HTML5




Friday, January 21, 2011
CSS3




Friday, January 21, 2011
JS




Friday, January 21, 2011
HTML5 + CSS3 + JAVASCRIPT = APLICAÇÕES INCRÍVEIS




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
O que já temos online!




Friday, January 21, 2011
Nova era de <video> da Web
                                   Codec War




Friday, January 21, 2011
<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
<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
<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
<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
<VIDEO> - Nova experiência em consumo de vídeos




             Google anunciou que vai criar plugins do WebM para:




Friday, January 21, 2011
<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
<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
Friday, January 21, 2011
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
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
LocalStorage
  É possível guardar valores no browser do usuário sem
  utilizar cookies.




Friday, January 21, 2011
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
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
Patterns + Frameworks
 Técnicas que ajudam a começar um projeto
 utilizando padrões da web e boas práticas.




Friday, January 21, 2011
Existem frameworks e convenções que você pode seguir
 para facilitar seu trabalho e manter um padrão.




Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho




Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho




Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho




Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho




Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho




Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho




Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho




Friday, January 21, 2011
Perguntas?
                           dayvson@gmail.com
                            #twitter @dayvson


                             Obrigado :)




Friday, January 21, 2011

Mais conteúdo relacionado

Destaque

#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5Leandro Santos
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2Israel Messias
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review Israel Messias
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2Israel Messias
 
Tags estruturais-html5-gurupi-outubro-2012
Tags estruturais-html5-gurupi-outubro-2012Tags estruturais-html5-gurupi-outubro-2012
Tags estruturais-html5-gurupi-outubro-2012Cleiton Francisco
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewIsrael Messias
 
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiênciaAplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiênciaAlexandre Magno Teles Zimerer
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1Israel Messias
 
User-first Responsive Design
User-first Responsive DesignUser-first Responsive Design
User-first Responsive DesignDani Guerrato
 
Aprenda a cobrar seus serviços com Dhiego Bicudo
Aprenda a cobrar seus serviços com Dhiego BicudoAprenda a cobrar seus serviços com Dhiego Bicudo
Aprenda a cobrar seus serviços com Dhiego BicudoDhiego Bicudo
 
Apps multiplataforma com HTML5
Apps multiplataforma com HTML5Apps multiplataforma com HTML5
Apps multiplataforma com HTML5Jomar Silva
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPIsrael Messias
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoIsrael Messias
 
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.Html5,css3,javascript: O lugar onde sonhos se tornam realidade.
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.Edmo Lima
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3Israel Messias
 

Destaque (20)

#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review
 
Responsive design Sem Mitos
Responsive design Sem MitosResponsive design Sem Mitos
Responsive design Sem Mitos
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
Tags estruturais-html5-gurupi-outubro-2012
Tags estruturais-html5-gurupi-outubro-2012Tags estruturais-html5-gurupi-outubro-2012
Tags estruturais-html5-gurupi-outubro-2012
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiênciaAplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
User-first Responsive Design
User-first Responsive DesignUser-first Responsive Design
User-first Responsive Design
 
Responsive Layouts
Responsive LayoutsResponsive Layouts
Responsive Layouts
 
Aprenda a cobrar seus serviços com Dhiego Bicudo
Aprenda a cobrar seus serviços com Dhiego BicudoAprenda a cobrar seus serviços com Dhiego Bicudo
Aprenda a cobrar seus serviços com Dhiego Bicudo
 
Apps multiplataforma com HTML5
Apps multiplataforma com HTML5Apps multiplataforma com HTML5
Apps multiplataforma com HTML5
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTP
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - Revisão
 
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.Html5,css3,javascript: O lugar onde sonhos se tornam realidade.
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
 
Sites responsivos
Sites responsivosSites responsivos
Sites responsivos
 

Semelhante a HTML5 e o futuro da web - Campus Party 2011

HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?Diego Santos
 
Cyou - Apresentação FInal - #ICPM
Cyou - Apresentação FInal - #ICPMCyou - Apresentação FInal - #ICPM
Cyou - Apresentação FInal - #ICPMPedroMiguelMartins
 
PUC/PFC - Criando seu blog no wordpress
PUC/PFC - Criando seu blog no wordpressPUC/PFC - Criando seu blog no wordpress
PUC/PFC - Criando seu blog no wordpressMarcello Cardoso
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5Danilo Sousa
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosRubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosFelipe Gadelha Ruoso
 
Aprender html5 em 4 passos
Aprender html5 em 4 passosAprender html5 em 4 passos
Aprender html5 em 4 passosJeser Cotrim
 
Moizés mendes criação de website
Moizés mendes   criação de websiteMoizés mendes   criação de website
Moizés mendes criação de websiteMoizes Mendes
 
Java No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo CustoJava No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo CustoÉberli Cabistani Riella
 
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009MobileMonday Rio de Janeiro
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnicaSilvio Dias
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnicaSilvio Dias
 
Instalação e Overview do SharePoint Foundation 2010
Instalação e Overview do SharePoint Foundation 2010Instalação e Overview do SharePoint Foundation 2010
Instalação e Overview do SharePoint Foundation 2010Comunidade CanalSharePoint
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesRodrigo Peleias
 

Semelhante a HTML5 e o futuro da web - Campus Party 2011 (20)

HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Ger301
Ger301Ger301
Ger301
 
Html5 e css3
Html5 e css3Html5 e css3
Html5 e css3
 
Cyou - Apresentação FInal - #ICPM
Cyou - Apresentação FInal - #ICPMCyou - Apresentação FInal - #ICPM
Cyou - Apresentação FInal - #ICPM
 
ICPM: Projecto Cyou
ICPM:  Projecto CyouICPM:  Projecto Cyou
ICPM: Projecto Cyou
 
PUC/PFC - Criando seu blog no wordpress
PUC/PFC - Criando seu blog no wordpressPUC/PFC - Criando seu blog no wordpress
PUC/PFC - Criando seu blog no wordpress
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosRubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhos
 
Netbeans Slides
Netbeans SlidesNetbeans Slides
Netbeans Slides
 
Html 5
Html 5Html 5
Html 5
 
Aprender html5 em 4 passos
Aprender html5 em 4 passosAprender html5 em 4 passos
Aprender html5 em 4 passos
 
Moizés mendes criação de website
Moizés mendes   criação de websiteMoizés mendes   criação de website
Moizés mendes criação de website
 
Java No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo CustoJava No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo Custo
 
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnica
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnica
 
Uma Olhada no Netbeans 6
Uma Olhada no Netbeans 6Uma Olhada no Netbeans 6
Uma Olhada no Netbeans 6
 
Instalação e Overview do SharePoint Foundation 2010
Instalação e Overview do SharePoint Foundation 2010Instalação e Overview do SharePoint Foundation 2010
Instalação e Overview do SharePoint Foundation 2010
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 Portugues
 

Último

William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfAdrianaCunha84
 
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasCenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasRosalina Simão Nunes
 
02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdfJorge Andrade
 
Gerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalGerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalJacqueline Cerqueira
 
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaJúlio Sandes
 
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Mary Alvarenga
 
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERDeiciane Chaves
 
Bullying - Atividade com caça- palavras
Bullying   - Atividade com  caça- palavrasBullying   - Atividade com  caça- palavras
Bullying - Atividade com caça- palavrasMary Alvarenga
 
D9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptxD9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptxRonys4
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresLilianPiola
 
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniModelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniCassio Meira Jr.
 
A Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesA Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesMary Alvarenga
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividadeMary Alvarenga
 
Slides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptxSlides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptxSilvana Silva
 
Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.keislayyovera123
 
trabalho wanda rocha ditadura
trabalho wanda rocha ditaduratrabalho wanda rocha ditadura
trabalho wanda rocha ditaduraAdryan Luiz
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMVanessaCavalcante37
 

Último (20)

William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdf
 
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasCenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
 
XI OLIMPÍADAS DA LÍNGUA PORTUGUESA -
XI OLIMPÍADAS DA LÍNGUA PORTUGUESA      -XI OLIMPÍADAS DA LÍNGUA PORTUGUESA      -
XI OLIMPÍADAS DA LÍNGUA PORTUGUESA -
 
02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf
 
Gerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalGerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem Organizacional
 
CINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULACINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULA
 
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
 
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
 
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
 
Bullying - Atividade com caça- palavras
Bullying   - Atividade com  caça- palavrasBullying   - Atividade com  caça- palavras
Bullying - Atividade com caça- palavras
 
D9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptxD9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptx
 
Em tempo de Quaresma .
Em tempo de Quaresma                            .Em tempo de Quaresma                            .
Em tempo de Quaresma .
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
 
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniModelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
 
A Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesA Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das Mães
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividade
 
Slides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptxSlides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptx
 
Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.
 
trabalho wanda rocha ditadura
trabalho wanda rocha ditaduratrabalho wanda rocha ditadura
trabalho wanda rocha ditadura
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
 

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
  • 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
  • 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
  • 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