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.

Transcript

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

   View Slide

2. http://jcemer.com
   

   View Slide

3. View Slide

4. MOTIVAÇÃO
   para que estamos aqui hoje
   

   View Slide

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.
   

   View Slide

6. HISTÓRIA
   desde onde tudo começou
   

   View Slide

7. View Slide

8. HIPERMÍDIA
   Mídias em um suporte computacional com
   a devida marcação e interligações com
   demais documentos
   

   View Slide

9. View Slide

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
    

    View Slide

11. View Slide

12. View Slide

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.
    

    View Slide

14. FLASH 

    PLAYER
    SVG
    CANVAS
    AUDIO &

    VIDEO
    WEBGL
    

    View Slide

15. SUPORTES
    distribuindo conteúdo
    

    View Slide

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

    View Slide

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

    APPLE STORE 

    NETFLIX

    STEAM
    

    View Slide

18. This is a day I have been
    looking forward to for
    two and a half years
    2007
    

    View Slide

19. MOBILE
    iPhone foi lançado com uma versão
    mobile do navegador Safari
    

    View Slide

20. VIEWPORT
    Área igual a do display que determina
    qual o limite de apresentação do
    conteúdo
    CONCEITO ANTIGO
    

    View Slide

21. MOBILE

    VIEWPORT
    A viewport não é necessariamente do
    tamanho do display
    

    View Slide

22. View Slide

23. View Slide

24. A largura da viewport é definida por
    padrão como 980px
    

    View Slide

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

    View Slide

26. META

    VIEWPORT
    Define a relação entre display e
    viewport
    

    View Slide

27. 
    HTML
    Defina a viewport com um
    valor fixo se 980px não for
    adequado
    

    View Slide

28. 
    HTML
    Ou faça a largura da
    viewport ser igual a do
    display do aparelho
    

    View Slide

29. View Slide

30. Quais as resoluções dos celulares
    dos nossos usuários?
    - CLIENTE
    

    View Slide

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

    View Slide

32. View Slide

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

    View Slide

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

    View Slide

35. View Slide

36. 16:10
    3:4
    2:3
    

    View Slide

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

    View Slide

38. RESPONSIVE
    DESIGN
    aprimorando experiência
    

    View Slide

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

    View Slide

40. MOBILE
    DESKTOP
    TABLET
    

    View Slide

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

    View Slide

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

    View Slide

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 

    

    View Slide

44. View Slide

45. TAMANHO DE 

    FONTE
    Não existe especificação para o
    tamanho básico da fonte, o aplicativo
    escolhe o mais adequado
    

    View Slide

46. TAMANHO DE 

    FONTE RELATIVO
    Unidades de medida baseadas em
    elementos anscestrais ou outras
    propriedades
    

    View Slide

47. MEDIDA EM
    Tamanho de fonte relativo ao
    tamanho de fonte definido ou
    herdado no elemento pai
    FONTE
    

    View Slide

48. MEDIDA EM
    FONTE
    
    Foo
    
    bar
    
    fizz
    
    
    
    Foo
    bar
    fizz
    

    View Slide

49. MEDIDA REM
    Tamanho de fonte relativo ao
    tamanho de fonte definido no
    FONTE
    

    View Slide

50. MEDIDA REM
    FONTE
    
    Foo
    
    bar
    
    fizz
    
    
    
    Foo
    bar
    fizz
    

    View Slide

51. MEDIDAS
    RELATIVAS
    Esqueça as medidas absolutas, elas
    são legado de outras mídias
    

    View Slide

52. %
    EM & REM
    VIEWPORT 

    UNITS
    

    View Slide

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

    View Slide

54. @media  print  {  
       a[href]::after  {  
           content:  "  ("  attr(href)  ")";  
       }  
    }
    CSS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

57. @media  print  {  
       a[href]::after  {  
           content:  "  ("  attr(href)  ")";  
       }  
    } Adiciona ao fim do
    conteúdo o href
    Somente em impressão
    CSS
    

    View Slide

58. View Slide

59. TIPO DE MÍDIA
    TAMANHO 

    DE TELA
    DENSIDADE DE 

    PIXELS
    RESOLUÇÃO
    ORIENTAÇÃO
    PROFUNDIDADE DE 

    CORES
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. 8/11
    

    View Slide

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 */ }
    

    View Slide

67. Evite a criação de muitos breakpoints
    e não os faça com base em
    dispositivos
    

    View Slide

68. Grade fluída é sua aliada: é mais
    simples e facilita a manutenção
    

    View Slide

69. View Slide

70. Uma única URL, código e conteúdo
    para manter; além de um único
    deploy
    - DIEGO EIS
    

    View Slide

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
    

    View Slide

72. Assuma menos, considere que seus
    usuários não estão em telas grandes
    ou tenham uma velocidade de
    conexão adequada
    

    View Slide

73. - BRAD FROST
    

    View Slide

74. - BRAD FROST
    

    View Slide

75. PROGRESSIVE 

    ENHANCEMENT
    Foque no conteúdo e adicione
    funcionalidades mesmo que só
    compatíveis com suportes específicos
    

    View Slide

76. MODERNIZR
    Detecte funcionalidades e apresente o
    conteúdo de diferentes maneiras
    

    View Slide

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

    View Slide

78. SUPORTE A HTML5
    SUPORTE A CSS3
    SUPORTE A AUDIO 

    E VIDEO
    SUPORTE A 

    PLUGINS
    TIPOS DE INPUT
    

    View Slide

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
    

    View Slide

80. QUALIDADE DE 

    CONEXÃO
    NÍVEL DE BATERIA
    ILUMINAÇÃO DO 

    AMBIENTE
    GIROSCÓPIO
    

    View Slide

81. RWD + SERVER-SIDE
    COMPONENTS
    Componentes do projeto são
    concebidos no servidor com base no
    suporte computacional
    Cuidado, não abuse
    

    View Slide

82. DESIGN 

    RESPONSIVO
    !
    DESIGN 

    ADAPTATIVO
    está contido no
    

    View Slide

83. - BRAD FROST
    

    View Slide

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

    View Slide

85. Nem sempre saber o tamanho da tela
    é o bastante
    

    View Slide

86. View Slide

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

    View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. PINCH ZOOM
    Ferramenta do usuário para
    navegar na página
    

    View Slide

93. Desabilita o pinch zoom que, por
    padrão, é habilitado
    content="width=device-width, 

    user-scalable=no">
    

    View Slide

94. Na maioria das vezes que a pagina não
    tem pinch zoom é porque foi mal feita!
    

    View Slide

95. GESTOS
    Em geral o aplicativo se adapta aos
    periféricos disponíveis, não
    reescreva comportamentos padrões
    

    View Slide

96. View Slide

97. View Slide

98. OFFLINE WEB
    APPLICATIONS
    Manter o conteúdo no cache do
    dispositivo pode ser uma boa
    alternativa
    Confira sobre Service Workers
    

    View Slide

99. FUTURE
    FRIENDLY
    abrace o imprevisível
    

    View Slide

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
     

     View Slide

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.
     

     View Slide

102. http://futurefriendlyweb.com/thinking.html
     

     View Slide

103. REALIDADE
     não fuja dela
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. UBIQUIDADE
     FLEXIBILIDADE
     PERFORMANCE
     ENHANCEMENT
     FUTURE 

     FRIENDLY
     - BRAD FROST
     

     View Slide

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

     View Slide

109. JOHN ALLSOPP
     ETHAN 

     MARCOTTE
     BRAD FROST
     LUKE 

     WROBLEWSKI
     MARCELO 

     OLIVEIRA
     SÉRGIO LOPES
     DIEGO EIS
     

     View Slide

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)
     

     View Slide

111. OBRIGADO
     A TODOS
     @jcemer
     façam a web de amanhã
     

     View Slide