Usando html5 e css3 para implementar interfaces responsivas

822 visualizações

Publicada em

Tech Day 3: Slide do workshop sobre responsive web design. Esses slides foram apresentados durante o curso de 4h

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
822
No SlideShare
0
A partir de incorporações
0
Número de incorporações
13
Ações
Compartilhamentos
0
Downloads
31
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Usando html5 e css3 para implementar interfaces responsivas

  1. 1. Usando HTML5 e CSS3 para implementar interfaces responsivas CESAR EDU TechDay 3.0 Felipe de Albuquerque fa@cesar.org.br
  2. 2. • Estrutura de layouts • Media Queries • Imagens responsivas • Textos responsivos • Meta tags • Usando a Meta Tag Viewport • Identificando os principais dispositivos e resoluções Overview
  3. 3. Estrutura de Layouts
  4. 4. Grids
  5. 5. Grids fluidos
  6. 6. Grids layouts Exemplo de como seria o uso dos grids layouts
  7. 7. Box Model
  8. 8. Exemplo Exemplo de Box Model
  9. 9. Box Fluido
  10. 10. Conversão de Medidas
  11. 11. Exemplo de Conversão de Medidas
  12. 12. Tamanho máximo e mínimo
  13. 13. Media Queries
  14. 14. Media Type Declarando no HTML No CSS
  15. 15. Valores do Media Type Valores do Media Type 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.
  16. 16. Sintaxe das Media Queries
  17. 17. Media Expressions
  18. 18. Media Values Feature Definition Accepts min/max? width width of display area/viewport yes height height of display area/viewport yes device-width width of device rendering surface yes device-height height of device rendering surface yes orientation portrait or landscape no aspect-ratio ratio of display’s width to height (16:9, 4:3) yes device-aspect-ratio ratio of device rendering surface width to height (16:9, 4:3) yes color number of bits per color component of the output device yes color-index number of entries in the color lookup table of the output device yes monochrome number of bits per pixel in a monochrome frame buffer (0 for non- monochrome devices) yes resolution resolution of the output device (pixel density; 72dpi, 300dpi) yes scan progressive or scan for tv devices no grid grid or bitmap (phone display with one fixed font; tty terminal) no
  19. 19. Imagens Responsivas
  20. 20. Imagens e mídias fluidas
  21. 21. Imagens de background Background image Shortcut CSS
  22. 22. Background tiles
  23. 23. Background size full image
  24. 24. Background cover full image
  25. 25. Performance de imagens responsivas
  26. 26. Soluções nativas para performance Atributo srcset Tag picture
  27. 27. Amenizar os problemas de performance • Usar Media Queries para servir imagens diferentes quando necessário • Comprimir as imagens o máximo possível em um editor gráfico • Usar o conceito de Font Icons para substituir todos os ícones • Fazer o máximo possível com CSS3
  28. 28. Textos Responsivos
  29. 29. Unidades de medida e conversõesUnidades de medida e conversões
  30. 30. Unidades de medida PorcentagemUnidades de medida Porcentagem
  31. 31. Unidades de medida EMUnidades de medida EM
  32. 32. Convertendo PX em EM Convertendo PX em EM Convertendo PX em EM
  33. 33. Unidades de medida e conversões Fazendo a conversão entre PX, EM, %, and PT Unidades de medida e conversões PX para EM Fórmula size in pixels / parent size in pixels Exemplo 12px / 16px = .75em PX para % Fórmula size in pixels / parent size in pixels * 100 Exemplo 12px / 16px * 100 = 75% PX para PT Fórmula size in pixels * (points per inch / pixels per inch) Exemplo 16px * (72pt / 96px) = 12pt EM para PX Fórmula size in EMs * parent size in pixels Exemplo 75em * 16px = 12px EM para % Fórmula size in EMs * 100 Exemplo 75em * 100 = 75%
  34. 34. Quebra de linhas automáticas
  35. 35. Reescrevendo textos com css
  36. 36. Meta Tags
  37. 37. Sintaxe das meta tags
  38. 38. Viewport
  39. 39. Usando a Meta Tag Viewport
  40. 40. Tamanho da Tela X Resolução Tamanho da tela é uma coisa, e a resolução de tela é outra
  41. 41. Sintaxe das meta tags
  42. 42. Valores do content 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. initial-scale Define a escala inicial do viewport. user-scalable 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.
  43. 43. Viewport size Apple family Device Name Platform Pixel Density Screen Size Portrait Viewport Width Landscape Viewport Width Apple iPad iOS 132dpi 9.7" 768 1024 Apple iPad 2 iOS 132dpi 9.7" 768 1024 Apple iPad 3 (and 4) iOS 264dpi 9.7" 768 1024 Apple iPad Mini iOS 163dpi 7.9" 768 1024 Apple iPhone 3G iOS 163dpi 3.5" 320 480 Apple iPhone 3GS iOS 163dpi 3.5" 320 480 Apple iPhone 4 iOS 326dpi 3.5" 320 480 Apple iPhone 4S iOS 326dpi 3.5" 320 480 Apple iPhone 5 iOS 326dpi 4" 320 568 Apple iPod Touch iOS 163dpi 3.5" 320 480
  44. 44. Viewport size Samsung family Device Name Platform Pixel Density Screen Size Portrait Viewport Width Landscape Viewport Width Samsung Galaxy Ace Android 165dpi 3.5" 320 480 Samsung Galaxy Ace 2 Android 246dpi 3.8" 320 533 Samsung Galaxy Grand Android 187dpi 5" 480 800 Samsung Galaxy Note Android 285dpi 5.3" 400 640 Samsung Galaxy Note 2 Android 267dpi 5.5" 360 640 Samsung Galaxy Note 10.1 Android 149dpi 10.1" 800 1280 Samsung Galaxy S2 Android 217dpi 4.3" 320 533 Samsung Galaxy S3 Android 306dpi 4.8" 360 640 Samsung Galaxy S3 Mini Android 233dpi 4" 360 640 Samsung Galaxy S4 Android 441dpi 5" 360 640 Samsung Galaxy S4 Mini Android 256dpi 4.3" 360 640 Samsung Galaxy Tab 2 7.0 Android 170dpi 7" 600 1024 Samsung Galaxy Tab 7 Android 170dpi 7" 600 1024 Samsung Galaxy Tab 8.9 Android 170dpi 8.9" 800 1280 Samsung Galaxy Tab 10.1 Android 149dpi 10.1" 800 1280
  45. 45. Viewport Sizes Motorola family Device Name Platform Pixel Density Screen Size Portrait Viewport Width Landscape Viewport Width Motorola Defy Android 265dpi 3.7" 320 569 Motorola Droid3 Android 275dpi 4" 360 599 Motorola Droid Razr Android 256dpi 4.3" 360 640 Motorola Milestone Android 265dpi 3.7" 320 569 Motorola Razr HD 4G Android 312dpi 4.7" 360 598 Motorola Razr M 4GAndroid 312dpi 4.7" 360 598 Motorola Xoom Android 149dpi 10.1" 800 1280 Motorola Xoom 2 Android 149dpi 10.1" 800 1280
  46. 46. Identificando os principais dispositivos e resoluções
  47. 47. Identificando a orientação do dispositivo iPads (landscape) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Regras CSS*/ }
  48. 48. Identificando Smartphones Phone < 5 @media only screen and (max-device-width: 480px) {}
  49. 49. Device aspect ratio iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {} iPhone 5: @media screen and (device-aspect-ratio: 40/71) {} iPad: @media screen and (device-aspect-ratio: 3/4) {}
  50. 50. iPad em portrait & landscape iPad em portrait & landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */} iPad em landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */} iPad em portrait @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
  51. 51. Dúvidas? ?
  52. 52. Obrigado! Felipe de Albuquerque fa@cesar.org.br

×