$30 off During Our Annual Pro Sale. View Details »

HTML5 - Seu navegador não é mais o mesmo

HTML5 - Seu navegador não é mais o mesmo

Uma breve revisão de 4 das grandes 8 áreas do HTML5: Acesso a Dispositivos, Semântica, Conectividade e 3D, gráficos e efeitos.

Loop Infinito

October 16, 2011
Tweet

More Decks by Loop Infinito

Other Decks in Programming

Transcript

  1. HTML5
    seu navegador não
    é mais o mesmo
    @caio_gondim
    @almirfilho

    View Slide

  2. View Slide

  3. semântica
    armazenamento & offline
    acesso à dispositivos
    conectividade
    css3
    3D, gráficos & efeitos
    performance
    multimídia

    View Slide

  4. semântica
    armazenamento & offline
    acesso à dispositivos
    conectividade
    css3
    3D, gráficos & efeitos
    performance
    multimídia

    View Slide

  5. acesso a dispositivos

    View Slide

  6. microfone
    câmera
    geolocalização

    View Slide

  7. geolocalização
    microfone
    câmera

    View Slide

  8. posição de um
    objeto em relação
    a superfície do
    planeta

    View Slide

  9. a geolocalização
    torna-se cada
    vez mais
    importante

    View Slide

  10. isto não é
    diferente na
    web

    View Slide

  11. serviços de
    mapas

    View Slide

  12. redes sociais

    View Slide

  13. e-gov

    View Slide

  14. ferramentas SEO

    View Slide

  15. google analytics

    View Slide

  16. View Slide

  17. localização = contexto

    View Slide

  18. localização = contexto
    maior relevância

    View Slide

  19. busca e
    recomendação
    baseadas em
    localização

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. publicidade
    direcionada

    View Slide

  28. google adWords

    View Slide

  29. acesso a partir
    de dispositivos
    móveis

    View Slide

  30. grande crescimento
    de dispositivos
    móveis conectados
    à internet

    View Slide

  31. 0 MM
    500 MM
    1.000 MM
    1.500 MM
    2.000 MM
    2007 2009 2011 2013 2015
    internet móvel internet desktop

    View Slide

  32. 0 MM
    500 MM
    1.000 MM
    1.500 MM
    2.000 MM
    2007 2009 2011 2013 2015
    internet móvel internet desktop
    ≃ 2014

    View Slide

  33. desktop
    •posição fixa
    •localização aproximada

    View Slide

  34. dispositivo móvel
    •posição variável
    •localização mais exata

    View Slide

  35. View Slide

  36. como o
    navegador obtém
    minha posição
    geográfica?

    View Slide

  37. • gps
    • sinal de celular
    • redes wi-fi
    • IP sniffing
    recursos

    View Slide

  38. View Slide

  39. onde estou?
    navegador
    gps
    sinal celular
    wi-fi
    IP
    SO

    View Slide

  40. onde estou?
    navegador
    gps
    sinal celular
    wi-fi
    IP
    SO

    View Slide

  41. onde estou?
    navegador
    gps
    sinal celular
    wi-fi
    IP
    SO

    View Slide

  42. onde estou?
    navegador
    gps
    sinal celular
    wi-fi
    IP
    SO

    View Slide

  43. interface
    comum de
    acesso

    View Slide

  44. if( navigator.geolocation ){
    // navegador suporta geolocalização
    }

    View Slide

  45. // fazendo uma requisição
    navigator.geolocation.getCurrentPosition( showMap )
    // função callback
    function showMap( position ){
    // aqui podemos mostrar o mapa com os
    // dados de position
    }

    View Slide

  46. position = {
    coords: {
    latitude: -35.29873363499, // graus
    longitude: 123.44334887755,// graus
    altitude: 400.3, // metros (opcional)
    accuracy: 12, // metros
    heading: 45.5, // graus (opcional)
    speed: 5.4 // metros/s (opcional)
    },
    timestamp: 307770135 // DOMTimeStamp
    }

    View Slide

  47. suporte
    4.0 10.0
    3.0

    View Slide

  48. suporte
    5.0
    3.5
    5.0
    9.0
    3.2
    2.1

    View Slide

  49. acesso a dispositivos

    View Slide

  50. semântica

    View Slide

  51. sintaxe é o
    estudo da
    gramática

    View Slide

  52. semântica é o
    estudo do
    significado

    View Slide

  53. sintaxe é como
    dizer algo

    View Slide

  54. semântica é o
    significado por
    trás do que foi
    dito

    View Slide

  55. semântica
    =
    desambiguação

    View Slide

  56. criar dados e
    websites que
    máquinas sejam
    capazes de entender

    View Slide

  57. problemas
    atuais

    View Slide

  58. sistema de
    documentos ligados
    entre si escritos em
    HTML

    View Slide

  59. HTML descreve
    a sintaxe, não o
    significado

    View Slide


  60. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  61. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  62. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  63. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  64. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide

  65. schema.org

    View Slide

  66. schema.org
    • consórcio entre google,
    bing e yahoo!
    • microdata

    View Slide

  67. schema.org
    na prática

    View Slide


  68. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  69. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  70. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  71. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  72. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  73. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide

  74. filme
    avatar
    ficção
    científica
    james
    cameron

    nome
    gênero trailer
    diretor

    View Slide


  75. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  76. Avatar

    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  77. Avatar
    itemscope>
    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  78. Avatar
    itemscope
    itemtype="http://schema.org/Person">
    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  79. Avatar
    itemscope
    itemtype="http://schema.org/Person">
    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide


  80. Avatar
    itemscope
    itemtype="http://schema.org/Person">
    Diretor:
    James Cameron
    (16 de agosto de 1954)

    Ficção Científica

    Trailer


    View Slide

  81. filme
    avatar
    ficção
    científica
    pessoa

    nome
    gênero trailer
    diretor
    james
    cameron
    16 de
    agosto de
    1954
    nome data de
    nascimento

    View Slide

  82. receita
    filme
    pessoa
    artigo
    seriado de TV
    pintura
    evento
    empresas
    loja
    aeroporto
    playground
    vulcão
    atração Turística
    templo hindu
    parada de ônibus
    petshop
    dentista
    eletricista
    padaria
    energia
    escultura
    livro
    música

    View Slide

  83. web semântica
    hoje

    View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. uma tentativa de
    facilitar que máquinas
    entendam a semântica,
    ou significado, das
    informações na web

    View Slide

  92. 1.197 bytes de
    header
    SkyNet ?

    View Slide

  93. 1.197 bytes de
    header
    fazer com que as
    máquinas entendam
    a web para melhor
    nos servir

    View Slide

  94. semântica

    View Slide

  95. 3D, gráficos & efeitos

    View Slide

  96. svg
    canvas
    webGL
    css3 3D

    View Slide

  97. svg
    canvas
    webGL
    css3 3D

    View Slide

  98. svg

    View Slide

  99. svg
    •gráficos vetoriais 2D
    •especificação HTML5
    •suporte completo DOM
    •css
    •animações

    View Slide

  100. por que svg?

    View Slide

  101. alta
    qualidade
    gráfica

    View Slide

  102. economia
    de banda

    View Slide

  103. google charts

    View Slide

  104. bing maps

    View Slide

  105. vexflow.com

    View Slide

  106. (Vídeo IE9: SVG Girl)
    jsdo.it/event/svggirl

    View Slide

  107. svg na prática

    View Slide



  108. ...






    View Slide



  109. ...






    View Slide

  110. suporte

    View Slide

  111. suporte
    3.2
    3.0
    4.0
    9.0
    3.2
    3.0

    View Slide

  112. canvas

    View Slide


  113. desenho 2D
    API javaScript

    View Slide

  114. controle a nível de pixel

    View Slide

  115. gráficos animados

    View Slide

  116. (Vídeo Angry Birds online)

    View Slide

  117. (Vídeo Sketchpad: online paint)
    mugtug.com/sketchpad

    View Slide

  118. sem plug-ins

    View Slide

  119. canvas na
    prática

    View Slide



  120. ...


    Seu navegador não suporta CANVAS =(



    View Slide

  121. var canvas = document.getElementById("myCanvas")
    var context = canvas.getContext("2d")
    context.moveTo(100, 150)
    context.lineTo(450, 50)
    context.stroke()

    View Slide

  122. var canvas = document.getElementById("myCanvas")
    var context = canvas.getContext("2d")
    context.moveTo(100, 150)
    context.lineTo(450, 50)
    context.stroke()

    View Slide

  123. suporte

    View Slide

  124. suporte
    3.1
    2.0
    4.0
    9.0
    3.2
    2.1

    View Slide

  125. webGL

    View Slide

  126. webGL
    •openGL na web
    •API javaScript
    •usa
    •2D e 3D
    •aceleração de hardware

    View Slide

  127. (Vídeo Quake 3)
    media.tojicode.com/q3bsp

    View Slide

  128. (Vídeo WebGL skin renderer)
    altaredqualia.com/three/examples/webgl_materials_skin.html

    View Slide

  129. (Vídeo HelloRacer)
    helloracer.com/webgl/

    View Slide

  130. (Vídeo Google Maps 3D)

    View Slide

  131. suporte
    5.0
    5.0
    4.0
    7.0
    10.0
    3.0

    View Slide

  132. suporte
    5.1*
    4.0*
    8.0*
    * = suporte parcial

    View Slide

  133. 3D, gráficos & efeitos

    View Slide

  134. conectividade

    View Slide

  135. web sockets

    View Slide

  136. bidirecional

    View Slide

  137. full-duplex

    View Slide

  138. baixa latência

    View Slide

  139. http polling
    var polling = function() {
    $.getJSON(url, function(data) {
    // captura msg do server
    console.log('Server: ' + data)
    // executa a função a cada 5s
    setTimeout(polling, 5000)
    })
    }

    View Slide

  140. navegador
    servidor
    http polling

    View Slide

  141. navegador
    servidor
    http polling
    requisição 1

    View Slide

  142. navegador
    servidor
    http polling
    requisição 1
    resposta 1

    View Slide

  143. navegador
    servidor
    http polling
    requisição 1
    resposta 1
    requisição 2

    View Slide

  144. navegador
    servidor
    http polling
    requisição 1
    resposta 1
    requisição 2
    requisição n
    resposta 2
    resposta n

    View Slide

  145. web socket
    // inicia conexão
    var conexao = new WebSocket(socketUrl)
    // evento disparado sempre que
    // o server envia mensagens
    conexao.onmessage = function(event) {
    console.log('Server: ' + event.data)
    }
    // envia uma msg para o server
    conexao.send('Sup?')

    View Slide

  146. navegador
    servidor
    web socket

    View Slide

  147. navegador
    conexão
    servidor
    web socket

    View Slide

  148. navegador
    conexão
    quadro 1
    servidor
    web socket

    View Slide

  149. navegador
    conexão
    quadro 1
    quadro 2
    quadro 3
    quadro n
    servidor
    web socket

    View Slide

  150. economia de
    banda

    View Slide

  151. GET / HTTP/1.1
    Host: www.facebook.com
    Connection: keep-alive
    Cache-Control: no-cache
    Pragma: no-cache
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.7
    (KHTML, like Gecko) Chrome/16.0.904.0 Safari/535.7
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Encoding: gzip,deflate,sdch
    Accept-Language: en-US,en;q=0.8
    Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
    Cookie: datr=krO6TcAWG-B_o9kNTRiFM6x6; lu=Tg6UHh5wyz8c5ATcjEWfd-vQ;
    s=Aa7iUafc3lfb8-l9; sid=1; p=71; c_user=545486705; csm=1; sct=1316651618;
    xs=1%3A1ee7d61311e896dad9e674527eb9a36c%3A1; act=1318603138704%2F6;
    presence=EM318603143L71N0_5dEp_5f545486705F6EriF0CEstateFDutF1318603142905EvisF1H
    0EblcF0EsndF0OQ1318603124EsF0CEblFDacF57G318603106PEuoFD1B01815847822FDexpF131860
    3189266EflF_5b_5dEolF-1CCCC
    http request
    header

    View Slide

  152. HTTP/1.1 200 OK
    Cache-Control: private, no-cache, no-store, must-revalidate
    Expires: Sat, 01 Jan 2000 00:00:00 GMT
    P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
    Pragma: no-cache
    Content-Encoding: gzip
    Content-Type: text/html; charset=utf-8
    X-FB-Server: 10.140.153.106
    X-Cnection: close
    Transfer-Encoding: chunked
    Date: Fri, 14 Oct 2011 15:54:22 GMT
    http response
    header

    View Slide

  153. 1.197 bytes de
    header
    1.197 bytes
    de header

    View Slide

  154. 1.197 bytes de
    header
    web socket
    header
    2 bytes

    View Slide

  155. 0 1500 3000 4500 6000
    10 100 500 1.000 5.000
    0,156 1,563 7,813 15,625 78,125
    11,689 116,895
    584,473
    1.168,945
    5.844,727
    http web socket
    consumo de
    banda em kBytes

    View Slide

  156. ws://

    View Slide

  157. aplicações

    View Slide

  158. aplicações
    •jogos online multiplayer
    •timeline de redes sociais
    •chat

    View Slide

  159. (Vídeo Racer Car com iPhone)
    demo.kaazing.com/racer/

    View Slide

  160. - ian hickson
    “reduzir kilobytes de dados
    para 2 bytes...e reduzir a
    latência de 150ms para 50ms é
    muito mais que um simples
    detalhe. na verdade, estes
    fatores sozinhos já são
    suficientes para fazer com que
    o web socket se torne muito
    interessante ao google.”

    View Slide

  161. suporte
    4.2
    5.0
    6.0
    14.0
    10.0

    View Slide

  162. suporte
    4.2
    5.0
    6.0
    14.0
    10.0

    View Slide

  163. conectividade

    View Slide

  164. dúvidas?

    View Slide

  165. obrigado
    @caio_gondim
    @almirfilho

    View Slide

  166. obrigado
    @caio_gondim
    @almirfilho
    loopinfinito.com.br
    @loopinfinito

    View Slide

  167. obrigado
    m
    mirfilho
    loopinfinito.com.br
    @loopinfinito

    View Slide