YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← Layout - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 14 created 06/20/2016 by Udacity Robot.

  1. Acho que já estou
    vendo a linha de chegada.
  2. Temos nossa árvore de renderização. Podemos colocar
    pixels na tela agora?
  3. Estamos muito perto,
    mas há mais uma etapa.
  4. Ainda precisamos descobrir
    onde e como todos
  5. os elementos
    são posicionados na página.
  6. E essa etapa é o layout.
    Vamos ver.
  7. Para mostrar um layout em ação,
    criei uma árvore de renderização simples.
  8. Aqui está o
    resultado final.
  9. Se a gente girar o telefone,
    as dimensões das caixas mudam,
  10. mas as proporções
    permanecem iguais.
  11. Vamos tentar descobrir o que
    o navegador está fazendo.
  12. Vamos começar na parte de cima.
  13. Definimos o plano de fundo
    no elemento body como cinza.
  14. Isso faz sentido.
    Isso é exatamente o que vimos.
  15. E definimos a largura como 100%.
  16. Mas 100% de que exatamente?
  17. 100% do tamanho da
    janela de exibição do layout.
  18. Se você prestou atenção,
  19. nossos exemplos hello world
    continham uma tag meta extra.
  20. Ah, sim, eu estava lendo o manual de
    fundamentos da Web sobre design responsivo.
  21. E ele dizia que eu sempre
    devo ter essa tag.
  22. Mas nunca entendi
    realmente por quê.
  23. É um pouco complexo,
    mas vamos tentar entender.
  24. O que ela faz é dizer
    ao navegador que a largura
  25. da janela de exibição do layout
    deve ser igual à largura do dispositivo.
  26. Digamos que o dispositivo
    tem 320 pixels.
  27. Se esta tag meta viewport
    estiver presente,
  28. o navegador definirá
    a janela de exibição do layout como 320 pixels
  29. e isso será nosso 100%.
  30. Entendo. Mas o que acontece se eu
    não incluir essa tag?
  31. O navegador usa a largura
    padrão da janela de exibição,
  32. geralmente 980 pixels.
    E ele está otimizado para telas grandes.
  33. Sabe como, às vezes,
    os sites ficam pequenos e é preciso
  34. ampliar para navegar
    e ler o texto?
  35. Isso acontece porque eles não definem
    a janela de exibição do layout.
  36. Isso faz sentido.
  37. Definitivamente,
    não sou fã desses sites.
  38. Nem eu.
    Para uma ótima experiência móvel,
  39. sempre defina a tag
    meta viewport.
  40. Mas voltando ao nosso exemplo.
  41. Se o dispositivo tem 320 pixels de largura,
  42. o corpo terá
    320 pixels de largura.
  43. Depois temos o nó
    div com 50% da largura.
  44. E ele é filho de body, então
    sua largura será relativa ao pai.
  45. E 50% de 320 pixels é 160 pixels.
  46. E, para paragraph,
    a largura é 50% do pai.
  47. Isso nos dá a largura de 80 pixels.
    E, com isso, terminamos.
  48. Esse é o layout.
    Agora, que tal você tentar?