Construindo a web mobile de amanhã

Construindo a web mobile de amanhã

Conheça um tanto da história da web e seu encontro com os dispositivos móveis.
Quais os principais desafios de escrever código para celulares, tablets e demais suportes.
A mensagem final será como definir conteúdo adaptável e pronto para as evoluções que ainda estão por vir.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

September 27, 2014
Tweet

Transcript

  1. CONSTRUINDO A WEB MOBILE DE AMANHÃ técnicas e algumas práticas

  2. http://jcemer.com

  3. None
  4. MOTIVAÇÃO para que estamos aqui hoje

  5. Conheça um tanto da história da web e seu encontro

    com os dispositivos móveis. Quais os principais desafios de escrever código para celulares, tablets e demais suportes. A mensagem final será como definir conteúdo adaptável e pronto para as evoluções que ainda estão por vir.
  6. HISTÓRIA desde onde tudo começou

  7. 1991

  8. HIPERMÍDIA Mídias em um suporte computacional com a devida marcação

    e interligações com demais documentos
  9. 1995

  10. Desde a validação de formulários até a criação de interfaces

    ricas. Seu uso é para aprimorar a usabilidade das páginas através da adição de interatividade JAVASCRIPT
  11. 1996

  12. 1996

  13. FOLHAS 
 DE ESTILO Atribuir diferente aparência ao conteúdo através

    da declaração de fontes, cores, margens, alturas, larguras e muito mais.
  14. FLASH 
 PLAYER SVG CANVAS AUDIO &
 VIDEO WEBGL

  15. SUPORTES distribuindo conteúdo

  16. DESKTOPS LAPTOPS TVS TOUCH LAPTOPS SMARTPHONES TOTENS TELÃO DIGITAL TABLETS

    GOOGLE GLASS
  17. DESKTOPS LAPTOPS TVS TOUCH LAPTOPS SMARTPHONES TOTENS TELÃO DIGITAL TABLETS

    GOOGLE GLASS BROWSERS APPS
 APPLE STORE 
 NETFLIX
 STEAM
  18. This is a day I have been looking forward to

    for two and a half years 2007
  19. MOBILE iPhone foi lançado com uma versão mobile do navegador

    Safari
  20. VIEWPORT Área igual a do display que determina qual o

    limite de apresentação do conteúdo CONCEITO ANTIGO
  21. MOBILE
 VIEWPORT A viewport não é necessariamente do tamanho do

    display
  22. None
  23. None
  24. A largura da viewport é definida por padrão como 980px

  25. O iPhone quando lançado conseguia visualizar a maioria dos sites

    da internet
  26. META
 VIEWPORT Define a relação entre display e viewport

  27. <meta  name="viewport"  content="width=1024"> HTML Defina a viewport com um valor

    fixo se 980px não for adequado
  28. <meta  name="viewport"  content="width=device-­‐width"> HTML Ou faça a largura da viewport

    ser igual a do display do aparelho
  29. None
  30. Quais as resoluções dos celulares dos nossos usuários? - CLIENTE

  31. http://www.paintcodeapp.com/news/ ultimate-guide-to-iphone-resolutions

  32. None
  33. http://www.idownloadblog.com/2013/07/30/ the-terrible-state-of-android-fragmentation/

  34. ASPECT RATIO Diferentes escalas de proporção entre largura e altura

  35. None
  36. 16:10 3:4 2:3

  37. Não existe mobile web, a web é uma só! -

    SÉRGIO LOPES
  38. RESPONSIVE DESIGN aprimorando experiência

  39. Entrega de uma experiência ótima de leitura e navegação independente

    de dispositivo
  40. MOBILE DESKTOP TABLET

  41. LAYOUT Conteúdo que se adequa à viewport seguindo suas dimensões

    FLUIDO 80%
  42. Conteúdo que se adequa à viewport seguindo suas dimensões FLUIDO

    LAYOUT 80%
  43. 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 

  44. None
  45. TAMANHO DE 
 FONTE Não existe especificação para o tamanho

    básico da fonte, o aplicativo escolhe o mais adequado
  46. TAMANHO DE 
 FONTE RELATIVO Unidades de medida baseadas em

    elementos anscestrais ou outras propriedades
  47. MEDIDA EM Tamanho de fonte relativo ao tamanho de fonte

    definido ou herdado no elemento pai FONTE
  48. MEDIDA EM FONTE <body> Foo <div style="font-size: 0.5em"> bar <span

    style="font-size: 2em"> fizz </span> </div> </body> Foo bar fizz
  49. MEDIDA REM Tamanho de fonte relativo ao tamanho de fonte

    definido no <html> FONTE
  50. MEDIDA REM FONTE <body> Foo <div style="font-size: 0.5rem"> bar <span

    style="font-size: 2rem"> fizz </span> </div> </body> Foo bar fizz
  51. MEDIDAS RELATIVAS Esqueça as medidas absolutas, elas são legado de

    outras mídias
  52. % EM & REM VIEWPORT 
 UNITS

  53. MEDIA QUERIES Regras de estilo específicas aplicadas a diferentes aspectos

    do dispositivo
  54. @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } CSS
  55. TRILHA ESPECIAL DE DESENVOLVIMENTO NO ENCONTRO LOCAWEB PROMETE TRAZER NOVIDADES

    E ASSUNTOS PERTINENTES DA ÁREA LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. LOREM
  56. TRILHA ESPECIAL DE DESENVOLVIMENTO NO ENCONTRO LOCAWEB (HTTP://LOCAWEB.COM.BR) PROMETE TRAZER

    NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. LOREM
  57. @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } Adiciona ao fim do conteúdo o href Somente em impressão CSS
  58. None
  59. TIPO DE MÍDIA TAMANHO 
 DE TELA DENSIDADE DE 


    PIXELS RESOLUÇÃO ORIENTAÇÃO PROFUNDIDADE DE 
 CORES
  60. None
  61. None
  62. None
  63. None
  64. None
  65. 8/11

  66. /* 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 */ }
  67. Evite a criação de muitos breakpoints e não os faça

    com base em dispositivos
  68. Grade fluída é sua aliada: é mais simples e facilita

    a manutenção
  69. None
  70. Uma única URL, código e conteúdo para manter; além de

    um único deploy - DIEGO EIS
  71. Responsive Design != one size fits all Don’t get hung

    up thinking that media queries are the only tool in your toolbox. - BRAD FROST
  72. Assuma menos, considere que seus usuários não estão em telas

    grandes ou tenham uma velocidade de conexão adequada
  73. - BRAD FROST

  74. - BRAD FROST

  75. PROGRESSIVE 
 ENHANCEMENT Foque no conteúdo e adicione funcionalidades mesmo

    que só compatíveis com suportes específicos
  76. MODERNIZR Detecte funcionalidades e apresente o conteúdo de diferentes maneiras

  77. http://diveintohtml5.info/everything.html

  78. SUPORTE A HTML5 SUPORTE A CSS3 SUPORTE A AUDIO 


    E VIDEO SUPORTE A 
 PLUGINS TIPOS DE INPUT
  79. var  isTouch  =  (function  ()  {      return  ('ontouchstart'

     in  window  ||                        'onmsgesturechange'  in  window);   })();   ! var  gestures  =  {      start:  isTouch  ?  'touchstart'  :                                          'mousedown',      move:    isTouch  ?  'touchmove'  :                                          'mousemove',      stop:    isTouch  ?  'touchend  touchcancel'  :                                          'mouseup'   }; JAVASCRIPT
  80. QUALIDADE DE 
 CONEXÃO NÍVEL DE BATERIA ILUMINAÇÃO DO 


    AMBIENTE GIROSCÓPIO
  81. RWD + SERVER-SIDE COMPONENTS Componentes do projeto são concebidos no

    servidor com base no suporte computacional Cuidado, não abuse
  82. DESIGN 
 RESPONSIVO ! DESIGN 
 ADAPTATIVO está contido no

  83. - BRAD FROST

  84. LEGIBILIDADE Diferentes tamanhos e resoluções de telas utilizadas em diferentes

    distâncias em relação ao usuário
  85. Nem sempre saber o tamanho da tela é o bastante

  86. None
  87. INTERAÇÃO Diferentes propostas de interação com o documento em cada

    dispositivo
  88. None
  89. None
  90. None
  91. None
  92. PINCH ZOOM Ferramenta do usuário para navegar na página

  93. Desabilita o pinch zoom que, por padrão, é habilitado <meta

    name="viewport"
 content="width=device-width, 
 user-scalable=no">
  94. Na maioria das vezes que a pagina não tem pinch

    zoom é porque foi mal feita!
  95. GESTOS Em geral o aplicativo se adapta aos periféricos disponíveis,

    não reescreva comportamentos padrões
  96. None
  97. None
  98. OFFLINE WEB APPLICATIONS Manter o conteúdo no cache do dispositivo

    pode ser uma boa alternativa Confira sobre Service Workers
  99. FUTURE FRIENDLY abrace o imprevisível

  100. Disruption will only accelerate. The quantity and diversity of connected

    devices —many of which we haven't imagined yet— will explode, as will the quantity and diversity of the people around the world who use them. Our existing standards, workflows, and infrastructure won't hold up. Today's onslaught of devices is already pushing them to the breaking point. They can't withstand what's ahead. Proprietary solutions will dominate at first. Innovation necessarily precedes
  101. withstand what's ahead. Proprietary solutions will dominate at first. Innovation

    necessarily precedes standardization. Technologists will scramble to these solutions before realizing (yet again) that a standardized platform is needed to maintain sanity. The standards process will be painfully slow. We will struggle with (and eventually agree upon) appropriate standards. During this period, the web will fall even further behind proprietary solutions.
  102. http://futurefriendlyweb.com/thinking.html

  103. REALIDADE não fuja dela

  104. None
  105. None
  106. None
  107. UBIQUIDADE FLEXIBILIDADE PERFORMANCE ENHANCEMENT FUTURE 
 FRIENDLY - BRAD FROST

  108. INSPIRAÇÃO e referências no assunto

  109. JOHN ALLSOPP ETHAN 
 MARCOTTE BRAD FROST LUKE 
 WROBLEWSKI

    MARCELO 
 OLIVEIRA SÉRGIO LOPES DIEGO EIS
  110. The control which designers know in the print medium, and

    often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must "accept the ebb and flow of things." - JOHN ALLSOPP (2000)
  111. OBRIGADO A TODOS @jcemer façam a web de amanhã