Your SlideShare is downloading. ×
0
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Responsive ou Adaptive Design - Just Digital
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive ou Adaptive Design - Just Digital

1,300

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, …

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,300
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESPONSIVE OU ADAPTIVE ? Qual a melhor pratica?
  • 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. 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. MAS QUAL O MELHOR A SE USAR? OU
  • 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. 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. COMO FAZER DE FATO UM SITE RESPONSIVO Grid flexível Imagens e mídias flexíveis Media queries
  • 8. GRID FLEXÍVEL Grid é um conjunto de linhas bases que fornecem uma estrutura para seu layout.
  • 9. EXEMPLO DE GRID FLEXÍVEL
  • 10. FORMULA PARA GRID FLEXÍVEL Eis a formula mágica: Objeto ÷ Contexto = RESULTADO
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. DÚVIDAS ?
  • 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

×