Usando HTML5 e CSS3 para implementar interfaces responsivas

CESAR EDU TechDay 3.0

Felipe de Albuquerquefa@cesar.org.br

• Estrutura de layouts• Media Queries • Imagens responsivas• Textos responsivos• Meta tags• Usando a Meta Tag Viewport• Identificando os principais dispositivos e resoluções

Overview

Estrutura de Layouts

Grids

Grids fluidos

Grids layouts

Exemplo de como seria o uso dos grids layouts

Box Model

Exemplo

Exemplo de Box Model

Box Fluido

Conversão de Medidas

Exemplo de Conversão de Medidas

Tamanho máximo e mínimo

Media Queries

Media Type

Declarando no HTML

No CSS

Valores do Media TypeValores 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.

speechPara sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.

ttyPara 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.

Sintaxe das Media Queries

Media Expressions

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

Imagens Responsivas

Imagens e mídias fluidas

Imagens de backgroundBackground image

Shortcut CSS

Background tiles

Background size full image

Background cover full image

Performance de imagens responsivas

Soluções nativas para performance

Atributo srcset

Tag picture

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

Textos Responsivos

Unidades de medida e conversõesUnidades de medida e conversões

Unidades de medida PorcentagemUnidades de medida Porcentagem

Unidades de medida EMUnidades de medida EM

Convertendo PX em EM

Convertendo PX em EM

Convertendo PX em EM

Unidades de medida e conversõesFazendo 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%

Quebra de linhas automáticas

Reescrevendo textos com css

Meta Tags

Sintaxe das meta tags

Viewport

Usando a Meta Tag Viewport

Tamanho da Tela X Resolução

Tamanho da tela é uma coisa,e a resolução de tela é outra

Sintaxe das meta tags

Valores do content

Valor Descrição

widthDefine 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.

heightDefine 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-scalableDefine 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.

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

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

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

Identificando os principais dispositivos e resoluções

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

Identificando Smartphones

Phone < 5@media only screen and (max-device-width: 480px) {}

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) {}

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

Dúvidas??

Obrigado!Felipe de Albuquerque

fa@cesar.org.br