Hipermídia as avessas

Palestra apresentada na Mobile Conf Brazil 2013

Transcript

1. Hipermídia as
   avessas
   seu conteúdo na web por
   diferentes formas
   

   View Slide

2. Hipermídia
   reunião de várias mídias num
   suporte computacional de forma
   não-linear
   

   View Slide

3. Avesso
   praticamente a anti-matéria de
   qualquer coisa, mas que apesar
   de tudo, faz parte do contexto
   

   View Slide

4. Hipermídia as
   avessas
   uma mídia entregue para
   diferentes suportes
   computacionais
   

   View Slide

5. Jean Carlo
   Emer
   github.com/jcemer
   twitter.com/jcemer
   speakerdeck.com/jcemer
   artesão da internet
   Marcelo
   Oliveira
   github.com/askoth
   twitter.com/askoth
   front-end mothafucka
   

   View Slide

6. View Slide

7. http://speakerdeck.com/jcemer/
   hipermidia-as-avessas
   

   View Slide

8. Desktops
   Laptops
   TVs
   Touch Laptops
   Smartphones
   Totens
   Telão digital
   Tablets
   Google Glass
   Browsers
   Apps
   Apple Store
   Netflix
   Steam
   

   View Slide

9. Mobile
   dispositivos pequenos e de fácil
   locomoção e além de tudo
   smarts
   

   View Slide

10. Mobile
    iPhone é um
    grande marco,
    apesar de outros
    experimentos
    anteriores
    

    View Slide

11. Mobile
    “rough
    consensus and
    running code”
    

    View Slide

12. Display e
    Viewport
    dispositivo de apresentação visual
    ou tátil e área que determina qual
    o limite de apresentação do
    conteúdo
    

    View Slide

13. Mobile
    Viewport
    a viewport não é necessariamente
    do tamanho do display
    

    View Slide

14. Mobile Viewport
    

    View Slide

15. Mobile Viewport
    

    View Slide

16. Meta
    Viewport
    define a relação entre display e
    viewport
    Mobile Viewport
    

    View Slide

17. Mobile Viewport Meta Viewport
    Sem a , o website é
    entendido como desktop
    A viewport é definida como tendo
    largura de 980px
    

    View Slide

18. Mobile Viewport Meta Viewport
    Defina a meta viewport com um
    valor fixo de largura, quando
    980px não for adequado
    
    HTML Code
    

    View Slide

19. Mobile Viewport
    CSS Viewport
    colocando a meta viewport no
    lugar adequado: a folha de estilo
    

    View Slide

20. Mobile Viewport
    Pinch Zoom
    ferramenta do usuário para
    navegar na página
    

    View Slide

21. user-scalable=no”>
    HTML Code
    Desabilita o pinch zoom que, por
    padrão, é habilitado
    90% das vezes que a pagina não tem
    pinch zoom é porque foi mal feita!
    Mobile Viewport Pinch Zoom
    

    View Slide

22. Mobile Viewport Pinch Zoom
    Remova o pinch zoom em Jogos
    em HTML5 e WebApps como
    Fastbook
    
    
    
    Fastbook[...]
    
    HTML Code
    

    View Slide

23. Mantenha o pinch zoom em todas as
    outras situações e mesmo em
    WebApps
    Mobile Viewport Pinch Zoom
    

    View Slide

24. Propriedade Intervalo Padrão
    width [200, 10.000] 980
    height [223, 10.000] ∆
    minimum-scale (0, 10] 0.25
    maximum-scale (0, 10] 5
    initial-scale ~ Mostrar tudo
    Mobile Viewport
    

    View Slide

25. Como compartilhar o mesmo
    conteúdo em diversos
    dispositivos
    Desafios da
    web plural
    

    View Slide

26. Legibilidade
    diferentes tamanhos e
    resoluções de telas utilizadas
    em diferentes distâncias em
    relação ao usuário
    

    View Slide

27. Legibilidade
    

    View Slide

28. O tamanho do
    display é relativo à
    distância do usuário
    Legibilidade
    

    View Slide

29. diferentes escalas de proporção
    entre largura e altura
    Aspect Ratio
    

    View Slide

30. Aspect Ratio
    16:10
    3:4
    2:3
    

    View Slide

31. Heat Graph
    

    View Slide

32. Interação
    diferentes propostas de
    interação com o documento
    em cada dispositivo
    

    View Slide

33. Interação
    

    View Slide

34. Interação
    

    View Slide

35. Interação
    

    View Slide

36. Interação
    

    View Slide

37. Interação
    Não conte com o
    previlégio de seu
    documento ser
    manipulado a
    duas mãos
    

    View Slide

38. Responsive
    Design
    entrega de uma experiência
    ótima de leitura e navegação
    independente de dispositivo
    

    View Slide

39. Tamanho de
    Fonte
    fontes muito pequenas são
    ilegíveis
    

    View Slide

40. Tamanho da Fonte
    Não existe especificação para o
    tamanho básico da fonte, o
    aplicativo escolhe o mais
    adequado. Geralmente é 16px
    Tamanhos de fonte
    xx-small, x-small, small,
    medium,
    large, x-large, xx-large
    

    View Slide

41. Tamanho
    Relativo
    unidades de medida baseadas em
    elementos anscestrais ou outras
    propriedades
    Tamanho da Fonte
    

    View Slide

42. Tamanho de fonte relativo ao
    tamanho de fonte definido ou
    herdado no elemento pai
    Tamanho da Fonte Tamanho Relativo
    EM
    

    View Slide

43. Tamanho da Fonte Tamanho Relativo
    HTML Code
    
    Foo
    !
    ! ! bar
    ! !
    ! ! ! fizz
    ! !
    !
    
    Foo
    bar
    fizz
    EM
    

    View Slide

44. Tamanho de fonte relativo ao
    tamanho de fonte definido no
    
    Trata-se de uma evolução e tem
    seu suporte restrito a IE9+
    Tamanho da Fonte Tamanho Relativo
    REM
    

    View Slide

45. REM
    
    Foo
    !
    ! ! bar
    ! !
    ! ! ! fizz
    ! !
    !
    
    Tamanho da Fonte Tamanho Relativo
    Foo
    Fizz
    bar
    HTML Code
    

    View Slide

46. Line Height
    
    Foo
    !
    ! ! bar
    !
    
    HTML Code
    Tamanho da Fonte Tamanho Relativo
    Foo
    bar
    

    View Slide

47. Conteúdo
    Fluído
    conteúdo que se adequa à
    viewport seguindo suas
    dimensões
    

    View Slide

48. conteúdo que se adequa à
    viewport seguindo suas
    dimensões
    Conteúdo Fluído
    

    View Slide

49. conteúdo que
    se adequa à
    viewport
    seguindo suas
    dimensões
    Conteúdo Fluído
    

    View Slide

50. Texto Fluído
    conteúdo que se adequa à
    viewport seguindo suas
    dimensões
    conteúdo que
    se adequa à
    viewport
    seguindo suas
    conteúdo
    que se
    adequa à
    viewport
    uindo
    

    View Slide

51. Imagem Fluída
    

    View Slide

52. Media
    Queries
    regras de estilo específicas
    aplicadas a diferentes aspectos
    do dispositivo
    

    View Slide

53. @media print {
    a[href]:after {
    content: " (" attr(href) ")";
    }
    }
    CSS Code
    HTML Code
    Google
    Google
    (http://google.com)
    Media Queries
    

    View Slide

54. Media Queries
    

    View Slide

55. Media Queries
    media_query_list: [, ]*
    media_query: [[only | not]? [ and ]*]
    | [ and ]*
    expression: ( [: ]? )
    media_type: all | aural | braille | handheld | print |
    projection | screen | tty | tv | embossed
    media_feature: width | min-width | max-width
    | height | min-height | max-height
    | device-width | min-device-width | max-device-width
    | device-height | min-device-height | max-device-height
    | aspect-ratio | min-aspect-ratio | max-aspect-ratio
    | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
    | color | min-color | max-color
    | color-index | min-color-index | max-color-index
    | monochrome | min-monochrome | max-monochrome
    | resolution | min-resolution | max-resolution
    | scan | grid
    

    View Slide

56. regras de estilo
    específicas aplicadas a
    diferentes dimensões de
    viewport
    Media Queries
    800px
    

    View Slide

57. regras de estilo
    específicas aplicadas
    a diferentes
    dimensões de
    viewport
    CSS Code
    @media only screen and
    (max-width: 550px) {
    ! .container {
    ! ! font: 14px 'Comic Sans';
    ! ! color: red;
    ! }
    }
    Media Queries
    500px
    

    View Slide

58. Definir a largura da viewport igual a
    largura do display no mobile permite a
    criação de breakpoints
    
    HTML Code
    Media Queries
    

    View Slide

59. Media Queries Breakpoints
    

    View Slide

60. Media Queries Breakpoints
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Media Queries Breakpoints
    CSS Code
    /* Styles to desktop */
    /* iPad landscape */
    @media screen and (max-width: 1024px) { /* Styles */ }
    /* iPad portrait */
    @media screen and (max-width: 768px) { /* Styles */ }
    /* iPhone portrait */
    @media screen and (max-width: 320px) { /* Styles */ }
    Baseados em resoluções “padrões”
    

    View Slide

68. Media Queries Breakpoints
    

    View Slide

69. Gestos
    em geral o aplicativo se adapta
    aos periféricos disponíveis, não
    reescreva comportamentos
    padrões
    

    View Slide

70. View Slide

71. View Slide

72. Desafios das
    imagens
    como escolher uma imagem
    bitmap que tenha uma boa
    nitidez em diferentes dispositivos
    sem exagerar no tamanho
    

    View Slide

73. Imagens
    HTML
    4%
    Other
    9%
    Flash
    6%
    Stylesheets
    3%
    Scripts
    17% Images
    63%
    

    View Slide

74. Formatos de
    imagens
    é muito importante saber
    identificar e compreender os
    diferentes formatos
    

    View Slide

75. Bitmap
    imagens que possuem resolução
    específica e definem a cor de
    cada um dos seus pixels
    (png, jpg, webp)
    

    View Slide

76. Vetorial
    imagens que, sem pertencer a
    uma resolução específica ,
    definem formas através de
    pontos (svg, fontes)
    

    View Slide

77. Imagens em
    websites
    imagens são úteis e muitas
    vezes valem mais que um
    Lorem Ipsum
    

    View Slide

78. Imagens no
    CSS
    é a maneira de inserir imagens
    restritamente relacionadas com
    o layout da página
    

    View Slide

79. Imagens no CSS
    Fontes
    podem ser utilizadas com
    biblioteca de ícones em vetor
    

    View Slide

80. 
    é a maneira de inserir conteúdo
    na forma de imagem em um
    documento
    

    View Slide

81. Uma única imagem pode ser indicada
    para cada
    A consequência é não ser possível
    escolher diferentes arquivos de
    imagens adequados para cada
    dispositivo
    
    

    View Slide

82. 
    Vetorial
    Logotipos, ícones e ilustrações
    podem se tornar imagens
    vetoriais
    

    View Slide

83. 
    Bitmap
    existem especificações em
    rascunho (sem suporte) para
    prover diferentes arquivos de
    imagem
    

    View Slide

84. Bitmap
    srcset="pear-mobile.jpeg 720w,
    pear-tablet.jpeg 1280w,
    pear-desktop.jpeg 1x"
    alt="The pear is juicy.">
    HTML Code
    Atributo srcset
    

    View Slide

85. Bitmap
    
    
    
    
    
    Accessible text
    
    HTML Code
    Picture
    

    View Slide

86. Bitmap
    HTML Code
    Especificações complementares
    
    srcset="large-1.jpg 1x, large-2.jpg 2x">
    srcset="med-1.jpg 1x, med-2.jpg 2x">
    
    
    Accessible text
    
    

    View Slide

87. solução nada
    Incluir uma imagem de nitidez mediana
    aceitável para uma considerável gama
    de dispositivos
    

    View Slide

88. solução via JavaScript
    Substituir posteriormente (via
    JavaScript) a imagem de nitidez mediana
    para uma mais adequada ao dispositivo
    A desvantagem é que o usuário
    precisará fazer o download de duas
    imagens e terá sua experiência visual
    afetada
    

    View Slide

89. solução por escalamento
    Criar uma imagem de dimensão maior
    que a utilizada e de muito pouca
    qualidade
    Depois de reescalada, a nitidez pode ser
    até igual a de retina mas o bitmap
    gigantesco ficará ocupando memória do
    navegador
    

    View Slide

90. Não esqueça
    quais os pontos mais
    importantes para lembrar
    enquanto estiver desenvolvendo
    

    View Slide

91. Comece a desenvolver para os
    dispositivos que oferecem menor
    performance e nos quais você tem
    menos experiência como
    desenvolvedor:
    mobile
    

    View Slide

92. Layout desktop
    
    HTML Code
    Não utilize a viewport a menos
    que a pagina não fique na largura certa
    em mobile
    

    View Slide

93. Layout responsivo
    Defina a viewport e os
    breakpoints a medida que forem
    necessários
    HTML Code
    
    

    View Slide

94. Layout responsivo: CSS
    Escreva o estilo geral para mobile e
    media queries para cada dispositivo de
    resolução maior
    CSS Code
    /* Styles to mobile */
    /* a bit wider */
    @media screen and (min-width: ...em) { /* Styles */ }
    /* wider */
    @media screen and (min-width: ...em) { /* Styles */ }
    

    View Slide

95. Layout responsivo: fonte
    Altere o tamanho de fonte de acordo
    com o dispositivo
    CSS Code
    /* Styles to mobile */
    .body { font-size: 23px; }
    p { font-size: 0.8em; }
    /* wider */
    @media screen and (min-width: ...em) {
    .body { font-size: 16px; }
    }
    p { font-size: 0.8em; }
    

    View Slide

96. Layout responsivo: grade fluída
    Evite a criação de muitos breakpoints,
    lembre-se que grade fluída é sua aliada
    Grade fluída é mais simples e facilita a
    manutenção
    62%
    34%
    62% 34%
    

    View Slide

97. Layout responsivo: imagens
    Tente achar um tamanho que fique com
    nitidez razoável na maior parte dos
    dispositivos ou aplique uma das técnicas
    anteriores até que exista uma solução
    melhor
    

    View Slide

98. View Slide

99. Este é o
    futuro!
    

    View Slide

100. Obrigado!
     @jcemer @askoth
     

     View Slide