Responsive ou Adaptive Design - Just Digital

1,688 views

Published on

Palestra ministrada pelo Cláudio Nascimento, mais conhecido como Soldado aqui na Just Digital. Esta palestra aborda o tema de portabilidade dos sites para multiplataforma, diferentes devices, questionando os conceitos de Responsive Design e Adaptative Design, para o desenvolvimento de interface html + css + javascript.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,688
On SlideShare
0
From Embeds
0
Number of Embeds
988
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive ou Adaptive Design - Just Digital

  1. 1. RESPONSIVE OU ADAPTIVE ? Qual a melhor pratica?
  2. 2. RESPONSIVE DESIGN O Responsive Design é proveniente das melhores práticas do desenvolvimento web. Permite que os layouts dos sites se ajustem automaticamente aos dispositivos, sejam eles Desktops, Smartphones ou Tablets.
  3. 3. ADAPTIVE DESIGN No Adaptive Design, temos algo meio que engessado. Os blocos terão medidas fixas e um tipo de folha de estilo para cada tipo de resolução. Tornando assim algo bem mais trabalhoso
  4. 4. MAS QUAL O MELHOR A SE USAR? OU
  5. 5. A WEB DEVE SER ACESSÍVEL POR QUALQUER PESSOA E EM QUALQUER LUGAR. Então o melhor para isso e menos trabalhoso seria Responsive Design. MAS PORQUÊ?
  6. 6. POR QUE NÃO ADAPTIVE? No adaptive toparemos com circunstâncias que serão muito mais trabalhosas e nem sempre será agradável pois cada vez que surgir uma nova resolução você terá que adaptar novamente seu estilo para assim tornar o seu site mais amigável possível para aquela resolução.
  7. 7. COMO FAZER DE FATO UM SITE RESPONSIVO Grid flexível Imagens e mídias flexíveis Media queries
  8. 8. GRID FLEXÍVEL Grid é um conjunto de linhas bases que fornecem uma estrutura para seu layout.
  9. 9. EXEMPLO DE GRID FLEXÍVEL
  10. 10. FORMULA PARA GRID FLEXÍVEL Eis a formula mágica: Objeto ÷ Contexto = RESULTADO
  11. 11. RESULTADO PARA UM GRID FLEXÍVEL Eis a fórmula mágica: Objeto ÷ Contexto = RESULTADO ↓ 300px ÷ 960px = 0.3125 Coloque o ponto duas casas para a direita e acrescente a % ficando assim 31.25%.
  12. 12. FONTES FLEXÍVEIS Os valores de tamnho das fontes devem ser substituídos de PX para EM O valor padrão das fontes consideradas pelo browser é 16px, exemplo: .content h1 { font-size: 30px; color: #333; margin: 2%; }
  13. 13. CRIANDO FONTES FLEXÍVEIS A formula é a mesma: Objeto ÷ Contexto = RESULTADO ↓ 30px ÷ 16px = 1.875 No caso das fontes não é necessário posicionar o ponto para a direita e o resultado é 1.875em.
  14. 14. IMAGENS FLEXÍVEIS As imagens também necessitam se adaptar conforme o tamanho da tela, pois podem sair fora do layout: img { max-width: 100%; } O mesmo serve para outros elementos do html: img, embed, object, iframe, video { max-width: 100%; }
  15. 15. MEDIA QUERIES As Media Types definem para qual tipo de media o CSS será direcionado. O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML é formatado em cada dispositivo é diferente. Logo, o código CSS será diferente para cada um destes dispositivos.
  16. 16. LISTA DE MEDIAS All - Para todos os dispositivos. Braille - Para dispositivos táteis. Embossed - Para dispositivos que “imprimem” em braille. Handheld - Para dispositivos de mão. Normalmente com telas pequenas e banda limitada. Print - Para impressão em papel. Projection - Para apresentações, como PowerPoint. Screen - Para monitores ou outros dispositivos com telas coloridas e com resolução adequada. Speech - Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores. Tty - Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado Tv - Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.
  17. 17. A SOLUÇÃO – MEDIA QUERIES As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado. <link rel="stylesheet" href="estilo.css" media="screen and (color)" /> Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color. Logo, este CSS não será aplicado em aparelhos Monocromáticos.
  18. 18. OPERADORES LÓGICOS Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores são: not, and e only. O not irá fazer uma sentença de negação. Por exemplo: <link rel="stylesheet" href="estilo.css" media="all and (not color)" /> O only irá esconder os estilos de browsers que não reconhecem media queries. Antes da sentença, você coloca o only: <link rel="stylesheet" href="estilo.css" media="only screen and (color)" />
  19. 19. OPERADORES LÓGICOS É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or. <link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />
  20. 20. MEDIA FEATURES Para então distinguir um dispositivo do outro, você utilizará as características de cada um. <link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" /> Há uma lista de características que você pode utilizar aqui para selecionar os dispositivos que você quiser: width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
  21. 21. MEDIA NO CSS /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) {} /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) {} /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {} /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {} /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
  22. 22. TAG META VIEWPORT Os smartphones tem telas pequenas podem dificultar a leitura se fizermos um sistema planejado para grandes resoluções. Por isso é interessante que possamos customizar o viewport para que ele se adeque a realidade desses dispositivos. É aí que entra a metatag viewport. Com essa metatag iremos customizar a resolução inicial que o browser deve renderizar do viewport do dispositivo. Dessa forma, podemos preparar websites com resoluções personalizadas para smartphones e outros aparelhos.
  23. 23. VALORES DA TAG META VIEWPORT A sintaxe é muito simples e deve ser colocada, como sempre, na tag head: <meta name="viewport" content=""> Os valores de content são os que seguem abaixo: Valor Descrição width Define uma largura para o viewport. Os valores podem ser em PX ou “device-width”, que determina automaticamente um valor igual a largura da tela do dispositivo. height Define uma altura para o viewport. Os valores podem ser em PX ou “device-height”, que determina automaticamente um valor igual a altura da tela do dispositivo. initialscale Define a escala inicial do viewport. userscalable Define a possibilidade de o usuário fazer “zoom” em um determinado lugar da tela. É ativado quando o usuário bate duas vezes com o dedo em um lugar da tela.
  24. 24. REMOTE DEBUGGING ON ANDROID O desenvolvimento de página web mobile é difícil de testar por envolver outros aparelhos. Mas os browsers mais novos já possuem recurso de debug remoto. Além do iOS, o Chrome Mobile também traz esse recurso. Embora ainda não haja suporte nativo para debug do browser padrão do Android, o suporte no Chrome é muito bom. Ele apenas para Android 4 e já foi anunciado como futuro substituto do browser padrão do Android.
  25. 25. PRÉ-REQUISITOS Instale o Chrome Mobile no seu Android 4. Baixe o Android SDK pra sua máquina. Instale o Google Chrome no seu Desktop. Tenha um cabo USB à mão pra conectar o dispositivo no computador.
  26. 26. CONFIGURAÇÃO DOS DEVICES Vá nas Configurações de sistema do Android e entre em Opções do Desenvolvedor. Lá, habilite a opção Depuração USB: Abra o Chrome Mobile no celular e vá em suas Configurações. Entre no menu Ferramentas para desenvolvedores lá no final. Lá, habilite a opção Ativar a depuração da web via USB
  27. 27. DEBUG DO DEVICE VIA DESKTOP Plugue o celular no computador usando o cabo USB. No terminal, entre na pasta que você instalou o Android SDK e em platform-tools. (opcional) Rode o ADB pra listar os dispositivos e ver se seu celular foi reconhecido: ./adb devices Se não for reconhecido, verifique se a depuração USB está habilitada e tente plugá-lo novamente. Ainda usando o ADB, rode o comando que habilita o debug remoto no Chrome: ./adb forward tcp:9222 localabstract:chrome_devtools_remote Por fim, basta ir no seu Chrome Desktop e abrir o endereço http://localhost:9222. Todas as abas abertas no celular serão listadas. Selecione uma para debugar:
  28. 28. WEB INSPECTOR O Web Inspector será aberto no seu Chrome no Desktop mas linkado com o Chrome no celular. Você pode debugar normalmente e fazer alterações e vê-las em tempo real no aparelho:
  29. 29. POR FIM Criar um site responsivo não é fácil. Trabalhar com flexibilidade e adaptação é bem mais complicado que um site fixo em pixels. As ferramentas de desenho ainda não estão preparadas e os designer gráficos costumam ter dificuldades para criar com responsividade em mente. O código fica mais complexo também. Há dificuldades para se trabalhar com imagens e vídeos responsivos. É bastante complicado adaptar um site Desktop já existente para ser responsivo. Apesar de tudo isso, designs resposivos são o futuro. Pelo simples motivo de que a Web é única e criar sites separados para cada categoria de dispositivos é impossível.
  30. 30. DÚVIDAS ?
  31. 31. OBRIGADO! Cláudio do Nascimento Silva (Soldado) Developer code@justdigital.com.br +55(11)5181-5170 www.justdigital.com.br blog.justdigital.com.br

×