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. 3.
  2. 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.
  3. 7.
  4. 9.
  5. 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
  6. 11.
  7. 12.
  8. 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.
  9. 17.

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

    GOOGLE GLASS BROWSERS APPS
 APPLE STORE 
 NETFLIX
 STEAM
  10. 18.

    This is a day I have been looking forward to

    for two and a half years 2007
  11. 20.

    VIEWPORT Área igual a do display que determina qual o

    limite de apresentação do conteúdo CONCEITO ANTIGO
  12. 22.
  13. 23.
  14. 29.
  15. 32.
  16. 35.
  17. 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 

  18. 44.
  19. 45.

    TAMANHO DE 
 FONTE Não existe especificação para o tamanho

    básico da fonte, o aplicativo escolhe o mais adequado
  20. 46.

    TAMANHO DE 
 FONTE RELATIVO Unidades de medida baseadas em

    elementos anscestrais ou outras propriedades
  21. 47.

    MEDIDA EM Tamanho de fonte relativo ao tamanho de fonte

    definido ou herdado no elemento pai FONTE
  22. 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
  23. 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
  24. 54.

    @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } CSS
  25. 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
  26. 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
  27. 57.

    @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } Adiciona ao fim do conteúdo o href Somente em impressão CSS
  28. 58.
  29. 59.

    TIPO DE MÍDIA TAMANHO 
 DE TELA DENSIDADE DE 


    PIXELS RESOLUÇÃO ORIENTAÇÃO PROFUNDIDADE DE 
 CORES
  30. 60.
  31. 61.
  32. 62.
  33. 63.
  34. 64.
  35. 65.
  36. 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 */ }
  37. 69.
  38. 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
  39. 72.

    Assuma menos, considere que seus usuários não estão em telas

    grandes ou tenham uma velocidade de conexão adequada
  40. 75.
  41. 78.

    SUPORTE A HTML5 SUPORTE A CSS3 SUPORTE A AUDIO 


    E VIDEO SUPORTE A 
 PLUGINS TIPOS DE INPUT
  42. 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
  43. 81.

    RWD + SERVER-SIDE COMPONENTS Componentes do projeto são concebidos no

    servidor com base no suporte computacional Cuidado, não abuse
  44. 86.
  45. 88.
  46. 89.
  47. 90.
  48. 91.
  49. 93.

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

    name="viewport"
 content="width=device-width, 
 user-scalable=no">
  50. 94.

    Na maioria das vezes que a pagina não tem pinch

    zoom é porque foi mal feita!
  51. 96.
  52. 97.
  53. 98.

    OFFLINE WEB APPLICATIONS Manter o conteúdo no cache do dispositivo

    pode ser uma boa alternativa Confira sobre Service Workers
  54. 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
  55. 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.
  56. 104.
  57. 105.
  58. 106.
  59. 109.

    JOHN ALLSOPP ETHAN 
 MARCOTTE BRAD FROST LUKE 
 WROBLEWSKI

    MARCELO 
 OLIVEIRA SÉRGIO LOPES DIEGO EIS
  60. 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)