Hipermídia as avessas

Hipermídia as avessas

Palestra apresentada na Mobile Conf Brazil 2013

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

September 14, 2013
Tweet

Transcript

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

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

    não-linear
  3. Avesso praticamente a anti-matéria de qualquer coisa, mas que apesar

    de tudo, faz parte do contexto
  4. Hipermídia as avessas uma mídia entregue para diferentes suportes computacionais

  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
  6. None
  7. http://speakerdeck.com/jcemer/ hipermidia-as-avessas

  8. Desktops Laptops TVs Touch Laptops Smartphones Totens Telão digital Tablets

    Google Glass Browsers Apps Apple Store Netflix Steam
  9. Mobile dispositivos pequenos e de fácil locomoção e além de

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

    anteriores
  11. Mobile “rough consensus and running code”

  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
  13. Mobile Viewport a viewport não é necessariamente do tamanho do

    display
  14. Mobile Viewport

  15. Mobile Viewport

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

    Viewport
  17. Mobile Viewport Meta Viewport Sem a <meta>, o website é

    entendido como desktop A viewport é definida como tendo largura de 980px
  18. Mobile Viewport Meta Viewport Defina a meta viewport com um

    valor fixo de largura, quando 980px não for adequado <meta name=”viewport” content=”width=1024”> HTML Code
  19. Mobile Viewport CSS Viewport colocando a meta viewport no lugar

    adequado: a folha de estilo
  20. Mobile Viewport Pinch Zoom ferramenta do usuário para navegar na

    página
  21. <meta name=”viewport” content=”width=device-width, 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
  22. Mobile Viewport Pinch Zoom Remova o pinch zoom em Jogos

    em HTML5 e WebApps como Fastbook <!DOCTYPE HTML> <html lang="en-US"> <head> <title>Fastbook</title>[...] <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user- scalable=no"> HTML Code
  23. Mantenha o pinch zoom em todas as outras situações e

    mesmo em WebApps Mobile Viewport Pinch Zoom
  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
  25. Como compartilhar o mesmo conteúdo em diversos dispositivos Desafios da

    web plural
  26. Legibilidade diferentes tamanhos e resoluções de telas utilizadas em diferentes

    distâncias em relação ao usuário
  27. Legibilidade

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

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

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

  31. Heat Graph

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

    dispositivo
  33. Interação

  34. Interação

  35. Interação

  36. Interação

  37. Interação Não conte com o previlégio de seu documento ser

    manipulado a duas mãos
  38. Responsive Design entrega de uma experiência ótima de leitura e

    navegação independente de dispositivo
  39. Tamanho de Fonte fontes muito pequenas são ilegíveis

  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
  41. Tamanho Relativo unidades de medida baseadas em elementos anscestrais ou

    outras propriedades Tamanho da Fonte
  42. Tamanho de fonte relativo ao tamanho de fonte definido ou

    herdado no elemento pai Tamanho da Fonte Tamanho Relativo EM
  43. Tamanho da Fonte Tamanho Relativo HTML Code <body> Foo !

    <div style="font-size: 0.5em"> ! ! bar ! ! <span style="font-size: 2em"> ! ! ! fizz ! ! </span> ! </div> </body> Foo bar fizz EM
  44. Tamanho de fonte relativo ao tamanho de fonte definido no

    <body> Trata-se de uma evolução e tem seu suporte restrito a IE9+ Tamanho da Fonte Tamanho Relativo REM
  45. REM <body> Foo ! <div style="font-size: 0.5rem"> ! ! bar

    ! ! <span style="font-size: 2rem"> ! ! ! fizz ! ! </span> ! </div> </body> Tamanho da Fonte Tamanho Relativo Foo Fizz bar HTML Code
  46. Line Height <body style="line-height: 1.5em"> Foo ! <div style="font-size: 2rem">

    ! ! bar ! </div> </body> HTML Code Tamanho da Fonte Tamanho Relativo Foo bar
  47. Conteúdo Fluído conteúdo que se adequa à viewport seguindo suas

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

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

    Fluído
  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
  51. Imagem Fluída

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

    do dispositivo
  53. @media print { a[href]:after { content: " (" attr(href) ")";

    } } CSS Code HTML Code <a href="http://google.com">Google</a> Google (http://google.com) Media Queries
  54. Media Queries

  55. Media Queries media_query_list: <media_query> [, <media_query> ]* media_query: [[only |

    not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) 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
  56. regras de estilo específicas aplicadas a diferentes dimensões de viewport

    Media Queries 800px
  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
  58. Definir a largura da viewport igual a largura do display

    no mobile permite a criação de breakpoints <meta name=”viewport” content=”width=device-width”> HTML Code Media Queries
  59. Media Queries Breakpoints

  60. Media Queries Breakpoints

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  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”
  68. Media Queries Breakpoints

  69. Gestos em geral o aplicativo se adapta aos periféricos disponíveis,

    não reescreva comportamentos padrões
  70. None
  71. None
  72. Desafios das imagens como escolher uma imagem bitmap que tenha

    uma boa nitidez em diferentes dispositivos sem exagerar no tamanho
  73. Imagens HTML 4% Other 9% Flash 6% Stylesheets 3% Scripts

    17% Images 63%
  74. Formatos de imagens é muito importante saber identificar e compreender

    os diferentes formatos
  75. Bitmap imagens que possuem resolução específica e definem a cor

    de cada um dos seus pixels (png, jpg, webp)
  76. Vetorial imagens que, sem pertencer a uma resolução específica ,

    definem formas através de pontos (svg, fontes)
  77. Imagens em websites imagens são úteis e muitas vezes valem

    mais que um Lorem Ipsum
  78. Imagens no CSS é a maneira de inserir imagens restritamente

    relacionadas com o layout da página
  79. Imagens no CSS Fontes podem ser utilizadas com biblioteca de

    ícones em vetor
  80. <img> é a maneira de inserir conteúdo na forma de

    imagem em um documento
  81. Uma única imagem pode ser indicada para cada <img> A

    consequência é não ser possível escolher diferentes arquivos de imagens adequados para cada dispositivo <img>
  82. <img> Vetorial Logotipos, ícones e ilustrações podem se tornar imagens

    vetoriais
  83. <img> Bitmap existem especificações em rascunho (sem suporte) para prover

    diferentes arquivos de imagem
  84. <img> Bitmap <img src="pear-mobile.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"

    alt="The pear is juicy."> HTML Code Atributo srcset
  85. <img> Bitmap <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source

    media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt="hi, there" lazyload> <p>Accessible text</p> </picture> HTML Code Picture
  86. <img> Bitmap HTML Code Especificações complementares <picture width="500" height="500"> <source

    media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt="hi, there" lazyload> <p>Accessible text</p> </picture>
  87. <img> solução nada Incluir uma imagem de nitidez mediana aceitável

    para uma considerável gama de dispositivos
  88. <img> 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
  89. <img> 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
  90. Não esqueça quais os pontos mais importantes para lembrar enquanto

    estiver desenvolvendo
  91. Comece a desenvolver para os dispositivos que oferecem menor performance

    e nos quais você tem menos experiência como desenvolvedor: mobile
  92. Layout desktop <meta name="viewport" content="width=1024"> HTML Code Não utilize a

    <meta> viewport a menos que a pagina não fique na largura certa em mobile
  93. Layout responsivo Defina a <meta> viewport e os breakpoints a

    medida que forem necessários HTML Code <meta name="viewport" content="width=device-width">
  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 */ }
  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; }
  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%
  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
  98. None
  99. Este é o futuro!

  100. Obrigado! @jcemer @askoth