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. 5.
  2. 6.
  3. 8.

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

    Google Glass Browsers Apps Apple Store Netflix Steam
  4. 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
  5. 17.

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

    entendido como desktop A viewport é definida como tendo largura de 980px
  6. 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
  7. 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
  8. 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
  9. 23.

    Mantenha o pinch zoom em todas as outras situações e

    mesmo em WebApps Mobile Viewport Pinch Zoom
  10. 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
  11. 38.
  12. 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
  13. 42.

    Tamanho de fonte relativo ao tamanho de fonte definido ou

    herdado no elemento pai Tamanho da Fonte Tamanho Relativo EM
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 61.
  24. 62.
  25. 63.
  26. 64.
  27. 65.
  28. 66.
  29. 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”
  30. 70.
  31. 71.
  32. 72.

    Desafios das imagens como escolher uma imagem bitmap que tenha

    uma boa nitidez em diferentes dispositivos sem exagerar no tamanho
  33. 75.

    Bitmap imagens que possuem resolução específica e definem a cor

    de cada um dos seus pixels (png, jpg, webp)
  34. 76.

    Vetorial imagens que, sem pertencer a uma resolução específica ,

    definem formas através de pontos (svg, fontes)
  35. 78.
  36. 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>
  37. 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
  38. 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>
  39. 87.

    <img> solução nada Incluir uma imagem de nitidez mediana aceitável

    para uma considerável gama de dispositivos
  40. 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
  41. 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
  42. 91.

    Comece a desenvolver para os dispositivos que oferecem menor performance

    e nos quais você tem menos experiência como desenvolvedor: mobile
  43. 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
  44. 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">
  45. 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 */ }
  46. 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; }
  47. 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%
  48. 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
  49. 98.