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

Hipermídia as avessas

Hipermídia as avessas

Palestra apresentada na Mobile Conf Brazil 2013

Jean Carlo Emer

September 14, 2013
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

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